A modern, interactive portfolio website with a hacker/matrix theme, built with React 19, Vite, Tailwind CSS, and Framer Motion.

• Matrix Rain Animation - Canvas-based animated background with mouse interaction
• Profile Visualization - Dynamic particle system with orbital motion and glitch effects
• Interactive Skills - Toggle between linear and radial views with hover animations
• Terminal Aesthetic - Typing animations and command-line styled elements
• Page Transitions - Smooth route changes with Framer Motion
• Responsive Design - Mobile-first layout adapting to all screen sizes
• Accessibility - ARIA labels, keyboard navigation, and reduced motion support

View portfolio here https://ezridanielgweth.vercel.app/

• Node.js 18+ (recommended: Node.js 20)
• npm or yarn

# Clone the repository
git clone https://github.com/yourusername/portfolio.git
cd portfolio

# Install dependencies
npm install

# Start development server
npm run dev

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

# Development server with hot reload
npm run dev

# Production build
npm run build

# Preview production build locally
npm run preview

# Lint code
npm run run lint

src/
├── components/
│   ├── layout/          # Navbar, Footer
│   ├── sections/        # Hero, About, Skills, Projects, Contact
│   └── ui/              # MatrixRain, ProfileVisualization, SkillCard
├── data/                # personalInfo.js, skills.js, projects.js
├── assets/              # Images and media files
├── App.jsx              # Main app with routing
├── main.jsx             # React entry point
└── index.css            # Global styles and animations

Update src/data/personalInfo.js with your details:

export const personalInfo = {
  name: "Your Name",
  title: "Your Title",
  email: "your@email.com",
  // ... other fields
};

Edit src/data/skills.js to add or modify skills:

export const technicalSkills = [
  { name: "Skill Name", proficiency: 90, category: "Core", icon: "..." },
  // ... more skills
];

Update src/data/projects.js with your projects:

export const projects = [
  {
    id: 1,
    title: "Project Name",
    description: "Project description",
    technologies: ["React", "Node.js"],
    links: [{ label: "GitHub", url: "..." }],
    // ... other fields
  },
];

Edit tailwind.config.js:

theme: {
  extend: {
    colors: {
      'matrix-green': '#00ff41',
      'cyber-black': '#0a0a0a',
      'neon-pink': '#ff00ff',
      'neon-blue': '#00ffff',
    }
  }
}

Custom animations in src/index.css:

@keyframes matrixRain { /* ... */ }
@keyframes typing { /* ... */ }
@keyframes glitch { /* ... */ }

See docs/deployment-guide.md for detailed deployment instructions for:

• Vercel (Recommended)
• Netlify
• GitHub Pages
• Firebase Hosting

• Configuration Guide - How to customize your portfolio
• Social Media Guide - Professional profile setup
• Deployment Guide - Hosting platform instructions

This project is for personal portfolio use. Customize it for your own portfolio while maintaining the aesthetic theme.

Ezri Daniel Gweth

• Email: ezridgweth@gweenscraft.co.ke
• LinkedIn: linkedin.com/in/ezri-gweth-770974207
• GitHub: github.com/EzriDaniel