Portfolio Website

A modern, responsive portfolio website built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion.

🌟 Features

• Modern Stack: Built with Next.js 14, TypeScript, and Tailwind CSS
• Responsive Design: Looks great on all devices
• Dark Mode: Automatic and manual theme switching
• Animations: Smooth animations using Framer Motion
• Blog Support: MDX-based blog with syntax highlighting
• SEO Optimized: Meta tags and OpenGraph support
• Performance: Optimized for Core Web Vitals
• Type Safe: Full TypeScript support
• Component Library: Built with shadcn/ui components

🚀 Quick Start

1. Clone the repository:

git clone https://github.com/yourusername/portfolio.git

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

📁 Project Structure

├── src/
│   ├── app/                 # Next.js app directory
│   ├── components/          # React components
│   │   ├── magicui/        # Animation components
│   │   └── ui/             # UI components
│   ├── data/               # Data and content
│   └── lib/                # Utility functions
├── content/                # MDX blog posts
├── public/                 # Static assets
└── styles/                # Global styles

🛠️ Built With

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• Framer Motion - Animations
• shadcn/ui - UI components
• MDX - Blog content
• Radix UI - Headless UI components

📝 Blog

The blog is powered by MDX. To add a new blog post:

1. Create a new .mdx file in the content directory
2. Add frontmatter with title, date, and summary
3. Write your content in MDX format

Example:

---
title: "My New Post"
publishedAt: "2024-01-01"
summary: "A brief summary of the post"
---

Your content here...

🎨 Customization

1. Update src/data/resume.tsx with your information
2. Modify theme colors in tailwind.config.ts
3. Add your own components in src/components
4. Customize animations in src/components/magicui

📱 Components

The project includes several reusable components:

• BlurFade: Fade-in animation with blur effect
• BlurFadeText: Text animation with character-by-character support
• Dock: macOS-style dock component
• ProjectCard: Card component for showcasing projects
• ResumeCard: Card component for work experience

🔧 Development

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

1. Fork the repository
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

📞 Contact

For any questions or feedback, feel free to reach out:

• Twitter: @vedantsx
• Email: [email protected]
• Website: vedant-dev.tech