Portfolio Two

Professional portfolio website with project showcase, blog section, and contact information.

April - June 2024• Team: 1 Developer• Role: Full Stack Dev

About this Project

Portfolio Two is a comprehensive personal portfolio website featuring a multi-page design with project showcases, an extensive blog section (6+ articles), about page, and contact forms. Built with semantic HTML5 and modern CSS, it's deployed on GitHub Pages and demonstrates professional web design and development capabilities.

Tech Stack

HTML5

CSS3

JavaScript

Responsive Design

Web Fonts

GitHub Pages

Tools Used

VS Code

GitHub Pages

GitHub

Git

Key Features

Portfolio Sections

▸Projects Showcase: Detailed project listings with descriptions, technologies, and links.
▸Blog Platform: Multiple blog articles (blog-post-1.html through blog-post-6.html) with rich content.
▸About Section: Personal biography and professional background information.
▸Contact Page: Contact forms and social media connectivity options.

Design & Content

▸Main Pages: index.html, about.html, projects.html, blog.html, contact.html for comprehensive content.
▸Navigation: Consistent and intuitive navigation across all pages.
▸Custom Typography: Custom web fonts for professional and unique appearance.
▸Visual Hierarchy: Clear content organization with proper spacing and typography.

Responsive & Accessible

▸Mobile-First Design: Responsive layout that works on all screen sizes.
▸CSS Organization: Separate stylesheets for different sections (title.css, layout.css, etc.).
▸Asset Management: Organized directories for images, fonts, and resources.
▸Semantic HTML: Proper HTML structure for SEO and accessibility.

Highlights

Multi-page Portfolio Design

Blog Platform with 6+ Posts

Professional Typography

GitHub Pages Deployment

Installation

Clone Repository

git clone https://github.com/Itsayu/PortfolioTwo.git
cd PortfolioTwo

Local Server (Optional)

# Python 3
python -m http.server 8000

# Node.js with http-server
npx http-server

Access Website

# Open in browser
http://localhost:8000

# Or visit live site
https://itsayu.github.io/PortfolioTwo/

Challenges & Solutions

Challenge

Scaling Blog Content

Solution

Created modular blog post HTML structure allowing easy addition of new articles without redesign.

Challenge

Responsive Image Gallery

Solution

Implemented CSS grid with responsive images and proper aspect ratio handling for portfolio showcase.

Challenge

Performance Optimization

Solution

Optimized image sizes, lazy loading, and minimized CSS for fast static page delivery.

Drawing App

Car Rental