diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-06-19 01:55:41 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-06-19 01:55:41 -0700 |
| commit | bb4229f2cc0e72d92f13ad9e675c27a566c19bd9 (patch) | |
| tree | 3b82c46260fb585750b36ae5ee0958dc31245b69 | |
| parent | ab4b961bb928f88a5f953fb342c70d2a5b0826be (diff) | |
redesign
| -rw-r--r-- | index.html | 994 |
1 files changed, 552 insertions, 442 deletions
@@ -1,509 +1,606 @@ <!DOCTYPE html> <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 a strong edge in valuation, markets, and investor-focused analytics." /> - <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@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet" /> - <style> - *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +<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 a strong edge in valuation, markets, and investor-focused analytics." /> +<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> +<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=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> +<style> + :root{ + --ink:#000000; --panel:#0a0a0a; --panel2:#141414; + --rule:#1a1a1a; --rule2:#222222; + --text:#FFB000; --muted:#888888; --amber:#FFB000; + --green:#00FF00; --red:#FF4444; + --serif:"JetBrains Mono",ui-monospace,monospace; + --sans:"JetBrains Mono",ui-monospace,monospace; + --mono:"JetBrains Mono",ui-monospace,monospace; + } + *{box-sizing:border-box} + html{scroll-behavior:smooth} + body{ + margin:0; background:var(--ink); color:var(--text); + font-family:var(--sans); font-size:16px; line-height:1.6; + -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; + overflow-x:hidden; + } + a{color:inherit; text-decoration:none} + ::selection{background:rgba(232,182,64,.28); color:#fff} - :root { - --bg: #0b0d10; - --bg-alt: #11141a; - --panel: #0f1217; - --line: #1c2028; - --line-strong: #2a313c; - --text: #dde2e8; - --muted: #6b7280; - --dim: #4b5260; - --green: #3ecf8e; - --green-dim: #1f8a5b; - --red: #e85a5a; - --amber: #d9a441; - --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; - --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; - } - - html { scroll-behavior: smooth; } - html, body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } - a { color: inherit; text-decoration: none; } - - .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; } + /* ---------- TICKER ---------- */ + .tape{ + position:sticky; top:0; z-index:50; width:100%; + background:linear-gradient(180deg,#000 0%,var(--ink) 100%); + border-bottom:1px solid var(--rule); + font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; + color:var(--text); height:30px; display:flex; align-items:center; + overflow:hidden; white-space:nowrap; + } + .tape-track{display:inline-flex; gap:34px; padding-left:34px; animation:slide 38s linear infinite; will-change:transform} + .tape-item{display:inline-flex; gap:8px; align-items:baseline} + .tape-sym{color:#fff; font-weight:600} + .tape-px{color:var(--text)} + .tape-chg.up{color:var(--green)} .tape-chg.dn{color:var(--red)} + .tape-sep{color:var(--rule)} + @keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}} + @media (prefers-reduced-motion:reduce){.tape-track{animation:none;padding-left:34px}} - /* Subtle scanline grain */ - body::before { - content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; - background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px); - mix-blend-mode: overlay; - } - body > * { position: relative; z-index: 1; } + /* ---------- LAYOUT ---------- */ + .shell{max-width:1240px; margin:0 auto; padding:0 30px 0 30px; display:grid; grid-template-columns:300px 1fr; gap:64px; align-items:start} + .col-side{position:sticky; top:62px; padding-top:48px; padding-bottom:64px} + .col-main{padding-top:48px; padding-bottom:64px; min-width:0} - /* Top bar */ - .topbar { border-bottom: 1px solid var(--line); padding: 14px 0; } - .topbar-inner { display: flex; align-items: center; gap: 28px; font-family: var(--mono); font-size: 12px; } - .topbar .logo { color: var(--green); font-weight: 500; letter-spacing: 0.04em; } - .topbar .logo::before { content: "$ "; opacity: 0.5; } - .topbar nav { display: flex; gap: 22px; } - .topbar nav a { color: var(--muted); transition: color 0.15s; } - .topbar nav a:hover { color: var(--text); } - .topbar .spacer { flex: 1; } - .topbar .session { color: var(--dim); } - .topbar .session b { color: var(--green); font-weight: 500; } + /* ---------- COVER SHEET (sidebar) ---------- */ + .iss{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--amber); text-transform:uppercase; margin-bottom:10px} + .iss .dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:7px;vertical-align:middle;animation:pulse 2.4s ease-in-out infinite} + @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} + @media (prefers-reduced-motion:reduce){.iss .dot{animation:none}} + .name{font-family:var(--mono); font-weight:700; font-size:28px; line-height:1.1; letter-spacing:-.02em; color:#fff; margin:0 0 6px; text-transform:uppercase} + .tagline{font-family:var(--mono); font-weight:500; font-size:13px; color:var(--amber); margin:0 0 22px; letter-spacing:.04em; text-transform:uppercase} + .sub{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; line-height:1.7; margin-bottom:22px} - /* Ticker */ - .ticker { border-bottom: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; } - .ticker-track { display: flex; gap: 48px; padding: 9px 32px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; } - .tk { display: inline-flex; gap: 8px; align-items: center; } - .tk .sym { color: var(--text); } - .tk .val { color: var(--text); } - .tk .chg.up { color: var(--green); } - .tk .chg.dn { color: var(--red); } + .stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:22px} + .stat{background:var(--panel); padding:11px 12px} + .stat-k{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase} + .stat-v{font-family:var(--mono); font-size:15px; color:var(--amber); font-weight:500; margin-top:3px} - /* HERO */ - .hero { padding: 72px 0 64px; border-bottom: 1px solid var(--line); position: relative; } - .hero::before { content: ""; position: absolute; inset: 0; background: - radial-gradient(ellipse 600px 200px at 20% 0%, rgba(62,207,142,0.07), transparent 70%), - radial-gradient(ellipse 400px 200px at 90% 100%, rgba(62,207,142,0.04), transparent 70%); - pointer-events: none; - } - .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; position: relative; } - .hero-left .meta { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px 18px; } - .hero-left .meta span::before { content: "// "; color: var(--green-dim); } - .hero h1 { font-family: var(--sans); font-weight: 600; font-size: 64px; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 22px; } - .hero h1 .accent { color: var(--green); } - .hero p.lede { color: var(--muted); font-size: 16px; max-width: 540px; margin-bottom: 30px; } - .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } + .nav{border-top:1px solid var(--rule); padding-top:16px; margin-bottom:22px} + .nav a{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); padding:8px 0; border-bottom:1px solid transparent; transition:color .2s} + .nav a span:last-child{color:var(--muted); font-size:10px} + .nav a:hover{color:var(--amber)} + .nav a:hover span:last-child{color:var(--amber)} + .nav a.cur{color:var(--amber)} - .btn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; padding: 12px 18px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; display: inline-block; transition: all 0.15s; } - .btn.primary { background: var(--green); color: #07120c; border-color: var(--green); font-weight: 500; } - .btn:hover { border-color: var(--green); color: var(--green); } - .btn.primary:hover { background: transparent; color: var(--green); } + .session{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.08em; line-height:1.8; border-top:1px solid var(--rule); padding-top:12px} + .session b{color:var(--text); font-weight:500} - /* Research note card */ - .note { background: var(--panel); border: 1px solid var(--line); } - .note-head { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); } - .note-head .tag { color: var(--green); } - .note-body { padding: 6px 18px; } - .note-body .row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--line); font-family: var(--mono); font-size: 12.5px; } - .note-body .row:last-child { border-bottom: 0; } - .note-body .row .k { color: var(--muted); } - .note-body .row .v { color: var(--text); } - .note-body .row .v.green { color: var(--green); } - .note-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--dim); } + /* ---------- MAIN SECTIONS ---------- */ + section{margin-bottom:72px; scroll-margin-top:60px} + .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:12px; margin-bottom:18px} + .eyebrow::after{content:""; flex:1; height:1px; background:var(--rule)} + .h2{font-family:var(--mono); font-weight:700; font-size:clamp(28px,4.5vw,46px); line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0 0 20px; text-transform:uppercase} + .h2 em{font-style:normal; font-weight:700; color:var(--amber); text-transform:uppercase} + .lead{font-family:var(--sans); font-size:18px; line-height:1.65; color:var(--text); max-width:60ch} + .lead .kw{color:#fff; font-weight:600} + p.body{font-size:15.5px; line-height:1.72; color:var(--text); margin:0 0 14px; max-width:62ch} + .rule{height:1px; background:var(--rule); border:0; margin:0} - /* Sections */ - section.panel { padding: 64px 0; border-bottom: 1px solid var(--line); } - .sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 32px; flex-wrap: wrap; } - .sec-head .num { font-family: var(--mono); font-size: 12px; color: var(--green); letter-spacing: 0.12em; } - .sec-head h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; } - .sec-head .sub { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-left: auto; } + /* reveal */ + .rv{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease} + .rv.in{opacity:1; transform:none} + @media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}} - /* About */ - .about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; } - .about p { color: var(--text); font-size: 15px; margin-bottom: 16px; } - .about p .drop { color: var(--green); font-family: var(--mono); margin-right: 4px; } - .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; } - .stat { background: var(--panel); padding: 18px 18px; } - .stat .lbl { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; } - .stat .val { font-family: var(--mono); font-size: 22px; color: var(--text); } - .stat .val .unit { color: var(--green); font-size: 14px; margin-left: 4px; } + /* ---------- CREDENTIALS ---------- */ + .cred-list{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)} + .cred{background:var(--panel); padding:18px 20px; display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:start} + .cred-date{font-family:var(--mono); font-size:11px; color:var(--amber); letter-spacing:.04em} + .cred-h{font-family:var(--mono); font-weight:600; font-size:15px; color:#fff; margin:0 0 4px; text-transform:uppercase; letter-spacing:.02em} + .cred-org{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px} + .cred-d{font-size:13.5px; line-height:1.6; color:var(--text); margin:0} - /* Prism */ - .prism { background: var(--panel); border: 1px solid var(--line); } - .prism-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } - .prism-head .ticker-tag { font-family: var(--mono); font-size: 11px; color: var(--green); padding: 3px 8px; border: 1px solid var(--green-dim); border-radius: 2px; } - .prism-head h3 { font-size: 22px; font-weight: 500; } - .prism-head .meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); } - .prism-body { display: grid; grid-template-columns: 1.4fr 1fr; } - .prism-body .left { padding: 28px 24px; border-right: 1px solid var(--line); } - .prism-body .left p { color: var(--muted); font-size: 14px; margin-bottom: 14px; } - .prism-body .left .ctas { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } - .prism-body .right { padding: 0; } - .prism-body .right .row { padding: 18px 22px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; } - .prism-body .right .row:last-child { border-bottom: 0; } - .prism-body .right .row .idx { font-family: var(--mono); font-size: 11px; color: var(--green); padding-top: 2px; } - .prism-body .right .row h4 { font-size: 14px; font-weight: 500; margin-bottom: 4px; } - .prism-body .right .row p { font-size: 12.5px; color: var(--muted); } - .prism-body .right .row .arrow { color: var(--dim); font-family: var(--mono); } - .prism-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); flex-wrap: wrap; } - .prism-foot span { padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 2px; } + /* ---------- FEATURED (Prism) ---------- */ + .feat{border:1px solid var(--rule); background:linear-gradient(180deg,var(--panel) 0%,var(--ink) 100%)} + .feat-head{padding:24px 26px; border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; align-items:flex-start; gap:20px} + .feat-tk{font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:.08em} + .feat-t{font-family:var(--mono); font-weight:700; font-size:20px; color:#fff; margin:6px 0 0; line-height:1.15; text-transform:uppercase; letter-spacing:-.01em} + .feat-st{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap} + .feat-st .live{color:var(--green)} + .feat-body{padding:22px 26px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start} + .feat-left{display:flex; flex-direction:column; gap:0} + .feat-desc{font-size:14.5px; line-height:1.68; color:var(--text); max-width:none} + .feat-links{margin-top:18px; display:flex; gap:18px; flex-wrap:wrap} + .pill{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--amber); border:1px solid var(--rule2); padding:7px 13px; transition:background .2s,border-color .2s} + .pill:hover{background:rgba(232,182,64,.08); border-color:var(--amber)} + .feat-feat{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)} + .ff{background:var(--panel); padding:14px 16px} + .ff-n{font-family:var(--mono); font-size:10px; color:var(--amber); letter-spacing:.1em} + .ff-t{font-family:var(--mono); font-weight:600; font-size:13px; color:#fff; margin:2px 0 5px; text-transform:uppercase; letter-spacing:.02em} + .ff-d{font-size:12.5px; line-height:1.55; color:var(--text)} + .tags{margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase} + .tags span{color:var(--text)} - /* Prism screenshot gallery */ - .prism-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } - .shot { background: var(--panel); display: block; padding: 0; position: relative; overflow: hidden; } - .shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); transition: opacity 0.15s; } - .shot:hover img { opacity: 0.85; } - .shot .caption { padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11px; color: var(--dim); } - .shot .caption b { color: var(--text); font-weight: 500; } - .shot .caption .open { color: var(--green-dim); } - .shot:hover .caption .open { color: var(--green); } + /* ---------- PRISM SCREENSHOTS ---------- */ + .feat-shots{display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px} + .feat-shots figure{margin:0; border:1px solid var(--rule); background:var(--ink); overflow:hidden; transition:border-color .25s; cursor:zoom-in} + .feat-shots figure:hover{border-color:var(--amber)} + .feat-shots img{display:block; width:100%; height:auto; opacity:.92; transition:opacity .25s} + .feat-shots figure:hover img{opacity:1} + .feat-shots figcaption{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:8px 12px; border-top:1px solid var(--rule)} + @media (max-width:880px){.feat-shots{grid-template-columns:1fr; padding:0}} - /* Skills */ - .skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } - .sk { background: var(--panel); padding: 18px 18px; } - .sk h4 { font-family: var(--mono); font-size: 11px; color: var(--green); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } - .sk ul { list-style: none; } - .sk li { font-family: var(--mono); font-size: 13px; padding: 4px 0; color: var(--text); display: flex; justify-content: space-between; } - .sk li .dot-c { color: var(--dim); } + /* ---------- LIGHTBOX ---------- */ + .lightbox{position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:5vh 5vw; opacity:0; pointer-events:none; transition:opacity .3s} + .lightbox.open{opacity:1; pointer-events:auto} + .lightbox img{max-width:100%; max-height:90vh; border:1px solid var(--rule); box-shadow:0 20px 60px rgba(0,0,0,.6); transform:scale(.96); transition:transform .3s} + .lightbox.open img{transform:scale(1)} + .lightbox-cap{position:fixed; bottom:4vh; left:0; right:0; text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} + .lightbox-close{position:fixed; top:3vh; right:4vw; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--text); cursor:pointer; border:1px solid var(--rule2); padding:8px 14px; background:rgba(19,26,43,.8); transition:color .2s,border-color .2s} + .lightbox-close:hover{color:var(--amber); border-color:var(--amber)} - /* Projects list */ - .proj-list { border: 1px solid var(--line); } - .proj { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; padding: 22px 22px; border-bottom: 1px solid var(--line); align-items: start; } - .proj:last-child { border-bottom: 0; } - .proj .idx { font-family: var(--mono); font-size: 13px; color: var(--green); } - .proj h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; } - .proj .cat { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-bottom: 8px; } - .proj p { color: var(--muted); font-size: 13.5px; max-width: 760px; } - .proj .tags { display: flex; gap: 6px; flex-direction: column; align-items: flex-end; } - .proj .tag { font-family: var(--mono); font-size: 10.5px; color: var(--muted); padding: 3px 8px; border: 1px solid var(--line-strong); } + /* ---------- PROJECTS ---------- */ + .proj-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px} + .proj{border:1px solid var(--rule); background:var(--panel); padding:18px 20px; transition:border-color .25s,transform .25s; position:relative} + .proj:hover{border-color:var(--amber); transform:translateY(-3px)} + .proj::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:transparent; transition:background .25s} + .proj:hover::before{background:var(--amber)} + .proj-no{font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.1em} + .proj-t{font-family:var(--mono); font-weight:600; font-size:14px; color:#fff; margin:4px 0 3px; line-height:1.25; text-transform:uppercase; letter-spacing:.01em} + .proj-meta{font-family:var(--mono); font-size:10px; color:var(--amber); letter-spacing:.06em; text-transform:uppercase; margin-bottom:9px} + .proj-d{font-size:13px; line-height:1.6; color:var(--text)} + .proj-tags{margin-top:11px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--muted)} + .proj-tags span{color:var(--text)} - /* Resume */ - .resume-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); } - .resume-cell { background: var(--panel); padding: 22px 22px; } - .resume-cell h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; } - .resume-cell .where { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } - .resume-cell .when { font-family: var(--mono); font-size: 11px; color: var(--green); margin-bottom: 8px; } - .resume-cell p { font-size: 13.5px; color: var(--muted); } - .resume-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; } + /* ---------- SKILLS ---------- */ + .skill-block{margin-bottom:26px} + .skill-cap{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:13px; display:flex; align-items:center; gap:10px} + .skill-cap::before{content:"//"; color:var(--amber)} + .skill-row{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:7px 0; border-bottom:1px solid var(--rule)} + .skill-row:last-child{border-bottom:none} + .skill-n{font-size:14px; color:var(--text)} + .dots{font-family:var(--mono); font-size:14px; letter-spacing:.2em; line-height:1} + .d-on{color:var(--amber)} .d-off{color:var(--rule2)} - /* Contact */ - .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } - .contact p { color: var(--muted); font-size: 15px; margin-bottom: 18px; } - .contact .links { display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 13px; } - .contact .links a { color: var(--text); border-bottom: 1px dashed var(--line-strong); padding-bottom: 4px; } - .contact .links a:hover { color: var(--green); border-color: var(--green-dim); } - .contact form { display: flex; flex-direction: column; gap: 10px; } - .contact input, .contact textarea { background: var(--panel); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 13px; padding: 12px 14px; } - .contact input:focus, .contact textarea:focus { outline: 0; border-color: var(--green-dim); } - .contact textarea { min-height: 110px; resize: vertical; } - .contact .form-foot { display: flex; align-items: center; gap: 14px; margin-top: 6px; } - .contact .status { font-family: var(--mono); font-size: 12px; color: var(--muted); } - .contact .status.ok { color: var(--green); } - .contact .status.err { color: var(--red); } + /* ---------- CONTACT ---------- */ + .contact-wrap{border:1px solid var(--rule); background:var(--panel); padding:30px 32px} + .contact-msg{font-family:var(--mono); font-weight:400; font-size:17px; line-height:1.5; color:#fff; max-width:42ch; margin:0 0 26px} + .contact-msg em{font-style:normal; color:var(--amber); font-weight:600} + .contact-links{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:24px} + .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px} + .field{display:flex; flex-direction:column; gap:6px} + .field.full{grid-column:1/-1} + .field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)} + .field input, .field textarea{ + font-family:var(--mono); font-size:13px; color:var(--text); + background:var(--ink); border:1px solid var(--rule2); padding:12px 14px; + transition:border-color .2s, box-shadow .2s; outline:none; border-radius:0; + } + .field input::placeholder, .field textarea::placeholder{color:var(--muted)} + .field input:focus, .field textarea:focus{border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) inset} + .field textarea{min-height:110px; resize:vertical; line-height:1.5} + .form-foot{display:flex; align-items:center; gap:14px; margin-top:6px; flex-wrap:wrap} + .form-note{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.04em} + button.send{font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); background:transparent; padding:13px 22px; cursor:pointer; transition:background .2s,color .2s,opacity .2s} + button.send:hover{background:var(--amber); color:var(--ink)} + .status{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.02em} + .status.ok{color:var(--green)} + .status.err{color:var(--red)} + .clink{background:var(--panel); padding:14px 18px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:13px; color:var(--text); transition:color .2s,background .2s} + .clink:hover{color:var(--amber); background:var(--panel2)} + .clink .arr{color:var(--muted)} .clink:hover .arr{color:var(--amber)} + .send{margin-top:22px; display:inline-block; font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); padding:13px 22px; transition:background .2s,color .2s} + .send:hover{background:var(--amber); color:var(--ink)} - /* Footer */ - footer { padding: 28px 0; } - footer .wrap { font-family: var(--mono); font-size: 11px; color: var(--dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } + /* ---------- FOOTER ---------- */ + footer{border-top:1px solid var(--rule); margin-top:32px; padding:22px 30px; max-width:1240px; margin-left:auto; margin-right:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.06em; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px} + footer span b{color:var(--text); font-weight:500} - @media (max-width: 900px) { - .hero h1 { font-size: 40px; } - .hero-grid, .about-grid, .prism-body, .contact-grid, .resume-grid { grid-template-columns: 1fr; } - .prism-body .left { border-right: 0; border-bottom: 1px solid var(--line); } - .prism-shots { grid-template-columns: 1fr; } - .skills-grid { grid-template-columns: 1fr; } - .topbar nav { display: none; } - .proj { grid-template-columns: 40px 1fr; } - .proj .tags { grid-column: 2; flex-direction: row; align-items: flex-start; flex-wrap: wrap; } - } - </style> + /* ---------- RESPONSIVE ---------- */ + @media (max-width:880px){ + .shell{grid-template-columns:1fr; gap:0; padding:0 22px} + .col-side{position:static; top:auto; padding-top:28px; padding-bottom:8px; border-bottom:1px solid var(--rule); margin-bottom:8px} + .stat-grid{grid-template-columns:1fr 1fr} + .nav{display:none} + .col-main{padding-top:8px} + .feat-body{grid-template-columns:1fr; gap:22px} + .proj-grid{grid-template-columns:1fr} + .cred{grid-template-columns:1fr; gap:6px} + .name{font-size:30px} + .h2{font-size:34px} + footer{padding:18px 22px} + } +</style> </head> <body> -<!-- TOP BAR --> -<div class="wrap"> - <div class="topbar"> - <div class="topbar-inner"> - <div class="logo">tyler.hoang</div> - <nav> - <a href="#about">/about</a> - <a href="#prism">/prism</a> - <a href="#projects">/projects</a> - <a href="#skills">/skills</a> - <a href="#resume">/resume</a> - <a href="#contact">/contact</a> - </nav> - <div class="spacer"></div> - <div class="session">SESS <b>OPEN</b> · UTC-08</div> - </div> - </div> +<!-- ========== TICKER ========== --> +<div class="tape" role="region" aria-label="Market ticker"> + <div class="tape-track" id="track"></div> </div> -<!-- TICKER --> -<div class="ticker"> - <div class="ticker-track"> - <div class="tk"><span class="sym">SPX</span><span class="val">5,238.42</span><span class="chg up">+0.41%</span></div> - <div class="tk"><span class="sym">NDX</span><span class="val">18,427.10</span><span class="chg up">+0.62%</span></div> - <div class="tk"><span class="sym">DJI</span><span class="val">39,118.86</span><span class="chg dn">-0.18%</span></div> - <div class="tk"><span class="sym">VIX</span><span class="val">14.27</span><span class="chg dn">-2.31%</span></div> - <div class="tk"><span class="sym">US10Y</span><span class="val">4.182%</span><span class="chg up">+3bp</span></div> - <div class="tk"><span class="sym">DXY</span><span class="val">103.94</span><span class="chg up">+0.12%</span></div> - <div class="tk"><span class="sym">BTC</span><span class="val">63,840</span><span class="chg up">+1.18%</span></div> - <div class="tk"><span class="sym">$TYLER</span><span class="val">●</span><span class="chg up">CFA L1 · MSFA</span></div> - </div> -</div> +<div class="shell"> -<!-- HERO --> -<div class="wrap"> - <section class="hero"> - <div class="hero-grid"> - <div class="hero-left"> - <div class="meta"> - <span>CSULB · MSFA</span> - <span>JPMORGAN CHASE</span> - <span>ASSET MGMT</span> - </div> - <h1>Thuy (Tyler) Hoang.<br/>Finance, <span class="accent">modeled.</span></h1> - <p class="lede">Finance professional, CFA Level I candidate, and MS Financial Analytics candidate. Building an edge in valuation, market structure, and investor-focused analytics — with code that holds up to scrutiny.</p> - <div class="hero-ctas"> - <a class="btn primary" href="#prism">→ View Prism</a> - <a class="btn" href="#contact">/contact</a> - </div> - </div> + <!-- ========== LEFT: COVER SHEET ========== --> + <aside class="col-side"> + <div class="iss"><span class="dot"></span>$TYLER · CFA Level I Candidate · MSFA</div> + <h1 class="name">Thuy (Tyler)<br>Hoang</h1> + <div class="tagline">Finance, modeled.</div> + <div class="sub"> + CSULB · MSFA<br> + JPMORGAN CHASE · ASSET MGMT + </div> - <div class="note"> - <div class="note-head"><span>RESEARCH_NOTE / 2026-Q2</span><span class="tag">● ACTIVE</span></div> - <div class="note-body"> - <div class="row"><span class="k">TICKER</span><span class="v">$TYLER</span></div> - <div class="row"><span class="k">SECTOR</span><span class="v">Asset Management</span></div> - <div class="row"><span class="k">STATUS</span><span class="v green">SEEKING · AM / RESEARCH</span></div> - <div class="row"><span class="k">CREDENTIALS</span><span class="v">CFA L1 · SIE</span></div> - <div class="row"><span class="k">PROGRAM</span><span class="v">MSFA · CSULB · Aug'26</span></div> - <div class="row"><span class="k">GPAs</span><span class="v">3.75 / 3.75 / 4.00</span></div> - </div> - <div class="note-foot"><span>UPDATED 2026-06-16</span><span>v2.1</span></div> - </div> + <div class="stat-grid" aria-label="Key stats"> + <div class="stat"><div class="stat-k">CFA Level I</div><div class="stat-v">CANDIDATE</div></div> + <div class="stat"><div class="stat-k">CSULB GPA</div><div class="stat-v">3.75</div></div> + <div class="stat"><div class="stat-k">CSUF GPA</div><div class="stat-v">3.75</div></div> + <div class="stat"><div class="stat-k">OCC GPA</div><div class="stat-v">4.00</div></div> </div> - </section> - <!-- ABOUT --> - <section class="panel" id="about"> - <div class="sec-head"><span class="num">00 /</span><h2>About</h2><span class="sub">background.md</span></div> - <div class="about-grid"> - <div> - <p><span class="drop">></span> Finance professional pursuing my Master of Science in Financial Analytics at California State University, Long Beach, with an expected graduation of August 2026. 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 — internal controls, cash management, operational compliance — with quantitative financial modeling and academic work in fixed income, derivatives pricing, machine learning, and valuation.</p> - <p>I bring analytical depth and an execution mindset — comfortable with financial statements, market data, and the tools that make research faster. FINRA SIE certified. Fluent in English and Vietnamese.</p> - </div> - <div> - <div class="stats"> - <div class="stat"><div class="lbl">CFA · Level I</div><div class="val">CAND<span class="unit">'26</span></div></div> - <div class="stat"><div class="lbl">CSULB GPA</div><div class="val">3.75</div></div> - <div class="stat"><div class="lbl">CSUF GPA</div><div class="val">3.75</div></div> - <div class="stat"><div class="lbl">OCC GPA</div><div class="val">4.00</div></div> - <div class="stat"><div class="lbl">Certifications</div><div class="val">SIE</div></div> - <div class="stat"><div class="lbl">Languages</div><div class="val">EN · VI</div></div> - </div> - </div> + <nav class="nav" aria-label="Sections"> + <a href="#profile"><span>Profile</span><span>01</span></a> + <a href="#credentials"><span>Credentials</span><span>02</span></a> + <a href="#featured"><span>Featured Research</span><span>03</span></a> + <a href="#research"><span>Research</span><span>04</span></a> + <a href="#capabilities"><span>Capabilities</span><span>05</span></a> + <a href="#contact"><span>Contact</span><span>06</span></a> + </nav> + + <div class="session"> + <b>SESSION OPEN</b> · UTC−08<br> + SEEKING · AM / RESEARCH<br> + UPDATED 2026-06-16 · v2.1 </div> - </section> + </aside> - <!-- PRISM --> - <section class="panel" id="prism"> - <div class="sec-head"><span class="num">01 /</span><h2>Prism — Featured Project</h2><span class="sub">spring_2026</span></div> + <!-- ========== RIGHT: MAIN ========== --> + <main class="col-main"> - <div class="prism"> - <div class="prism-head"> - <span class="ticker-tag">PRSM</span> - <h3>Investor-focused financial analysis dashboard</h3> - <div class="meta">SPRING 2026 · v0.4 · LIVE</div> + <!-- PROFILE / ABOUT --> + <section id="profile" class="rv"> + <div class="eyebrow">Profile · background.md</div> + <h2 class="h2" style="font-size:40px">Profile</h2> + <p class="body"> + Finance professional pursuing my Master of Science in Financial Analytics at California State University, Long Beach, with an expected graduation of August 2026. CFA Level I candidate with a strong interest in asset management, investment research, and market-driven decision-making. + </p> + <p class="body"> + My background combines client-facing banking and branch operations at JPMorgan Chase — internal controls, cash management, operational compliance — with quantitative financial modeling and academic work in fixed income, derivatives pricing, machine learning, and valuation. + </p> + <p class="body"> + I bring analytical depth and an execution mindset — comfortable with financial statements, market data, and the tools that make research faster. FINRA SIE certified. Fluent in English and Vietnamese. + </p> + <div style="margin-top:18px;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)"> + <span>Certifications · <b style="color:var(--amber)">SIE</b></span> + <span>Languages · <b style="color:var(--amber)">EN · VI</b></span> </div> + </section> - <div class="prism-shots"> - <a class="shot" href="assets/prism/overview.png" target="_blank" rel="noopener"> - <img src="assets/prism/overview.png" alt="Prism overview dashboard" loading="lazy" /> - <div class="caption"><b>overview</b><span class="open">open ↗</span></div> - </a> - <a class="shot" href="assets/prism/valuation.png" target="_blank" rel="noopener"> - <img src="assets/prism/valuation.png" alt="Prism valuation dashboard" loading="lazy" /> - <div class="caption"><b>valuation</b><span class="open">open ↗</span></div> - </a> - <a class="shot" href="assets/prism/insiders.png" target="_blank" rel="noopener"> - <img src="assets/prism/insiders.png" alt="Prism insiders dashboard" loading="lazy" /> - <div class="caption"><b>insiders</b><span class="open">open ↗</span></div> - </a> - </div> - <div class="prism-body"> - <div class="left"> - <p>Compresses the research workflow into one place: live market data, financial statements, self-computed valuation ratios, comparable-company analysis, options activity, insider trades, SEC filings, and news — from initial idea to underwriting in one interface.</p> - <p>The valuation layer handles edge cases explicitly: non-meaningful P/E, negative free cash flow in DCF, and accounting-driven ratio distortions. Output is usable in real analysis, not just visually impressive.</p> - <div class="ctas"> - <a class="btn primary" href="https://prism.tylerhoang.xyz" target="_blank" rel="noopener">→ Live Demo</a> - <a class="btn" href="https://git.tylerhoang.xyz/prism" target="_blank" rel="noopener">/view_code</a> + <hr class="rule"> + + <!-- CREDENTIALS --> + <section id="credentials" class="rv"> + <div class="eyebrow">Credentials</div> + <h2 class="h2" style="font-size:36px;margin-bottom:24px">Positions held & <em>programs</em></h2> + <div class="cred-list"> + + <div class="cred"> + <div class="cred-date">EXPECTED AUG 2026</div> + <div> + <h3 class="cred-h">M.S. Financial Analytics</h3> + <div class="cred-org">CSULB · California State University, Long Beach</div> + <p class="cred-d">Coursework in fixed income, derivatives pricing, machine learning, and valuation. GPA 3.75.</p> </div> </div> - <div class="right"> - <div class="row"><span class="idx">01</span><div><h4>Research Workflow</h4><p>Move from idea generation to underwriting without bouncing across five tools.</p></div><span class="arrow">→</span></div> - <div class="row"><span class="idx">02</span><div><h4>Valuation Engine</h4><p>DCF, EV/EBITDA, and comps with explicit handling for negative earnings, EBITDA, cash flow edge cases.</p></div><span class="arrow">→</span></div> - <div class="row"><span class="idx">03</span><div><h4>Fundamentals</h4><p>Financial statements, key ratios, historical views to spot business quality and trend changes.</p></div><span class="arrow">→</span></div> - <div class="row"><span class="idx">04</span><div><h4>Options & Positioning</h4><p>Options flow, volatility context, insider activity — fundamental story vs. positioning.</p></div><span class="arrow">→</span></div> - <div class="row"><span class="idx">05</span><div><h4>Filings & Catalysts</h4><p>SEC filings and company disclosures, with direct EDGAR access for primary-source review.</p></div><span class="arrow">→</span></div> - <div class="row"><span class="idx">06</span><div><h4>Market Context</h4><p>Indices, rates, volatility, commodities, and news for the macro backdrop.</p></div><span class="arrow">→</span></div> + + <div class="cred"> + <div class="cred-date">COMPLETED</div> + <div> + <h3 class="cred-h">B.A. Business Administration / Finance</h3> + <div class="cred-org">CSUF · California State University, Fullerton</div> + <p class="cred-d">Concentration in finance with quantitative methods. GPA 3.75.</p> + </div> </div> - </div> - <div class="prism-foot"> - <span>python</span><span>streamlit</span><span>yfinance</span><span>pandas</span><span>plotly</span><span>sec-edgar-api</span><span>nginx</span><span>systemd</span> - </div> - </div> - </section> - <!-- PROJECTS --> - <section class="panel" id="projects"> - <div class="sec-head"><span class="num">02 /</span><h2>Other Projects</h2><span class="sub">academic_work.log</span></div> + <div class="cred"> + <div class="cred-date">CURRENT</div> + <div> + <h3 class="cred-h">Associate Banker</h3> + <div class="cred-org">JPMorgan Chase</div> + <p class="cred-d">Client-facing banking and branch operations: internal controls, cash management, operational compliance.</p> + </div> + </div> - <div class="proj-list"> - <div class="proj"> - <div class="idx">01</div> - <div> - <h4>Boeing Credit & Financial Statement Analysis</h4> - <div class="cat">FIXED INCOME · CREDIT · FALL 2025</div> - <p>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. Forward-looking narrative on capital structure and refinancing risk.</p> + <div class="cred"> + <div class="cred-date">CERTIFIED</div> + <div> + <h3 class="cred-h">CFA Level I Candidate · FINRA SIE</h3> + <div class="cred-org">Self-computed valuation, factor models, and quant research tooling</div> + <p class="cred-d">Python · Advanced Excel · Bloomberg Terminal.</p> + </div> </div> - <div class="tags"><span class="tag">BLOOMBERG</span><span class="tag">CREDIT</span></div> + </div> - <div class="proj"> - <div class="idx">02</div> - <div> - <h4>WMT Stock Price Prediction with LSTM</h4> - <div class="cat">MACHINE LEARNING · TIME SERIES · SPRING 2026</div> - <p>Built a Long Short-Term Memory (LSTM) neural network in Python to forecast Walmart (WMT) stock prices using historical market data. Evaluated with RMSE; visualized predicted vs. actual to assess accuracy and trend-following behavior.</p> - </div> - <div class="tags"><span class="tag">PYTHON</span><span class="tag">LSTM</span></div> + <div style="margin-top:14px;display:flex;gap:10px"> + <a class="pill" href="Tyler_Resume.pdf" target="_blank" rel="noopener">Download PDF</a> + <a class="pill" href="Tyler_Resume.docx" download>Download DOCX</a> </div> - <div class="proj"> - <div class="idx">03</div> - <div> - <h4>Monte Carlo Simulation — Derivatives Pricing</h4> - <div class="cat">DERIVATIVES · STOCHASTIC CALCULUS · SPRING 2026</div> - <p>Modeled asset price dynamics using Geometric Brownian Motion (GBM) to simulate thousands of price paths and estimate option payoffs. Validated outcomes under risk-neutral pricing.</p> + </section> + + <hr class="rule"> + + <!-- FEATURED RESEARCH (PRISM) --> + <section id="featured" class="rv"> + <div class="eyebrow">Featured Research · Spring 2026</div> + + <div class="feat"> + <div class="feat-head"> + <div> + <div class="feat-tk">PRSM</div> + <h3 class="feat-t">Investor-focused financial analysis dashboard</h3> + </div> + <div class="feat-st">SPRING 2026 · v0.4<br><span class="live">● LIVE</span></div> </div> - <div class="tags"><span class="tag">MONTE CARLO</span><span class="tag">GBM</span></div> - </div> - <div class="proj"> - <div class="idx">04</div> - <div> - <h4>Quantitative Company Analysis</h4> - <div class="cat">VALUATION · FINANCIAL MODELING · FALL 2025</div> - <p>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="feat-body"> + <div class="feat-left"> + <p class="feat-desc"> + Compresses the research workflow into one place: live market data, financial statements, self-computed valuation ratios, comparable-company analysis, options activity, insider trades, SEC filings, and news — from initial idea to underwriting in one interface. + </p> + <p class="feat-desc" style="margin-top:12px;color:var(--muted)"> + The valuation layer handles edge cases explicitly: non-meaningful P/E, negative free cash flow in DCF, and accounting-driven ratio distortions. Output is usable in real analysis, not just visually impressive. + </p> + <div class="feat-links"> + <a class="pill" href="https://prism.tylerhoang.xyz" target="_blank" rel="noopener">→ Live Demo</a> + <a class="pill" href="https://git.tylerhoang.xyz/prism" target="_blank" rel="noopener">→ View Code</a> + </div> + <div class="tags">stack · <span>python</span> · <span>streamlit</span> · <span>yfinance</span> · <span>pandas</span> · <span>plotly</span> · <span>sec-edgar-api</span> · <span>nginx</span> · <span>systemd</span></div> + <div class="feat-shots"> + <figure data-full="assets/prism/overview.png" data-cap="Prism · Overview"> + <img src="assets/prism/overview.png" alt="Prism overview dashboard" loading="lazy" /> + <figcaption>Overview · market data & news</figcaption> + </figure> + <figure data-full="assets/prism/valuation.png" data-cap="Prism · Valuation"> + <img src="assets/prism/valuation.png" alt="Prism valuation dashboard" loading="lazy" /> + <figcaption>Valuation · DCF & comps</figcaption> + </figure> + <figure data-full="assets/prism/insiders.png" data-cap="Prism · Insiders"> + <img src="assets/prism/insiders.png" alt="Prism insiders dashboard" loading="lazy" /> + <figcaption>Insiders · options & filings</figcaption> + </figure> + </div> + </div> + <div class="feat-feat"> + <div class="ff"><div class="ff-n">01</div><div class="ff-t">Research Workflow</div><div class="ff-d">Move from idea generation to underwriting without bouncing across five tools.</div></div> + <div class="ff"><div class="ff-n">02</div><div class="ff-t">Valuation Engine</div><div class="ff-d">DCF, EV/EBITDA, and comps with explicit handling for negative earnings, EBITDA, cash-flow edge cases.</div></div> + <div class="ff"><div class="ff-n">03</div><div class="ff-t">Fundamentals</div><div class="ff-d">Financial statements, key ratios, historical views to spot business quality and trend changes.</div></div> + <div class="ff"><div class="ff-n">04</div><div class="ff-t">Options & Positioning</div><div class="ff-d">Options flow, volatility context, insider activity — fundamental story vs. positioning.</div></div> + <div class="ff"><div class="ff-n">05</div><div class="ff-t">Filings & Catalysts</div><div class="ff-d">SEC filings and company disclosures, with direct EDGAR access for primary-source review.</div></div> + <div class="ff"><div class="ff-n">06</div><div class="ff-t">Market Context</div><div class="ff-d">Indices, rates, volatility, commodities, and news for the macro backdrop.</div></div> + </div> </div> - <div class="tags"><span class="tag">DCF</span><span class="tag">EXCEL</span></div> </div> + </section> + + <div class="lightbox" id="lightbox" aria-hidden="true" role="dialog" aria-modal="true"> + <span class="lightbox-close" id="lb-close">CLOSE ✕</span> + <img src="" alt="" id="lb-img" /> + <div class="lightbox-cap" id="lb-cap"></div> </div> - </section> - <!-- SKILLS --> - <section class="panel" id="skills"> - <div class="sec-head"><span class="num">03 /</span><h2>Skills</h2><span class="sub">stack.json</span></div> + <hr class="rule"> - <div class="skills-grid"> - <div class="sk"> - <h4>// programming & tools</h4> - <ul> - <li>python <span class="dot-c">●●●●●</span></li> - <li>pandas / numpy <span class="dot-c">●●●●●</span></li> - <li>scikit-learn <span class="dot-c">●●●●○</span></li> - <li>tensorflow / keras <span class="dot-c">●●●○○</span></li> - <li>statsmodels <span class="dot-c">●●●○○</span></li> - <li>jupyter · linux · git <span class="dot-c">●●●●○</span></li> - </ul> - </div> - <div class="sk"> - <h4>// finance & analysis</h4> - <ul> - <li>advanced excel <span class="dot-c">●●●●●</span></li> - <li>bloomberg terminal <span class="dot-c">●●●●●</span></li> - <li>dcf / comps <span class="dot-c">●●●●●</span></li> - <li>fixed income <span class="dot-c">●●●●○</span></li> - <li>derivatives <span class="dot-c">●●●○○</span></li> - <li>credit analysis <span class="dot-c">●●●●○</span></li> - </ul> - </div> - <div class="sk"> - <h4>// quantitative methods</h4> - <ul> - <li>ols regression <span class="dot-c">●●●●●</span></li> - <li>factor models <span class="dot-c">●●●○○</span></li> - <li>lstm / gru <span class="dot-c">●●●○○</span></li> - <li>monte carlo <span class="dot-c">●●●●○</span></li> - <li>stochastic calculus <span class="dot-c">●●●○○</span></li> - <li>capm / beta <span class="dot-c">●●●●○</span></li> - </ul> - </div> - </div> - </section> + <!-- RESEARCH / OTHER PROJECTS --> + <section id="research" class="rv"> + <div class="eyebrow">Research · academic_work.log</div> + <h2 class="h2" style="font-size:36px;margin-bottom:22px">Selected research</h2> + <div class="proj-grid"> + + <article class="proj"> + <div class="proj-no">01</div> + <h3 class="proj-t">Boeing Credit & Financial Statement Analysis</h3> + <div class="proj-meta">Fixed Income · Credit · Fall 2025</div> + <p class="proj-d">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. Forward-looking narrative on capital structure and refinancing risk.</p> + <div class="proj-tags">tools · <span>Bloomberg</span> · <span>Credit</span></div> + </article> + + <article class="proj"> + <div class="proj-no">02</div> + <h3 class="proj-t">WMT Stock Price Prediction with LSTM</h3> + <div class="proj-meta">Machine Learning · Time Series · Spring 2026</div> + <p class="proj-d">Built a Long Short-Term Memory (LSTM) neural network in Python to forecast Walmart (WMT) stock prices using historical market data. Evaluated with RMSE; visualized predicted vs. actual to assess accuracy and trend-following behavior.</p> + <div class="proj-tags">tools · <span>Python</span> · <span>LSTM</span></div> + <div style="margin-top:11px"><a class="pill" href="https://git.tylerhoang.xyz/wmt-stock-prediction.git" target="_blank" rel="noopener">→ View Code</a></div> + </article> + + <article class="proj"> + <div class="proj-no">03</div> + <h3 class="proj-t">Monte Carlo Simulation — Derivatives Pricing</h3> + <div class="proj-meta">Derivatives · Stochastic Calculus · Spring 2026</div> + <p class="proj-d">Modeled asset price dynamics using Geometric Brownian Motion (GBM) to simulate thousands of price paths and estimate option payoffs. Validated outcomes under risk-neutral pricing.</p> + <div class="proj-tags">methods · <span>Monte Carlo</span> · <span>GBM</span></div> + </article> - <!-- RESUME --> - <section class="panel" id="resume"> - <div class="sec-head"><span class="num">04 /</span><h2>Resume</h2><span class="sub">credentials.log</span></div> + <article class="proj"> + <div class="proj-no">04</div> + <h3 class="proj-t">Quantitative Company Analysis</h3> + <div class="proj-meta">Valuation · Financial Modeling · Fall 2025</div> + <p class="proj-d">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="proj-tags">methods · <span>DCF</span> · <span>Excel</span></div> + </article> - <div class="resume-grid"> - <div class="resume-cell"> - <h4>M.S. Financial Analytics</h4> - <div class="where">CSULB · California State University, Long Beach</div> - <div class="when">Expected Aug 2026</div> - <p>Coursework in fixed income, derivatives pricing, machine learning, and valuation.</p> </div> - <div class="resume-cell"> - <h4>B.A. Business Administration / Finance</h4> - <div class="where">CSUF · California State University, Fullerton</div> - <div class="when">Completed</div> - <p>Concentration in finance with quantitative methods.</p> + </section> + + <hr class="rule"> + + <!-- CAPABILITIES / SKILLS --> + <section id="capabilities" class="rv"> + <div class="eyebrow">Capabilities · stack.json</div> + <h2 class="h2" style="font-size:36px;margin-bottom:24px">Capabilities</h2> + + <div class="skill-block"> + <div class="skill-cap">programming & tools</div> + <div class="skill-row"><div class="skill-n">Python</div><div class="dots" data-level="5"></div></div> + <div class="skill-row"><div class="skill-n">Pandas / NumPy</div><div class="dots" data-level="5"></div></div> + <div class="skill-row"><div class="skill-n">Scikit-learn</div><div class="dots" data-level="4"></div></div> + <div class="skill-row"><div class="skill-n">TensorFlow / Keras</div><div class="dots" data-level="3"></div></div> + <div class="skill-row"><div class="skill-n">Statsmodels</div><div class="dots" data-level="3"></div></div> + <div class="skill-row"><div class="skill-n">Jupyter · Linux · Git</div><div class="dots" data-level="4"></div></div> </div> - <div class="resume-cell"> - <h4>Associate Banker</h4> - <div class="where">JPMorgan Chase</div> - <div class="when">Current</div> - <p>Client-facing banking and branch operations: internal controls, cash management, operational compliance.</p> + + <div class="skill-block"> + <div class="skill-cap">finance & analysis</div> + <div class="skill-row"><div class="skill-n">Advanced Excel</div><div class="dots" data-level="5"></div></div> + <div class="skill-row"><div class="skill-n">Bloomberg Terminal</div><div class="dots" data-level="5"></div></div> + <div class="skill-row"><div class="skill-n">DCF / Comps</div><div class="dots" data-level="5"></div></div> + <div class="skill-row"><div class="skill-n">Fixed Income</div><div class="dots" data-level="4"></div></div> + <div class="skill-row"><div class="skill-n">Derivatives</div><div class="dots" data-level="3"></div></div> + <div class="skill-row"><div class="skill-n">Credit Analysis</div><div class="dots" data-level="4"></div></div> </div> - <div class="resume-cell"> - <h4>Certifications & Tools</h4> - <div class="where">CFA® L1 Candidate · FINRA SIE</div> - <div class="when">Python · Advanced Excel · Bloomberg</div> - <p>Self-computed valuation, factor models, and quant research tooling.</p> + + <div class="skill-block"> + <div class="skill-cap">quantitative methods</div> + <div class="skill-row"><div class="skill-n">OLS Regression</div><div class="dots" data-level="5"></div></div> + <div class="skill-row"><div class="skill-n">Factor Models</div><div class="dots" data-level="3"></div></div> + <div class="skill-row"><div class="skill-n">LSTM / GRU</div><div class="dots" data-level="3"></div></div> + <div class="skill-row"><div class="skill-n">Monte Carlo</div><div class="dots" data-level="4"></div></div> + <div class="skill-row"><div class="skill-n">Stochastic Calculus</div><div class="dots" data-level="3"></div></div> + <div class="skill-row"><div class="skill-n">CAPM / Beta</div><div class="dots" data-level="4"></div></div> </div> - </div> - <div class="resume-actions"> - <a class="btn primary" href="Tyler_Resume.pdf">Download PDF</a> - <a class="btn" href="Tyler_Resume.docx">Download DOCX</a> - </div> - </section> + </section> - <!-- CONTACT --> - <section class="panel contact" id="contact"> - <div class="sec-head"><span class="num">05 /</span><h2>Contact</h2><span class="sub">send_signal.sh</span></div> + <hr class="rule"> - <div class="contact-grid"> - <div> - <p>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="links"> - <a href="mailto:tyler@tylerhoang.xyz">→ tyler@tylerhoang.xyz</a> - <a href="https://linkedin.com/in/thuyghoang" target="_blank" rel="noopener">→ linkedin.com/in/thuyghoang</a> - <a href="https://git.tylerhoang.xyz" target="_blank" rel="noopener">→ git.tylerhoang.xyz</a> + <!-- CONTACT --> + <section id="contact" class="rv"> + <div class="eyebrow">Contact · send_signal.sh</div> + <div class="contact-wrap"> + <p class="contact-msg">Actively pursuing opportunities in <em>asset management, investment research,</em> 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"> + <a class="clink" id="email-link" href="#"><span>→ EMAIL</span><span class="arr">open ↗</span></a> + <a class="clink" href="https://linkedin.com/in/thuyghoang" target="_blank" rel="noopener"><span>→ linkedin.com/in/thuyghoang</span><span class="arr">open ↗</span></a> + <a class="clink" href="https://git.tylerhoang.xyz" target="_blank" rel="noopener"><span>→ git.tylerhoang.xyz</span><span class="arr">open ↗</span></a> </div> + + <form id="contact-form" class="form-grid" novalidate> + <div class="field"> + <label for="cf-name">Name</label> + <input id="cf-name" name="name" type="text" placeholder="name" autocomplete="name" required> + </div> + <div class="field"> + <label for="cf-email">Email</label> + <input id="cf-email" name="email" type="email" placeholder="email" autocomplete="email" required> + </div> + <div class="field full"> + <label for="cf-message">Message</label> + <textarea id="cf-message" name="message" placeholder="message" required></textarea> + </div> + <div class="form-foot full"> + <button class="send" id="cf-submit" type="submit">→ SEND MESSAGE</button> + <span class="status" id="cf-status" role="status" aria-live="polite"></span> + </div> + </form> </div> - <form id="contact-form" novalidate> - <input id="cf-name" name="name" type="text" placeholder="name" autocomplete="name" required /> - <input id="cf-email" name="email" type="email" placeholder="email" autocomplete="email" required /> - <textarea id="cf-message" name="message" placeholder="message" required></textarea> - <div class="form-foot"> - <button id="cf-submit" class="btn primary" type="submit">→ SEND MESSAGE</button> - <span id="cf-status" class="status" role="status" aria-live="polite"></span> - </div> - </form> - </div> - </section> + </section> + + </main> </div> <footer> - <div class="wrap"> - <span>© 2026 · tylerhoang.xyz</span> - <span>END_OF_DOCUMENT · 0x00</span> - </div> + <span>© 2026 · <b>tylerhoang.xyz</b></span> + <span>END_OF_DOCUMENT · 0x00</span> </footer> <script> - // Contact form: posts to the same /api/contact endpoint the previous site used. + // ---- Ticker data ---- + const tape = [ + ["SPX","5,238.42","+0.41%","up"], + ["NDX","18,427.10","+0.62%","up"], + ["DJI","39,118.86","−0.18%","dn"], + ["VIX","14.27","−2.31%","dn"], + ["US10Y","4.182%","+3bp","up"], + ["DXY","103.94","+0.12%","up"], + ["BTC","63,840","+1.18%","up"] + ]; + function render(){ + const f = s => `<span class="tape-item"><span class="tape-sym">${s[0]}</span><span class="tape-px">${s[1]}</span><span class="tape-chg ${s[3]}">${s[2]}</span></span><span class="tape-sep">·</span>`; + let html = tape.map(f).join(''); + document.getElementById('track').innerHTML = html + html; // duplicate for seamless loop + } + render(); + + // ---- Skill dots ---- + document.querySelectorAll('.dots').forEach(d=>{ + const lv = +d.dataset.level; + let s=''; + for(let i=0;i<5;i++) s += i<lv ? '<span class="d-on">●</span>' : '<span class="d-off">●</span>'; + d.innerHTML = s; + }); + + // ---- Reveal on scroll ---- + const io = new IntersectionObserver((es)=>{ + es.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} }); + },{rootMargin:"0px 0px -8% 0px", threshold:0.08}); + document.querySelectorAll('.rv').forEach(el=>io.observe(el)); + + // ---- Email link (obfuscated; assembled at runtime to deter scraping) ---- + (function () { + const link = document.getElementById('email-link'); + if (!link) return; + const u = 'tyler', d = 'tylerhoang.xyz'; + link.href = 'mailto:' + u + '@' + d; + })(); + + // ---- Prism screenshot lightbox ---- + (function () { + const lb = document.getElementById('lightbox'); + const lbImg = document.getElementById('lb-img'); + const lbCap = document.getElementById('lb-cap'); + const lbClose = document.getElementById('lb-close'); + if (!lb) return; + let lastFocused = null; + + function open(src, cap) { + lastFocused = document.activeElement; + lbImg.src = src; + lbImg.alt = cap || ''; + lbCap.textContent = cap || ''; + lb.classList.add('open'); + lb.setAttribute('aria-hidden', 'false'); + document.body.style.overflow = 'hidden'; + lbClose.focus(); + } + function close() { + lb.classList.remove('open'); + lb.setAttribute('aria-hidden', 'true'); + document.body.style.overflow = ''; + if (lastFocused) lastFocused.focus(); + } + + document.querySelectorAll('.feat-shots figure').forEach(fig => { + fig.addEventListener('click', () => { + open(fig.dataset.full, fig.dataset.cap); + }); + }); + + lb.addEventListener('click', e => { + // clicking outside the image closes + if (e.target === lb || e.target === lbClose) close(); + }); + document.addEventListener('keydown', e => { + if (e.key === 'Escape' && lb.classList.contains('open')) close(); + }); + })(); + + // ---- Contact form (posts to the same /api/contact endpoint as the original site) ---- (function () { const form = document.getElementById('contact-form'); if (!form) return; @@ -554,6 +651,19 @@ } }); })(); + const links = [...document.querySelectorAll('.nav a')]; + const secs = links.map(l=>document.querySelector(l.getAttribute('href'))); + const spy = new IntersectionObserver((es)=>{ + es.forEach(e=>{ + if(e.isIntersecting){ + const idx = secs.indexOf(e.target); + links.forEach(l=>l.classList.remove('cur')); + if(idx>=0) links[idx].classList.add('cur'); + } + }); + },{rootMargin:"-50% 0px -45% 0px", threshold:0}); + secs.forEach(s=>s&&spy.observe(s)); </script> </body> </html> + |