Personal portfolio showcasing my work as a Technical Lead and Front-End Engineer

🌐 Live Site: www.maxwellbenton.com

This is my personal portfolio website built with modern web technologies to showcase my experience as a Technical Lead and Front-End Engineer. The site features my recent projects, technical skills, and professional background.

• Front-End: React 18, TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• Deployment: GitHub Pages
• CI/CD: GitHub Actions

• Responsive Design - Optimized for desktop, tablet, and mobile
• Performance Optimized - Fast loading with modern build tools
• SEO Friendly - Proper meta tags and semantic HTML
• Interactive Elements - Secret gnome easter egg for fun
• Professional Content - Showcases real projects with quantified impact

src/
├── components/          # Reusable UI components
│   ├── Header/         # Navigation with social links
│   ├── Skills/         # Technical skills section
│   └── ...
├── pages/              # Main page sections
│   ├── Experience/     # About and skills
│   ├── Projects/       # Portfolio projects
│   └── Main/          # Hero section
├── constants/          # Shared constants and styling
├── assets/            # Images and static files
└── types/             # TypeScript type definitions

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

1. Clone the repository

   git clone https://github.com/maxwellbenton/maxwellbenton.github.io.git
   cd maxwellbenton.github.io

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open in browser

   http://localhost:5173
   

The site is automatically built and deployed to GitHub Pages when changes are pushed to the gh-pages branch.

Manual deployment:

npm run build
npm run deploy

• Personal info: Edit src/constants.ts
• Skills: Modify src/components/Skills/index.tsx
• Projects: Update src/pages/Projects/index.tsx
• Styling: Adjust src/constants/tailwind.ts

1. Add project images to src/assets/
2. Update the Projects component with new project data
3. Include impact metrics and technical details

• Node version: See .nvmrc (if applicable)
• TypeScript: Strict mode enabled
• ESLint: React and TypeScript rules
• Vite: Modern bundling with SWC

• Code splitting - Automatic route-based splitting
• Asset optimization - Images and fonts optimized
• Bundle analysis - Use npm run build to see bundle size

• Lighthouse Score: 90+ across all metrics
• Bundle Size: ~157KB gzipped
• Load Time: <2s on 3G networks

This is a personal portfolio, but if you spot any issues or have suggestions:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

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

Maxwell Benton

• Website: www.maxwellbenton.com
• LinkedIn: linkedin.com/in/maxwellbenton
• GitHub: github.com/maxwellbenton
• Medium: medium.com/@maxwellbenton

⭐ Star this repo if you found it helpful or want to follow my work!