OS Portfolio

A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS. Features AI-powered interactions, dark/light theme support, and a clean, professional design.

✨ Features

• 🎨 Modern Design: Clean, responsive design with dark/light theme support
• 🤖 AI Integration: AI-powered features and interactions
• 📱 Mobile First: Fully responsive design that works on all devices
• ⚡ Performance: Built with Next.js for optimal performance
• 🎯 TypeScript: Full TypeScript support for better development experience
• 🎨 Tailwind CSS: Utility-first CSS framework for rapid UI development
• 📝 MDX Support: Write content in Markdown with React components
• 📧 Contact Form: Functional contact form with email integration
• 🔍 SEO Optimized: Built-in SEO optimization

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository

   git clone https://github.com/yourusername/os-portfolio.git
   cd os-portfolio

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your configuration:

   # Database
   MONGODB_URI=your_mongodb_connection_string
   
   # Email (Resend)
   RESEND_API_KEY=your_resend_api_key
   
   # AI (OpenAI)
   OPENAI_API_KEY=your_openai_api_key

4. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser

   Navigate to http://localhost:3000 to see the result.

📁 Project Structure

os-portfolio/
├── src/
│   ├── app/           # Next.js app directory
│   ├── components/    # Reusable React components
│   ├── lib/          # Utility functions and configurations
│   ├── data/         # Static data and content
│   └── contexts/     # React contexts
├── public/           # Static assets
├── content/          # MDX content files
└── ...config files

🛠️ Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🎨 Customization

Styling

The project uses Tailwind CSS for styling. You can customize the design by modifying:

• tailwind.config.ts - Tailwind configuration
• src/app/globals.css - Global styles

Content

Update the content by modifying files in:

• src/data/ - Static data
• content/ - MDX content files

Components

All reusable components are in src/components/. The project uses:

• Radix UI for accessible components
• Lucide React for icons
• Class Variance Authority for component variants

🤝 Contributing

We welcome contributions! Please read our Contributing Guidelines before submitting a pull request.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting

📝 License

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

🙏 Acknowledgments

• Next.js - The React framework
• Tailwind CSS - CSS framework
• Radix UI - Accessible components
• Lucide React - Beautiful icons
• Vercel - Deployment platform

📞 Support

If you have any questions or need help, please:

1. Check the Issues page
2. Create a new issue if your problem isn't already addressed
3. Join our Discussions for general questions

📊 Performance & Preview

Website Performance

Our portfolio website is optimized for speed and performance. Here are the latest performance metrics:

Website Preview

Take a glimpse of our modern, responsive portfolio website:

⭐ Star History

If you find this project helpful, please consider giving it a star on GitHub!

---

Made with ❤️ by Namit Jain