You are building your professional home on the web.

Failure to submit results in a full letter grade deduction. Failure to present results in a ½ letter grade deduction.

Overview

This quarter, you have built projects brick by brick—recipe pages, tribute sites, landing pages, and more. Now it is time to bring it all together into a professional portfolio that represents you as a designer-coder. Your portfolio replaces your current index.html and becomes the front door to your work.

Resources

• README Template (Simple)
• README Template (Enhanced)
• Self-Assessment Checklist

Part 1: Repository Organization (The "Front Door")

You are cleaning up your root directory to look professional. The goal is to turn your repository from a "student homework folder" into a "developer portfolio."

Tasks

1. Rename, Don't Delete: Rename your current index.html (your weekly list) to learning-log.html.
   • Why? This preserves your history without cluttering your main entry point.
2. The Archive: Create a new folder named archive.
3. Move the Old Documentation: Rename your current long README to course-log.md and move it into the archive/ folder.
4. The Safety Rule: Do NOT move your week-01, week-02, etc. folders. If you move them, your links will break.
5. The New Front Door: Create a new README.md in your root folder using the template.

Target File Structure

your-repo/
├── index.html              <-- NEW Portfolio Home (You build this)
├── learning-log.html       <-- RENAMED Old Index (Keeps weekly links working)
├── css/                    <-- Folder for Portfolio styles
├── images/                 <-- Folder for Portfolio images
├── archive/                <-- Old READMEs and junk
├── week-01/                <-- KEEP these folders here!
├── week-02/                <-- KEEP these folders here!
└── README.md               <-- NEW Documentation (See template below)

NOTE: Make sure all of your week-XX folders follow the same naming convention.

Part 2: Visual Design (Closing the Loop)

Revisit the "Moodz and Vibes" Figma file you created at the beginning of the quarter. Now that you understand how HTML/CSS actually works, does that vision evolve?

Deliverable

• Revisit: Open your original "Moodz and Vibes" file.
• Refine or Pivot: You have agency here. If your original vibe still fits, refine it. If you want to change it completely, you must justify the change in your reflection.
• Figma Requirements:
  • Typography: Header and Body fonts (Google Fonts preferred).
  • Color Palette: 5-color palette (Background, Text, Accent, Secondary, Error/Success).
  • Mockups: Visual sketches for Desktop AND Mobile.

Part 3: The Portfolio Build (Content & Tech)

Required Content

1. Welcome/Hero: Who are you?
2. Bio: A short biography about yourself (Career goals, skills, interests, story).
3. Image: A photo or illustration of yourself.
4. Selected Projects (Minimum Requirement):

   You must showcase at least these 4 projects as Cards/Components (Thumbnail + Title + Desc + Link):

   • The Recipe
   • The Tribute Site
   • The Field Guide
   • The Product Landing Page
5. External Links: GitHub profile, LinkedIn, Socials, etc.
6. Footer: Copyright + Integrity Statement.

Technical Requirements

• Semantic HTML: Use <header>, <nav>, <main>, <section>, <footer>, etc.
• CSS Layout: Must use Flexbox and/or CSS Grid.
• Responsive: Must include at least 1 @media query for mobile devices.
• CSS Variables: Use variables for your Colors and Fonts.
• Interaction:
  • Link States: Style all four states (link, visited, hover, active)
  • At least one CSS Transition on interactive elements (e.g., button hover, card lift).
• Accessibility: All images must have descriptive alt text.
• Favicon: Your site must have a custom browser tab icon.

Academic Integrity

• Footer Statement: If you used AI (ChatGPT, Claude, etc.) to help write ANY code, include a small note in your footer (e.g., "Co-created with xyz").
• README Citations: Cite your sources (tutorials, AI prompts) in your README.

Part 4: The Loop Reflection

In your portfolio (create a separate page and MAKE SURE TO LINK TO IT), answer the following prompts.

1. The Threshold: What was the specific moment this quarter where "code" clicked for you?
2. The Pit: What was the hardest assignment? How did you get yourself out of the "pit of despair"?
3. The Pivot: Look at your original "Moodz and Vibes." How does your final portfolio compare? Did you stick to the plan or pivot? Why?
4. The Process: What would you change about how you approached this course? (e.g., time management, reading documentation, asking for help).
5. The Future: How do you see this hybrid skillset (Design + Code) impacting your future practice?

Each response should be 3-5 sentences minimum. Substantive answers only.

Part 5: The Final Verification

To ensure you don't miss any requirements (and lose points needlessly), follow these steps:

1. Create a new file in your root folder named CHECKLIST.md.
2. Copy the checklist and paste it into that file. See the Final Portfolio Self-Assessment Checklist.
3. As you complete items, place an x inside the brackets (like this: [x]).
4. Save, Commit, and Push this file along with your portfolio.

Part 6: Submission & Presentation

Submission

1. Canvas: Link to your live Portfolio.
2. Canvas: Link to your GitHub Repository.
3. Canvas: Link to your Figma file.

Presentation (June 11th @ 10:30 AM)

You have 5-7 minutes to show your site on the big screen.

Be prepared to discuss:

1. Your design choices (Vibe).
2. One piece of code you are proud of.
3. Your "Threshold" moment.

Manual deductions applied after calculation:

• MISSING_CHECKLIST: If completed CHECKLIST.md is missing from the repo: -5 points.
• NO_FAVICON: If the browser tab has the default globe icon: -5 points.
• AI_UNDISCLOSED: If AI was used but no disclosure statement is found in Footer/README: -20 points.