summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xindex.html1996
1 files changed, 889 insertions, 1107 deletions
diff --git a/index.html b/index.html
index 80d8007..df3b6e4 100755
--- a/index.html
+++ b/index.html
@@ -1,80 +1,58 @@
<!DOCTYPE html>
-<html lang="en" data-design="market">
+<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Thuy (Tyler) Hoang - Finance & Analytics</title>
- <meta name="description" content="Finance professional, CFA Level I candidate, and MS Financial Analytics candidate building investor-focused tools and applying quantitative analysis across valuation, research, and markets." />
- <meta property="og:title" content="Thuy (Tyler) Hoang - Finance & Analytics" />
+ <title>Thuy (Tyler) Hoang - Finance &amp; Analytics</title>
+ <meta name="description" content="Finance professional, CFA Level I candidate, and MS Financial Analytics candidate building a strong edge in valuation, markets, and investor-focused analytics products." />
+ <meta property="og:title" content="Thuy (Tyler) Hoang - Finance &amp; Analytics" />
<meta property="og:description" content="Finance professional, CFA Level I candidate, and MS Financial Analytics candidate with strengths in valuation, research, markets, and investor-focused product building." />
<meta property="og:url" content="https://tylerhoang.xyz" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
- <meta name="twitter:title" content="Thuy (Tyler) Hoang - Finance & Analytics" />
+ <meta name="twitter:title" content="Thuy (Tyler) Hoang - Finance &amp; Analytics" />
<meta name="twitter:description" content="Finance professional with strengths in valuation, research, markets, and investor-focused product building. CFA Level I candidate and MS Financial Analytics candidate." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Lora:wght@400;500&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
- --bg: #f4efe7;
- --bg-alt: #ece3d4;
- --panel: rgba(255, 255, 255, 0.72);
- --panel-solid: #fffaf2;
- --line: rgba(28, 35, 52, 0.1);
- --line-strong: rgba(28, 35, 52, 0.18);
- --text: #192132;
- --muted: #5b6678;
- --heading: #10203d;
- --accent: #c48a28;
- --accent-soft: rgba(196, 138, 40, 0.14);
- --accent-strong: #efc36d;
- --hero-bg: linear-gradient(135deg, #0f203f 0%, #19315c 52%, #294c7d 100%);
- --hero-grid: rgba(255, 255, 255, 0.06);
- --hero-text: #f7f2ea;
- --hero-muted: rgba(247, 242, 234, 0.75);
- --shadow: 0 24px 80px rgba(16, 32, 61, 0.12);
- --radius-lg: 28px;
- --radius-md: 18px;
- --radius-sm: 12px;
- --display: "Space Grotesk", sans-serif;
- --body-font: "Manrope", sans-serif;
- --label-font: "Inter", sans-serif;
- --button-text: #10203d;
- --section-width: 1180px;
+ --bg: #0f0e0d;
+ --bg-alt: #151412;
+ --panel: #1c1a18;
+ --line: rgba(200, 191, 168, 0.10);
+ --line-strong: rgba(200, 191, 168, 0.22);
+ --text: #e2d9cc;
+ --muted: #7a7268;
+ --heading: #f0e8de;
+ --accent: #c8bfa8;
+ --accent-soft: rgba(200, 191, 168, 0.08);
+ --accent-strong: #ddd4be;
+ --display: "Playfair Display", Georgia, serif;
+ --body-font: "Lora", Georgia, serif;
+ --ui-font: "Jost", system-ui, sans-serif;
+ --section-width: 1160px;
+ --radius: 4px;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--body-font);
- background:
- radial-gradient(circle at top left, rgba(196, 138, 40, 0.12), transparent 28%),
- linear-gradient(180deg, #f8f3ec 0%, var(--bg) 45%, #efe4d3 100%);
+ background: var(--bg);
color: var(--text);
- font-size: 15px;
- line-height: 1.7;
+ font-size: 16px;
+ line-height: 1.75;
overflow-x: hidden;
}
- body::before {
- content: "";
- position: fixed;
- inset: 0;
- background-image:
- linear-gradient(rgba(16, 32, 61, 0.025) 1px, transparent 1px),
- linear-gradient(90deg, rgba(16, 32, 61, 0.025) 1px, transparent 1px);
- background-size: 52px 52px;
- pointer-events: none;
- mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 88%);
- z-index: -1;
- }
+ a { color: inherit; text-decoration: none; }
+ img { max-width: 100%; display: block; }
- a { color: inherit; }
- img { max-width: 100%; }
+ /* ── Navigation ─────────────────────────────────── */
nav {
position: fixed;
@@ -84,45 +62,43 @@
align-items: center;
justify-content: space-between;
gap: 1rem;
- padding: 1rem 2rem;
- background: rgba(244, 239, 231, 0.74);
- backdrop-filter: blur(16px);
- border-bottom: 1px solid rgba(16, 32, 61, 0.08);
+ padding: 1.1rem 2.5rem;
+ background: var(--bg);
+ border-bottom: 1px solid var(--line-strong);
}
.nav-logo {
- font-family: var(--label-font);
- font-size: 0.96rem;
- font-weight: 600;
- color: var(--heading);
- text-decoration: none;
- letter-spacing: 0.005em;
+ font-family: var(--display);
+ font-style: italic;
+ font-size: 1.05rem;
+ font-weight: 400;
+ color: var(--accent);
+ letter-spacing: 0.01em;
}
.nav-links {
display: flex;
align-items: center;
- gap: 1.25rem;
+ gap: 2rem;
list-style: none;
- flex-wrap: wrap;
- justify-content: center;
}
.nav-links a {
- color: var(--muted);
- text-decoration: none;
- font-family: var(--label-font);
- font-size: 0.72rem;
- font-weight: 500;
- letter-spacing: 0.16em;
+ font-family: var(--ui-font);
+ font-size: 0.68rem;
+ font-weight: 400;
+ letter-spacing: 0.18em;
text-transform: uppercase;
- transition: color 0.2s ease;
+ color: var(--muted);
+ transition: color 0.25s;
}
- .nav-links a:hover { color: var(--heading); }
+ .nav-links a:hover { color: var(--accent); }
+
+ /* ── Layout ──────────────────────────────────────── */
section {
- padding: 6.25rem 5vw;
+ padding: 7rem 5vw;
position: relative;
}
@@ -132,869 +108,888 @@
}
.section-label {
- font-family: var(--label-font);
- font-size: 0.68rem;
- letter-spacing: 0.2em;
+ font-family: var(--ui-font);
+ font-size: 0.65rem;
+ letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
- margin-bottom: 0.85rem;
+ margin-bottom: 1rem;
}
.section-title {
font-family: var(--display);
- font-size: clamp(2.35rem, 4.1vw, 3.9rem);
- font-weight: 600;
- letter-spacing: -0.03em;
- line-height: 0.98;
+ font-size: clamp(2.4rem, 4vw, 3.6rem);
+ font-weight: 400;
+ line-height: 1.08;
color: var(--heading);
- margin-bottom: 1rem;
- max-width: 12ch;
+ margin-bottom: 0.5rem;
}
- .rule {
- width: 72px;
- height: 3px;
- background: linear-gradient(90deg, var(--accent), transparent);
- margin-bottom: 2.4rem;
- border-radius: 999px;
+ .section-rule {
+ width: 40px;
+ height: 1px;
+ background: var(--accent);
+ margin: 1.5rem 0 2.8rem;
+ opacity: 0.6;
}
+ /* ── Hero ────────────────────────────────────────── */
+
#hero {
min-height: 100vh;
- padding-top: 7.5rem;
+ padding-top: 7rem;
display: flex;
align-items: center;
- background:
- radial-gradient(circle at 15% 18%, rgba(239, 195, 109, 0.18), transparent 25%),
- linear-gradient(135deg, rgba(16, 32, 61, 0.08), rgba(16, 32, 61, 0) 35%);
+ border-bottom: 1px solid var(--line);
}
.hero-shell {
max-width: var(--section-width);
margin: 0 auto;
display: grid;
- grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
- gap: 3rem;
- align-items: stretch;
+ grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
+ gap: 5rem;
+ align-items: center;
width: 100%;
}
- .hero-copy,
- .hero-visual {
- position: relative;
- z-index: 1;
- }
-
- .hero-copy {
- padding: 3rem;
- border-radius: calc(var(--radius-lg) + 6px);
- background: var(--hero-bg);
- color: var(--hero-text);
- box-shadow: var(--shadow);
- overflow: hidden;
- isolation: isolate;
- }
-
- .hero-copy::before {
- content: "";
- position: absolute;
- inset: 0;
- background:
- linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--hero-grid) calc(100% - 1px)),
- linear-gradient(transparent 0, transparent calc(100% - 1px), var(--hero-grid) calc(100% - 1px));
- background-size: 54px 54px;
- opacity: 0.6;
- z-index: -1;
- }
-
- .hero-copy::after {
- content: "";
- position: absolute;
- inset: auto -10% -35% 35%;
- height: 320px;
- background: radial-gradient(circle, rgba(239, 195, 109, 0.26), transparent 70%);
- z-index: -1;
+ .hero-left {
+ opacity: 0;
+ animation: fadeIn 0.8s 0.1s forwards;
}
.hero-eyebrow {
- font-family: var(--label-font);
- font-size: 0.72rem;
+ font-family: var(--ui-font);
+ font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
- color: var(--accent-strong);
- margin-bottom: 1rem;
- opacity: 0;
- animation: fadeUp 0.6s 0.1s forwards;
+ color: var(--accent);
+ margin-bottom: 1.5rem;
}
.hero-name {
font-family: var(--display);
- font-size: clamp(3.7rem, 7.1vw, 6.2rem);
- font-weight: 600;
- letter-spacing: -0.045em;
- line-height: 0.9;
- margin-bottom: 1.35rem;
- max-width: 6ch;
- opacity: 0;
- animation: fadeUp 0.6s 0.24s forwards;
+ font-size: clamp(4rem, 7.5vw, 6.8rem);
+ font-weight: 400;
+ line-height: 0.95;
+ letter-spacing: -0.01em;
+ color: var(--heading);
+ margin-bottom: 1.75rem;
}
.hero-name em {
- color: var(--accent-strong);
- font-style: normal;
+ font-style: italic;
+ color: var(--accent);
}
.hero-tagline {
- max-width: 42ch;
- color: var(--hero-muted);
- font-size: 1rem;
- margin-bottom: 1.8rem;
- opacity: 0;
- animation: fadeUp 0.6s 0.38s forwards;
+ font-family: var(--body-font);
+ font-size: 1.02rem;
+ line-height: 1.8;
+ color: var(--text);
+ max-width: 46ch;
+ margin-bottom: 2rem;
}
- .hero-badges {
+ .hero-credentials {
display: flex;
flex-wrap: wrap;
- gap: 0.7rem;
- margin-bottom: 2rem;
- opacity: 0;
- animation: fadeUp 0.6s 0.52s forwards;
+ align-items: center;
+ gap: 0;
+ margin-bottom: 2.5rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--line-strong);
}
- .badge {
- padding: 0.42rem 0.85rem;
- border-radius: 999px;
- border: 1px solid rgba(239, 195, 109, 0.34);
- background: rgba(255, 255, 255, 0.06);
- color: var(--hero-text);
- font-family: var(--label-font);
- font-size: 0.64rem;
+ .hero-cred {
+ font-family: var(--ui-font);
+ font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
+ color: var(--muted);
+ padding-right: 1.25rem;
+ margin-right: 1.25rem;
+ border-right: 1px solid var(--line-strong);
+ }
+
+ .hero-cred:last-child {
+ border-right: none;
+ padding-right: 0;
+ margin-right: 0;
}
.hero-ctas {
display: flex;
- gap: 0.9rem;
+ gap: 1rem;
flex-wrap: wrap;
- opacity: 0;
- animation: fadeUp 0.6s 0.66s forwards;
}
- .btn-primary,
- .btn-outline {
+ .btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
- min-height: 48px;
- padding: 0.85rem 1.4rem;
- border-radius: 999px;
- text-decoration: none;
- font-family: var(--label-font);
- font-size: 0.72rem;
+ padding: 0.8rem 1.75rem;
+ border-radius: var(--radius);
+ background: var(--accent);
+ color: var(--bg);
+ font-family: var(--ui-font);
+ font-size: 0.7rem;
font-weight: 600;
- letter-spacing: 0.11em;
+ letter-spacing: 0.14em;
text-transform: uppercase;
- transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
+ transition: background 0.25s, color 0.25s;
+ border: 1px solid var(--accent);
}
- .btn-primary {
- background: linear-gradient(135deg, var(--accent-strong), var(--accent));
- color: var(--button-text);
- box-shadow: 0 16px 34px rgba(196, 138, 40, 0.24);
- border: 1px solid transparent;
+ .btn-primary:hover {
+ background: var(--accent-strong);
+ border-color: var(--accent-strong);
}
.btn-outline {
- border: 1px solid rgba(247, 242, 234, 0.28);
- color: var(--hero-text);
- background: rgba(255, 255, 255, 0.04);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.8rem 1.75rem;
+ border-radius: var(--radius);
+ background: transparent;
+ color: var(--accent);
+ font-family: var(--ui-font);
+ font-size: 0.7rem;
+ font-weight: 500;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ border: 1px solid var(--line-strong);
+ transition: border-color 0.25s, color 0.25s;
}
- .btn-primary:hover,
- .btn-outline:hover,
- .project-card:hover,
- .stat-card:hover,
- .skill-group:hover,
- .prism-feature:hover {
- transform: translateY(-3px);
+ .btn-outline:hover {
+ border-color: var(--accent);
+ color: var(--accent-strong);
}
- .hero-visual {
- display: grid;
- gap: 1rem;
- align-content: start;
+ .hero-right {
opacity: 0;
- animation: fadeIn 0.8s 0.5s forwards;
- }
-
- .hero-photo-frame,
- .hero-note {
- border-radius: var(--radius-lg);
- overflow: hidden;
- box-shadow: var(--shadow);
+ animation: fadeIn 0.9s 0.35s forwards;
}
- .hero-photo-frame {
- min-height: 460px;
- background: linear-gradient(160deg, #d8c6a8, #f7f1e8);
- border: 1px solid rgba(16, 32, 61, 0.08);
- }
-
- .hero-photo-frame img {
+ .hero-photo {
width: 100%;
- height: 100%;
+ aspect-ratio: 3 / 4;
object-fit: cover;
+ object-position: top center;
+ border-radius: var(--radius);
+ border: 1px solid var(--line-strong);
display: block;
+ margin-bottom: 1px;
}
- .hero-note {
+ .hero-info {
display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 1rem;
- padding: 1.25rem;
- background: var(--panel);
- border: 1px solid rgba(16, 32, 61, 0.08);
- backdrop-filter: blur(16px);
+ grid-template-columns: repeat(3, 1fr);
+ border: 1px solid var(--line-strong);
+ border-radius: 0 0 var(--radius) var(--radius);
+ border-top: none;
+ overflow: hidden;
}
- .hero-note-item span {
- display: block;
+ .hero-info-item {
+ padding: 1rem 1.25rem;
+ border-right: 1px solid var(--line);
}
- .hero-note-label {
- font-family: var(--label-font);
- font-size: 0.62rem;
- letter-spacing: 0.16em;
+ .hero-info-item:last-child { border-right: none; }
+
+ .hero-info-label {
+ font-family: var(--ui-font);
+ font-size: 0.6rem;
+ letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
- margin-bottom: 0.35rem;
+ margin-bottom: 0.4rem;
}
- .hero-note-value {
+ .hero-info-value {
font-family: var(--display);
- font-size: 1.4rem;
- font-weight: 600;
- font-variation-settings: "opsz" 144;
- letter-spacing: -0.025em;
- line-height: 1;
+ font-size: 1.15rem;
+ font-weight: 400;
color: var(--heading);
+ line-height: 1.2;
}
- #about,
- #projects,
- #resume,
- #contact { background: transparent; }
+ /* ── Focus Band ──────────────────────────────────── */
- #skills { background: linear-gradient(180deg, transparent 0%, rgba(16, 32, 61, 0.03) 100%); }
-
- .about-grid,
- .contact-grid {
- display: grid;
- grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
- gap: 2rem;
- align-items: start;
+ .focus-band-section {
+ padding: 0;
}
.focus-band {
+ background: var(--bg-alt);
+ border-top: 1px solid var(--line);
+ border-bottom: 1px solid var(--line);
+ }
+
+ .focus-band-inner {
max-width: var(--section-width);
- margin: -1.5rem auto 0;
+ margin: 0 auto;
+ padding: 3rem 5vw;
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
- gap: 1rem;
- position: relative;
- z-index: 2;
- }
-
- .focus-intro,
- .focus-areas {
- background: var(--panel);
- border: 1px solid var(--line);
- border-radius: var(--radius-lg);
- padding: 1.4rem 1.5rem;
- backdrop-filter: blur(14px);
- box-shadow: 0 18px 50px rgba(16, 32, 61, 0.08);
+ gap: 4rem;
+ align-items: start;
}
- .focus-title {
- font-family: var(--label-font);
- font-size: 0.7rem;
- letter-spacing: 0.18em;
+ .focus-label {
+ font-family: var(--ui-font);
+ font-size: 0.63rem;
+ letter-spacing: 0.2em;
text-transform: uppercase;
- color: var(--accent-strong);
- margin-bottom: 0.7rem;
+ color: var(--accent);
+ margin-bottom: 0.75rem;
}
.focus-copy {
+ font-family: var(--body-font);
+ font-size: 0.95rem;
+ line-height: 1.75;
color: var(--text);
- font-size: 1rem;
- line-height: 1.6;
- max-width: 34ch;
}
- .focus-tags {
+ .focus-areas-list {
display: flex;
- flex-wrap: wrap;
- gap: 0.7rem;
- align-items: center;
+ flex-direction: column;
+ gap: 0;
}
- .focus-tag {
- padding: 0.55rem 0.85rem;
- border-radius: 999px;
- border: 1px solid var(--line);
- background: rgba(255, 255, 255, 0.44);
- font-family: var(--label-font);
- font-size: 0.68rem;
- letter-spacing: 0.14em;
+ .focus-area-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.7rem 0;
+ border-bottom: 1px solid var(--line);
+ font-family: var(--ui-font);
+ font-size: 0.72rem;
+ letter-spacing: 0.1em;
text-transform: uppercase;
- color: var(--heading);
+ color: var(--text);
}
- .about-text,
- .resume-inner,
- .contact-copy {
- background: var(--panel);
- border: 1px solid var(--line);
- border-radius: var(--radius-lg);
- padding: 2rem;
- backdrop-filter: blur(14px);
- box-shadow: 0 18px 50px rgba(16, 32, 61, 0.06);
- }
+ .focus-area-item:first-child { border-top: 1px solid var(--line); }
- .about-text p,
- .resume-desc,
- .contact-text,
- .project-desc,
- .prism-desc,
- .prism-feature-desc,
- .rh-item,
- .stat-label {
+ .focus-area-num {
+ font-family: var(--display);
+ font-style: italic;
+ font-size: 0.78rem;
color: var(--muted);
+ min-width: 1.5rem;
}
- .about-text p + p { margin-top: 1rem; }
+ /* ── About ───────────────────────────────────────── */
- .about-stats,
- .resume-highlights,
- .skills-grid,
- .projects-grid,
- .prism-features {
+ #about { background: transparent; }
+
+ .about-grid {
display: grid;
- gap: 1rem;
+ grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
+ gap: 5rem;
+ align-items: start;
}
- .about-stats,
- .resume-highlights,
- .prism-features {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- margin-bottom: 1.5rem;
+ .about-body p {
+ font-size: 1rem;
+ line-height: 1.85;
+ color: var(--text);
}
- .stat-card,
- .project-card,
- .skill-group,
- .prism-feature {
- background: var(--panel);
- border: 1px solid var(--line);
- border-radius: var(--radius-md);
- padding: 1.4rem;
- box-shadow: 0 18px 40px rgba(16, 32, 61, 0.05);
- transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
- backdrop-filter: blur(12px);
- }
+ .about-body p + p { margin-top: 1.25rem; }
- .project-card {
+ .about-stats {
display: grid;
- grid-template-rows: auto auto minmax(0, 1fr) auto auto;
- height: 100%;
+ grid-template-columns: 1fr 1fr;
+ gap: 0;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--radius);
+ overflow: hidden;
}
- .stat-card:hover,
- .project-card:hover,
- .skill-group:hover,
- .prism-feature:hover {
- box-shadow: 0 22px 54px rgba(16, 32, 61, 0.09);
- border-color: var(--line-strong);
+ .stat-item {
+ padding: 1.5rem 1.25rem;
+ border-right: 1px solid var(--line);
+ border-bottom: 1px solid var(--line);
}
+ .stat-item:nth-child(2n) { border-right: none; }
+ .stat-item:nth-child(3),
+ .stat-item:nth-child(4) { border-bottom: none; }
+
.stat-num {
font-family: var(--display);
- font-size: 2.8rem;
- font-weight: 700;
- font-variation-settings: "opsz" 144;
- letter-spacing: -0.04em;
- line-height: 0.9;
+ font-size: 2.4rem;
+ font-weight: 400;
+ line-height: 1;
color: var(--heading);
- margin-bottom: 0.45rem;
+ margin-bottom: 0.4rem;
}
- .stat-label,
- .project-tag,
- .skill-group-title,
- .prism-feature-title,
- .project-link,
- .project-date,
- .prism-stack-label,
- .form-label,
- .footer-copy {
- font-family: var(--label-font);
+ .stat-label {
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
+ color: var(--muted);
}
- .project-tag,
- .skill-group-title,
- .prism-feature-title,
- .project-link,
- .prism-stack-label,
- .form-label {
- font-size: 0.68rem;
+ /* ── Prism ───────────────────────────────────────── */
+
+ #prism {
+ background: var(--bg-alt);
+ border-top: 1px solid var(--line);
+ border-bottom: 1px solid var(--line);
}
- .projects-grid {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- align-items: start;
+ .prism-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 2rem;
+ flex-wrap: wrap;
+ margin-bottom: 3rem;
+ }
+
+ .prism-logo-wrap {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .prism-logo-wrap img {
+ height: 44px;
+ width: auto;
}
- .project-title,
.prism-logo-name {
font-family: var(--display);
- font-size: 1.68rem;
- font-weight: 600;
- letter-spacing: -0.025em;
- line-height: 1.08;
+ font-size: 1.5rem;
+ font-weight: 400;
color: var(--heading);
+ line-height: 1.15;
+ }
+
+ .prism-logo-sub {
+ font-family: var(--ui-font);
+ font-size: 0.63rem;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-top: 0.25rem;
+ }
+
+ .prism-ctas {
+ display: flex;
+ gap: 0.75rem;
+ }
+
+ .prism-body {
+ display: grid;
+ grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
+ gap: 3.5rem;
+ align-items: start;
+ margin-bottom: 3rem;
+ }
+
+ .prism-desc {
+ font-size: 0.98rem;
+ line-height: 1.85;
+ color: var(--text);
+ }
+
+ .prism-why {
+ border-left: 2px solid var(--accent);
+ padding-left: 1.5rem;
+ }
+
+ .prism-why-label {
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
margin-bottom: 0.75rem;
}
- .project-logo {
- display: block;
- max-width: 220px;
- height: auto;
- margin-bottom: 0.9rem;
+ .prism-why-copy {
+ font-size: 0.95rem;
+ line-height: 1.75;
+ color: var(--text);
}
- .project-gallery,
- .prism-gallery {
+ .prism-showcase {
display: grid;
- grid-template-columns: repeat(3, minmax(0, 1fr));
- gap: 0.8rem;
- margin-top: 1.1rem;
- margin-bottom: 1.5rem;
+ grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
+ gap: 1rem;
+ margin-bottom: 3rem;
}
- .project-gallery img,
- .prism-gallery img {
+ .prism-main-shot img,
+ .prism-side-shots img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
- border-radius: var(--radius-sm);
- border: 1px solid rgba(16, 32, 61, 0.08);
- background: #e8dcc8;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--radius);
cursor: zoom-in;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
- box-shadow: 0 14px 26px rgba(16, 32, 61, 0.08);
+ transition: border-color 0.25s;
}
- .project-gallery img:hover,
- .prism-gallery img:hover {
- transform: translateY(-2px);
- box-shadow: 0 18px 36px rgba(16, 32, 61, 0.12);
+ .prism-side-shots {
+ display: grid;
+ gap: 1rem;
}
- .project-footer {
- margin-top: 0;
- padding-top: 1rem;
- border-top: 1px solid var(--line);
+ .prism-main-shot img:hover,
+ .prism-side-shots img:hover { border-color: var(--accent); }
+
+ .prism-stack-row {
display: flex;
- justify-content: space-between;
+ flex-wrap: wrap;
align-items: center;
- gap: 1rem;
+ gap: 0.5rem;
+ padding-top: 1.25rem;
+ border-top: 1px solid var(--line);
+ margin-bottom: 3rem;
}
- .project-meta {
- margin-top: 1rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
- border-top: 1px solid var(--line);
- align-self: end;
+ .prism-stack-label {
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-right: 0.5rem;
}
- #prism {
- padding-top: 2rem;
+ .stack-tag {
+ font-family: var(--ui-font);
+ font-size: 0.68rem;
+ letter-spacing: 0.08em;
+ color: var(--text);
+ padding: 0.3rem 0.65rem;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--radius);
}
- .prism-band {
- max-width: var(--section-width);
- margin: 0 auto;
- padding: 3rem;
- border-radius: 34px;
- background:
- radial-gradient(circle at top right, rgba(239, 195, 109, 0.18), transparent 32%),
- linear-gradient(135deg, #122445 0%, #17315f 55%, #21436f 100%);
- color: var(--hero-text);
- position: relative;
+ .prism-features {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
overflow: hidden;
- box-shadow: 0 28px 90px rgba(16, 32, 61, 0.18);
}
- .prism-band::before {
- content: "";
- position: absolute;
- inset: 0;
- background:
- linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(255, 255, 255, 0.06) calc(100% - 1px)),
- linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(255, 255, 255, 0.06) calc(100% - 1px));
- background-size: 52px 52px;
- opacity: 0.45;
- pointer-events: none;
+ .prism-feature {
+ padding: 1.5rem 1.75rem;
+ border-right: 1px solid var(--line);
+ border-bottom: 1px solid var(--line);
+ transition: background 0.2s;
}
- .prism-band .section-title,
- .prism-band .project-title,
- .prism-band .prism-logo-name { color: var(--hero-text); }
- .prism-band .section-label,
- .prism-band .prism-logo-sub,
- .prism-band .prism-feature-title,
- .prism-band .prism-stack-label { color: var(--accent-strong); }
- .prism-band .rule { background: linear-gradient(90deg, var(--accent-strong), transparent); }
- .prism-band .prism-desc,
- .prism-band .prism-feature-desc,
- .prism-band .prism-stack-tag { color: rgba(247, 242, 234, 0.8); }
- .prism-band .prism-feature,
- .prism-band .prism-stack-tag {
- background: rgba(255, 255, 255, 0.06);
- border-color: rgba(255, 255, 255, 0.12);
+ .prism-feature:nth-child(2n) { border-right: none; }
+ .prism-feature:nth-child(5),
+ .prism-feature:nth-child(6) { border-bottom: none; }
+
+ .prism-feature:hover { background: var(--accent-soft); }
+
+ .prism-feature-title {
+ font-family: var(--ui-font);
+ font-size: 0.7rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 0.6rem;
}
- .prism-band .btn-outline {
- border-color: rgba(247, 242, 234, 0.26);
- color: var(--hero-text);
- background: rgba(255, 255, 255, 0.04);
+
+ .prism-feature-desc {
+ font-size: 0.92rem;
+ line-height: 1.7;
+ color: var(--muted);
}
- .prism-header {
+ /* ── Projects ────────────────────────────────────── */
+
+ #projects { background: transparent; }
+
+ .projects-list {
display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 1rem;
- flex-wrap: wrap;
- margin-bottom: 1.5rem;
- position: relative;
- z-index: 1;
+ flex-direction: column;
}
- .prism-summary {
+ .project-item {
display: grid;
- grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
- gap: 1rem;
- align-items: start;
- margin-bottom: 1.8rem;
+ grid-template-columns: 3rem minmax(0, 1fr) auto;
+ gap: 1.5rem 2rem;
+ align-items: baseline;
+ padding: 2rem 0;
+ border-top: 1px solid var(--line);
+ transition: background 0.2s;
+ cursor: default;
position: relative;
- z-index: 1;
}
- .prism-why {
- border: 1px solid rgba(255, 255, 255, 0.14);
- border-radius: var(--radius-md);
- background: rgba(255, 255, 255, 0.05);
- padding: 1.2rem 1.25rem;
- }
+ .project-item:last-child { border-bottom: 1px solid var(--line); }
- .prism-why-label,
- .project-meta-label {
- font-family: var(--label-font);
- font-size: 0.64rem;
- letter-spacing: 0.16em;
- text-transform: uppercase;
- color: var(--accent-strong);
- margin-bottom: 0.45rem;
+ .project-item::before {
+ content: "";
+ position: absolute;
+ left: -5vw;
+ right: -5vw;
+ top: 0;
+ bottom: 0;
+ background: var(--accent-soft);
+ opacity: 0;
+ transition: opacity 0.2s;
+ pointer-events: none;
}
- .prism-why-copy {
- color: rgba(247, 242, 234, 0.84);
- line-height: 1.65;
- font-size: 0.92rem;
+ .project-item:hover::before { opacity: 1; }
+
+ .project-num {
+ font-family: var(--display);
+ font-style: italic;
+ font-size: 0.85rem;
+ color: var(--muted);
+ line-height: 1;
}
- .prism-logo-wrap {
- display: flex;
- align-items: center;
- gap: 1rem;
+ .project-body {}
+
+ .project-category {
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 0.5rem;
}
- .prism-logo-wrap img {
- height: 52px;
- width: auto;
+ .project-title {
+ font-family: var(--display);
+ font-size: 1.45rem;
+ font-weight: 400;
+ color: var(--heading);
+ line-height: 1.2;
+ margin-bottom: 0.75rem;
}
- .prism-logo-sub {
- font-family: var(--label-font);
- font-size: 0.68rem;
- letter-spacing: 0.16em;
- text-transform: uppercase;
- margin-top: 0.35rem;
+ .project-desc {
+ font-size: 0.9rem;
+ line-height: 1.75;
+ color: var(--muted);
+ max-width: 68ch;
+ margin-bottom: 1rem;
}
- .prism-ctas,
- .prism-stack,
- .skill-tags,
- .contact-links {
+ .project-tags {
display: flex;
- gap: 0.7rem;
flex-wrap: wrap;
+ gap: 0.4rem;
}
- .prism-stack {
- align-items: center;
- row-gap: 0.8rem;
- margin-top: 0;
+ .project-tag {
+ font-family: var(--ui-font);
+ font-size: 0.63rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--muted);
+ padding: 0.25rem 0.6rem;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--radius);
}
- .prism-stack-tag,
- .skill-tag {
- padding: 0.35rem 0.7rem;
- border-radius: 999px;
- border: 1px solid var(--line);
- background: rgba(255, 255, 255, 0.46);
- font-size: 0.78rem;
+ .project-meta {
+ text-align: right;
+ flex-shrink: 0;
}
- .skill-tag { color: var(--muted); }
+ .project-date {
+ font-family: var(--ui-font);
+ font-size: 0.65rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--muted);
+ display: block;
+ margin-bottom: 0.6rem;
+ }
- .prism-showcase {
- display: grid;
- grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
- grid-template-areas:
- "main side"
- "stack stack";
- gap: 1rem;
- align-items: start;
- margin-bottom: 1.5rem;
- position: relative;
- z-index: 1;
+ .project-link {
+ font-family: var(--ui-font);
+ font-size: 0.65rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--accent);
+ border-bottom: 1px solid var(--line-strong);
+ transition: border-color 0.2s;
+ padding-bottom: 1px;
}
- .prism-main-shot {
- grid-area: main;
- min-width: 0;
+ .project-link:hover { border-color: var(--accent); }
+
+ /* ── Skills ──────────────────────────────────────── */
+
+ #skills {
+ background: var(--bg-alt);
+ border-top: 1px solid var(--line);
+ border-bottom: 1px solid var(--line);
}
- .prism-side {
- grid-area: side;
+ .skills-grid {
display: grid;
- gap: 1rem;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 0;
+ border: 1px solid var(--line);
+ border-radius: var(--radius);
+ overflow: hidden;
}
- .prism-side-shots {
- display: grid;
- gap: 1rem;
+ .skill-group {
+ padding: 0;
+ border-right: 1px solid var(--line);
}
- .prism-main-shot img,
- .prism-side-shots img {
- width: 100%;
- object-fit: cover;
- border-radius: var(--radius-md);
- border: 1px solid rgba(255, 255, 255, 0.14);
- background: #e8dcc8;
- cursor: zoom-in;
- box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
- transition: transform 0.2s ease, box-shadow 0.2s ease;
+ .skill-group:last-child { border-right: none; }
+
+ .skill-group-title {
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ padding: 1.25rem 1.5rem 1rem;
+ border-bottom: 1px solid var(--line);
}
- .prism-main-shot img {
- aspect-ratio: 16 / 10;
+ .skill-list {
+ list-style: none;
+ padding: 0.5rem 0;
}
- .prism-side-shots img {
- aspect-ratio: 16 / 10;
+ .skill-list li {
+ font-family: var(--body-font);
+ font-size: 0.88rem;
+ color: var(--text);
+ padding: 0.55rem 1.5rem;
+ border-bottom: 1px solid var(--line);
+ line-height: 1.4;
}
- .prism-main-shot img:hover,
- .prism-side-shots img:hover {
- transform: translateY(-2px);
- box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
+ .skill-list li:last-child { border-bottom: none; }
+
+ /* ── Resume ──────────────────────────────────────── */
+
+ #resume { background: transparent; }
+
+ .resume-inner {
+ max-width: 780px;
}
- .prism-stack-card {
- grid-area: stack;
- border: 1px solid rgba(255, 255, 255, 0.14);
- border-radius: var(--radius-md);
- background: rgba(255, 255, 255, 0.05);
- padding: 1rem 1rem 1.05rem;
+ .resume-desc {
+ font-size: 0.98rem;
+ line-height: 1.8;
+ color: var(--muted);
+ margin-bottom: 2.5rem;
}
- .project-meta-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 0.5rem;
+ .resume-list {
+ list-style: none;
+ margin-bottom: 3rem;
}
- .project-meta-tag {
- padding: 0.28rem 0.55rem;
- border-radius: 999px;
- border: 1px solid var(--line);
- background: rgba(255, 255, 255, 0.04);
- font-size: 0.72rem;
- color: var(--muted);
+ .resume-list li {
+ display: flex;
+ align-items: baseline;
+ gap: 1.25rem;
+ padding: 0.9rem 0;
+ border-bottom: 1px solid var(--line);
+ font-family: var(--body-font);
+ font-size: 0.97rem;
+ color: var(--text);
+ line-height: 1.6;
}
- .resume-inner {
- max-width: 900px;
+ .resume-list li:first-child { border-top: 1px solid var(--line); }
+
+ .resume-list li::before {
+ content: "—";
+ font-family: var(--display);
+ color: var(--accent);
+ flex-shrink: 0;
+ font-size: 0.85rem;
}
- .resume-downloads {
+ .resume-ornament {
display: flex;
- gap: 0.9rem;
- flex-wrap: wrap;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 2rem;
}
- .resume-downloads .btn-outline {
- border: 1px solid var(--line-strong);
- color: var(--heading);
- background: rgba(255, 255, 255, 0.44);
+ .resume-ornament-line {
+ flex: 1;
+ height: 1px;
+ background: var(--line-strong);
}
- .resume-downloads .btn-outline:hover {
- border-color: var(--accent);
+ .resume-ornament-dot {
+ font-family: var(--display);
color: var(--accent);
+ font-size: 1.2rem;
}
- .resume-highlights {
- margin: 2rem 0;
+ .resume-downloads {
+ display: flex;
+ gap: 1rem;
}
- .rh-item {
- display: flex;
- align-items: flex-start;
- gap: 0.75rem;
- background: rgba(255, 255, 255, 0.52);
- border: 1px solid var(--line);
- border-radius: var(--radius-sm);
- padding: 1rem 1rem 1rem 1.1rem;
+ /* ── Contact ─────────────────────────────────────── */
+
+ #contact {
+ background: var(--bg-alt);
+ border-top: 1px solid var(--line);
}
- .rh-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--accent);
- flex-shrink: 0;
- margin-top: 0.45rem;
- box-shadow: 0 0 0 6px var(--accent-soft);
+ .contact-grid {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
+ gap: 5rem;
+ align-items: start;
+ }
+
+ .contact-text {
+ font-size: 0.98rem;
+ line-height: 1.85;
+ color: var(--text);
+ margin-bottom: 2.5rem;
}
.contact-links {
+ display: flex;
flex-direction: column;
- gap: 0.9rem;
- margin-top: 1.5rem;
+ gap: 0;
}
.contact-link {
display: flex;
align-items: center;
- gap: 1rem;
- text-decoration: none;
- border: 1px solid var(--line);
- background: rgba(255, 255, 255, 0.48);
- padding: 1rem 1.1rem;
- border-radius: var(--radius-md);
- transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+ gap: 1.25rem;
+ padding: 1rem 0;
+ border-bottom: 1px solid var(--line);
+ font-family: var(--body-font);
+ font-size: 0.92rem;
+ color: var(--text);
+ transition: color 0.2s;
}
- .contact-link:hover {
- transform: translateY(-2px);
- border-color: var(--line-strong);
- background: rgba(255, 255, 255, 0.72);
- }
+ .contact-link:first-child { border-top: 1px solid var(--line); }
+ .contact-link:hover { color: var(--accent); }
.contact-link-icon {
- width: 42px;
- height: 42px;
- border-radius: 12px;
- border: 1px solid var(--line);
+ width: 36px;
+ height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
- color: var(--heading);
- background: rgba(255, 255, 255, 0.65);
+ color: var(--muted);
+ transition: color 0.2s;
}
+ .contact-link:hover .contact-link-icon { color: var(--accent); }
+
.contact-link-icon svg {
- width: 18px;
- height: 18px;
+ width: 16px;
+ height: 16px;
}
.contact-form {
- background: var(--panel-solid);
- border: 1px solid var(--line);
- border-radius: var(--radius-lg);
- padding: 2rem;
- box-shadow: 0 22px 56px rgba(16, 32, 61, 0.08);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
}
- .contact-form,
.form-group {
display: flex;
flex-direction: column;
- gap: 0.9rem;
+ gap: 0.5rem;
}
- .form-label { color: var(--muted); }
+ .form-label {
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--muted);
+ }
.form-input,
.form-textarea {
width: 100%;
- border: 1px solid rgba(16, 32, 61, 0.12);
- background: rgba(255, 255, 255, 0.72);
- border-radius: 14px;
- padding: 0.9rem 1rem;
- font: inherit;
+ background: transparent;
+ border: none;
+ border-bottom: 1px solid var(--line-strong);
+ border-radius: 0;
+ padding: 0.65rem 0;
+ font-family: var(--body-font);
+ font-size: 0.95rem;
color: var(--text);
outline: none;
- transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+ transition: border-color 0.2s;
}
.form-input:focus,
- .form-textarea:focus {
- border-color: rgba(196, 138, 40, 0.5);
- box-shadow: 0 0 0 4px rgba(196, 138, 40, 0.12);
- background: #fff;
- }
+ .form-textarea:focus { border-bottom-color: var(--accent); }
+
+ .form-input::placeholder,
+ .form-textarea::placeholder { color: var(--muted); opacity: 0.6; }
.form-textarea {
- min-height: 128px;
+ min-height: 120px;
resize: vertical;
+ line-height: 1.6;
}
+ .form-submit {
+ align-self: flex-start;
+ }
+
+ /* ── Footer ──────────────────────────────────────── */
+
footer {
- padding: 2.5rem 5vw 3rem;
+ padding: 2rem 2.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
- border-top: 1px solid rgba(16, 32, 61, 0.08);
- color: var(--muted);
- max-width: var(--section-width);
- margin: 0 auto;
+ border-top: 1px solid var(--line);
+ max-width: 100%;
}
.footer-name {
font-family: var(--display);
- color: var(--heading);
- font-size: 1.08rem;
- font-weight: 600;
- font-variation-settings: "opsz" 144;
- letter-spacing: -0.02em;
+ font-style: italic;
+ font-size: 0.92rem;
+ color: var(--accent);
}
.footer-copy {
- font-size: 0.68rem;
+ font-family: var(--ui-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ color: var(--muted);
}
+ /* ── Lightbox ────────────────────────────────────── */
+
.lightbox {
position: fixed;
inset: 0;
@@ -1002,11 +997,10 @@
align-items: center;
justify-content: center;
padding: 2rem;
- background: rgba(5, 10, 20, 0.88);
- backdrop-filter: blur(4px);
+ background: rgba(8, 7, 6, 0.92);
opacity: 0;
pointer-events: none;
- transition: opacity 0.2s ease;
+ transition: opacity 0.25s;
z-index: 9999;
}
@@ -1020,248 +1014,88 @@
max-height: 90vh;
width: auto;
height: auto;
- border-radius: 16px;
- box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
- border: 1px solid rgba(255, 255, 255, 0.08);
- background: #0f1623;
+ border-radius: var(--radius);
+ border: 1px solid var(--line-strong);
}
.lightbox-close {
position: absolute;
- top: 1rem;
- right: 1rem;
- width: 44px;
- height: 44px;
- border: 0;
- border-radius: 999px;
- background: rgba(255, 255, 255, 0.12);
- color: #fff;
- font-size: 1.6rem;
- line-height: 1;
+ top: 1.5rem;
+ right: 1.5rem;
+ width: 40px;
+ height: 40px;
+ border: 1px solid var(--line-strong);
+ border-radius: var(--radius);
+ background: var(--panel);
+ color: var(--text);
+ font-family: var(--ui-font);
+ font-size: 1rem;
cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: border-color 0.2s, color 0.2s;
}
+ .lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
+
+ /* ── Scroll Reveal ───────────────────────────────── */
+
.reveal {
opacity: 0;
- transform: translateY(24px);
- transition: opacity 0.65s ease, transform 0.65s ease;
+ transition: opacity 0.7s ease;
}
- .reveal.visible {
- opacity: 1;
- transform: translateY(0);
- }
-
- @keyframes fadeUp {
- from { opacity: 0; transform: translateY(18px); }
- to { opacity: 1; transform: translateY(0); }
- }
+ .reveal.visible { opacity: 1; }
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
- html[data-design="market"] {
- --bg: #09131d;
- --bg-alt: #0d1823;
- --panel: rgba(13, 24, 35, 0.8);
- --panel-solid: #0f1b27;
- --line: rgba(140, 177, 214, 0.14);
- --line-strong: rgba(140, 177, 214, 0.28);
- --text: #d8e6f2;
- --muted: #8aa3b9;
- --heading: #f3f7fb;
- --accent: #ff8a3d;
- --accent-soft: rgba(255, 138, 61, 0.16);
- --accent-strong: #ffc27a;
- --hero-bg: linear-gradient(135deg, #061018 0%, #0b1625 48%, #0f2234 100%);
- --hero-grid: rgba(116, 162, 206, 0.08);
- --hero-text: #edf6ff;
- --hero-muted: rgba(237, 246, 255, 0.72);
- --shadow: 0 30px 100px rgba(0, 0, 0, 0.35);
- --button-text: #041319;
- }
-
- html[data-design="market"] body {
- background:
- radial-gradient(circle at top right, rgba(255, 138, 61, 0.14), transparent 20%),
- radial-gradient(circle at 18% 10%, rgba(255, 194, 122, 0.1), transparent 24%),
- linear-gradient(180deg, #07111a 0%, #09131d 55%, #0b1722 100%);
- }
-
- html[data-design="market"] body::before {
- background-image:
- linear-gradient(rgba(116, 162, 206, 0.05) 1px, transparent 1px),
- linear-gradient(90deg, rgba(116, 162, 206, 0.05) 1px, transparent 1px);
- background-size: 44px 44px;
- opacity: 1;
- }
-
- html[data-design="market"] nav {
- background: rgba(7, 17, 26, 0.72);
- border-bottom-color: rgba(140, 177, 214, 0.1);
- }
-
- html[data-design="market"] .hero-shell {
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
- align-items: center;
- }
-
- html[data-design="market"] .hero-copy {
- border: 1px solid rgba(140, 177, 214, 0.12);
- padding: 2.6rem;
- border-radius: 24px;
- }
-
- html[data-design="market"] .hero-name {
- max-width: 8ch;
- font-family: var(--display);
- font-size: clamp(3.25rem, 6.3vw, 5.35rem);
- font-weight: 600;
- line-height: 0.92;
- letter-spacing: -0.04em;
- }
-
- html[data-design="market"] .hero-name em {
- display: inline-block;
- color: var(--accent-strong);
- transform: translateY(-0.04em);
- }
-
- html[data-design="market"] .badge,
- html[data-design="market"] .focus-tag,
- html[data-design="market"] .prism-stack-tag,
- html[data-design="market"] .skill-tag,
- html[data-design="market"] .project-meta-tag {
- border-radius: 10px;
- background: rgba(255, 138, 61, 0.08);
- border-color: rgba(255, 138, 61, 0.22);
- }
-
- html[data-design="market"] .focus-intro,
- html[data-design="market"] .focus-areas,
- html[data-design="market"] .hero-note,
- html[data-design="market"] .about-text,
- html[data-design="market"] .resume-inner,
- html[data-design="market"] .contact-copy,
- html[data-design="market"] .contact-form,
- html[data-design="market"] .stat-card,
- html[data-design="market"] .project-card,
- html[data-design="market"] .skill-group,
- html[data-design="market"] .prism-feature,
- html[data-design="market"] .rh-item,
- html[data-design="market"] .contact-link {
- background: linear-gradient(180deg, rgba(13, 24, 35, 0.88), rgba(9, 19, 29, 0.92));
- border-color: rgba(140, 177, 214, 0.14);
- box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
- }
-
- html[data-design="market"] .section-title,
- html[data-design="market"] .project-title,
- html[data-design="market"] .prism-logo-name {
- font-family: var(--display);
- font-weight: 600;
- letter-spacing: -0.03em;
- }
-
- html[data-design="market"] .hero-note-value,
- html[data-design="market"] .stat-num,
- html[data-design="market"] .footer-name {
- font-family: var(--label-font);
- letter-spacing: -0.03em;
- }
-
- html[data-design="market"] .section-title {
- max-width: 16ch;
- }
-
- html[data-design="market"] .prism-band {
- background:
- linear-gradient(180deg, rgba(6, 16, 24, 0.94), rgba(10, 24, 36, 0.96)),
- linear-gradient(135deg, rgba(255, 138, 61, 0.16), transparent 35%);
- border: 1px solid rgba(140, 177, 214, 0.12);
- border-radius: 28px;
- }
-
- html[data-design="market"] .prism-feature-title,
- html[data-design="market"] .section-label,
- html[data-design="market"] .project-tag,
- html[data-design="market"] .skill-group-title,
- html[data-design="market"] .project-link,
- html[data-design="market"] .form-label,
- html[data-design="market"] .prism-logo-sub,
- html[data-design="market"] .prism-stack-label {
- color: var(--accent-strong);
- }
-
- html[data-design="market"] .btn-primary {
- background: linear-gradient(135deg, #ffc27a, #ff8a3d);
- box-shadow: 0 14px 28px rgba(255, 138, 61, 0.24);
- }
-
- html[data-design="market"] .focus-copy,
- html[data-design="market"] .focus-tag {
- color: var(--heading);
- }
-
- html[data-design="market"] .prism-why,
- html[data-design="market"] .prism-stack-card {
- background: rgba(255, 255, 255, 0.05);
- border-color: rgba(255, 255, 255, 0.14);
- }
-
- html[data-design="market"] .btn-outline {
- border-color: rgba(140, 177, 214, 0.24);
- background: rgba(13, 24, 35, 0.45);
- }
-
- html[data-design="market"] .form-input,
- html[data-design="market"] .form-textarea {
- background: rgba(7, 17, 26, 0.82);
- border-color: rgba(140, 177, 214, 0.14);
- color: var(--text);
- }
-
- html[data-design="market"] .contact-link-icon {
- background: rgba(7, 17, 26, 0.82);
- border-color: rgba(140, 177, 214, 0.16);
- color: var(--accent-strong);
- }
-
- html[data-design="market"] footer {
- border-top-color: rgba(140, 177, 214, 0.08);
- }
+ /* ── Responsive ──────────────────────────────────── */
@media (max-width: 1040px) {
- .focus-band,
.hero-shell,
.about-grid,
- .contact-grid,
- .projects-grid {
+ .contact-grid {
+ grid-template-columns: 1fr;
+ gap: 3rem;
+ }
+
+ .hero-right { display: none; }
+
+ .focus-band-inner {
grid-template-columns: 1fr;
+ gap: 2.5rem;
}
- .prism-summary,
+ .prism-body,
.prism-showcase {
grid-template-columns: 1fr;
}
- .hero-visual {
- max-width: 560px;
+ .skills-grid {
+ grid-template-columns: repeat(2, 1fr);
}
- .prism-features,
- .about-stats,
- .resume-highlights {
- grid-template-columns: 1fr 1fr;
+ .skill-group:nth-child(2) { border-right: none; }
+ .skill-group:nth-child(3) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
+ .skill-group:nth-child(4) { border-right: none; border-top: 1px solid var(--line); }
+
+ .project-item {
+ grid-template-columns: 3rem 1fr;
+ }
+
+ .project-meta {
+ grid-column: 2;
+ text-align: left;
}
}
@media (max-width: 760px) {
nav {
- padding: 0.9rem 1rem;
- align-items: center;
+ padding: 0.9rem 1.25rem;
overflow-x: auto;
}
@@ -1269,115 +1103,54 @@
.nav-links {
width: 100%;
+ gap: 1.25rem;
flex-wrap: nowrap;
- gap: 0.8rem;
- justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
- padding-bottom: 0.15rem;
scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
- #hero {
- padding-top: 7.25rem;
- min-height: auto;
- }
-
- .hero-shell {
- grid-template-columns: 1fr;
- gap: 1.25rem;
- }
-
- html[data-design="market"] .hero-shell {
- grid-template-columns: 1fr;
- }
-
- .hero-copy {
- padding: 1.4rem;
- width: 100%;
- }
-
- .hero-name {
- font-size: clamp(2.8rem, 15vw, 4rem);
- max-width: none;
- margin-bottom: 1rem;
- }
+ section { padding: 4.5rem 5vw; }
- .hero-tagline {
- max-width: none;
- font-size: 0.96rem;
- margin-bottom: 1.35rem;
- }
+ #hero { padding-top: 6rem; min-height: auto; }
- .hero-badges,
- .hero-ctas {
- gap: 0.6rem;
- }
+ .hero-name { font-size: clamp(3rem, 14vw, 4.5rem); }
- .hero-ctas a {
- width: 100%;
- }
+ .prism-features { grid-template-columns: 1fr; }
+ .prism-feature:nth-child(5) { border-bottom: 1px solid var(--line); }
+ .prism-feature:nth-child(6) { border-bottom: none; }
+ .prism-feature:nth-child(2n) { border-right: none; }
- .hero-visual {
- display: none;
+ .skills-grid {
+ grid-template-columns: 1fr;
}
- .focus-band {
- margin-top: -0.5rem;
- }
+ .skill-group { border-right: none; border-top: 1px solid var(--line); }
+ .skill-group:first-child { border-top: none; }
- .hero-copy,
- .hero-photo-frame,
- .hero-note,
- .about-text,
- .resume-inner,
- .contact-copy,
- .contact-form,
- .prism-band {
- padding: 1.35rem;
- }
-
- .hero-note,
- .focus-band,
- .about-stats,
- .resume-highlights,
- .projects-grid,
- .prism-features {
+ .project-item {
grid-template-columns: 1fr;
+ gap: 0.5rem;
}
- .prism-summary,
- .prism-showcase,
- .about-grid,
- .contact-grid {
- grid-template-columns: 1fr;
- }
+ .project-num { display: none; }
- .prism-showcase {
- grid-template-areas:
- "main"
- "side"
- "stack";
- }
+ .project-meta { text-align: left; }
- .prism-side-shots {
- grid-template-columns: 1fr;
- }
+ .resume-downloads { flex-direction: column; }
+ .resume-downloads .btn-primary,
+ .resume-downloads .btn-outline { width: 100%; text-align: center; justify-content: center; }
- section {
- padding: 4rem 5vw;
- }
+ .hero-credentials { gap: 0.6rem; }
- footer {
- flex-direction: column;
- align-items: flex-start;
- }
+ footer { flex-direction: column; align-items: flex-start; padding: 1.75rem 1.25rem; }
}
</style>
</head>
<body>
+
<nav>
<a href="#hero" class="nav-logo">Thuy (Tyler) Hoang</a>
<ul class="nav-links">
@@ -1392,86 +1165,86 @@
<section id="hero">
<div class="hero-shell">
- <div class="hero-copy">
+ <div class="hero-left">
<p class="hero-eyebrow">Finance &amp; Analytics</p>
<h1 class="hero-name">Thuy<br><em>(Tyler)</em><br>Hoang</h1>
- <p class="hero-tagline">Finance professional, CFA Level I candidate, and MS Financial Analytics candidate building a strong edge in valuation, markets, and investor-focused analytics products.</p>
- <div class="hero-badges">
- <span class="badge">CFA(R) Level I Candidate</span>
- <span class="badge">FINRA SIE Certified</span>
- <span class="badge">JPMorgan Chase</span>
+ <p class="hero-tagline">Finance professional, CFA Level I candidate, and MS Financial Analytics candidate building a strong edge in valuation, markets, and investor-focused analytics.</p>
+ <div class="hero-credentials">
+ <span class="hero-cred">CFA® Level I Candidate</span>
+ <span class="hero-cred">FINRA SIE Certified</span>
+ <span class="hero-cred">JPMorgan Chase</span>
</div>
<div class="hero-ctas">
<a href="#resume" class="btn-primary">View Resume</a>
<a href="#contact" class="btn-outline">Get in Touch</a>
</div>
</div>
- <div class="hero-visual">
- <div class="hero-photo-frame">
- <img src="tyler.jpg" alt="Tyler Hoang" />
- </div>
- <div class="hero-note">
- <div class="hero-note-item">
- <span class="hero-note-label">Expected</span>
- <span class="hero-note-value">Aug 2026</span>
+ <div class="hero-right">
+ <img src="tyler.jpg" alt="Tyler Hoang" class="hero-photo" />
+ <div class="hero-info">
+ <div class="hero-info-item">
+ <span class="hero-info-label">Expected</span>
+ <span class="hero-info-value">Aug 2026</span>
</div>
- <div class="hero-note-item">
- <span class="hero-note-label">Focus</span>
- <span class="hero-note-value">Asset Mgmt</span>
+ <div class="hero-info-item">
+ <span class="hero-info-label">Focus</span>
+ <span class="hero-info-value">Asset Mgmt</span>
</div>
- <div class="hero-note-item">
- <span class="hero-note-label">Program</span>
- <span class="hero-note-value">MSFA</span>
+ <div class="hero-info-item">
+ <span class="hero-info-label">Program</span>
+ <span class="hero-info-value">MSFA</span>
</div>
</div>
</div>
</div>
</section>
- <section style="padding-top: 0; padding-bottom: 1.25rem;">
- <div class="focus-band reveal">
- <div class="focus-intro">
- <div class="focus-title">Currently Seeking</div>
- <p class="focus-copy">Targeting high-trust roles in asset management, investment research, and quantitative finance where rigorous analysis and strong judgment are valued.</p>
- </div>
- <div class="focus-areas">
- <div class="focus-title">Selected Focus Areas</div>
- <div class="focus-tags">
- <span class="focus-tag">Equity Research</span>
- <span class="focus-tag">Fixed Income</span>
- <span class="focus-tag">Valuation</span>
- <span class="focus-tag">Quantitative Analysis</span>
- <span class="focus-tag">Financial Modeling</span>
+ <div class="focus-band-section">
+ <div class="focus-band">
+ <div class="focus-band-inner reveal">
+ <div class="focus-left">
+ <p class="focus-label">Currently Seeking</p>
+ <p class="focus-copy">Targeting high-trust roles in asset management, investment research, and quantitative finance where rigorous analysis and strong judgment are valued.</p>
+ </div>
+ <div class="focus-right">
+ <p class="focus-label">Selected Focus Areas</p>
+ <div class="focus-areas-list">
+ <div class="focus-area-item"><span class="focus-area-num">i.</span> Equity Research</div>
+ <div class="focus-area-item"><span class="focus-area-num">ii.</span> Fixed Income</div>
+ <div class="focus-area-item"><span class="focus-area-num">iii.</span> Valuation</div>
+ <div class="focus-area-item"><span class="focus-area-num">iv.</span> Quantitative Analysis</div>
+ <div class="focus-area-item"><span class="focus-area-num">v.</span> Financial Modeling</div>
+ </div>
</div>
</div>
</div>
- </section>
+ </div>
<section id="about">
<div class="section-shell">
<p class="section-label reveal">Background</p>
<h2 class="section-title reveal">About Me</h2>
- <div class="rule reveal"></div>
+ <div class="section-rule reveal"></div>
<div class="about-grid">
- <div class="about-text reveal">
+ <div class="about-body reveal">
<p>I'm a finance professional pursuing my Master of Science in Financial Analytics at California State University, Long Beach, with an expected graduation of August 2026. I'm also a CFA Level I candidate with a strong interest in asset management, investment research, and market-driven decision-making.</p>
<p>My background combines client-facing banking and branch operations at JPMorgan Chase — including internal controls, cash management, and operational compliance — with quantitative financial modeling and academic work in fixed income, derivatives pricing, machine learning, and valuation.</p>
<p>I bring both analytical depth and execution mindset: I can work with financial statements, translate market information into actionable insight, and build tools that make analysis faster and sharper. That shows up in Prism, the investor-focused dashboard I built to streamline company research, valuation, and market context into one workflow. I also hold the FINRA Securities Industry Essentials (SIE) certification and bring fluency in both English and Vietnamese to client and professional relationships.</p>
</div>
<div class="about-stats reveal">
- <div class="stat-card">
+ <div class="stat-item">
<div class="stat-num">CFA</div>
<div class="stat-label">Level I Candidate</div>
</div>
- <div class="stat-card">
+ <div class="stat-item">
<div class="stat-num">3.75</div>
<div class="stat-label">CSULB GPA</div>
</div>
- <div class="stat-card">
+ <div class="stat-item">
<div class="stat-num">3.75</div>
<div class="stat-label">CSUF GPA</div>
</div>
- <div class="stat-card">
+ <div class="stat-item">
<div class="stat-num">4.0</div>
<div class="stat-label">OCC GPA</div>
</div>
@@ -1481,16 +1254,17 @@
</section>
<section id="prism">
- <div class="prism-band">
+ <div class="section-shell">
<p class="section-label reveal">Featured Project</p>
<h2 class="section-title reveal">Prism</h2>
- <div class="rule reveal"></div>
+ <div class="section-rule reveal"></div>
+
<div class="prism-header reveal">
<div class="prism-logo-wrap">
<img src="assets/prism/logo-current.png" alt="Prism logo" />
<div>
<div class="prism-logo-name">Prism</div>
- <div class="prism-logo-sub">Financial Analysis Dashboard - Spring 2026</div>
+ <div class="prism-logo-sub">Financial Analysis Dashboard &mdash; Spring 2026</div>
</div>
</div>
<div class="prism-ctas">
@@ -1498,37 +1272,37 @@
<a href="https://git.tylerhoang.xyz/prism.git" class="btn-outline" target="_blank">View Code</a>
</div>
</div>
- <div class="prism-summary reveal">
+
+ <div class="prism-body reveal">
<p class="prism-desc">Prism is an investor-focused financial analysis dashboard I built to compress the research workflow into one place. It brings together live market data, financial statements, self-computed valuation ratios, comparable-company analysis, options activity, insider trades, SEC filings, and news so a user can move from initial idea to real underwriting faster. I also engineered the valuation layer to handle edge cases cleanly — including non-meaningful P/E, negative free cash flow in DCF, and messy accounting-driven ratio distortions — so the output is more usable in real analysis, not just visually impressive.</p>
<div class="prism-why">
<div class="prism-why-label">Why It Matters</div>
<p class="prism-why-copy">Prism turns scattered analyst work into a single workflow: evaluate the business, check valuation, review options and insider activity, scan filings, and understand market context without bouncing across five different tools.</p>
</div>
</div>
+
<div class="prism-showcase reveal">
<div class="prism-main-shot">
- <img src="assets/prism/overview.png" alt="Prism overview dashboard screenshot" data-lightbox="prism" />
- </div>
- <div class="prism-side">
- <div class="prism-side-shots">
- <img src="assets/prism/valuation.png" alt="Prism valuation dashboard screenshot" data-lightbox="prism" />
- <img src="assets/prism/insiders.png" alt="Prism insiders dashboard screenshot" data-lightbox="prism" />
- </div>
+ <img src="assets/prism/overview.png" alt="Prism overview dashboard" data-lightbox="prism" />
</div>
- <div class="prism-stack-card">
- <div class="prism-stack reveal">
- <span class="prism-stack-label">Stack</span>
- <span class="prism-stack-tag">Python</span>
- <span class="prism-stack-tag">Streamlit</span>
- <span class="prism-stack-tag">yfinance</span>
- <span class="prism-stack-tag">pandas</span>
- <span class="prism-stack-tag">Plotly</span>
- <span class="prism-stack-tag">SEC EDGAR API</span>
- <span class="prism-stack-tag">Nginx</span>
- <span class="prism-stack-tag">systemd</span>
- </div>
+ <div class="prism-side-shots">
+ <img src="assets/prism/valuation.png" alt="Prism valuation dashboard" data-lightbox="prism" />
+ <img src="assets/prism/insiders.png" alt="Prism insiders dashboard" data-lightbox="prism" />
</div>
</div>
+
+ <div class="prism-stack-row reveal">
+ <span class="prism-stack-label">Stack</span>
+ <span class="stack-tag">Python</span>
+ <span class="stack-tag">Streamlit</span>
+ <span class="stack-tag">yfinance</span>
+ <span class="stack-tag">pandas</span>
+ <span class="stack-tag">Plotly</span>
+ <span class="stack-tag">SEC EDGAR API</span>
+ <span class="stack-tag">Nginx</span>
+ <span class="stack-tag">systemd</span>
+ </div>
+
<div class="prism-features reveal">
<div class="prism-feature">
<div class="prism-feature-title">Research Workflow</div>
@@ -1562,76 +1336,79 @@
<div class="section-shell">
<p class="section-label reveal">Academic Work</p>
<h2 class="section-title reveal">Other Projects</h2>
- <div class="rule reveal"></div>
- <div class="projects-grid">
- <div class="project-card reveal">
- <div class="project-tag">Fixed Income · Credit Analysis</div>
- <div class="project-title">Boeing Credit &amp; Financial Statement Analysis</div>
- <div class="project-desc">Analyzed Boeing's debt maturity schedule, leverage ratios, and interest coverage using Bloomberg, quantifying the credit risk premium embedded in bond yields relative to Treasuries. Synthesized findings into a forward-looking narrative on Boeing's capital structure and refinancing risk.</div>
- <div class="project-meta">
- <div class="project-meta-label">Key Skills Used</div>
- <div class="project-meta-tags">
- <span class="project-meta-tag">Bloomberg</span>
- <span class="project-meta-tag">Credit Analysis</span>
- <span class="project-meta-tag">Fixed Income</span>
+ <div class="section-rule reveal"></div>
+
+ <div class="projects-list">
+
+ <div class="project-item reveal">
+ <span class="project-num">01</span>
+ <div class="project-body">
+ <div class="project-category">Fixed Income &middot; Credit Analysis</div>
+ <div class="project-title">Boeing Credit &amp; Financial Statement Analysis</div>
+ <p class="project-desc">Analyzed Boeing's debt maturity schedule, leverage ratios, and interest coverage using Bloomberg, quantifying the credit risk premium embedded in bond yields relative to Treasuries. Synthesized findings into a forward-looking narrative on Boeing's capital structure and refinancing risk.</p>
+ <div class="project-tags">
+ <span class="project-tag">Bloomberg</span>
+ <span class="project-tag">Credit Analysis</span>
+ <span class="project-tag">Fixed Income</span>
</div>
</div>
- <div class="project-footer">
+ <div class="project-meta">
<span class="project-date">Fall 2025</span>
</div>
</div>
- <div class="project-card reveal">
- <div class="project-tag">Machine Learning · Time Series</div>
- <div class="project-title">WMT Stock Price Prediction with LSTM</div>
- <div class="project-desc">Built a Long Short-Term Memory (LSTM) neural network in Python to forecast Walmart (WMT) stock prices using historical market data. Evaluated model performance using RMSE and visualized predicted vs. actual prices to assess accuracy and trend-following behavior.</div>
- <div class="project-meta">
- <div class="project-meta-label">Key Skills Used</div>
- <div class="project-meta-tags">
- <span class="project-meta-tag">Python</span>
- <span class="project-meta-tag">LSTM</span>
- <span class="project-meta-tag">Time Series</span>
+ <div class="project-item reveal">
+ <span class="project-num">02</span>
+ <div class="project-body">
+ <div class="project-category">Machine Learning &middot; Time Series</div>
+ <div class="project-title">WMT Stock Price Prediction with LSTM</div>
+ <p class="project-desc">Built a Long Short-Term Memory (LSTM) neural network in Python to forecast Walmart (WMT) stock prices using historical market data. Evaluated model performance using RMSE and visualized predicted vs. actual prices to assess accuracy and trend-following behavior.</p>
+ <div class="project-tags">
+ <span class="project-tag">Python</span>
+ <span class="project-tag">LSTM</span>
+ <span class="project-tag">Time Series</span>
</div>
</div>
- <div class="project-footer">
+ <div class="project-meta">
<span class="project-date">Spring 2026</span>
<a href="https://git.tylerhoang.xyz/wmt-stock-prediction.git" class="project-link" target="_blank">View Code</a>
</div>
</div>
- <div class="project-card reveal">
- <div class="project-tag">Derivatives · Stochastic Calculus</div>
- <div class="project-title">Monte Carlo Simulation - Derivatives Pricing</div>
- <div class="project-desc">Modeled asset price dynamics using Geometric Brownian Motion (GBM) to simulate thousands of price paths and estimate option payoffs in Python. Applied stochastic calculus concepts to validate outcomes under risk-neutral pricing.</div>
- <div class="project-meta">
- <div class="project-meta-label">Key Skills Used</div>
- <div class="project-meta-tags">
- <span class="project-meta-tag">Monte Carlo</span>
- <span class="project-meta-tag">GBM</span>
- <span class="project-meta-tag">Options Pricing</span>
+ <div class="project-item reveal">
+ <span class="project-num">03</span>
+ <div class="project-body">
+ <div class="project-category">Derivatives &middot; Stochastic Calculus</div>
+ <div class="project-title">Monte Carlo Simulation &mdash; Derivatives Pricing</div>
+ <p class="project-desc">Modeled asset price dynamics using Geometric Brownian Motion (GBM) to simulate thousands of price paths and estimate option payoffs in Python. Applied stochastic calculus concepts to validate outcomes under risk-neutral pricing.</p>
+ <div class="project-tags">
+ <span class="project-tag">Monte Carlo</span>
+ <span class="project-tag">GBM</span>
+ <span class="project-tag">Options Pricing</span>
</div>
</div>
- <div class="project-footer">
+ <div class="project-meta">
<span class="project-date">Spring 2026</span>
</div>
</div>
- <div class="project-card reveal">
- <div class="project-tag">Valuation · Financial Modeling</div>
- <div class="project-title">Quantitative Company Analysis</div>
- <div class="project-desc">Developed advanced spreadsheet models for financial statement analysis, ratio benchmarking, and cash flow forecasting. Produced DCF valuation scenarios under base, optimistic, and downside cases.</div>
- <div class="project-meta">
- <div class="project-meta-label">Key Skills Used</div>
- <div class="project-meta-tags">
- <span class="project-meta-tag">DCF</span>
- <span class="project-meta-tag">Forecasting</span>
- <span class="project-meta-tag">Excel Modeling</span>
+ <div class="project-item reveal">
+ <span class="project-num">04</span>
+ <div class="project-body">
+ <div class="project-category">Valuation &middot; Financial Modeling</div>
+ <div class="project-title">Quantitative Company Analysis</div>
+ <p class="project-desc">Developed advanced spreadsheet models for financial statement analysis, ratio benchmarking, and cash flow forecasting. Produced DCF valuation scenarios under base, optimistic, and downside cases.</p>
+ <div class="project-tags">
+ <span class="project-tag">DCF</span>
+ <span class="project-tag">Forecasting</span>
+ <span class="project-tag">Excel Modeling</span>
</div>
</div>
- <div class="project-footer">
+ <div class="project-meta">
<span class="project-date">Fall 2025</span>
</div>
</div>
+
</div>
</div>
</section>
@@ -1640,55 +1417,55 @@
<div class="section-shell">
<p class="section-label reveal">Technical &amp; Domain</p>
<h2 class="section-title reveal">Skills</h2>
- <div class="rule reveal"></div>
- <div class="skills-grid">
- <div class="skill-group reveal">
+ <div class="section-rule reveal"></div>
+ <div class="skills-grid reveal">
+ <div class="skill-group">
<div class="skill-group-title">Programming &amp; Tools</div>
- <div class="skill-tags">
- <span class="skill-tag">Python</span>
- <span class="skill-tag">pandas</span>
- <span class="skill-tag">NumPy</span>
- <span class="skill-tag">scikit-learn</span>
- <span class="skill-tag">TensorFlow / Keras</span>
- <span class="skill-tag">statsmodels</span>
- <span class="skill-tag">Jupyter</span>
- <span class="skill-tag">Linux</span>
- <span class="skill-tag">Git</span>
- </div>
+ <ul class="skill-list">
+ <li>Python</li>
+ <li>pandas</li>
+ <li>NumPy</li>
+ <li>scikit-learn</li>
+ <li>TensorFlow / Keras</li>
+ <li>statsmodels</li>
+ <li>Jupyter</li>
+ <li>Linux</li>
+ <li>Git</li>
+ </ul>
</div>
- <div class="skill-group reveal">
+ <div class="skill-group">
<div class="skill-group-title">Finance &amp; Analysis</div>
- <div class="skill-tags">
- <span class="skill-tag">Advanced Excel</span>
- <span class="skill-tag">Bloomberg Terminal</span>
- <span class="skill-tag">DCF Valuation</span>
- <span class="skill-tag">Comparable Companies</span>
- <span class="skill-tag">Fixed Income</span>
- <span class="skill-tag">Derivatives</span>
- <span class="skill-tag">Financial Statement Analysis</span>
- <span class="skill-tag">Credit Analysis</span>
- </div>
+ <ul class="skill-list">
+ <li>Advanced Excel</li>
+ <li>Bloomberg Terminal</li>
+ <li>DCF Valuation</li>
+ <li>Comparable Companies</li>
+ <li>Fixed Income</li>
+ <li>Derivatives</li>
+ <li>Financial Statement Analysis</li>
+ <li>Credit Analysis</li>
+ </ul>
</div>
- <div class="skill-group reveal">
+ <div class="skill-group">
<div class="skill-group-title">Quantitative Methods</div>
- <div class="skill-tags">
- <span class="skill-tag">OLS Regression</span>
- <span class="skill-tag">Factor Models</span>
- <span class="skill-tag">LSTM / GRU</span>
- <span class="skill-tag">Monte Carlo Simulation</span>
- <span class="skill-tag">Stochastic Calculus</span>
- <span class="skill-tag">Time Series</span>
- <span class="skill-tag">CAPM / Beta Estimation</span>
- </div>
+ <ul class="skill-list">
+ <li>OLS Regression</li>
+ <li>Factor Models</li>
+ <li>LSTM / GRU</li>
+ <li>Monte Carlo Simulation</li>
+ <li>Stochastic Calculus</li>
+ <li>Time Series</li>
+ <li>CAPM / Beta Estimation</li>
+ </ul>
</div>
- <div class="skill-group reveal">
+ <div class="skill-group">
<div class="skill-group-title">Certifications &amp; Languages</div>
- <div class="skill-tags">
- <span class="skill-tag">CFA(R) Level I Candidate</span>
- <span class="skill-tag">FINRA SIE</span>
- <span class="skill-tag">English (Native)</span>
- <span class="skill-tag">Vietnamese (Fluent)</span>
- </div>
+ <ul class="skill-list">
+ <li>CFA® Level I Candidate</li>
+ <li>FINRA SIE</li>
+ <li>English (Native)</li>
+ <li>Vietnamese (Fluent)</li>
+ </ul>
</div>
</div>
</div>
@@ -1699,15 +1476,20 @@
<div class="resume-inner">
<p class="section-label reveal">Experience &amp; Credentials</p>
<h2 class="section-title reveal">Resume</h2>
- <div class="rule reveal"></div>
+ <div class="section-rule reveal"></div>
<p class="resume-desc reveal">Academic background, professional experience, and technical skills across finance, analytics, valuation, and investor-focused product work.</p>
- <div class="resume-highlights reveal">
- <div class="rh-item"><div class="rh-dot"></div><span>M.S. Financial Analytics - CSULB (Expected Aug 2026)</span></div>
- <div class="rh-item"><div class="rh-dot"></div><span>B.A. Business Administration / Finance - CSUF</span></div>
- <div class="rh-item"><div class="rh-dot"></div><span>Associate Banker, JPMorgan Chase</span></div>
- <div class="rh-item"><div class="rh-dot"></div><span>CFA(R) Level I Candidate - Aug 2026</span></div>
- <div class="rh-item"><div class="rh-dot"></div><span>FINRA SIE Certified</span></div>
- <div class="rh-item"><div class="rh-dot"></div><span>Python, Advanced Excel, Bloomberg</span></div>
+ <ul class="resume-list reveal">
+ <li>M.S. Financial Analytics &mdash; CSULB (Expected Aug 2026)</li>
+ <li>B.A. Business Administration / Finance &mdash; CSUF</li>
+ <li>Associate Banker, JPMorgan Chase</li>
+ <li>CFA® Level I Candidate &mdash; Aug 2026</li>
+ <li>FINRA SIE Certified</li>
+ <li>Python, Advanced Excel, Bloomberg Terminal</li>
+ </ul>
+ <div class="resume-ornament reveal">
+ <div class="resume-ornament-line"></div>
+ <span class="resume-ornament-dot">&middot;</span>
+ <div class="resume-ornament-line"></div>
</div>
<div class="resume-downloads reveal">
<a href="Tyler_Resume.pdf" class="btn-primary">Download PDF</a>
@@ -1721,10 +1503,10 @@
<div class="section-shell">
<p class="section-label reveal">Get in Touch</p>
<h2 class="section-title reveal">Contact</h2>
- <div class="rule reveal"></div>
+ <div class="section-rule reveal"></div>
<div class="contact-grid">
- <div class="contact-copy">
- <p class="contact-text reveal">I’m actively pursuing opportunities in asset management, investment research, and quantitative finance. If you’re looking for someone who combines market judgment, analytical rigor, and strong execution, let’s talk.</p>
+ <div>
+ <p class="contact-text reveal">I'm actively pursuing opportunities in asset management, investment research, and quantitative finance. If you're looking for someone who combines market judgment, analytical rigor, and strong execution, let's talk.</p>
<div class="contact-links reveal">
<a href="mailto:tyler@tylerhoang.xyz" class="contact-link">
<div class="contact-link-icon">
@@ -1765,8 +1547,8 @@
<label class="form-label">Message</label>
<textarea id="cf-message" class="form-textarea" placeholder="What's on your mind?"></textarea>
</div>
- <p id="cf-status" style="font-size:0.82rem; min-height:1.2em; color: var(--accent); margin-bottom:0.25rem;"></p>
- <a href="#" class="btn-primary" id="cf-btn" style="text-align:center;" onclick="handleFormSubmit(event)">Send Message</a>
+ <p id="cf-status" style="font-size:0.82rem; min-height:1.2em; color: var(--accent); font-family: var(--ui-font);"></p>
+ <a href="#" class="btn-primary form-submit" id="cf-btn" onclick="handleFormSubmit(event)">Send Message</a>
</div>
</div>
</div>
@@ -1774,11 +1556,11 @@
<footer>
<span class="footer-name">Thuy (Tyler) Hoang</span>
- <span class="footer-copy">© 2026 · tylerhoang.xyz</span>
+ <span class="footer-copy">&copy; 2026 &middot; tylerhoang.xyz</span>
</footer>
<div class="lightbox" id="lightbox" aria-hidden="true">
- <button class="lightbox-close" id="lightbox-close" aria-label="Close image viewer">x</button>
+ <button class="lightbox-close" id="lightbox-close" aria-label="Close image viewer">&#x2715;</button>
<img id="lightbox-image" src="" alt="Expanded project screenshot" />
</div>
@@ -1787,11 +1569,11 @@
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, i) => {
if (entry.isIntersecting) {
- setTimeout(() => entry.target.classList.add('visible'), i * 60);
+ setTimeout(() => entry.target.classList.add('visible'), i * 55);
observer.unobserve(entry.target);
}
});
- }, { threshold: 0.12 });
+ }, { threshold: 0.08 });
reveals.forEach((el) => observer.observe(el));
const lightbox = document.getElementById('lightbox');
@@ -1835,13 +1617,13 @@
const message = document.getElementById('cf-message').value.trim();
if (!name || !email || !message) {
- status.style.color = '#e57373';
+ status.style.color = '#c47a6a';
status.textContent = 'Please fill in all fields.';
return;
}
- btn.textContent = 'Sending...';
- btn.style.opacity = '0.7';
+ btn.textContent = 'Sending…';
+ btn.style.opacity = '0.6';
btn.style.pointerEvents = 'none';
status.textContent = '';
@@ -1854,17 +1636,17 @@
const data = await res.json();
if (res.ok) {
- status.style.color = '#81c784';
- status.textContent = "Message sent - I'll be in touch soon.";
+ status.style.color = 'var(--accent)';
+ status.textContent = "Message sent — I’ll be in touch soon.";
document.getElementById('cf-name').value = '';
document.getElementById('cf-email').value = '';
document.getElementById('cf-message').value = '';
} else {
- status.style.color = '#e57373';
+ status.style.color = '#c47a6a';
status.textContent = data.error || 'Something went wrong. Please try again.';
}
} catch (err) {
- status.style.color = '#e57373';
+ status.style.color = '#c47a6a';
status.textContent = 'Could not reach the server. Please try again later.';
} finally {
btn.textContent = 'Send Message';
generated by cgit v1.3-2-g0d8e (git 2.53.0) at 2026-06-05 01:31:12 +0000