Kenneth's Portfolio

A modern, elegant portfolio website built with Jekyll, featuring a custom "Classy" design system.

🎨 Features

• Modern Design: Elegant serif/sans-serif typography with Playfair Display & Lato
• Dark Mode: Toggle between light and dark themes with localStorage persistence
• Responsive: Mobile-first design with breakpoints at 600px, 768px, and 900px
• Accessible: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
• SEO Optimized: Complete meta tags, Open Graph, Twitter Cards, and JSON-LD structured data
• Animations: Smooth scroll animations using Intersection Observer API
• Performance: CSS custom properties for runtime theming, optimized assets

🚀 Tech Stack

Frontend

• Jekyll: Static site generator
• SCSS: Advanced styling with custom properties
• Vanilla JavaScript: No dependencies, ES6+
• HTML5: Semantic markup

Design System

• Colors: Muted Gold (#C5A059) + Dark Slate (#2C3E50)
• Typography: Playfair Display (headings) + Lato (body)
• Spacing: Consistent spacing scale (0.5rem - 6rem)
• Components: Reusable button styles, cards, and sections

📁 Project Structure

kennethkenn.github.io/
├── _includes/          # Reusable components
│   ├── head.html
│   ├── header.html
│   ├── footer.html
│   └── structured-data.html
├── _layouts/           # Page templates
│   └── default.html
├── _sass/              # SCSS styles
│   └── style.scss
├── _data/              # Site data
│   └── projects.yml
├── assets/
│   ├── css/
│   │   └── main.scss
│   └── js/
│       ├── main.js           # Scroll animations
│       ├── dark-mode.js      # Theme toggle
│       └── form-handler.js   # Contact form
├── _config.yml         # Jekyll configuration
├── index.md            # Home page
├── about.md            # About page
├── projects.md         # Projects page
├── contacts.md         # Contact page
└── blog.md             # Blog page

🛠️ Installation & Development

Prerequisites

• Ruby 2.5+
• Jekyll 4.0+
• Bundler

Setup

# Clone the repository
git clone https://github.com/kennethkenn/kennethkenn.github.io.git
cd kennethkenn.github.io

# Install dependencies
bundle install

# Run development server
bundle exec jekyll serve

# Visit http://localhost:4000

Build for Production

bundle exec jekyll build

The site will be generated in the _site directory.

🎯 Customization

Update Personal Information

Edit _config.yml:

title: Your Name
email: your.email@example.com
description: Your bio
url: "https://yourdomain.com"

Add Projects

Edit _data/projects.yml:

- title: Project Name
  description: Project description
  tech: Technology stack
  github: GitHub URL
  demo: Live demo URL
  image: Image URL

Modify Colors

Edit _sass/style.scss:

$primary-color: #YourColor;
$secondary-color: #YourColor;

Add Blog Posts

Create markdown files in _posts/:

_posts/YYYY-MM-DD-post-title.md

✨ Key Improvements Implemented

1. Accessibility: Skip links, focus states, ARIA labels
2. SEO: Meta descriptions, Open Graph, Twitter Cards, structured data
3. UX: Smooth scroll, scroll animations, dark mode
4. Performance: CSS variables, Intersection Observer
5. Code Quality: Modular SCSS, clean HTML, semantic markup

📝 License

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

🤝 Contributing

Contributions, issues, and feature requests are welcome!

📧 Contact

Kenneth - kenneth@themintcoder.org

Project Link: https://github.com/kennethkenn/kennethkenn.github.io

---

⭐ Built with attention to detail and modern web standards