Personal Blog

March 18, 2024

Project walk-through / case-study - Frontend Mentor Personal Blog

Frontend Mentor - Personal Blog

I originally intended this blog to be merely a submission to the Personal Blog challenge on Frontend Mentor. However, I decided to keep it, put it out there and start writing on it.

I figured that writing would help keep myself accountable while making the process of documenting any personal projects more enjoyable. Needless to say, I deviated from the original design where necessary.

In this post, I’ll share key takeaways, technical choices, and lessons learned.

Table of Contents

Overview

Since this is my personal blog, I made modifications to the challenge design to better fit my needs. For example:

  • I replaced the newsletter feature with an RSS feed to avoid collecting email addresses.
  • I added a category filter with tabs to allow users to browse posts by topic.

Built With

  • Astro – Optimized for content-focused sites
  • Sass – Scalable and maintainable styling

Stack and Process

Astro

Astro was an excellent choice for this project, as it is designed for content-heavy websites and supports multiple rendering strategies (SSG, SSR, Hybrid). This allows me to start with a fully static site while keeping the option to introduce dynamic functionality later.

Some standout features:

  • Content Collections make content management easier.
  • Ready-to-use integrations (e.g., the RSS package, which I used to add RSS functionality with minimal effort).
  • Framework-agnostic flexibility, which let me explore handling interactivity with vanilla JavaScript instead of React.

Although Astro makes integrating React (or other frameworks) seamless, I opted to stick with vanilla JavaScript for interactivity. This worked well, though I may rebuild certain components in React in the future.

Sass

For styling, I followed a similar approach to my BMI Calculator project, using Sass to enhance maintainability.

  • Modified 7-1 architecture for clear separation of concerns.
  • Sass maps and functions to manage colors, typography, and sizes.
  • Programmatic utility classes using @each, reducing redundancy.
  • Layout utilities inspired by the Every Layout book.

Maps and Functions

Using Sass maps allows for centralized styling values, reducing inconsistency. For example:

$colors: (
  neutral: (
    900: #000000,
    100: #ffffff,
  ),
  primary: (
    100: #e1e7fe,
    500: #345ff6,
    900: #253347,
  ),
);

With helper functions:

@function clr($color, $shade) {
  @return map.get($colors, $color, $shade);
}

Usage:

body {
  color: clr(neutral, 900);
}

Programmatic Utility Classes

Instead of writing repetitive CSS, I dynamically generate utility classes using @each:

@each $size-name, $size-value in $font-sizes {
  .fs-#{$size-name} {
    font-size: $size-value;
  }
}

This approach keeps the codebase efficient and scalable.

Every Layout Techniques

I applied techniques from the Every Layout book to ensure consistent spacing and flexible layouts. One of the most useful was the Stack pattern, which creates consistent vertical spacing between elements.

.stack {
  --stack-space: 1rem;
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--stack-space);
}

This eliminates hardcoded margins and improves maintainability.

Reflections and Future Improvements

This project reinforced the importance of modular design and the advantages of static site generation. However, as the blog grows, I may explore hybrid rendering to introduce more dynamic features.

Other future enhancements may include:

  • Improved animations for a smoother user experience.
  • Search functionality to help users find content more easily.
  • React integration for select interactive components.

Conclusion

Building my personal blog with Astro was a rewarding experience that reinforced the importance of choosing the right tools for the job. Astro’s flexibility allowed me to start with a simple static site while keeping the door open for more complex features in the future. Meanwhile, my continued use of Sass and CSS utility patterns helped me maintain a clean and scalable codebase.

This project also reinforced my appreciation for modular design and the benefits of static site generation. However, I recognize that as the blog grows, I may need to integrate more client-side interactivity—possibly with React for certain components. The key takeaway is that selecting a framework or approach isn’t about what’s trending but about what serves the project’s long-term goals effectively.

Moving forward, I plan to enhance the site with better animations, a search feature, and potentially a hybrid rendering strategy. Every project brings new lessons, and I’m excited to see how this blog evolves over time.

Useful Resources

Author