🚀 Michael Wilcox - Portfolio Website

A modern, responsive portfolio website showcasing my work as a Software Engineer. Built with React and Vite, featuring smooth animations, clean design, and an excellent user experience.

🌟 Live Demo

Visit the live site: [Your Deployed URL Here]

📸 Screenshots

✨ Features

• Responsive Design - Fully optimized for desktop, tablet, and mobile devices
• Modern UI/UX - Clean, professional design with smooth animations
• Dark Theme - Eye-friendly dark theme with gradient accents
• Interactive Navigation - Smooth scrolling with active section highlighting
• Modular Components - Clean, maintainable component architecture
• Fast Performance - Built with Vite for lightning-fast load times

🛠️ Technologies Used

Frontend

• React 19 - UI library
• Vite - Build tool and dev server
• CSS3 - Custom styling with animations
• JavaScript ES6+ - Modern JavaScript features

Tools & Deployment

• Git - Version control
• GitHub - Code repository
• Vercel - Deployment platform
• ESLint - Code linting

📂 Project Structure

portfolio/
├── src/
│   ├── components/
│   │   ├── Navigation.jsx    # Navigation bar with scroll detection
│   │   ├── Hero.jsx          # Hero section with introduction
│   │   ├── About.jsx         # About me and skills
│   │   ├── Experience.jsx    # Professional experience timeline
│   │   ├── Projects.jsx      # Project showcase
│   │   ├── Contact.jsx       # Contact information
│   │   └── Footer.jsx        # Footer component
│   ├── App.jsx               # Main app component
│   ├── App.css               # Global styles
│   ├── index.css             # Base styles
│   └── main.jsx              # Entry point
├── public/                   # Static assets
├── index.html               # HTML template
├── package.json             # Dependencies
└── vite.config.js          # Vite configuration

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/WebDev-Michael/portfolio.git
cd portfolio

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open your browser and visit http://localhost:5173

📦 Build for Production

npm run build

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

🎨 Customization

Update Personal Information

• Edit src/components/Hero.jsx for name and title
• Edit src/components/About.jsx for bio and skills
• Edit src/components/Experience.jsx for work history
• Edit src/components/Projects.jsx for project showcase
• Edit src/components/Contact.jsx for contact details

Modify Styles

• Colors and theme variables are defined in src/App.css (:root section)
• Component-specific styles are in the same CSS file
• Responsive breakpoints at 768px and 480px

🌐 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Visit vercel.com
3. Import your repository
4. Deploy with one click!

Deploy to Netlify

1. Build the project: npm run build
2. Drag and drop the dist folder to netlify.com

Deploy to GitHub Pages

1. Install gh-pages: npm install --save-dev gh-pages
2. Add to package.json scripts:

"predeploy": "npm run build",
"deploy": "gh-pages -d dist"

3. Run: npm run deploy

📧 Contact

• Email: webdev.krygore@gmail.com
• GitHub: @WebDev-Michael
• LinkedIn: webdev-michael

📄 License

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

🙏 Acknowledgments

• Design inspiration from modern portfolio websites
• Built with ❤️ using React and Vite
• Icons and graphics from SVG libraries

---

⭐ Star this repo if you found it helpful!

Made with 💻 by Michael Wilcox