Personal portfolio website showcasing professional experience, technical skills, and projects.

🌐 Live Site: https://devfreddy.github.io

A modern, interactive portfolio built with React, featuring smooth animations, particle effects, and a unique cocktail recipe collection. The site demonstrates proficiency in frontend development, UI/UX design, state management, and deployment practices.

• Hero Section - Animated landing page with particle background and floating tech icons
• About Section - Personal story, skills showcase, and professional focus areas
• Experience Section - Detailed work history and education timeline
• Navigation System - Responsive navbar with smooth scroll and routing

• Particle Background - D3.js-powered interactive animation system
• Floating Tech Icons - Animated technology stack visualization
• Dark Mode - Color theme toggle with system preference detection
• Construction Banner - Dismissible status banner with cross-tab state synchronization

• Cocktails Page - Searchable and filterable recipe collection with 100+ cocktails
• Client-Side Routing - React Router with GitHub Pages optimization

📚 View Complete Feature Catalog →

• React 19.1.0 - UI library
• React Router DOM 7.8.0 - Client-side routing
• Vite 7.0.6 - Build tool and dev server

• Chakra UI 3.23.0 - Component library
• Framer Motion 12.23.11 - Animation library
• Emotion - CSS-in-JS styling
• D3.js 7.9.0 - Data visualization and particles

• Zustand 5.0.6 - State management
• React Hooks - Local state and effects
• localStorage - Banner state persistence

• ESLint 9.30.1 - Code linting
• Node.js 24.4.1 (via Volta) - Runtime environment

• Node.js 24.4.1 (managed via Volta)
• npm or yarn

1. Clone the repository

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

2. Install dependencies

   cd frontend-project
   npm install

3. Start development server

   npm run dev

   Open http://localhost:5173 to view the site.

npm run build

Output will be in frontend-project/dist/

npm run preview

The site is automatically deployed to GitHub Pages using GitHub Actions. On every push to the main branch:

1. Builds the React app in frontend-project
2. Deploys the build output to GitHub Pages
3. Ensures 404.html is in place for client-side routing

View the workflow at .github/workflows/deploy.yml

devfreddy.github.io/
├── frontend-project/          # React application
│   ├── src/
│   │   ├── components/        # React components
│   │   ├── hooks/             # Custom React hooks
│   │   ├── data/              # Static data (cocktails)
│   │   ├── store/             # Zustand store
│   │   └── main.jsx           # App entry point
│   ├── public/                # Static assets
│   └── package.json           # Dependencies
├── docs/                      # Documentation
│   ├── features/              # Feature documentation
│   ├── sessions/              # Session notes
│   ├── COMMANDS.md            # Useful commands
│   ├── SETUP_LOG.md           # Setup history
│   └── TODO.md                # Task tracking
├── .github/workflows/         # GitHub Actions workflows
└── README.md                  # This file

Comprehensive documentation is available in the docs/ directory:

• Feature Catalog - All features with status and dependencies
• Commands Reference - Development, build, and deployment commands
• Setup Log - Installation and configuration history
• TODO List - Current tasks and future improvements
• Session Notes - Development session logs

• Hero Section - Landing page implementation
• Cocktails Page - Search and filter system
• Construction Banner - Cross-tab state sync

1. Check feature catalog for existing features
2. Create feature documentation folder if needed
3. Implement feature following project patterns
4. Document while building (not after)
5. Update feature index with status

1. Create session notes in docs/sessions/YYYY-MM-DD/
2. Track accomplishments, findings, and blockers
3. Link to relevant feature documentation
4. Update TODO.md with new/completed tasks

• Match existing code style and patterns
• Use hooks for state management
• Optimize with useMemo for expensive operations
• Keep components focused and reusable

• First Contentful Paint: < 1.5s
• Time to Interactive: < 3s
• Lighthouse Score: 90+ (Performance, Accessibility, Best Practices)

• ✅ Chrome 120+
• ✅ Firefox 120+
• ✅ Safari 17+
• ✅ Edge 120+

• Complete documentation for all features
• Accessibility improvements (ARIA, keyboard nav)

• Add Projects Section
• Implement contact form
• Performance optimization pass
• SEO enhancements
• Add testimonials section

See TODO.md for complete task list.

This is a personal portfolio project, but suggestions and feedback are welcome!

1. Fork the repository
2. Create a feature branch (git checkout -b feature/suggestion)
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

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

Michael Frederick (DevFreddy)

• GitHub: @devfreddy
• Portfolio: devfreddy.github.io
• LinkedIn: Connect on LinkedIn

• Built with React
• UI components by Chakra UI
• Animations powered by Framer Motion
• Particle effects using D3.js
• Deployed on GitHub Pages
• Built with assistance from Claude Code

Built with ❤️ and ☕ by DevFreddy