>
skill.md — Build your own Claude Code-style site
# 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
```