🎬 VibeHome

A cinematic, scroll-driven personal homepage that vibes with you.

中文 | English

---

Your story. Scrolled. Felt. Remembered.

---

✨ Why VibeHome?

Most personal homepages are... static. Boring. A photo, some text, a few links. Yawn.

VibeHome is different:

Feature	What it feels like
🎥 Cinematic Intro	Your avatar floats, shrinks, morphs as the user scrolls — like a movie opening
🌊 Parallax Projects	Two-column staggered scroll with hover-reveal cards
🏆 Honors Grid	Animated cards with subtle glow-on-hover
📈 Milestones Timeline	Scroll-activated timeline with a glowing progress line
🎨 Atmospheric Design	Floating blobs, gradient overlays, glass-morphism — your page breathes
⚡ Buttery Smooth	Powered by Lenis for silk-smooth scrolling
📝 One Config File	All your info in site.config.json — zero code editing needed

---

🚀 Quick Start

Prerequisites

• Node.js ≥ 18
• npm / pnpm / yarn

1. Clone & Install

git clone https://github.com/FlashingChen2024/VibeHome.git
cd VibeHome
npm install

2. Edit Your Config

Open site.config.json and fill in your info — that's the only file you need to touch:

{
  "site": {
    "title": "Alex Chen - Homepage",
    "pageTitle": "Alex Chen's Homepage"
  },
  "profile": {
    "name": "Alex Chen",
    "avatar": "https://github.com/alexchen.png",
    "fallbackAvatar": "https://picsum.photos/seed/alex/400/400",
    "tags": ["Full-Stack Explorer", "Design Lover", "Open Source"],
    ...
  }
}

3. Run & Preview

npm run dev

Open http://localhost:3000 — your cinematic homepage is alive! 🎉

4. Build for Production

npm run build

Deploy the dist/ folder to any static host (Vercel, Netlify, Cloudflare Pages, GitHub Pages...).

---

📖 Full Configuration Guide

The magic happens in site.config.json. Here's a detailed breakdown:

🌐 Site Info

"site": {
  "title": "Your Name - Homepage",
  "pageTitle": "Your Name's Homepage"
}

Field	Description
title	Used in metadata / SEO
pageTitle	The browser tab title

👤 Profile (Hero Section)

"profile": {
  "name": "Your Name",
  "avatar": "https://github.com/your-username.png",
  "fallbackAvatar": "https://picsum.photos/seed/default/400/400",
  "tags": ["Tag One", "Tag Two", "Tag Three"],
  "viewpoint": {
    "quote": "\"Your core belief goes here...\"",
    "paragraphs": ["First paragraph about yourself...", "Second paragraph about your interests..."]
  }
}

Field	Description
name	Displayed as the giant hero heading
avatar	Your profile photo URL (shown in a glowing circle)
fallbackAvatar	Fallback image if avatar fails to load
tags	Array of identity tags shown below your name (separated by /)
viewpoint.quote	Your core belief quote — supports HTML tags for styling
viewpoint.paragraphs	1–2 paragraphs of self-introduction

💡 Tip: The quote field supports raw HTML! You can use <span class="..."> to add gradient highlights, just like the default template.

🛠️ Projects

"projects": [
  {
    "title": "Project Name",
    "desc": "Short project description",
    "link": "https://example.com/project",
    "platform": "WEB APP",
    "img": "https://images.unsplash.com/photo-xxx?auto=format&fit=crop&w=800&q=80"
  }
]

Field	Description
title	Project name (large serif heading)
desc	Short description shown on hover
link	Click-through URL
platform	Tag badge text (e.g. WEB APP, GITHUB, AI AGENT)
img	Background image URL — recommend Unsplash or your own screenshots

🎨 Image Tip: Use dark-toned images for best results — the overlay effect works best with moody, high-contrast photos.

🏆 Honors

"honors": [
  {
    "title": "Honor Title",
    "subtitle": "Honor Category",
    "date": "2026/04",
    "icon": "star",
    "color": "text-purple-400"
  }
]

Field	Description
title	Honor name
subtitle	Category or context
date	Date string
icon	Icon type: "star", "trophy", or "medal"
color	Tailwind text color class for the icon

📅 Milestones

"milestones": [
  { "date": "2026 / 04", "title": "Milestone One", "desc": "What happened..." }
]

Shown as an animated vertical timeline. Add as many as you like — the glowing line grows as you scroll.

🦶 Footer

"footer": {
  "slogan": "Keep<br/><span class=\"...\">Hacking.</span>",
  "tags": ["Tag1", "Tag2", "Tag3"],
  "socials": [
    { "label": "GITHUB / @your-username", "url": "https://github.com/your-username" }
  ],
  "contacts": [
    { "label": "HELLO@EXAMPLE.COM", "url": "mailto:hello@example.com" }
  ],
  "location": "Your City · Your Country",
  "copyright": "© 2026 YOUR NAME.",
  "watermark": "Your School / Your Focus"
}

Field	Description
slogan	Big footer statement — supports HTML
tags	Skill / identity tags
socials	Social links with display labels
contacts	Email or contact links
location	Location with 📍 icon
copyright	Copyright text
watermark	Giant faint text at the very bottom of the page

---

🎨 Customization Tips

Change Accent Colors

Edit src/index.css — the @theme block:

@theme {
  --color-accent: #00f0ff;    /* Primary accent (cyan) */
  --color-accent-2: #7000ff;  /* Secondary accent (purple) */
}

Change Fonts

@theme {
  --font-serif: "Georgia", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", monospace;
}

Use Your Own Images

Replace Unsplash URLs with your own. For best visual effect:

• Use dark-toned or moody images
• Recommended aspect ratio: 4:3
• Recommended width: 800px+

---

🧩 Tech Stack

Tech	Role
React 19	UI framework
Tailwind CSS 4	Utility-first styling
Motion	Scroll animations & transitions
Lenis	Smooth scroll engine
Lucide	Icon library
Vite	Build tool

---

📁 Project Structure

VibeHome/
├── site.config.json    ← 🎯 Your only edit target
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── src/
    ├── main.tsx         Entry point
    ├── App.tsx          All components
    └── index.css        Theme & global styles

---

🌍 Deployment

Vercel (Recommended)

npm i -g vercel
vercel

Netlify

npm run build
# Upload dist/ folder

GitHub Pages

npm run build
# Push dist/ to gh-pages branch

Cloudflare Pages / Any Static Host

Just point the build command to npm run build and output directory to dist/.

---

🤝 Contributing

Contributions are welcome! Feel free to:

1. 🍴 Fork the repo
2. 🌿 Create your feature branch (git checkout -b feature/amazing-feature)
3. 💾 Commit your changes (git commit -m 'Add amazing feature')
4. 📤 Push to the branch (git push origin feature/amazing-feature)
5. 🎉 Open a Pull Request

---

📄 License

This project is licensed under the MIT License — feel free to use, modify, and distribute.

🙏 A tiny request: please keep the "Built with VibeHome" footer link. It's a small credit that means a lot! 💜

---

Made with 💜 by FlashingChen

Vibe it. Ship it. Own it. 🚀