Make It Yours

You have a styled, personalized page. Use the next couple minutes to push it further — these are the tweaks that make two pages from the same room look nothing alike.

Every number, color, and word in the CSS is a knob you can turn. Pick at least 3 tweaks from the menu below and apply them to your page. If something on the menu doesn't speak to you, ignore it and try your own thing — change a number, see what happens.

Quick CSS tweaks

Bigger or smaller hero name

Find .hero-title in the CSS and change the numbers in the font-size line:

.hero-title {
  font-size: clamp(56px, 14vw, 120px);
  /* Try clamp(80px, 18vw, 160px) for HUGE */
  /* Try clamp(40px, 10vw, 80px) for subtle */
}

Border style and thickness

Find .hero and change the border:

.hero {
  border: 3px solid var(--ink);
  /* Try 5px for chunky */
  /* Try 1px for subtle */
  /* Try 3px dashed var(--ink) for handmade vibe */
  /* Try 4px double var(--ink) for editorial */
}

Wilder hover tilt on skill tags

Find .tags li:hover and change the transform:

.tags li:hover {
  transform: rotate(-2deg);
  /* Try rotate(-10deg) for chaotic */
  /* Try scale(1.2) for grow-on-hover */
  /* Try rotate(5deg) scale(1.1) for combine */
}

Round corners on cards

Find .section and add a border-radius:

.section {
  /* ...existing styles... */
  border-radius: 16px; /* Try 0 for sharp, 32px for very soft */
}

Different highlight color on bold words

Find .section strong and change the background:

.section strong {
  background: var(--bg);
  /* Try var(--accent) — bolded words pop in your accent color */
}

Different arrow in the contact list

In your HTML pane, find the contact list and swap the → for something with more personality:

<li><a href="mailto:you@email.com">★ Email</a></li>
<li><a href="#">✦ LinkedIn</a></li>
<li><a href="#">→→ GitHub</a></li>

Grab any symbol from emojipedia.org.

HTML tweak — add a new section

Copy a <section class="section"> block, paste it under the highlights, and make it about something the starter doesn't have. Update the section-number (so it reads 04, 05, etc.) and the <h2 class="section-title">:

<section class="section">
  <div class="section-number">04</div>
  <h2 class="section-title">Currently Learning</h2>

  <p class="lead">
    Right now I'm picking up <strong>Python</strong>,
    <strong>watercolor painting</strong>, and how to actually parallel park.
  </p>
</section>

Other ideas: Languages I Speak, What I'm Reading, Books That Changed My Mind, Where I've Volunteered.

Pair share

When you've got at least 3 tweaks in, turn to a neighbour. Show them one thing you tried. Try one thing they did. You'll get more ideas in 2 minutes this way than in another 10 minutes alone.

Stretch challenges

Custom font. Pick a font from fonts.google.com that fits your accent color. Update the @import URL at the top of the CSS and the --serif or --sans variable.
Hover effect somewhere new. The starter has hover tilts on skill tags and color swaps on contact links. Add one to .section or .project:
```
.section:hover {
  transform: translate(-2px, -2px);
  transition: transform 0.2s;
}
```
Background gradient. Replace the --bg value with a gradient:
```
--bg: linear-gradient(135deg, #f2ede3, #ffe5e5);
```
Then in the body rule, the background: var(--bg); line will pick it up automatically.