A modern, feature-rich developer portfolio and blog built with Vue 3, Vite, and ViteSSG. This project serves as a personal website to showcase projects, blog posts, notes, and skills, with a focus on performance, scalability, and developer experience.
- Portfolio & Projects: Highlight your work, skills, and experience.
- Blog & Notes: Write and organize posts and notes in Markdown.
- Modern UI/UX: Responsive, accessible, and visually appealing design.
- Dark/Light Theme Toggle: Seamless theme switching.
- 3D Animated Skill Cloud: Interactive visualization of skills using Three.js.
- Fast Static Site Generation: Powered by ViteSSG for optimal performance.
- Auto-imported Components & Routes: Minimal boilerplate, auto-discovery of pages/components.
- SEO & Social Meta: Optimized for search engines and social sharing.
- Vue 3: Composition API, Single File Components
- Vite: Lightning-fast dev/build tool
- ViteSSG: Static Site Generation
- UnoCSS: Utility-first CSS engine
- Three.js: 3D graphics for the Skill Cloud
- Markdown: Blog, notes, and content pages
- Vue Router: File-based routing (auto-generated)
- Netlify: Deployment-ready (with
netlify.toml)
- Node.js v18+ recommended
- npm or yarn
npm install
# or
yarn installnpm run dev
# or
yarn devApp runs at http://localhost:3000
npm run build
# or
yarn buildThe static site will be generated in dist/.
npm run lint
npm run lint:fix- Content: Edit Markdown files in
pages/for posts, notes, and project info. - Skills: Update the
skillsarray inpages/index.mdto change the Skill Cloud. - Styling: Adjust UnoCSS and CSS files in
src/assets/. - Components: Add or modify Vue components in
src/components/.
- Netlify: Ready for one-click deployment. Edit
netlify.tomlif needed. - Static Hosting: Upload the
dist/folder to any static host (Vercel, GitHub Pages, etc).
The content of this project itself is licensed under the Creative Commons Attribution 4.0 International License, and the underlying source code used to format and display that content is licensed under the MIT license.
- Inspired by Anthony Fu's Portfolio
- Uses open source libraries: Vue, Vite, UnoCSS, Three.js, and more