My first experience building a personal portfolio website

How I went from 0 knowledge in Frontend to building my own website.

While I awaited that single e-mail from DSC GITAM, my anticipation was obvious, and my head filled with thoughts about the initial stages of the selection process. When the official email finally landed in my inbox, it was as if a weight had been lifted off my shoulders. However, my joy was short-lived, quickly giving way to a sense of intimidation and dread as I read into the tasks assigned to me that were prerequisites to progressing further in the selection process.

The challenge ahead was no small feat, with three distinct tasks aligned with my interests in the various domains provided. Among them, the task that I decided to start with was the one related to Web Development. It required me to create a personal portfolio website utilizing the web tech stack of my choice.

While I had some prior knowledge of HTML and CSS, I had never had the chance or the time to apply my skills to a real project that would put them to the test. Hence, I seized this opportunity not just as a way to enhance my frontend development abilities but also to finally apply them to a real project that I could proudly add to my resume.

The moment I returned home, I was determined, and I promptly launched Visual Studio Code (VSCode) to begin devising my game plan. However, I soon found myself in a predicament – crafting a coherent plan proved to be more challenging than I had initially thought! (XD) Undeterred, I started moving forward by installing the Live Server extension, an essential tool that would enable me to preview my website locally. I created a blank index.html file, including the fundamental headers, but beyond that, I was at a loss for how to proceed.

To gain some inspiration and direction, I turned to the vast expanse of tutorials and coding demonstrations available on platforms like YouTube. Watching skilled developers craft their websites stoked my creativity, and I began to formulate a vision for my project. I decided that my portfolio website would consist of five distinct sections:

  1. Home: Serving as the landing page, it would provide an initial glimpse into my online presence.

  2. About Me: This section will shed light on my background, my skills, and a brief introduction about myself.

  3. Accomplishments: Here, I intend to showcase my academic and non-technical achievements, offering a rough view of my journey.

  4. My Projects: This segment will present the various projects I have undertaken, acting as a testament to my work and dedication.

  5. Contact Info: Serving as the bridge between myself and the visitors of my website, this section would house my social media links, contact information, and even a convenient channel for messages and feedback.

With this framework in mind, I embarked on my journey to build a personal portfolio website, ready to tackle the challenges and opportunities that lay ahead.

Building all these sections certainly was the most taxing thing I have done in a while but I found myself quite enjoying the process. During the journey of building my personal portfolio website, I encountered several challenges that tested my problem-solving skills and pushed me to become a better web developer. It was frustrating when things didn't go as planned. One of the recurring issues that used to drive me to the limit of my patience was dealing with class names in my CSS.

In the early stages of my project, I often found myself writing CSS code under the wrong class names. It's surprising how a single typo or a mismatch in class names can lead to hours of troubleshooting and hair-pulling frustration. I would meticulously craft my HTML structure and meticulously plan my CSS styles, only to realize that my styles weren't being applied, and my beautiful design wasn't coming to life.

I vividly remember those moments of frustration when I'd stare at the screen, trying to figure out what went wrong. It's amazing how a simple period or underscore can make all the difference. I would sift through my code, scrutinizing every class name, trying to spot the elusive mistake. Sometimes, it was a missing character, and other times, it was a case sensitivity issue.

These class name mishaps taught me a valuable lesson in attention to detail. I had to develop a systematic approach to naming and organizing my classes to avoid such issues in the future. It became a practice to use descriptive, meaningful class names and maintain a consistent naming convention throughout my project.

Over time, I learned to embrace the debugging process, seeing it not as a frustration but as a valuable learning experience. It forced me to become a more meticulous coder, triple-checking my class names and ensuring that they matched precisely in both my HTML and CSS.

In hindsight, these class name challenges were a pivotal part of my learning journey, and they reinforced the importance of attention to detail in web development. They transformed my initial struggles into valuable lessons that made me a more proficient developer.

So, if you ever find yourself pulling your hair out because of pesky class name issues, remember, you're not alone, and it's all part of the learning process. Embrace the challenges, learn from them, and watch yourself grow as a developer.

In summary, my journey of building this personal portfolio website has been a rewarding adventure, filled with learning, growth, and the joy of creating something uniquely my own. I've not only honed my web development skills but have also laid the foundation for my digital presence. The process has reinforced the value of showcasing one's work and skills through a portfolio, and I'm excited to witness the opportunities it may bring.

"I'm crafting this blog page not only to document my journey but also with the hope of reaching like-minded individuals. Remember, your portfolio is more than a collection of web pages; it's a reflection of your skills, passions, and journey. So, take that first step, embark on your web development odyssey, and let your digital identity shine.

Thank you for joining me on this journey. But it doesn't end here! There's more to come, more projects, and more stories to share. Let's explore the exciting world of web development together. So, stay tuned for the next chapter in this adventure!