Responsive fonts and spacing using clamp()

What are you most proud of, and what would you do differently next time?

Good:

• Clean, readable structure with BEM-like naming
• Using clamp() for responsive typography and consistent use of relative units for scaling across devices

Could improve:

• I'm experimenting with token systems - so improving the connection between variable names and their values in the design is one of my next goals and I'd like to improve on that

What challenges did you encounter, and how did you overcome them?

I had trouble getting the avatar image to show up in the pseudo element. DevTools showed that the element was there in the correct size - but the image itself wasn't rendering.

To debug it I temporarily added a background-color and confirmed the pseudo element was working. From that, I assumed the issue was probably with the file path.

After checking the compiled main.css, I realized I wrote the image path relative to my main.scss instead of the final .css file (which is one folder deeper). Adding an extra "../" fixed that problem

What specific areas of your project would you like help with?

I'd like to improve how I name and structure my CSS variables. I'm still learning how to build a clear connection between the variable names and the values they represent (for example, font-size tokens and color scales).

I'd really appreciate guidance on how to develop a clean, scalable token system as my projects grow more complex