summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rwxr-xr-xindex.html1877
1 files changed, 1877 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..80d8007
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1877 @@
+<!DOCTYPE html>
+<html lang="en" data-design="market">
+<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" />
+ <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: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" />
+ <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;
+ }
+
+ 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%);
+ color: var(--text);
+ font-size: 15px;
+ line-height: 1.7;
+ 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; }
+ img { max-width: 100%; }
+
+ nav {
+ position: fixed;
+ inset: 0 0 auto 0;
+ z-index: 100;
+ display: flex;
+ 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);
+ }
+
+ .nav-logo {
+ font-family: var(--label-font);
+ font-size: 0.96rem;
+ font-weight: 600;
+ color: var(--heading);
+ text-decoration: none;
+ letter-spacing: 0.005em;
+ }
+
+ .nav-links {
+ display: flex;
+ align-items: center;
+ gap: 1.25rem;
+ 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;
+ text-transform: uppercase;
+ transition: color 0.2s ease;
+ }
+
+ .nav-links a:hover { color: var(--heading); }
+
+ section {
+ padding: 6.25rem 5vw;
+ position: relative;
+ }
+
+ .section-shell {
+ max-width: var(--section-width);
+ margin: 0 auto;
+ }
+
+ .section-label {
+ font-family: var(--label-font);
+ font-size: 0.68rem;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 0.85rem;
+ }
+
+ .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;
+ color: var(--heading);
+ margin-bottom: 1rem;
+ max-width: 12ch;
+ }
+
+ .rule {
+ width: 72px;
+ height: 3px;
+ background: linear-gradient(90deg, var(--accent), transparent);
+ margin-bottom: 2.4rem;
+ border-radius: 999px;
+ }
+
+ #hero {
+ min-height: 100vh;
+ padding-top: 7.5rem;
+ 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%);
+ }
+
+ .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;
+ 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-eyebrow {
+ font-family: var(--label-font);
+ font-size: 0.72rem;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: var(--accent-strong);
+ margin-bottom: 1rem;
+ opacity: 0;
+ animation: fadeUp 0.6s 0.1s forwards;
+ }
+
+ .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;
+ }
+
+ .hero-name em {
+ color: var(--accent-strong);
+ font-style: normal;
+ }
+
+ .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;
+ }
+
+ .hero-badges {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.7rem;
+ margin-bottom: 2rem;
+ opacity: 0;
+ animation: fadeUp 0.6s 0.52s forwards;
+ }
+
+ .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;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ }
+
+ .hero-ctas {
+ display: flex;
+ gap: 0.9rem;
+ flex-wrap: wrap;
+ opacity: 0;
+ animation: fadeUp 0.6s 0.66s forwards;
+ }
+
+ .btn-primary,
+ .btn-outline {
+ 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;
+ font-weight: 600;
+ letter-spacing: 0.11em;
+ 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;
+ }
+
+ .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-outline {
+ border: 1px solid rgba(247, 242, 234, 0.28);
+ color: var(--hero-text);
+ background: rgba(255, 255, 255, 0.04);
+ }
+
+ .btn-primary:hover,
+ .btn-outline:hover,
+ .project-card:hover,
+ .stat-card:hover,
+ .skill-group:hover,
+ .prism-feature:hover {
+ transform: translateY(-3px);
+ }
+
+ .hero-visual {
+ display: grid;
+ gap: 1rem;
+ align-content: start;
+ 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);
+ }
+
+ .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 {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ }
+
+ .hero-note {
+ 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);
+ }
+
+ .hero-note-item span {
+ display: block;
+ }
+
+ .hero-note-label {
+ font-family: var(--label-font);
+ font-size: 0.62rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 0.35rem;
+ }
+
+ .hero-note-value {
+ font-family: var(--display);
+ font-size: 1.4rem;
+ font-weight: 600;
+ font-variation-settings: "opsz" 144;
+ letter-spacing: -0.025em;
+ line-height: 1;
+ color: var(--heading);
+ }
+
+ #about,
+ #projects,
+ #resume,
+ #contact { background: transparent; }
+
+ #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 {
+ max-width: var(--section-width);
+ margin: -1.5rem auto 0;
+ 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);
+ }
+
+ .focus-title {
+ font-family: var(--label-font);
+ font-size: 0.7rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ color: var(--accent-strong);
+ margin-bottom: 0.7rem;
+ }
+
+ .focus-copy {
+ color: var(--text);
+ font-size: 1rem;
+ line-height: 1.6;
+ max-width: 34ch;
+ }
+
+ .focus-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.7rem;
+ align-items: center;
+ }
+
+ .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;
+ text-transform: uppercase;
+ color: var(--heading);
+ }
+
+ .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);
+ }
+
+ .about-text p,
+ .resume-desc,
+ .contact-text,
+ .project-desc,
+ .prism-desc,
+ .prism-feature-desc,
+ .rh-item,
+ .stat-label {
+ color: var(--muted);
+ }
+
+ .about-text p + p { margin-top: 1rem; }
+
+ .about-stats,
+ .resume-highlights,
+ .skills-grid,
+ .projects-grid,
+ .prism-features {
+ display: grid;
+ gap: 1rem;
+ }
+
+ .about-stats,
+ .resume-highlights,
+ .prism-features {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ margin-bottom: 1.5rem;
+ }
+
+ .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);
+ }
+
+ .project-card {
+ display: grid;
+ grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+ height: 100%;
+ }
+
+ .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-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;
+ color: var(--heading);
+ margin-bottom: 0.45rem;
+ }
+
+ .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);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ }
+
+ .project-tag,
+ .skill-group-title,
+ .prism-feature-title,
+ .project-link,
+ .prism-stack-label,
+ .form-label {
+ font-size: 0.68rem;
+ }
+
+ .projects-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ align-items: start;
+ }
+
+ .project-title,
+ .prism-logo-name {
+ font-family: var(--display);
+ font-size: 1.68rem;
+ font-weight: 600;
+ letter-spacing: -0.025em;
+ line-height: 1.08;
+ color: var(--heading);
+ margin-bottom: 0.75rem;
+ }
+
+ .project-logo {
+ display: block;
+ max-width: 220px;
+ height: auto;
+ margin-bottom: 0.9rem;
+ }
+
+ .project-gallery,
+ .prism-gallery {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.8rem;
+ margin-top: 1.1rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .project-gallery img,
+ .prism-gallery 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;
+ cursor: zoom-in;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ box-shadow: 0 14px 26px rgba(16, 32, 61, 0.08);
+ }
+
+ .project-gallery img:hover,
+ .prism-gallery img:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 18px 36px rgba(16, 32, 61, 0.12);
+ }
+
+ .project-footer {
+ margin-top: 0;
+ padding-top: 1rem;
+ border-top: 1px solid var(--line);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .project-meta {
+ margin-top: 1rem;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ border-top: 1px solid var(--line);
+ align-self: end;
+ }
+
+ #prism {
+ padding-top: 2rem;
+ }
+
+ .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;
+ 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-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-band .btn-outline {
+ border-color: rgba(247, 242, 234, 0.26);
+ color: var(--hero-text);
+ background: rgba(255, 255, 255, 0.04);
+ }
+
+ .prism-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ flex-wrap: wrap;
+ margin-bottom: 1.5rem;
+ position: relative;
+ z-index: 1;
+ }
+
+ .prism-summary {
+ display: grid;
+ grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
+ gap: 1rem;
+ align-items: start;
+ margin-bottom: 1.8rem;
+ 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;
+ }
+
+ .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;
+ }
+
+ .prism-why-copy {
+ color: rgba(247, 242, 234, 0.84);
+ line-height: 1.65;
+ font-size: 0.92rem;
+ }
+
+ .prism-logo-wrap {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .prism-logo-wrap img {
+ height: 52px;
+ width: auto;
+ }
+
+ .prism-logo-sub {
+ font-family: var(--label-font);
+ font-size: 0.68rem;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ margin-top: 0.35rem;
+ }
+
+ .prism-ctas,
+ .prism-stack,
+ .skill-tags,
+ .contact-links {
+ display: flex;
+ gap: 0.7rem;
+ flex-wrap: wrap;
+ }
+
+ .prism-stack {
+ align-items: center;
+ row-gap: 0.8rem;
+ margin-top: 0;
+ }
+
+ .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;
+ }
+
+ .skill-tag { color: var(--muted); }
+
+ .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;
+ }
+
+ .prism-main-shot {
+ grid-area: main;
+ min-width: 0;
+ }
+
+ .prism-side {
+ grid-area: side;
+ display: grid;
+ gap: 1rem;
+ }
+
+ .prism-side-shots {
+ display: grid;
+ gap: 1rem;
+ }
+
+ .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;
+ }
+
+ .prism-main-shot img {
+ aspect-ratio: 16 / 10;
+ }
+
+ .prism-side-shots img {
+ aspect-ratio: 16 / 10;
+ }
+
+ .prism-main-shot img:hover,
+ .prism-side-shots img:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
+ }
+
+ .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;
+ }
+
+ .project-meta-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ }
+
+ .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-inner {
+ max-width: 900px;
+ }
+
+ .resume-downloads {
+ display: flex;
+ gap: 0.9rem;
+ flex-wrap: wrap;
+ }
+
+ .resume-downloads .btn-outline {
+ border: 1px solid var(--line-strong);
+ color: var(--heading);
+ background: rgba(255, 255, 255, 0.44);
+ }
+
+ .resume-downloads .btn-outline:hover {
+ border-color: var(--accent);
+ color: var(--accent);
+ }
+
+ .resume-highlights {
+ margin: 2rem 0;
+ }
+
+ .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;
+ }
+
+ .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-links {
+ flex-direction: column;
+ gap: 0.9rem;
+ margin-top: 1.5rem;
+ }
+
+ .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;
+ }
+
+ .contact-link:hover {
+ transform: translateY(-2px);
+ border-color: var(--line-strong);
+ background: rgba(255, 255, 255, 0.72);
+ }
+
+ .contact-link-icon {
+ width: 42px;
+ height: 42px;
+ border-radius: 12px;
+ border: 1px solid var(--line);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ color: var(--heading);
+ background: rgba(255, 255, 255, 0.65);
+ }
+
+ .contact-link-icon svg {
+ width: 18px;
+ height: 18px;
+ }
+
+ .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);
+ }
+
+ .contact-form,
+ .form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.9rem;
+ }
+
+ .form-label { 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;
+ color: var(--text);
+ outline: none;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+ }
+
+ .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 {
+ min-height: 128px;
+ resize: vertical;
+ }
+
+ footer {
+ padding: 2.5rem 5vw 3rem;
+ 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;
+ }
+
+ .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;
+ }
+
+ .footer-copy {
+ font-size: 0.68rem;
+ }
+
+ .lightbox {
+ position: fixed;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ background: rgba(5, 10, 20, 0.88);
+ backdrop-filter: blur(4px);
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s ease;
+ z-index: 9999;
+ }
+
+ .lightbox.active {
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ .lightbox img {
+ max-width: min(96vw, 1600px);
+ 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;
+ }
+
+ .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;
+ cursor: pointer;
+ }
+
+ .reveal {
+ opacity: 0;
+ transform: translateY(24px);
+ transition: opacity 0.65s ease, transform 0.65s ease;
+ }
+
+ .reveal.visible {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
+ @keyframes fadeUp {
+ from { opacity: 0; transform: translateY(18px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ @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);
+ }
+
+ @media (max-width: 1040px) {
+ .focus-band,
+ .hero-shell,
+ .about-grid,
+ .contact-grid,
+ .projects-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .prism-summary,
+ .prism-showcase {
+ grid-template-columns: 1fr;
+ }
+
+ .hero-visual {
+ max-width: 560px;
+ }
+
+ .prism-features,
+ .about-stats,
+ .resume-highlights {
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ @media (max-width: 760px) {
+ nav {
+ padding: 0.9rem 1rem;
+ align-items: center;
+ overflow-x: auto;
+ }
+
+ .nav-logo { display: none; }
+
+ .nav-links {
+ width: 100%;
+ 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;
+ }
+
+ .hero-tagline {
+ max-width: none;
+ font-size: 0.96rem;
+ margin-bottom: 1.35rem;
+ }
+
+ .hero-badges,
+ .hero-ctas {
+ gap: 0.6rem;
+ }
+
+ .hero-ctas a {
+ width: 100%;
+ }
+
+ .hero-visual {
+ display: none;
+ }
+
+ .focus-band {
+ margin-top: -0.5rem;
+ }
+
+ .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 {
+ grid-template-columns: 1fr;
+ }
+
+ .prism-summary,
+ .prism-showcase,
+ .about-grid,
+ .contact-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .prism-showcase {
+ grid-template-areas:
+ "main"
+ "side"
+ "stack";
+ }
+
+ .prism-side-shots {
+ grid-template-columns: 1fr;
+ }
+
+ section {
+ padding: 4rem 5vw;
+ }
+
+ footer {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+ </style>
+</head>
+<body>
+ <nav>
+ <a href="#hero" class="nav-logo">Thuy (Tyler) Hoang</a>
+ <ul class="nav-links">
+ <li><a href="#about">About</a></li>
+ <li><a href="#prism">Prism</a></li>
+ <li><a href="#projects">Projects</a></li>
+ <li><a href="#skills">Skills</a></li>
+ <li><a href="#resume">Resume</a></li>
+ <li><a href="#contact">Contact</a></li>
+ </ul>
+ </nav>
+
+ <section id="hero">
+ <div class="hero-shell">
+ <div class="hero-copy">
+ <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>
+ </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>
+ <div class="hero-note-item">
+ <span class="hero-note-label">Focus</span>
+ <span class="hero-note-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>
+ </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>
+ </div>
+ </div>
+ </section>
+
+ <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="about-grid">
+ <div class="about-text 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-num">CFA</div>
+ <div class="stat-label">Level I Candidate</div>
+ </div>
+ <div class="stat-card">
+ <div class="stat-num">3.75</div>
+ <div class="stat-label">CSULB GPA</div>
+ </div>
+ <div class="stat-card">
+ <div class="stat-num">3.75</div>
+ <div class="stat-label">CSUF GPA</div>
+ </div>
+ <div class="stat-card">
+ <div class="stat-num">4.0</div>
+ <div class="stat-label">OCC GPA</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="prism">
+ <div class="prism-band">
+ <p class="section-label reveal">Featured Project</p>
+ <h2 class="section-title reveal">Prism</h2>
+ <div class="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>
+ </div>
+ <div class="prism-ctas">
+ <a href="https://prism.tylerhoang.xyz" class="btn-primary" target="_blank">Live Demo</a>
+ <a href="https://git.tylerhoang.xyz/prism.git" class="btn-outline" target="_blank">View Code</a>
+ </div>
+ </div>
+ <div class="prism-summary 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>
+ </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>
+ </div>
+ <div class="prism-features reveal">
+ <div class="prism-feature">
+ <div class="prism-feature-title">Research Workflow</div>
+ <div class="prism-feature-desc">Built to move from idea generation to underwriting quickly by keeping core research inputs in one interface.</div>
+ </div>
+ <div class="prism-feature">
+ <div class="prism-feature-title">Valuation Engine</div>
+ <div class="prism-feature-desc">DCF, EV/EBITDA, and comps with cleaner bridge logic and explicit handling for negative earnings, EBITDA, and cash flow edge cases.</div>
+ </div>
+ <div class="prism-feature">
+ <div class="prism-feature-title">Fundamentals</div>
+ <div class="prism-feature-desc">Financial statements, key ratios, and historical views designed to make business quality and trend changes easier to spot.</div>
+ </div>
+ <div class="prism-feature">
+ <div class="prism-feature-title">Options &amp; Positioning</div>
+ <div class="prism-feature-desc">Options flow, volatility context, and insider activity help surface how positioning lines up with the fundamental story.</div>
+ </div>
+ <div class="prism-feature">
+ <div class="prism-feature-title">Filings &amp; Catalysts</div>
+ <div class="prism-feature-desc">SEC filings and company-specific disclosures are easy to scan, with direct EDGAR access for primary-source review.</div>
+ </div>
+ <div class="prism-feature">
+ <div class="prism-feature-title">Market Context</div>
+ <div class="prism-feature-desc">Indices, rates, volatility, commodities, and news add the macro backdrop needed to interpret single-name moves.</div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="projects">
+ <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>
+ </div>
+ <div class="project-footer">
+ <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>
+ </div>
+ <div class="project-footer">
+ <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>
+ </div>
+ <div class="project-footer">
+ <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>
+ </div>
+ <div class="project-footer">
+ <span class="project-date">Fall 2025</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="skills">
+ <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="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>
+ </div>
+ <div class="skill-group reveal">
+ <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>
+ </div>
+ <div class="skill-group reveal">
+ <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>
+ </div>
+ <div class="skill-group reveal">
+ <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>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="resume">
+ <div class="section-shell">
+ <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>
+ <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>
+ </div>
+ <div class="resume-downloads reveal">
+ <a href="Tyler_Resume.pdf" class="btn-primary">Download PDF</a>
+ <a href="Tyler_Resume.docx" class="btn-outline">Download DOCX</a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section id="contact">
+ <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="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 class="contact-links reveal">
+ <a href="mailto:tyler@tylerhoang.xyz" class="contact-link">
+ <div class="contact-link-icon">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+ <rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="M2 7l10 7 10-7"></path>
+ </svg>
+ </div>
+ tyler@tylerhoang.xyz
+ </a>
+ <a href="https://www.linkedin.com/in/thuyghoang" target="_blank" class="contact-link">
+ <div class="contact-link-icon">
+ <svg viewBox="0 0 24 24" fill="currentColor">
+ <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2"></circle>
+ </svg>
+ </div>
+ linkedin.com/in/thuyghoang
+ </a>
+ <a href="https://git.tylerhoang.xyz" target="_blank" class="contact-link">
+ <div class="contact-link-icon">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+ <circle cx="12" cy="12" r="10"></circle><path d="M12 2a10 10 0 000 20c1.5 0 2-.5 2-2v-1.5c0-.5-.3-1-.8-1.2C10.5 16.8 9 15 9 12c0-3 2-5 5-5h.5"></path>
+ </svg>
+ </div>
+ git.tylerhoang.xyz
+ </a>
+ </div>
+ </div>
+ <div class="contact-form reveal">
+ <div class="form-group">
+ <label class="form-label">Name</label>
+ <input id="cf-name" type="text" class="form-input" placeholder="Your name" />
+ </div>
+ <div class="form-group">
+ <label class="form-label">Email</label>
+ <input id="cf-email" type="email" class="form-input" placeholder="your@email.com" />
+ </div>
+ <div class="form-group">
+ <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>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <footer>
+ <span class="footer-name">Thuy (Tyler) Hoang</span>
+ <span class="footer-copy">© 2026 · 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>
+ <img id="lightbox-image" src="" alt="Expanded project screenshot" />
+ </div>
+
+ <script>
+ const reveals = document.querySelectorAll('.reveal');
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry, i) => {
+ if (entry.isIntersecting) {
+ setTimeout(() => entry.target.classList.add('visible'), i * 60);
+ observer.unobserve(entry.target);
+ }
+ });
+ }, { threshold: 0.12 });
+ reveals.forEach((el) => observer.observe(el));
+
+ const lightbox = document.getElementById('lightbox');
+ const lightboxImage = document.getElementById('lightbox-image');
+ const lightboxClose = document.getElementById('lightbox-close');
+ const galleryImages = document.querySelectorAll('[data-lightbox="prism"]');
+
+ function openLightbox(src, alt) {
+ lightboxImage.src = src;
+ lightboxImage.alt = alt || 'Expanded project screenshot';
+ lightbox.classList.add('active');
+ lightbox.setAttribute('aria-hidden', 'false');
+ document.body.style.overflow = 'hidden';
+ }
+
+ function closeLightbox() {
+ lightbox.classList.remove('active');
+ lightbox.setAttribute('aria-hidden', 'true');
+ lightboxImage.src = '';
+ document.body.style.overflow = '';
+ }
+
+ galleryImages.forEach((img) => {
+ img.addEventListener('click', () => openLightbox(img.src, img.alt));
+ });
+
+ lightboxClose.addEventListener('click', closeLightbox);
+ lightbox.addEventListener('click', (e) => {
+ if (e.target === lightbox) closeLightbox();
+ });
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && lightbox.classList.contains('active')) closeLightbox();
+ });
+
+ async function handleFormSubmit(e) {
+ e.preventDefault();
+ const btn = document.getElementById('cf-btn');
+ const status = document.getElementById('cf-status');
+ const name = document.getElementById('cf-name').value.trim();
+ const email = document.getElementById('cf-email').value.trim();
+ const message = document.getElementById('cf-message').value.trim();
+
+ if (!name || !email || !message) {
+ status.style.color = '#e57373';
+ status.textContent = 'Please fill in all fields.';
+ return;
+ }
+
+ btn.textContent = 'Sending...';
+ btn.style.opacity = '0.7';
+ btn.style.pointerEvents = 'none';
+ status.textContent = '';
+
+ try {
+ const res = await fetch('/api/contact', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ name, email, message })
+ });
+ const data = await res.json();
+
+ if (res.ok) {
+ status.style.color = '#81c784';
+ 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.textContent = data.error || 'Something went wrong. Please try again.';
+ }
+ } catch (err) {
+ status.style.color = '#e57373';
+ status.textContent = 'Could not reach the server. Please try again later.';
+ } finally {
+ btn.textContent = 'Send Message';
+ btn.style.opacity = '';
+ btn.style.pointerEvents = '';
+ }
+ }
+ </script>
+</body>
+</html>
generated by cgit v1.3-2-g0d8e (git 2.53.0) at 2026-06-05 01:24:30 +0000