project portfolio site

Step 5: Polish

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Refine the details and make it professional.

Typography Review

terminal
Review the typography:
- Is the hierarchy clear?
- Are line lengths comfortable to read?
- Is spacing consistent?

Adjust anything that feels off.

Color and Contrast

terminal
Check the color scheme:
- Does it support the content well?
- Is contrast sufficient for readability?
- Does it work in both light and dark environments?

Add Subtle Animations

terminal
Add subtle page transitions and hover effects:
- Fade in content on page load
- Smooth hover transitions on cards
- Keep it subtle — don't distract from content

Mobile Polish

Test on actual mobile device or narrow browser:

terminal
Polish the mobile experience:
- Touch-friendly tap targets
- Appropriate text sizes
- Images scale properly
- Navigation is accessible

About and Contact

terminal
Add an about section with:
- A brief bio
- What I'm looking for (if relevant)
- Contact information or links

Keep it concise. Link to LinkedIn, Dribbble, etc.

Accessibility Check

terminal
Check accessibility:
- All images have alt text
- Focus states are visible
- Text is readable
- Links are descriptive

Final Review

Go through the entire site as a visitor would:

  • First impression of home page
  • Exploring projects
  • Reading a project page
  • Finding contact info

Note anything that feels rough and fix it.

Checkpoint

  • Typography feels polished
  • Colors and contrast are good
  • Animations are subtle and smooth
  • Mobile experience is solid
  • About/contact added
  • Accessibility checked

What You Learned

  • The polish phase matters
  • Small details add up
  • Testing as a real user reveals issues
  • Accessibility improves UX for everyone

Exercises

  1. Run the Typography, Color, and Animations prompts in order; after each, view the site and note one concrete change it made.
  2. Send the Accessibility Check prompt, then tab through the page with your keyboard to confirm focus states are visible and links read clearly.
  3. Do the Final Review walkthrough as a first-time visitor — home, projects, a project page, contact — and write down any rough spot, then fix it with a targeted follow-up prompt.