A modern, responsive portfolio website built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion.
- Responsive Design: Looks great on all devices
- Dark/Light Mode: Automatic theme switching based on system preferences
- Blog Support: MDX-based blog with syntax highlighting
- Video Gallery: YouTube video integration
- Gadgets Shop: Curated list of recommended products
- Animations: Smooth page transitions and micro-interactions
- GitHub Integration: Live GitHub contribution graph
- SEO Optimized: Meta tags and OpenGraph support
- Performance Focused: Optimized for Core Web Vitals
- Framework: Next.js 14
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Animations: Framer Motion
- Content: MDX
- Deployment: Vercel
- Clone the repository:
git clone https://github.com/StarKnightt/prasendev
- Install dependencies:
npm install
- Run the development server:
npm run dev
- Open http://localhost:3000 in your browser.
- Update
src/data/resume.tsx
with your personal information. - Add your blog posts in the
content
directory as MDX files. - Update
src/data/products.ts
to add your recommended products. - Customize theme colors in
tailwind.config.ts
.
├── content/ # Blog posts (MDX)
├── public/ # Static assets
├── src/
│ ├── app/ # Next.js app router pages
│ ├── components/ # React components
│ ├── data/ # Data files and types
│ └── lib/ # Utility functions
The theme can be customized in tailwind.config.ts
:
theme: {
extend: {
colors: {
primary: {...},
secondary: {...},
}
}
}
Update the following files to customize content:
src/data/resume.tsx
: Personal information and experiencesrc/data/products.ts
: Recommended productscontent/*.mdx
: Blog posts
Create a new MDX file in the content
directory:
---
title: "Your Post Title"
publishedAt: "2024-01-01"
summary: "Brief description of your post"
---
Your content here...
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Lint code
npm run lint
This website is PWA-ready with:
- Service Worker support
- Offline functionality
- Install prompt
- App manifest
- Fork the repository
- 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.
- shadcn/ui for the beautiful UI components
- Framer Motion for animations
- Tailwind CSS for styling
- Next.js for the framework
Your Name - @yourusername
Project Link: Try it here