Day 2 — About Page

⏱️ Time needed: 30–45 minutes

🎯 Goal: Build your about page — your story, skills, and what makes you unique.

📍 What’s Happening Today

The about page is where visitors go to understand who’s behind the work. It’s not a resume — it’s a story. The best about pages feel personal, confident, and concise.

As a designer, you already know how to present yourself visually. Today you’re doing it with layout and words.

🚀 Let’s Go

Prompt 1: Page Structure

Build my about page (about.html) with:
- The same navigation bar as the homepage (same links, same style)
- A two-column layout for the main content:
  - Left column (about 40% width): a photo placeholder (a large rounded rectangle with a background color for now — I'll add a real photo later) and my name below it
  - Right column (about 60% width): my bio text
- Below the two-column section: a skills/tools section
- The same footer as the homepage

Link this page to global.css and about.css.

Prompt 2: Write the Bio

You can write your own bio, or ask the AI to help draft one:

Help me write a short bio for my about page. Here's what to include:
- I'm a [your role — e.g., product designer, UI designer, brand designer]
- I've been designing for [X years] and recently started building with code using AI
- I care about [what matters to you — e.g., clean interfaces, accessibility, making tools for other designers]
- My approach: [how you work — e.g., systems thinking, user-first, detail-oriented]

Keep it to 2-3 short paragraphs. Conversational tone, not corporate. First person.

Prompt 3: Skills & Tools Section

Below the bio, add a "Skills & Tools" section with two groups:

Design:
- UI/UX Design
- Design Systems
- Prototyping
- Visual Design
- [Add your own]

Development (new!):
- HTML & CSS
- JavaScript basics
- Responsive Design
- AI-assisted development
- [Add your own]

Display these as simple tag-style pills or a clean list. Don't over-design this — it should be scannable, not flashy. Use your accent color subtly for the category headings.

Prompt 4: Personal Touch

Add a small "Currently" section at the bottom of the about page — a casual, human touch:
- 📍 Based in [your city]
- 🎧 Listening to [a playlist or genre]
- 📚 Reading [a book]
- 🛠️ Building [what you're working on]

Style it as a subtle, muted section — almost like a footnote. It makes the page feel personal without being unprofessional.

🎨 Design Thinking: Restraint

Portfolio about pages are tempting to over-design. Resist the urge. The best ones:

Use plenty of whitespace
Keep text short and scannable
Let one good photo do the heavy lifting
Don’t list every skill you’ve ever touched — curate

Your about page should take 30 seconds to read. If it takes longer, cut something.

🎁 Bonus: A Timeline (Optional)

If I have enough career history, add a minimal timeline or experience section:
- Just company/role/year — no long descriptions
- Style it as a simple vertical list with subtle year markers on the left
- Keep it to 3-5 entries maximum

💡 What You Learned Today

How to build a two-column layout for content pages
How to structure an about page that’s personal but professional
How to create tag/pill-style UI elements for skills
That restraint and whitespace are your best tools on a portfolio

⏭️ Tomorrow

You’ll build the project grid on your homepage — the cards that link to your case studies.

🎯 Checkpoint: Your about page should have a two-column layout with a photo placeholder and bio, a skills section, and the same nav/footer as your homepage. If the two-column layout breaks on mobile, try: “The two-column layout on my about page doesn’t stack on mobile. Can you make it go to a single column (photo on top, text below) on screens under 768px?”