Bio site
This repo is my personal portfolio: one long scrolling page with a hero, skills, projects, experience, and a bit of “who I am” at the bottom. I wanted something fast, static, and easy to tweak without a CMS—just TypeScript content files and Vue components.
If you landed here to fork it for yourself, the product spec lives in PRD/PRDs/Bio Site PRD.template.md. Copy that file, fill it in locally, and keep anything too specific for public GitHub out of the tracked tree (see .gitignore).
What’s inside
- Vue 3 + Vite for the UI
- Tailwind for layout and color
- GSAP for scroll-triggered section reveals (loaded on demand so the first paint stays light)
- Shipped as static HTML/JS/CSS in
dist/—fine for Netlify-style hosts, GitHub Pages, or a tiny nginx container (seeDockerfile)
Run it locally
You’ll want Node 20+ (22 matches CI/Docker).
npm install
npm run dev
Vite will print a URL—usually http://localhost:5173.
Build for production
npm run build
npm run preview
Output is in dist/.
Docker (optional)
The container only serves prebuilt files with nginx; there is no Node process at runtime.
docker build -t bio-site .
docker run --rm -p 8080:80 bio-site
Or with Compose (defaults to host port 8080):
docker compose up -d --build
If the site is not at the root URL (e.g. GitHub Pages project pages), set a base path at build time—see VITE_BASE in docker-compose.yml and the GitHub Pages note below.
GitHub Pages (project site)
If the live URL looks like https://username.github.io/repo-name/, set repo variable VITE_BASE to /repo-name/ (Actions → Variables), enable Pages from Actions, and use .github/workflows/pages.yml. For a user site at the repo root, leave VITE_BASE unset.
Make it yours
| What | Where |
|---|---|
| Name, links, email, tagline | src/content/site.ts |
| Skills | src/content/skills.ts |
| Projects | src/content/projects.ts |
| Roles | src/content/experience.ts |
| Avatar | Replace or point public/ assets from HeroSection.vue |
| Resume link | Add public/resume.pdf on your machine before build/deploy; it is gitignored so a public clone does not ship your PDF (the download link still works in your own builds) |
| SEO / social | index.html (title, description, Open Graph, og:url) |
License
Private / personal use—change the license if you fork for something public.