As a developer, having a portfolio website is essential to showcase one's skills, experience, and accomplishments. It's a platform to demonstrate my expertise, share my projects, and connect with potential employers or collaborators. In this blog post, I'll take you through the technical journey of building my portfolio website using Gatsby.js. I'll dive into the details of each component, from setting up the project to deploying it on GitHub Pages.

My portfolio website is designed to be a one-stop-shop for anyone interested in learning more about me and my work. It features a home page, an about me page, a projects page, and a resume page. Each page is carefully crafted to provide a seamless user experience, and I'll explain how I achieved this using Gatsby.js.

Think of the Home Page as the welcome mat to my digital world. It's the first thing you see when you visit my site. My goal here was to make a great first impression. I wanted to give you a quick glimpse of my skills, achievements, and the tech tools I use.

I kept the design simple yet informative. It's like the summary of a good book; it gives you just enough to pique your interest. I made sure it's easy to navigate and pleasing to the eye. After all, we don't want a cluttered welcome mat!

Here’s what you’ll find on the Home Page:

• A Brief Introduction: A quick hello and a few lines about me.
• My Cloud Certifications: I've displayed the certifications I'm proud of. It shows I'm serious about cloud tech.
• Tech Stack: I've listed the technologies I work with. It's like showing the tools in my toolbox. JavaScript, Python - you name it, it's there.

The Home Page sets the tone for the entire website. It's like meeting someone for the first time. You want to make a good impression, right? That's what I aimed for. It's a snapshot of my professional persona and invites you to explore more.

The "About Me" page is where I unfold my story. It's more than just a bio; it's a journey through my professional life. Here, I've put together not just what I do, but who I am as a tech professional.

I've designed this page to be a smooth scroll through my life. It's like reading a well-organized book where each chapter is a different aspect of my professional life. To make things even easier, I've added a navigation bar. Just like a table of contents, it lets you jump to the section you're most interested in.

Here's what each section offers:

• Introduction: A brief about who I am, beyond just my job title.
• Professional Journey: The path I've taken in my career, the ups and downs, and what I've learned.
• Key Skills: A showcase of my abilities, like a highlight reel of what I bring to the table.
• Certifications: The courses and exams I've aced to prove my expertise.
• Education: Where I've studied and what I've learned.
• Notable Projects: The work I'm most proud of, the challenges I've faced, and how I've solved them.
• Accolades: The achievements and recognition I've received along the way.

Each section is more than just text. It's a dynamic display. Think of it as a gallery where every piece of information is carefully placed and presented. Plus, I've added subtle animations. They're like little winks, making the experience more engaging without being too flashy.

This page is my heart and soul. It's where you get to know me, not just as a coder, but as a person who has grown and evolved in the tech world. It's personal, it's detailed, and it's me.

The Projects Page is where my work comes to life. It's a gallery of my achievements and innovations. My aim here was not just to list what I've done, but to showcase the journey and thought process behind each project.

This page isn't static. It's dynamic and interactive, reflecting the ever-evolving nature of technology and my work. Each project is displayed like a card in a deck, each telling a unique story.

I've organized the projects into sections like Web Development, AI, and Blockchain. It's like sorting books in a library – each has its place, making it easier for you to find what interests you.

The beauty of this page lies in its dynamic nature. The content isn't hardcoded. It's rendered dynamically from markdown files. I write the details of a project in a markdown file, and voilà, it appears on the website formatted and styled.

Each project has its own markdown file. This is where I write the details about the project – the what, why, and how.

At the beginning of each markdown file, there's a section called YAML frontmatter. This is where I put the metadata of the project – the title, section category, image URL, and more. Here's an example:

title: "My Portfolio Website"
sections: ["Web Development"]
description: "A detailed account of how I built my portfolio website."
imageurl: "../../src/assets/images/portfolio.jpg"

This metadata is what drives the dynamic rendering of the project cards.

Choosing Gatsby.js for this was a no-brainer. It's perfect for a content-rich website like mine. Gatsby makes it super easy to add new content without having to dive deep into code. Plus, it's great for performance and SEO – critical for any modern website.

I've added links at the top of the page for easy navigation. It's like having quick bookmarks to your favorite sections.

The Resume Page is like a concise story of my professional life. It's designed to give you a quick yet comprehensive view of my skills, experiences, and achievements. It's not just a page; it's a document that represents me in the professional world.

I've designed this page to mirror a traditional resume. It's formatted to be clear, professional, and easy to read, just like a well-crafted resume on paper.

The page is built with React components, ensuring it looks great on any device. Whether you're viewing it on a desktop or a mobile, the format stays intact, scaling beautifully to fit your screen.

The Resume Page includes several key sections:

• Introduction: A quick overview of who I am, along with my contact information and links to my social media profiles.
• About Me: A brief paragraph that gives insight into my personality and professional ethos.
• Work Experience: A detailed list of where I've worked, my roles, and what I've achieved there.
• Certifications: The qualifications and certifications I've earned, showcasing my commitment to continuous learning.
• Skills: A rundown of my technical and soft skills.
• Projects: Highlights of the projects I've worked on, showcasing my practical experience.
• Education: Information about my academic background.

One of the coolest features of this page is the 'Download as PDF' button. This allows visitors to download a copy of my resume in a convenient PDF format. It's like having a takeaway version of my professional story.

What's unique here is the integration of data. The information for both the About Me page and the Resume page is pulled from a single JSON data source. This ensures consistency and makes updates a breeze.