DEV Community: Anshuman Mishra

No Port Dev #2: One step at a time

Anshuman Mishra — Thu, 05 Sep 2024 09:05:51 +0000

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!

No Port Dev #1: The Beginning

Anshuman Mishra — Tue, 13 Aug 2024 09:49:27 +0000

Introduction

Welcome to the first edition of No Port Dev! I’m thrilled to kick off this journey of building my developer portfolio from scratch, and I’m excited to share the process with you. As a new developer who’s spent more time in backend development than frontend, this project is my chance to dive into a new domain. It’s like I’ve been camping out in the backend wilderness and am now venturing into the bright, bustling city of CSS and JavaScript. Whether you’re just starting out or you’re a seasoned pro, I hope my journey offers some insights, a few laughs, and maybe a bit of inspiration along the way.

Why "No Port Dev"?

You might be wondering, why call this No Port Dev? Well, the name is a bit of a cheeky nod to the fact that I don’t have a portfolio to show off yet! It’s like saying, “Hey, I’ve got no port to dock my ships,” but in developer terms. I want this portfolio to be a fresh start—an opportunity to learn, grow, and experiment with new ideas.

Starting from scratch can be a bit daunting, but it’s also a clean slate to explore new technologies, try out different design concepts, and create something that’s uniquely mine. Plus, it’s a great way to challenge myself and prove I can handle more than just backend code—after all, I haven’t done much frontend work yet, so why not dive in headfirst? And by “dive in headfirst,” I mean a lot of Googling to navigate this new territory. If there’s one thing developers are good at, it’s finding the answer to almost anything online!

The Plan

Here’s the plan for the first phase of my portfolio project:

Setting Up My Development Environment
- Choosing the right tools and software.
- Configuring my workspace to maximize productivity.
Designing the Portfolio
- Sketching out ideas for the layout and theme.
- Picking a color scheme and typography that reflects my style.
Building the First Components
- Creating the basic structure of the site.
- Implementing the navigation and header section.
Showcasing My Work
- Adding the first few projects to the portfolio.
- Writing descriptions and documenting the process.
Deploying the Portfolio
- Choosing a hosting platform.
- Making the site live.

Tools and Technologies

For this project, I’ll be using a variety of tools and technologies:

Frontend: HTML, CSS, JavaScript (framework TBD)
Design: Figma for mockups and design
Version Control: GitHub for version control
Hosting: Considering Netlify or GitHub Pages
Inspiration: Exploring various design showcases

First Steps

To kick things off, I’ve started by setting up my development environment. This includes installing the necessary tools, configuring my code editor, and setting up version control to keep everything organized.

As for the design, I’m starting from scratch. I’m currently brainstorming and exploring different color schemes, but I don’t have any concrete ideas yet. Honestly, designing feels like the most important and daunting part of development—maybe that’s why so many developers stick to backend work! If you have any design resources, tips, or suggestions, I’d greatly appreciate your input.

Here are some places I’m checking out for inspiration:

Dribbble: A range of design styles and trends.
Behance: High-quality, professional work.
Awwwards: Award-winning website designs.
Pinterest: Explore various design ideas and layouts.
SiteInspire: Beautifully designed websites.
Designspiration: Discover and collect design ideas.

Feel free to share your favorite design tools or any ideas you think might help me shape my portfolio. Stay tuned as I continue to explore design possibilities and begin building out the components of the site!

What’s Next?

In the next edition of No Port Dev, I’ll dive deeper into the design process. I’ll share updates on the layout, tackle some of the challenges, and give you a peek at the first components I’m building. I’m eager to get feedback, tips, and design ideas from the community as I continue to develop this project. If you have any suggestions or just want to share your favorite design tools, I’d love to hear from you!

Additionally, if you have any tips for improving my blog, I’m all ears. Your feedback can help make this space even better for everyone involved!

You can track the progress of the project on my GitHub repository. Stay tuned for the next chapter of this adventure!

Final Thoughts

Starting this project is both exciting and a bit nerve-wracking, especially now that I’m doing this publicly. But I’m looking forward to the journey ahead. Whether you’re here to follow along or working on your own portfolio, I hope you find something useful and entertaining in my posts.

Thanks for reading, and see you in the next edition of No Port Dev!