Stuti Mishra - Portfolio Website 🚀

A modern, responsive portfolio website showcasing my skills, projects, and achievements in software development and competitive programming.

![Portfolio Screenshot]()

🌟 Live Demo

Visit the live website: https://stutimishraportfolio.netlify.app/

🛠️ Tech Stack

Frontend Framework

• React 18.3.1 - Modern JavaScript library for building user interfaces
• TypeScript - Type-safe JavaScript for better development experience
• Vite - Fast build tool and development server

Styling & UI

• Tailwind CSS - Utility-first CSS framework for rapid UI development
• shadcn/ui - High-quality, accessible component library
• Tailwind CSS Animate - Animation utilities for Tailwind CSS
• Lucide React - Beautiful, customizable SVG icons

State Management & Forms

• TanStack React Query - Powerful data synchronization for React
• React Hook Form - Performant, flexible forms with easy validation
• Zod - TypeScript-first schema validation

Routing & Navigation

• React Router DOM - Declarative routing for React applications

Additional Libraries

• EmailJS - Send emails directly from client-side applications
• Recharts - Composable charting library for React
• Next Themes - Theme management for React applications
• Radix UI - Low-level UI primitives for building accessible design systems

✨ Features

• 🎨 Modern Design - Clean, professional UI with smooth animations
• 📱 Fully Responsive - Optimized for all device sizes
• 🌙 Theme Support - Built-in theme management capabilities
• ⚡ Fast Performance - Optimized with Vite and modern React patterns
• ♿ Accessible - Built with accessibility in mind using Radix UI primitives
• 📧 Contact Form - Functional contact form with EmailJS integration
• 🏆 Interactive Elements - Hover effects, animations, and smooth transitions

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

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

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:8080 to view the website

Building for Production

npm run build
# or
yarn build

The built files will be in the dist directory, ready for deployment.

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── About.tsx       # About section component
│   ├── Achievements.tsx # Achievements showcase
│   ├── Certifications.tsx # Certifications section
│   ├── Contact.tsx     # Contact form component
│   ├── Hero.tsx        # Hero section component
│   ├── Navigation.tsx  # Navigation component
│   ├── Projects.tsx    # Projects showcase
│   └── Skills.tsx      # Skills and expertise section
├── pages/              # Page components
│   ├── Index.tsx       # Main landing page
│   └── NotFound.tsx    # 404 error page
├── lib/                # Utility functions
├── hooks/              # Custom React hooks
└── index.css          # Global styles and Tailwind imports

🎯 Sections Overview

🏠 Hero Section

• Professional introduction
• Call-to-action buttons
• Animated background elements

👨‍💻 About Section

• Personal background
• Career highlights
• Professional journey

🛠️ Skills Section

• Programming languages with proficiency levels
• Frameworks and libraries
• Competitive programming achievements

💼 Projects Section

• Featured projects with descriptions
• Technology stack for each project
• Live demo and GitHub links

🏆 Achievements Section

• Academic accomplishments
• Competition results
• Recognition and awards

📜 Certifications Section

• Professional certifications
• Course completions
• Skill validations

📞 Contact Section

• Contact form with EmailJS integration
• Social media links
• Professional contact information

🎨 Customization

Colors & Theme

The website uses a custom color scheme defined in tailwind.config.ts and src/index.css. You can customize:

• Primary colors (sky/blue gradient theme)
• Background colors
• Text colors
• Animation styles

Content Updates

Update your personal information in the respective component files:

• src/components/Hero.tsx - Hero section content
• src/components/About.tsx - About section details
• src/components/Projects.tsx - Project information
• src/components/Skills.tsx - Skills and competitive programming stats

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with automatic builds on push

Netlify

1. Build the project: npm run build
2. Deploy the dist folder to Netlify

GitHub Pages

1. Install gh-pages: npm install --save-dev gh-pages
2. Add deploy script to package.json
3. Run: npm run deploy

📧 Contact Form Setup

To enable the contact form:

1. Create an EmailJS account at emailjs.com
2. Set up your email service and template
3. Add your EmailJS credentials to the contact form component
4. Update the service ID, template ID, and public key

🤝 Contributing

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

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• shadcn/ui for the beautiful component library
• Tailwind CSS for the utility-first CSS framework
• Lucide React for the icon system
• Vercel for hosting and deployment

📊 Competitive Programming Stats

• LeetCode: 1672 rating (375+ problems solved)
• Codeforces: 1333 rating (Pupil)
• CodeChef: 3-star (1637 rating)
• GeeksforGeeks: 3-star (1673 rating)

🔗 Connect With Me

• GitHub: github.com/stutimi
• LeetCode: leetcode.com/u/stuti_mishra_gceo
• Codeforces: codeforces.com/profile/stuti_mishra
• Email: [email protected]

---

⭐ If you like this project, please give it a star! ⭐

Built with ❤️ by Stuti Mishra