tuanvo

/* ========================================================== RESUME PORTFOLIO — DARK PREMIUM Author prefix: la- Base: Desktop First Fonts: Roboto (Google Fonts) ========================================================== */ /* ---------------------------------------------------------- CSS VARIABLES ---------------------------------------------------------- */ :root { --la-bg: #1a1812; --la-bg-card: #262318; --la-bg-card-alt: #2c2920; --la-bg-card-light: #302c1f; --la-accent: #e3be3c; --la-accent-hover: #f0cc50; --la-accent-dark: #b89620; --la-text: #f0ecde; --la-text-sub: #b5ae96; --la-text-muted: #7a7360; --la-border: rgba(227, 190, 60, 0.2); --la-border-soft: rgba(255, 255, 255, 0.1); --la-radius: 12px; --la-radius-lg: 16px; --la-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --la-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35); --la-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --la-font: 'Roboto', sans-serif; --la-max-w: 1200px; } /* ---------------------------------------------------------- RESET & BASE ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--la-font); background-color: var(--la-bg); color: var(--la-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color var(--la-transition); } ul { list-style: none; } img { display: block; max-width: 100%; } /* ---------------------------------------------------------- UTILITIES ---------------------------------------------------------- */ .la-container { width: 100%; max-width: var(--la-max-w); margin-inline: auto; padding-inline: 48px; } .la-accent { color: var(--la-accent); } .la-section { padding: 88px 0; } .la-section-line { width: 36px; height: 3px; background: var(--la-accent); border-radius: 2px; margin-bottom: 14px; } .la-section-line--center { margin-inline: auto; } .la-section-header { margin-bottom: 52px; } .la-section-header--center { text-align: center; } .la-section-title { font-size: 34px; font-weight: 700; color: var(--la-text); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px; } .la-section-title--sm { font-size: 22px; margin-top: 36px; margin-bottom: 16px; } .la-section-sub { color: var(--la-text-sub); font-size: 15px; margin-top: 10px; } /* ---------------------------------------------------------- BUTTONS ---------------------------------------------------------- */ .la-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--la-font); font-weight: 600; font-size: 15px; padding: 13px 28px; border-radius: 8px; border: none; cursor: pointer; transition: background var(--la-transition), transform var(--la-transition), box-shadow var(--la-transition), color var(--la-transition); white-space: nowrap; } .la-btn--primary { background: var(--la-accent); color: #111007; } .la-btn--primary:hover { background: var(--la-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(227, 190, 60, 0.35); } .la-btn--ghost { background: transparent; color: var(--la-text); border: 1.5px solid var(--la-border-soft); } .la-btn--ghost:hover { border-color: var(--la-accent); color: var(--la-accent); transform: translateY(-2px); } .la-btn--outline-sm { background: transparent; color: var(--la-accent); border: 1.5px solid var(--la-accent); padding: 8px 20px; font-size: 13px; border-radius: 6px; } .la-btn--outline-sm:hover { background: var(--la-accent); color: #111007; transform: translateY(-1px); } .la-btn--dark { background: #111007; color: var(--la-accent); border: 1.5px solid var(--la-accent); } .la-btn--dark:hover { background: var(--la-accent); color: #111007; transform: translateY(-2px); } .la-btn--full { width: 100%; } /* ---------------------------------------------------------- NAVBAR ---------------------------------------------------------- */ .la-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(26, 24, 18, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--la-border-soft); height: 64px; } .la-navbar__inner { display: flex; align-items: center; gap: 40px; height: 64px; } .la-navbar__logo { font-size: 22px; font-weight: 900; color: var(--la-text); letter-spacing: -0.02em; flex-shrink: 0; } .la-navbar__logo span { color: var(--la-accent); } .la-navbar__nav { display: flex; align-items: center; gap: 32px; flex: 1; margin-left: 24px; } .la-navbar__nav a { font-size: 14px; font-weight: 500; color: var(--la-text-sub); position: relative; padding-bottom: 2px; } .la-navbar__nav a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--la-accent); transition: width var(--la-transition); } .la-navbar__nav a:hover { color: var(--la-text); } .la-navbar__nav a:hover::after { width: 100%; } /* ---------------------------------------------------------- HERO ---------------------------------------------------------- */ .la-hero { padding-top: 120px; padding-bottom: 88px; min-height: 100vh; display: flex; align-items: center; } .la-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .la-hero__badge { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--la-accent); border: 1px solid rgba(227, 190, 60, 0.3); border-radius: 4px; padding: 5px 12px; margin-bottom: 24px; } .la-hero__name { font-size: 56px; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px; color: var(--la-text); } .la-hero__desc { font-size: 16px; color: var(--la-text-sub); line-height: 1.7; max-width: 440px; margin-bottom: 36px; } .la-hero__ctas { display: flex; gap: 16px; } /* Hero Visual */ .la-hero__visual { display: flex; justify-content: flex-end; } .la-hero__photo-wrap { position: relative; width: 380px; flex-shrink: 0; } .la-hero__photo-bg { position: absolute; inset: -10px -10px auto auto; width: 70%; height: 70%; background: rgba(227, 190, 60, 0.08); border-radius: var(--la-radius-lg); z-index: 0; } .la-hero__photo { width: 100%; height: 460px; object-fit: cover; object-position: top center; border-radius: var(--la-radius-lg); position: relative; z-index: 1; filter: grayscale(15%); transition: filter var(--la-transition), transform var(--la-transition); } .la-hero__photo-wrap:hover .la-hero__photo { filter: grayscale(0%); transform: translateY(-4px); } .la-hero__stat-card { position: absolute; bottom: 24px; left: -32px; z-index: 2; display: flex; align-items: center; gap: 12px; background: var(--la-bg-card); border: 1px solid var(--la-border); border-radius: var(--la-radius); padding: 14px 20px; backdrop-filter: blur(8px); min-width: 160px; } .la-hero__stat-icon { font-size: 22px; color: var(--la-accent); } .la-hero__stat-card strong { display: block; font-size: 16px; font-weight: 700; color: var(--la-text); line-height: 1.2; } .la-hero__stat-card span { font-size: 11px; color: var(--la-text-sub); } /* ---------------------------------------------------------- PROFESSIONAL SUMMARY ---------------------------------------------------------- */ .la-summary { background: var(--la-bg-card); border-top: 1px solid var(--la-border-soft); border-bottom: 1px solid var(--la-border-soft); } .la-summary__inner { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; } .la-summary__label .la-section-title { font-size: 26px; } .la-summary__body p { font-size: 16px; color: var(--la-text-sub); line-height: 1.8; } /* ---------------------------------------------------------- KEY ACHIEVEMENTS ---------------------------------------------------------- */ .la-achievements { background: var(--la-bg); } .la-achievements__card { background: var(--la-bg-card); border-radius: 48px; padding: 64px 48px; border: 1px solid var(--la-border-soft); } .la-achievements__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .la-achievement-card { background: var(--la-bg); /* Darker than outer card to look inset */ border: 1px solid var(--la-border-soft); border-radius: 24px; padding: 40px 32px; text-align: center; box-shadow: inset 0 2px 8px rgba(0,0,0,0.4); transition: transform var(--la-transition), border-color var(--la-transition), box-shadow var(--la-transition); } .la-achievement-card:hover { transform: translateY(-4px); border-color: var(--la-accent); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } .la-achievement-card__icon { font-size: 40px; margin-bottom: 20px; color: var(--la-accent); filter: drop-shadow(0 0 8px rgba(227, 190, 60, 0.2)); } .la-achievement-card__number { font-size: 32px; font-weight: 800; color: var(--la-text); line-height: 1.1; margin-bottom: 12px; letter-spacing: -0.02em; } .la-achievement-card__number span { font-size: 24px; } .la-achievement-card__desc { font-size: 13px; color: var(--la-text-sub); line-height: 1.5; font-weight: 500; } /* ---------------------------------------------------------- WORK EXPERIENCE ---------------------------------------------------------- */ .la-experience { background: var(--la-bg-card); } .la-job-card { border: 1px solid var(--la-border-soft); border-radius: var(--la-radius-lg); background: var(--la-bg-card-alt); margin-bottom: 20px; transition: border-color var(--la-transition), box-shadow var(--la-transition), transform var(--la-transition); overflow: hidden; } .la-job-card:hover { border-color: rgba(227, 190, 60, 0.25); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transform: translateY(-2px); } .la-job-card--featured { border-color: rgba(227, 190, 60, 0.2); background: var(--la-bg-card-light); } .la-job-card--featured::before { content: ''; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, var(--la-accent), transparent); } .la-job-card__inner { display: grid; grid-template-columns: 280px 1fr; gap: 0; } .la-job-card__left { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; border-right: 1px solid var(--la-border-soft); position: relative; } .la-job-dot { width: 8px; height: 8px; background: var(--la-accent); border-radius: 50%; margin-bottom: 4px; flex-shrink: 0; } .la-job-title { font-size: 16px; font-weight: 700; color: var(--la-text); line-height: 1.3; } .la-job-company { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--la-accent); margin-top: 2px; } .la-job-badge { display: inline-block; margin-top: auto; padding: 4px 10px; background: rgba(227, 190, 60, 0.1); color: var(--la-accent); font-size: 11px; font-weight: 600; border-radius: 4px; letter-spacing: 0.05em; width: fit-content; } .la-job-card__right { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; } .la-job-section { display: flex; flex-direction: column; gap: 10px; } .la-job-role-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--la-text-muted); } .la-job-list { display: flex; flex-direction: column; gap: 8px; } .la-job-list li { font-size: 14px; color: var(--la-text-sub); line-height: 1.65; padding-left: 14px; position: relative; } .la-job-list li::before { content: '—'; position: absolute; left: 0; color: var(--la-accent); font-weight: 700; } .la-job-desc { font-size: 14px; color: var(--la-text-sub); line-height: 1.65; } /* ---------------------------------------------------------- EXPERTISE (left) + EDUCATION + LANGUAGES (right) ---------------------------------------------------------- */ .la-expertise { background: var(--la-bg); } .la-expertise__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } /* Skills */ .la-skills { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; } .la-skill__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .la-skill__name { font-size: 14px; font-weight: 500; color: var(--la-text); } .la-skill__pct { font-size: 13px; font-weight: 600; color: var(--la-accent); } .la-skill__bar { height: 4px; background: rgba(255, 255, 255, 0.07); border-radius: 99px; overflow: hidden; } .la-skill__fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--la-accent-dark), var(--la-accent)); border-radius: 99px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); } /* Education */ .la-edu-card { display: flex; align-items: flex-start; gap: 16px; background: var(--la-bg-card); border: 1px solid var(--la-border-soft); border-radius: var(--la-radius); padding: 22px 20px; margin-top: 28px; margin-bottom: 32px; transition: border-color var(--la-transition); } .la-edu-card:hover { border-color: rgba(227, 190, 60, 0.25); } .la-edu-card__icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; } .la-edu-card__degree { font-size: 16px; font-weight: 700; color: var(--la-text); margin-bottom: 4px; } .la-edu-card__school { font-size: 13px; color: var(--la-text-sub); margin-bottom: 6px; } .la-edu-card__year { font-size: 12px; color: var(--la-accent); font-weight: 600; } /* Languages */ .la-lang-list { display: flex; flex-direction: column; gap: 12px; background: var(--la-bg-card); border: 1px solid var(--la-border-soft); border-radius: var(--la-radius); padding: 20px; } .la-lang-item { display: flex; align-items: center; justify-content: space-between; } .la-lang-item__left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--la-text); } .la-lang-dot { width: 6px; height: 6px; background: var(--la-accent); border-radius: 50%; flex-shrink: 0; } .la-lang-level { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.04em; } .la-lang-level--native { background: rgba(227, 190, 60, 0.15); color: var(--la-accent); } .la-lang-level--b2 { background: rgba(255, 255, 255, 0.07); color: var(--la-text-sub); } .la-lang-level--hsk { background: rgba(255, 255, 255, 0.07); color: var(--la-text-sub); } /* ---------------------------------------------------------- REFERENCES ---------------------------------------------------------- */ .la-references { background: var(--la-bg-card); } .la-ref-wrapper { background: var(--la-bg-card-alt); border: 1px solid var(--la-border-soft); border-radius: var(--la-radius-lg); padding: 36px 36px 32px; } .la-ref-company { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--la-text-sub); margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--la-border-soft); } .la-ref-company__icon { font-size: 20px; } .la-ref-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .la-ref-card { display: flex; align-items: center; gap: 16px; background: var(--la-bg-card); border: 1px solid var(--la-border-soft); border-radius: var(--la-radius); padding: 22px 20px; transition: border-color var(--la-transition), transform var(--la-transition); } .la-ref-card:hover { border-color: rgba(227, 190, 60, 0.25); transform: translateY(-2px); } .la-ref-card__avatar { font-size: 32px; width: 52px; height: 52px; background: rgba(227, 190, 60, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .la-ref-card__name { font-size: 15px; font-weight: 700; color: var(--la-text); margin-bottom: 4px; } .la-ref-card__role { font-size: 12px; color: var(--la-text-sub); } /* ---------------------------------------------------------- CONTACT CTA ---------------------------------------------------------- */ .la-contact-cta { background: var(--la-accent); padding: 88px 0; } .la-contact-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 80px; align-items: center; } .la-contact-cta__headline { font-size: 56px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: #111007; margin-bottom: 24px; } .la-contact-cta__headline span { color: #111007; text-decoration: underline; text-decoration-thickness: 3px; } .la-contact-cta__desc { font-size: 16px; color: rgba(17, 16, 7, 0.7); line-height: 1.7; max-width: 380px; margin-bottom: 32px; } .la-contact-cta__info { display: flex; flex-direction: column; gap: 12px; } .la-contact-cta__info li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: #111007; } .la-contact-cta__info a { color: inherit; } .la-contact-cta__info a:hover { opacity: 0.75; } .la-contact-icon { font-size: 18px; } /* Contact Card */ .la-contact-card { background: #1a1812; border-radius: var(--la-radius-lg); padding: 32px 28px; min-width: 260px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); } .la-contact-card__links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .la-contact-card__link { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--la-text-sub); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--la-border-soft); border-radius: 8px; padding: 10px 14px; transition: all var(--la-transition); } .la-contact-card__link:hover { background: rgba(227, 190, 60, 0.1); border-color: rgba(227, 190, 60, 0.3); color: var(--la-accent); transform: translateY(-2px); } .la-contact-card__link-icon { font-size: 12px; font-weight: 900; width: 26px; height: 26px; background: rgba(227, 190, 60, 0.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--la-accent); flex-shrink: 0; } /* ---------------------------------------------------------- FOOTER ---------------------------------------------------------- */ .la-footer { background: #12110d; border-top: 1px solid var(--la-border-soft); padding: 24px 0; } .la-footer__inner { display: flex; align-items: center; justify-content: space-between; } .la-footer__copy { font-size: 13px; color: var(--la-text-muted); } .la-footer__right { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--la-text-muted); } /* ---------------------------------------------------------- SCROLL REVEAL — initial hidden state ---------------------------------------------------------- */ .la-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1), transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .la-reveal.is-visible { opacity: 1; transform: translateY(0); }

Chưa phân loại

Chào tất cả mọi người!

tuanvo / 16 Tháng 3, 2026

Cảm ơn vì đã sử dụng WordPress. Đây là bài viết đầu tiên của bạn. Sửa hoặc xóa nó, và […]