Published on

The Stjärna Project

Authors
  • avatar
    Name
    Adi Tolia
    Twitter

Welcome to Stjärna - a project that's been living in my code editor (and honestly, my head) for way longer than I'd like to admit. After countless commits, design iterations, and the occasional productive rabbit hole, I'm thrilled to finally share it with the world. Join me as I walk through the journey of building this site, break down the tech stack that made it possible, and share what's next on the horizon.

Stjärna Hero

overview

Built with Next.js, this website leverages React's capabilities in static site generation. Next.js was the natural choice for this project, offering an ideal balance of performance, developer experience, and flexibility that aligned perfectly with my experience in React development.

I specifically used Timlrx's Next.js Blog Template which served as the foundation for this website. From there, I rebuilt much of the site including the styling, layout, and content.

Key improvements include:

  • A Reimagined Dark Mode: I've implemented a custom dark mode theme which utilizes a completely new accent color and a more seamless transition between light and dark modes.
  • Custom Styling: I've added custom styling to the site to make it more unique and personal. This includes custom fonts, colors, and animations.
  • Animated Hero: I've added a custom animated hero section to the homepage which showcases a typewriter effect and a custom procedural background animation.
  • Quality of Life Improvements: I've made several quality of life improvements to the site including a more responsive design, improved accessibility, and a more streamlined reading experience.
  • Custom Commands: I've added custom commands to the kbar command palette which allow for easier navigation around the site and quick access to key features.
  • Improved Tailwind: I've reduced the number of redundant styles and optimized the Tailwind CSS configuration to improve performance and maintainability.
  • Other Improvements: I'm made several other improvements behind the scenes to improve the overall developer experience and maintainability of the site.

specifics

This project uses a variety of tools and technologies to bring it to life. Here's a quick rundown of the key components:

  • Next.js w/ Typescript: My personal favorite for React-based projects.
  • Tailwind CSS: A utility-first CSS framework that makes styling a breeze.
  • Contentlayer: A lightweight and easy way to manage content in Next.js projects.
  • MDX: A markdown-based format for JSX/TSX.
  • pliny: Out of the box components to help build static sites faster.

The greatest challenge in building this site was learning how to effectively use these tools together. Despite this, I must admit I love working with the combination of Next.js and TailwindCSS. Both tools are incredibly powerful and make building websites a breeze.

I'll quickly go over the key milestones and features I implemented in this project.

hero

Every great website needs a beautiful hero and I wanted mine to hit that sweet spot between simple and engaging. The final design pairs a typewriter effect with a custom dynamic background - achieved through a mix of React hooks and CSS animations, plus a healthy dose of trial and error.

The first iteration had circular blurred <div>s floating around the hero section. While it looked great at first, testing told a different story. While my laptop handled it fine, testing on mobile was a quick reality check - those bouncing animations were surprisingly resource-hungry.

After some brainstorming, I realized that I was overcomplicating the implementation for the effect I desired. Instead of using React to individually calculate each blob's position, CSS animations could create the same effect with far less overhead. I crafted some custom fade animations that pulse at different intervals, creating a more subtle but equally dynamic background that works.

To top it off, I brought back the typewriter effect that I loved from my old website. A simple React script adds characters every 100ms, paired with a fade-in fade-out cursor animation. Sometimes the straightforward approach just works.

The end result feels more polished and intentional - engaging enough to catch the eye, but clean enough to keep the focus where it belongs.

While tweaking the typewriter animation, I noticed something that bugged me - it was deleting every single character before typing the next word, even when parts of the words were exactly the same.

Now it find the common prefix and only deletes the differing letters. For example, when going from 'developer' to 'designer':

  • Old way: Would awkwardly delete everything and start from scratch
  • New way: Sees that 'de' is the same at the start, only deletes 'veloper', and types 'signer'

It's a small change, but it makes the animation feel way more natural.

themeing

The inspiration for the website's name and color scheme came from my name. My full name is Aditya, which means 'sun' in Sanskrit. The name I chose, Stjärna, has Old Norse roots and is the Swedish word for 'star'. I wanted to incorporate this into the site's design, so I chose a bright yellow as the primary color.

However, everyone loves a good dark mode, so I made sure to include that as well. While originally, the dark mode was a simple inversion of the light mode, I decided to make it more unique. I chose a 'blurple' as the primary color and added a custom accent color to make the dark mode feel more intentional and unique.

Now, each theme has its own unique feel and color scheme, like dawn and dusk. The light mode is bright and vibrant, while the dark mode is more subdued and calming. I'm really happy with how they turned out, and I hope you enjoy them too!

layout

Much of the layout of the site hasn't changed. Tim really did a great job with the original template, and I didn't want to mess with a good thing. However, I did make some minor tweaks to the layout to make it more unique and personal.

I hope to mess around more with the layout in the future, but for now, I'm happy with how it looks.

reworking kbar

For those of you who aren't familiar with kbar, it's a command palette that was part of the original template. I decided to keep it in the site as I thought it was a cool feature, but I wanted to make it more unique and personal.

First, I changed the color scheme to match the rest of the site's design. This was a simple change, but it made a big difference in making the palette feel more integrated with the rest of the site.

Next, I added some custom commands to the palette. These commands link to various sections of the site and make it easier to navigate around. I also added a custom command that changes the theme of the site.

the future

However, the project is far from complete. I have several features and improvements planned for the future including:

  • Further Customization: I plan to further customize the site with more unique features, unique layouts, and the addition of multiple themes.
  • Timeline: A timeline of my life and achievements and a more detailed about me section.
  • Projects: Add more projects to the site and showcase them in a more interactive and engaging way.
  • Tools: Add a tools section to the site to showcase the tools I use in my day-to-day life and work.

conclusion

Thanks for reading this far! I hope you enjoyed learning about my journey building this site. I'm pretty happy with how it turned out and can't wait to add even more. If you have any feedback, suggestions, or just want to chat, feel free to reach out to me on any of the social media platforms linked below. I'd love to hear from you!

Until next time. ~ Adi