Crafting a Beautiful Portfolio: My Journey with Next.js, Styled Components, and CSS Grid

Year: 2021

My first project for a friend making things look pretty with CSS grid and lessons learned on tech choices.

Background

Creating a friend’s website was both an honor and a challenge. They needed a platform to showcase their design skills, and I wanted to craft something truly impressive. Next.js, styled components, and CSS Grid emerged as the perfect tools for the job, offering a powerful combination of performance, flexibility, and style. But beyond the technical choices, this journey held exciting firsts for me - deploying a website on Azure and securing a custom domain. So, grab your virtual cup of coffee, and let’s delve into the process!

Laying the Foundation with Next.js

Next.js provided a solid foundation for the project. Its server-side rendering (SSR) ensured top-notch SEO and a lightning-fast experience, crucial for showcasing visual content. Plus, the static site generation (SSG) promised optimal performance and scalability. The built-in routing and data fetching streamlined development, allowing me to focus on delivering a captivating design experience.

Styling with Flair: Enter Styled Components

For seamless integration of styles into the components, styled components proved invaluable. No more managing global CSS files; styles became an integral part of each component, ensuring consistency and modularity. This approach kept the code clean and maintainable, allowing for easy customization and experimentation.

Mastering the Grid: Unleashing CSS Grid’s Power

Designing a compelling portfolio demanded a flexible layout. Enter CSS Grid, the magical tool that transformed pixels into a playground. Laying out projects, creating a balanced composition, and ensuring responsiveness across devices became a breeze. The grid’s intuitive syntax and powerful features empowered me to craft a visually stunning and adaptable website.

Taking Flight with Azure: A Deployment First

Deploying the website was another exciting first. Azure, Microsoft’s cloud platform, felt like the right fit. The process, however, had its learning curve. Understanding App Services, configuring deployments, and managing DNS records offered valuable lessons. The good news? The website went live, shining brightly in the digital world!

Claiming Your Corner: The Joy of a Custom Domain

Securing a custom domain name added a personal touch to the project. Choosing the right name, navigating the registration process, and connecting it to the Azure deployment felt like claiming a unique space online. The custom domain transformed the website from a generic “project.azurewebsites.net” to a memorable and brand-specific address. Managing domains and learning this part of the internet was invaluable experience that would set me up for future projects.

Reflections and Beyond:

Building this portfolio was a rewarding experience. I honed my skills with Next.js, styled components, and CSS Grid, and ventured into new territories with Azure and domain registration. More importantly, I helped my friend showcase their work in a way that resonated with their style and aspirations.

I definitely learned that styled components weren’t for me and for all that they tried to help with keeping CSS close to the component, writing CSS in JavaScript was not the way to go and for someone who wasn’t very adept at writing CSS not having intelisense made it harder.

So, if you’re embarking on a similar journey, remember: embrace challenges, explore new tools, and don’t be afraid to step outside your comfort zone. The web is your canvas, and the possibilities are endless!