# Claude Code Personal Site
Build a personal academic/portfolio website styled like the Claude Code terminal UI.
## Prompt
> Build me a single-page personal website with a Claude Code terminal aesthetic.
> Use plain HTML + CSS + JS (no frameworks). It should include:
>
> 1. **Loading animation**: A terminal-style loader with braille spinners
> (⣋⠙⠹...), typed command text, task checklist with
> checkmarks, then fade into the main site.
>
> 2. **Dark terminal theme**: Dark navy background (#111827), monospace fonts,
> amber accents (#d97706), indigo links (#818cf8), green highlights (#4ade80),
> cyan badges (#22d3ee). Sticky frosted-glass nav bar.
>
> 3. **Profile section**: Grid layout — avatar + links on left, terminal-block
> bio card on right (with header bar like a code editor tab).
>
> 4. **Research journey timeline**: Vertical line with gradient, colored nodes
> (green=new, cyan=highlight), connector labels between items showing how
> each phase led to the next.
>
> 5. **Compact publication list**: 4-column grid rows
> (venue | name+tag | blurb | links). Color-coded venues — cyan for top
> venues, amber for awards. Pulsing green "New" badges.
>
> 6. **Staggered reveal**: Content fades in with translateY after loader
> completes, with incremental transition-delays.
>
> Host on GitHub Pages with a `.nojekyll` file.
## Key CSS Variables
```css
--bg: #111827; --accent: #d97706;
--bg-surface: #1a1f2e; --link: #818cf8;
--bg-card: #1f2937; --green: #4ade80;
--border: #2d3748; --cyan: #22d3ee;
--text: #e0ddd5; --purple: #c084fc;
```
## File Structure
```
index.html ← entire site in one file
assets/css/style.css ← all styles
assets/js/main.js ← loader animation + smooth scroll
.nojekyll ← skip Jekyll on GitHub Pages
```