🚀 Modern React Portfolio

A sleek, modern, and highly responsive personal portfolio website built with React, Vite, and Tailwind CSS. Designed to showcase professional experience, projects, and skills with a focus on smooth user experience and interactive elements.

✨ Key Features

• 🌓 Dynamic Theme Switching: Seamlessly toggle between Light and Dark modes for a customized viewing experience.
• 📱 Fully Responsive: Optimized for all screen sizes—from high-resolution desktops to mobile devices.
• 🎬 Smooth Animations: Powered by Framer Motion for elegant transitions and interactive component behavior.
• 🛠️ Tech-Focused Sections:
  • Interactive Projects: Showcase work with detailed descriptions and live links.
  • Skills Matrix: Visual representation of technical expertise.
  • Work & Education: Structured timelines of professional and academic growth.
  • Certification Gallery: Display earned credentials and achievements.
• 📧 Integrated Contact Form: Functional messaging system powered by Formspree.
• ⚡ High Performance: Built on Vite for lightning-fast load times and optimized production builds.

🛠️ Tech Stack

• Frontend: React (Hooks, Context API)
• Build Tool: Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: FontAwesome
• Forms: Formspree
• Deployment: Netlify & GitHub Pages

🚀 Getting Started

Follow these instructions to set up the project locally on your machine.

Prerequisites

• Node.js (v14 or later recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/najahaja/YoungDevInterns-ReactJS-Portfolio.git
   cd YoungDevInterns-ReactJS-Portfolio

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:5173 to see the site running.

📁 Project Structure

src/
├── assets/             # Images, icons, and global styles
├── components/         # Reusable UI components
│   ├── BodySections/   # Individual sections (About, Projects, etc.)
│   └── Navbar.jsx      # Navigation logic
├── context/            # React Context (Theme management)
├── pages/              # Main page layouts
├── App.jsx             # Main application entry point
└── main.jsx            # React DOM rendering

📦 Deployment

GitHub Pages

The project includes a gh-pages script for easy deployment:

npm run deploy

Netlify

Connected via continuous deployment (CI/CD) to the main branch. Any push to main will automatically trigger a build and update the live site.

🤝 Contributing

Contributions are always welcome! If you'd like to improve the portfolio:

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

Distributed under the MIT License. See LICENSE for more information (if applicable).

📩 Contact

Ahamed Najah - @najahaja