It’s been a busy few weeks, and finding time for myself, my portfolio, or even my blog has been as challenging as finding a needle in a haystack. Balancing development, networking, and being a student has turned out to be quite the juggling act. But enough with the excuses—here’s the latest update on No Port Dev.

One of the projects I’ve been immersed in was a portfolio project—my first real dive into this area. Fortunately, the team had a designer and a design ready, sparing me the “design from scratch” headache. Thanks to the resources I mentioned in my first blog, I’ve gathered some insights and design ideas that I’m eager to share. Plus, I’ve tackled some of the more "technical" aspects of this project, which, let’s face it, can be a welcome break from frantically searching for the best design.

New Developments

Design Progress

The design is still a work in progress—more like a rough draft of a masterpiece. Instead of copying a stellar portfolio design, I’m aiming to create something uniquely mine. Sure, I’ll borrow elements from other portfolios, but I want this journey to be as interesting as the final product. Think of it like a reality TV show: the drama and surprises along the way are half the fun!

What design elements have inspired you recently? Share your thoughts in the comments!

Framework Choice

For this project, I’ve chosen Next.js as my React framework. Although I’ve only dabbled with Next.js occasionally, my research suggests it’s a solid fit for my needs. Curious why? You can dive into the details on their official website or their GitHub repository.

Here’s why Next.js stood out:

• Performance Optimization: Next.js offers Static Site Generation (SSG) and Server-Side Rendering (SSR) for enhanced performance. SSG pre-generates static HTML pages at build time, while SSR generates pages on the server for each request.
• SEO Capabilities: With built-in features to improve SEO and the ability to customize metadata for each page, Next.js helps your site get noticed—because, let’s be real, who doesn’t want to be famous these days?
• Scalability: Its ability to handle a growing number of features and content makes it a versatile choice.

I’ll dive into more of its features in future blogs as I integrate them into my portfolio.

Page Transition Concerns

Time for some criticism (my favorite). While SSR in Next.js gets a lot of praise, it’s also been the source of some developer grumbles I’ve encountered—specifically around page transition issues. Not exactly something Vercel would want to brag about. On a related note, Next.js Conf 2024 is on the horizon, so don’t forget to sign up. Here’s hoping they iron out these quirks before I wrap up my pages. Because, let’s be honest, a smoother transition from design dreams to reality would be the cherry on top of this adventure!

Inspirations for Design

Here’s some cool stuff I came across while looking for a fitting design for my portfolio:

• Paul Lapkins: This stunning portfolio website was created by Paul himself, using no-code tech to craft visually striking projects in web design and Framer. His minimalistic design truly shines, and I’m hoping to draw inspiration from it for my own portfolio.

• Lenis: This piece of art, from a site about a library I already have and plan to use, features a dynamic background that I can’t resist. The smooth scrolling and moving stars background are elements I’ve always wanted to create, and after some research, I’ve figured out that this can be achieved either via frame sequence or, my best guess, Particle.js.

What design inspirations have you found recently? Feel free to share them in the comments!

There are more trendy effects, like parallax, that I’m eager to explore. While I haven’t decided exactly where to use them, I’ll keep you posted as I implement these ideas and see how they work out.

Now, seasoned web developers might be thinking, "This guy has no idea what he's talking about." You might be right. However, I’ve realized that SSR isn’t generally suitable for apps relying heavily on Three.js or Particle.js, which are dependent on client-side technologies. Still, I’m experimenting with a hybrid approach—using SSR for the main structure and client-side rendering for the graphics. By leveraging next/dynamic and useEffect hooks for client-side logic, I’m hoping to overcome these obstacles. I'd love to hear your thoughts and feedback in the comments below.

One Step At A Time

The journey to building my portfolio is all about taking one step at a time. Even though I’ve had a hectic few weeks juggling multiple projects, I’ve kept coming back to my portfolio and blog because I’m determined to see this through to the end. Focusing on small victories and incremental progress helps me stay motivated and maintain clarity. Every step, no matter how small, adds up and gets me closer to achieving my overall goal.

Summary of Progress

In the past few weeks, despite a packed schedule, I’ve managed to make some progress on my portfolio project. I’ve explored various design ideas and successfully created a few components, setting the stage for more detailed work in the future. While there’s still much to do and not everything is ready to showcase, these initial steps are a crucial part of the development process.

In my next blog, I’ll include a link to a Figma design, which I’m hoping will be somewhat ready by then. In the meantime, I’ll start pushing some code for components I plan to use into my GitHub repo, so stay tuned! I'll also be adding visual updates and design snippets to this blog post as they become available, so keep an eye out for these additions to see how the project evolves.

As a bonus for sticking with me through this blog, here’s something really interesting I stumbled upon while searching for inspiration: The Bonus. While it’s impractical for me to implement in my portfolio, it’s truly a sight to behold for any passionate frontend developer or designer.

I’d love to hear your thoughts and feedback on my progress and ideas. Feel free to share your insights in the comments below!