Mike Kenya Connect - Portfolio Website

A modern, responsive portfolio website showcasing my work as a Full Stack Developer specializing in React, Next.js, React Native, and Web3 technologies.

🚀 Live Demo

Visit the live website: mike-kenya-connect.vercel.app

🛠️ Technologies Used

This project is built with:

• Vite - Fast build tool and development server
• TypeScript - Type-safe JavaScript
• React 18 - Modern React with hooks
• shadcn/ui - Beautiful, accessible UI components
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons
• Framer Motion - Smooth animations

📱 Features

• Responsive Design - Works perfectly on desktop, tablet, and mobile
• Dark/Light Mode - Toggle between themes
• Smooth Animations - Engaging user experience
• Project Showcase - Interactive project cards with live demos
• Skills Section - Animated progress bars and skill categories
• Contact Form - Easy way to get in touch
• SEO Optimized - Proper meta tags and Open Graph

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone https://github.com/north-tower/mike-kenya-connect.git
cd mike-kenya-connect

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:8080

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # shadcn/ui components
│   ├── About.tsx       # About section
│   ├── Contact.tsx     # Contact form
│   ├── Footer.tsx      # Site footer
│   ├── Header.tsx      # Navigation header
│   ├── Hero.tsx        # Hero section
│   ├── Projects.tsx    # Projects showcase
│   └── Skills.tsx      # Skills section
├── pages/              # Page components
├── assets/             # Images and static assets
├── hooks/              # Custom React hooks
└── lib/                # Utility functions

🎨 Customization

Colors and Themes

The project uses CSS custom properties for theming. You can customize colors in src/index.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  /* ... more color variables */
}

Adding New Projects

To add a new project, update the projects array in src/components/Projects.tsx:

{
  title: 'Your Project Name',
  description: 'Project description',
  image: yourProjectImage,
  tech: ['React', 'TypeScript', 'Tailwind CSS'],
  features: ['Feature 1', 'Feature 2', 'Feature 3'],
  liveUrl: 'https://your-project.com',
  githubUrl: 'https://github.com/your-username/your-project',
  featured: true,
}

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically on every push

Other Platforms

The project can be deployed to any static hosting service:

npm run build

The built files will be in the dist directory.

📞 Contact

• Email: [Your Email]
• GitHub: north-tower
• LinkedIn: [Your LinkedIn]
• Portfolio: mike-kenya-connect.vercel.app

📄 License

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

---

Built with ❤️ by Mike - Full Stack Developer