A modern, animated portfolio website built with Next.js, TypeScript, Tailwind CSS, and Framer Motion.
- Node.js: >=18.x
- Next.js: 13.5.x
- Responsive design that works across all devices
- Animated particle background with react-tsparticles
- Smooth page transitions and component animations with framer-motion
- Dark/light mode toggle with theme persistence
- Configuration-driven content management
- Interactive UI components with subtle animations
- Performance optimized with Next.js
- Framework: Next.js 13.5 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Animations: Framer Motion
- Icons: Lucide React
- Form Validation: Zod
- Particles: react-tsparticles
├── app/ # Next.js app directory
├── components/ # UI components
│ ├── sections/ # Page sections
│ └── ui/ # shadcn/ui components
├── config/ # Configuration files
│ ├── personal.json # Personal information
│ ├── skills.json # Skills data
│ ├── projects.json # Projects data
│ ├── experience.json # Experience data
│ ├── social.json # Social links
│ ├── themes.json # Theme configurations
│ └── types.ts # TypeScript interfaces
├── lib/ # Utility functions
├── hooks/ # Custom React hooks
└── public/ # Static assets
Edit the config/personal.json file to update your personal details:
{
"name": "Your Name",
"title": "Your Title",
"bio": "Your bio...",
"email": "your.email@example.com",
"location": "Your Location",
"resumeUrl": "/path-to-resume.pdf"
}Edit the config/skills.json file to update your skills:
[
{
"name": "Skill Name",
"level": 90,
"category": "frontend"
},
...
]Edit the config/projects.json file to update your projects:
[
{
"id": "project-1",
"title": "Project Title",
"description": "Short description",
"longDescription": "Detailed description",
"tags": ["Tag1", "Tag2"],
"imageUrl": "/path-to-image.jpg",
"liveUrl": "https://example.com",
"githubUrl": "https://github.com/yourusername/project",
"featured": true
},
...
]Edit the config/experience.json file to update your work and education experience:
[
{
"id": "exp-1",
"company": "Company Name",
"position": "Your Position",
"duration": "2021 - Present",
"startDate": "2021年01月01日",
"description": "Description of role...",
"technologies": ["Tech1", "Tech2"],
"type": "work"
},
...
]Edit the config/social.json file to update your social links:
[
{
"platform": "GitHub",
"url": "https://github.com/yourusername",
"icon": "Github"
},
...
]Edit the config/themes.json file to customize the theme colors and particle effects:
{
"themes": [
{
"name": "light",
"colors": {
"primary": "hsl(204, 100%, 40%)",
...
},
"particleConfig": {
"enabled": true,
"particleCount": 35,
...
}
},
...
]
}- Clone the repository
- Install dependencies:
npm install - Run the development server:
npm run dev - Open http://localhost:3000 in your browser
To build the project for production, run:
npm run build
This will generate static files in the out directory, which can be deployed to any static hosting provider.
This project is configured for static export, making it compatible with various hosting platforms like Vercel, Netlify, GitHub Pages, etc.
The portfolio is designed with accessibility in mind, following WCAG 2.1 AA standards. Key features include:
- Semantic HTML
- Keyboard navigation
- ARIA attributes
- Sufficient color contrast
- Reduced motion support