A stunning, modern portfolio website built with Next.js 16, featuring advanced animations, centralized configuration, and a minimal design aesthetic. Designed for developers who want a professional presence without the hassle.
- 🎨 Modern & Minimalist Design: Clean aesthetics with a focus on typography and whitespace.
- ⚙️ Centralized Configuration: Manage all content (text, links, projects) from a single
settings.jsonfile. - ⚡ High Performance: Optimized for speed with Next.js 16, achieving 95+ Lighthouse scores.
- 🎬 Advanced Animations: Smooth page transitions, scroll reveals, and interactive elements using Framer Motion.
- 📱 Fully Responsive: Looks perfect on all devices, from mobile phones to large desktops.
- 🔍 SEO Optimized: Built-in metadata management for better search engine visibility.
- 🧩 Component-Based: Modular architecture for easy maintenance and scalability.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: TailwindCSS 4
- Animations: Framer Motion
- Icons: Lucide React
- Fonts: Geist
The easiest way to deploy is using Vercel.
- Push your code to a GitHub repository.
- Go to Vercel and "Add New Project".
- Import your repository.
- Click Deploy.
The entire content of the website is driven by the settings.json file. You don't need to touch the code to update your information!
Open settings.json and modify the values:
{
"personal": {
"name": "Your Name",
"title": "Full Stack Developer",
"email": "[email protected]",
// ...
},
"social": {
"github": "https://github.com/yourusername",
"linkedin": "https://linkedin.com/in/yourusername"
// ...
},
"projects": [
// Add your projects here
]
}To change the color theme, edit app/globals.css:
:root {
--background: #0a0a0a; /* Main background color */
--foreground: #f5f5f5; /* Main text color */
--accent: #ffffff; /* Accent color for highlights */
--muted: #6b7280; /* Muted text color */
}simple-portfolio/
├── app/
│ ├── components/ # UI Components (Hero, About, Projects, etc.)
│ ├── globals.css # Global styles & theme variables
│ ├── layout.tsx # Root layout & SEO
│ └── page.tsx # Main entry point
├── public/ # Static assets (images, icons)
├── settings.json # ⚡ Main Configuration File
├── next.config.ts # Next.js config
├── tailwind.config.ts # Tailwind config
└── tsconfig.json # TypeScript config
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Created with ❤️ by Waylay