Alvin Kiprotich - Portfolio Website

A modern, responsive portfolio website showcasing my skills as a Mobile App Developer specializing in Flutter and Django.

Technologies Used

• HTML 5
• CSS(3)
• JavaScript (Vanilla)
• Icons (Font Awesome)

Features

• Responsive Design: Fully responsive across all devices.
• Smooth Animations: Intersection Observer API for smooth scroll animations
• Mobile Navigation: Hamburger menu for mobile devices
• Modern UI: Clean and professional design with gradient hero section
• Project Showcase: Display your Flutter and Django projects
• My Skills: Highlight your technical expertise
• Contact Form: Functional contact form for potential clients
• Social Media Links: Quick access to LinkedIn and GitHub profiles

Project Structure

portfolio/
├── index.html          # Main HTML file
├── styles.css          # Stylesheet
├── script.js           # JavaScript functionality
└── README.md          # Documentation

🛠️ Setup & Deployment

Local Development

1. Clone the repository
2. Open index.html in your browser
3. No build process required!

GitHub Pages Deployment

1. Go to your repository settings
2. Navigate to "Pages" section
3. Select the branch (usually main)
4. Select the folder (usually /root)
5. Then click "Save"
6. Your site will be published at https://yourusername.github.io/portfolio

Custom Domain (Optional)

1. Add a CNAME file with your domain name
2. Configure DNS settings with your domain provider
3. Update GitHub Pages settings with your custom domain

Customization

Adding Your Projects

Edit the index.html file and replace the placeholder projects in the Projects section:

<div class="project-card">
    <div class="project-image">
        <img src="your-project-image.jpg" alt="Project Name">
    </div>
    <div class="project-content">
        <h3>Your Project Name</h3>
        <p>Your project description</p>
        <!-- Update tags and links -->
    </div>
</div>

Updating Contact Information

Replace the placeholder email and GitHub username:

• Email: contact@alvinkiprotich.com
• GitHub: Update all GitHub links with your actual username

Changing Colors

Modify the CSS variables in styles.css:

:root {
    --primary-color: #0ea5e9;    /* Main brand color */
    --secondary-color: #8b5cf6;  /* Secondary accent */
    --accent-color: #10b981;     /* Additional accent */
}

Sections Overview

1. Hero Section: Introduction with call-to-action buttons
2. About Section: Personal introduction and statistics
3. Skills Section: Technical skills and expertise
4. Projects Section: Portfolio of completed projects
5. Contact Section: Contact form and social links

Future Enhancements

• Add dark mode toggle
• Integrate backend for contact form (Django REST API)
• Add blog section
• Include testimonials
• Add downloadable resume
• Implement project filtering by technology

License

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

Connect With Me

• LinkedIn: linkedin.com/in/alvinkiprotich
• GitHub: github.com/alvinkiprotich
• Email: alvinkiprotichkipchoge@gmail.com

---