Jim Anderson - Personal Portfolio

A modern, responsive portfolio website built with React, Tailwind CSS, and Framer Motion. This portfolio showcases my skills, experience, and projects in software engineering and quality assurance.

🚀 Features

• Modern Design: Clean, professional design with glass morphism effects
• Responsive: Fully responsive across all devices
• Smooth Animations: Powered by Framer Motion for engaging user experience
• 3D Background: Interactive Three.js background animation
• Dark Theme: Elegant dark theme with blue accent colors
• Performance Optimized: Fast loading and smooth interactions

🛠️ Technologies Used

• Frontend: React 18, Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• 3D Graphics: Three.js, React Three Fiber
• Icons: Lucide React
• Deployment: GitHub Pages (ready for deployment)

📦 Installation

1. Clone the repository:

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

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:3000 to view it in the browser.

🏗️ Build for Production

npm run build

🚀 Deployment

This project is configured for GitHub Pages deployment. Simply push to the main branch and GitHub Actions will automatically build and deploy the site.

Manual Deployment Steps:

1. Build the project:

npm run build

2. Deploy to your preferred hosting service (Netlify, Vercel, etc.)

📁 Project Structure

src/
├── components/          # React components
│   ├── Navbar.jsx      # Navigation bar
│   ├── Hero.jsx        # Hero section
│   ├── About.jsx       # About section
│   ├── Experience.jsx  # Work experience
│   ├── Projects.jsx    # Projects showcase
│   ├── Skills.jsx      # Technical skills
│   ├── Contact.jsx     # Contact information
│   └── BackgroundAnimation.jsx # 3D background
├── App.jsx             # Main app component
├── main.jsx           # React entry point
└── index.css          # Global styles

🎨 Customization

Colors

The color scheme can be customized in tailwind.config.js:

• Primary colors: Blue gradient
• Dark theme: Various shades of dark gray
• Accent colors: Blue variations

Content

Update the following files to customize content:

• src/components/Hero.jsx - Hero section content
• src/components/About.jsx - Education and background
• src/components/Experience.jsx - Work experience
• src/components/Projects.jsx - Project showcase
• src/components/Skills.jsx - Technical skills
• src/components/Contact.jsx - Contact information

Styling

• Global styles: src/index.css
• Component-specific styles: Use Tailwind classes in components
• Custom animations: tailwind.config.js keyframes section

📱 Responsive Design

The portfolio is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📄 License

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

🤝 Contributing

Feel free to fork this project and customize it for your own portfolio. If you find any bugs or have suggestions, please open an issue.

📞 Contact

• Email: jimmyhanderson98@gmail.com
• Phone: 714-290-4362
• LinkedIn: jimmyhanderson
• GitHub: jimmyhanderson

---

Built with ❤️ by Jim Anderson