Portfolio Website - Git, HTML & CSS Learning Project

A comprehensive portfolio website built to master Git version control, HTML5, and CSS3.

---

🎯 Project Goals

• Learn Git fundamentals and advanced workflows
• Master HTML5 semantic markup
• Create responsive layouts with CSS3
• Implement modern CSS techniques (Flexbox, Grid, Animations)

---

🛠️ Technologies Used

• HTML5
• CSS3
• Git & GitHub
• Vanilla JavaScript (for interactivity)

---

📁 Project Structure

portfolio-website/
├── index.html          # Homepage
├── about.html          # About page
├── projects.html       # Projects showcase
├── contact.html        # Contact form
├── css/
│   ├── reset.css       # CSS reset
│   ├── variables.css   # CSS custom properties
│   ├── base.css        # Base styles
│   ├── layout.css      # Layout styles
│   ├── components.css  # Component styles
│   ├── animations.css  # Animation keyframes
│   └── responsive.css  # Media queries
├── js/
│   └── main.js         # JavaScript functionality
└── images/             # Image assets

---

🚀 Getting Started

1. Clone this repository
2. Open index.html in your browser
3. Explore different pages and features

---

📚 Learning Modules

Module 1: Git Fundamentals

• Repository initialization
• Basic commands (add, commit, status, log)
• Branching and merging

Module 2-3: HTML

• Semantic HTML5 elements
• Forms and validation
• Accessibility best practices

Module 4-6: CSS Fundamentals & Layout

• CSS selectors and specificity
• Box model and positioning
• Flexbox and CSS Grid

Module 7: Advanced CSS

• Animations and transitions
• Custom properties (CSS variables)
• Advanced selectors

Module 8: Responsive Design

• Mobile-first approach
• Media queries
• Responsive layouts

---

👤 Author

Kato Ernest Henry

---

📝 License

This project is for educational purposes.

---

🔗 Live Demo

[Add your GitHub Pages link here]

---

🎯 Final Setup Instructions

Step 1: Create Project Structure

# Navigate to your desired location
cd ~/Documents

# Create project
mkdir portfolio-website
cd portfolio-website

# Create folders
mkdir css js images

# Initialize Git
git init

Step 2: Create Files

Copy each code section into its respective file:

• Root files: .gitignore, README.md, index.html, about.html, projects.html, contact.html
• CSS files (in css/ folder): reset.css, variables.css, base.css, layout.css, components.css, animations.css, responsive.css
• JS file (in js/ folder): main.js

Step 3: Add Placeholder Images

Create placeholder images or use free images from:

• Unsplash
• Pexels
• Or use placeholder services like https://via.placeholder.com/600x400

Save images in the images/ folder:

• profile.jpg (for about page)
• project1.jpg through project6.jpg (for projects)

Step 4: Git Workflow Practice

# Add all files
git add .

# Initial commit
git commit -m "Initial commit: Complete portfolio structure"

# Create and work with branches
git checkout -b feature/add-animations
git add css/animations.css
git commit -m "Add animation styles"
git checkout main
git merge feature/add-animations

# Create GitHub repository
git remote add origin https://github.com/yourusername/portfolio-website.git
git push -u origin main

Step 5: Test Your Website

Open index.html in your browser to view the website.

---

📚 Learning Exercises

Exercise 1: Customize Colors

Modify css/variables.css to change the color scheme

Exercise 2: Add New Page

Create a blog.html page and add it to navigation

Exercise 3: Practice Git

git checkout -b feature/new-section
# Make changes
git add .
git commit -m "Add new section"
git checkout main
git merge feature/new-section

Exercise 4: Make it Responsive

Test on different screen sizes and adjust breakpoints in responsive.css

Exercise 5: Add Interactivity

Enhance js/main.js with more features:

• Dark mode toggle
• Animation on scroll
• More form validations

---

🚀 Deploy to GitHub Pages

# Push to GitHub
git push origin main

# Enable GitHub Pages
# Go to: Repository Settings → Pages → Select main branch → Save
# Your site will be live at: https://yourusername.github.io/portfolio-website

---

Happy Coding! 🚀