Quickstart Guide

Get started with the Mobile-First Portfolio project in just a few steps. This guide will walk you through setting up the project and understanding its structure.

Prerequisites

You only need a web browser to run this project. No build tools, package managers, or dependencies required!

This is a static HTML/CSS/JavaScript project, making it perfect for learning web fundamentals without complex tooling.

Quick Start

Navigate to the project directory

The source files are located in the workspace:

cd ~/workspace/source

Open the project

Simply open index.html in your web browser:Option 1: Direct File Access

# macOS
open index.html

# Linux
xdg-open index.html

# Windows
start index.html

Option 2: Using a Local Server (Recommended)Using a local server provides a better development experience:

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js (if you have npx)
npx http-server

Then visit http://localhost:8000 in your browser.

Explore the website

The portfolio includes these sections:

Header with responsive navigation
Hero section with introduction
Skills grid
Experience timeline
About section
Projects showcase
Testimonials
Contact form

Test responsiveness

Open browser DevTools (F12) and toggle device toolbar to test different screen sizes:

Mobile: 375px - 767px
Tablet: 768px - 1023px
Desktop: 1024px and above

File Structure Explained

Here’s what each file does in the project:

HTML Structure

The index.html file contains all page content in a single-page application format:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Sora:[email protected]&display=swap" rel="stylesheet" />
    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/variables.css" />
    <link rel="stylesheet" href="css/global.css" />
  </head>
  <body>
    <header class="header">...</header>
    <main>
      <section class="hero">...</section>
      <section class="skills">...</section>
      <!-- Additional sections -->
    </main>
    <script src="js/main.js"></script>
  </body>
</html>

Notice the CSS files are loaded in order: reset → variables → global. This cascading approach ensures proper style application.

CSS Organization

1. reset.css - Removes browser default styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. variables.css - Design system tokens:

:root {
  /* Colors */
  --primary-black: #000000;
  --primary-white: #FFFFFF;
  --zinc-500: #71717a;
  
  /* Spacing */
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  
  /* Layout */
  --max-width: 1280px;
}

3. global.css - All component styles with mobile-first approach:

/* Mobile-first header styles */
.header {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-16);
}

.header__nav {
  display: none; /* Hidden on mobile */
}

/* Desktop enhancement */
@media (min-width: 1022px) {
  .header__nav {
    display: block;
  }
  .header__toggle {
    display: none; /* Hide hamburger on desktop */
  }
}

JavaScript Functionality

The main.js file handles the mobile navigation toggle:

const toggleBtn = document.querySelector('.header__toggle');
const nav = document.querySelector('.header__nav');
const navLinks = document.querySelectorAll('.header__nav a');

// Toggle menu on button click
toggleBtn.addEventListener('click', () => {
  nav.classList.toggle('header__nav--active');
  const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true';
  toggleBtn.setAttribute('aria-expanded', !isExpanded);
});

// Close menu when clicking a link
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    nav.classList.remove('header__nav--active');
    toggleBtn.setAttribute('aria-expanded', 'false');
  });
});

The JavaScript includes accessibility features like aria-expanded to communicate menu state to screen readers.

Assets Directory

The assets/ folder contains:

SVG Icons: logo.svg, toggle.svg, facebook.svg, twitter.svg, etc.
Project Images: project1.jpg, project2.jpg, project3.jpg
Illustrations: hero.svg, about_me.svg

All images are optimized for web performance.

Complete Directory Structure

source/
├── index.html                  # Main HTML file (649 lines)
├── css/
│   ├── reset.css              # CSS reset (37 lines)
│   ├── variables.css          # Design tokens (38 lines)
│   └── global.css             # Component styles (764 lines)
├── js/
│   └── main.js                # Navigation toggle (17 lines)
└── assets/
    ├── logo.svg               # Site logo
    ├── toggle.svg             # Hamburger menu icon
    ├── hero.svg               # Hero illustration
    ├── about_me.svg           # About section image
    ├── facebook.svg           # Social icon
    ├── twitter.svg            # Social icon
    ├── reddit.svg             # Social icon
    ├── discord.svg            # Social icon
    ├── ts.svg                 # TypeScript skill icon
    ├── js.svg                 # JavaScript skill icon
    ├── react.svg              # React skill icon
    ├── next.svg               # Next.js skill icon
    ├── node.svg               # Node.js skill icon
    ├── git.svg                # Git skill icon
    ├── google.svg             # Company logo
    ├── youtube.svg            # Company logo
    ├── apple.svg              # Company logo
    ├── quotes.svg             # Quote icon
    ├── readmore.svg           # Link arrow icon
    ├── project1.jpg           # Project image
    ├── project1.webp          # Project image (optimized)
    ├── project2.jpg           # Project image
    ├── project2.webp          # Project image (optimized)
    ├── project3.jpg           # Project image
    └── project3.webp          # Project image (optimized)

Key Components to Explore

Once you have the project running, examine these key components: The header demonstrates mobile-first navigation:

<header class="header">
  <div class="header__brand">
    <img class="header__logo" src="assets/logo.svg" alt="Flora Sheen Portfolio" />
    <span class="header__title">Personal</span>
  </div>
  <button aria-label="Toggle Menu" class="header__toggle" aria-expanded="false">
    <img src="assets/toggle.svg" alt="Hamburger Menu" />
  </button>
  <nav class="header__nav">
    <ul>
      <li><a href="#about">About Me</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#projects">Project</a></li>
      <li><a href="#contact">Contact Me</a></li>
    </ul>
  </nav>
  <button class="header__cta" aria-label="Download resume">Resume</button>
</header>

2. Skills Grid (index.html:91-167)

Auto-fitting grid that adapts to screen size:

.skills__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--spacing-20);
}

This creates a responsive grid without media queries!

3. Responsive Typography

Using clamp() for fluid text sizing:

.hero__title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

This scales smoothly from 24px (1.5rem) to 40px (2.5rem) based on viewport width.

4. Container Queries (global.css:489-501)

Modern responsive technique for component-level responsiveness:

.project-list {
  container-name: project-list;
  container-type: inline-size;
}

@container project-list (min-width: 700px) {
  .project-card {
    flex-direction: row;
  }
}

Testing Mobile-First Design

Start with mobile view

Set your browser to 375px width (iPhone SE size)

Test the hamburger menu

Click the toggle button to open/close navigation

Gradually increase width

Watch how components adapt at different breakpoints:

768px: Skills grid expands, hero section switches to row layout
1022px: Full desktop navigation appears

Check interactions

Test hover effects on skills cards, testimonials, and project cards

The hamburger menu only appears below 1022px. If you don’t see it, make your browser window narrower!

Making Your First Modification

Try customizing the color scheme:

Open css/variables.css
Change the primary colors:

:root {
  --primary-black: #1a1a1a;  /* Softer black */
  --primary-white: #f9f9f9;  /* Warmer white */
}

Refresh your browser to see the changes!

Common Issues

Images not loading

Make sure you’re viewing the site through a local server rather than opening the HTML file directly. Some browsers restrict loading local resources for security.

Fonts not appearing

Check your internet connection - the Sora font is loaded from Google Fonts CDN.

Styles not updating

Hard refresh your browser with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (macOS) to clear the cache.

Next Steps

Now that you have the project running:

Layout System

Learn how the responsive layout works

Components

Explore individual components in detail

CSS Architecture

Understand the CSS organization

Mobile-First Concepts

Learn the mobile-first methodology

Get Started

Core Concepts

Components

Styling

Best Practices

Quickstart

Quickstart Guide

Prerequisites

Quick Start

File Structure Explained

HTML Structure

CSS Organization

JavaScript Functionality

Assets Directory

Complete Directory Structure

Key Components to Explore

1. Responsive Header (index.html:25-48)

2. Skills Grid (index.html:91-167)

3. Responsive Typography

4. Container Queries (global.css:489-501)

Testing Mobile-First Design

Making Your First Modification

Common Issues

Next Steps

Layout System

Components

CSS Architecture

Mobile-First Concepts

Additional Resources

Build docs developers (and LLMs) love

Get Started

Core Concepts

Components

Styling

Best Practices

​Quickstart Guide

​Prerequisites

​Quick Start

​File Structure Explained

​HTML Structure

​CSS Organization

​JavaScript Functionality

​Assets Directory

​Complete Directory Structure

​Key Components to Explore

​1. Responsive Header (index.html:25-48)

​2. Skills Grid (index.html:91-167)

​3. Responsive Typography

​4. Container Queries (global.css:489-501)

​Testing Mobile-First Design

​Making Your First Modification

​Common Issues

​Next Steps

Layout System

Components

CSS Architecture

Mobile-First Concepts

​Additional Resources

Build docs developers (and LLMs) love

Quickstart Guide

Prerequisites

Quick Start

File Structure Explained

HTML Structure

CSS Organization

JavaScript Functionality

Assets Directory

Complete Directory Structure

Key Components to Explore

1. Responsive Header (index.html:25-48)

2. Skills Grid (index.html:91-167)

3. Responsive Typography

4. Container Queries (global.css:489-501)

Testing Mobile-First Design

Making Your First Modification

Common Issues

Next Steps

Additional Resources