How I Built My Portfolio from Scratch

What is a portfolio? A Portfolio is an extended version of a resume, created as a website to showcase experiences and skills. Recently I made and deployed my portfolio website in GitHub. Being a Full-Stack Development, having a portfolio website is the best way to showcase my capabilities, skills, projects, and experiences. I created my portfolio from scratch and in this blog, I’ll share how I planned and deployed it.

Why I Needed a Portfolio Website

Before jumping on the process of building my portfolio, here are some reasons why I needed one:

• Showing my projects & skills I wanted a live space to show my work.
• Learning new technologies The best way to learn and use new skills is always a personal project.
• Making networking easier Rather than simply providing my LinkedIn or GitHub, I wanted to create something different.

1. Planning

When it comes to planning, the first thing that came to my mind was what sections my portfolio should have. Here they are::

• Home - A brief introduction.
• About Me - What I do, who I am, and what I like.
• Skills & Experience - Technologies in which I’ve worked with and my professional journey.
• Projects - The projects that I have made during my internships.
• Blogs - A place where I will showcase all the blogs I write.
• Contact - Ways by which individuals can contact me.

The Tech Stack

After planning the sections for my portfolio, the next step was choosing the technologies for designing it:

• HTML - To structure the content of my website.
• CSS - To style, design, add colors, fonts, and spacing to make my website look good.
• Canva - To design custom graphics and images.

Setting Up the Website

After planning and finalizing the tech stack, it was time for coding. I divided my development part into two main phases:

1. Writing the HTML

I started with a basic index.html file. To keep it organized, I used semantic HTML tags (<header>, <nav>, <section>, and <footer>). I also added a navigation menu for easy scrolling between sections. I used Font Awesome icons to enhance the visual appearance. I also added a hero section with a title and a brief introduction to grab visitors’ attention. The about section provided a summary of my experience and skills, I also added a hero section with a title and a brief introduction to grab visitors’ attention. Lastly, I added a contact section so that visitors could find it easy to contact me.

2. Styling with CSS

To design my website with a clean, modern appearance, I used CSS. I went with a dark theme of low contrast so that content is easily visible in the dark background. Also made the navigation bar fixed and centered, so users could access it anytime while scrolling.

Deploying the Website

Once everything was ready, I pushed my code to GitHub and used GitHub Pages, a free and easy way to host static websites. After pushing my code to GitHub, I enabled GitHub Pages in the repository settings, and my portfolio was live!

I also optimized it by:

• Compressed the images to reduce load time.
• Added meta tags & Open Graph tags for better SEO.
• Ensuring mobile responsiveness by testing on different devices.

Conclusion

Building my portfolio website from scratch was a fulfilling experience. It helped me apply my HTML and CSS skills while creating something that represents my work. If you’re thinking about creating one, start simple and make it over time!

Check out my portfolio: Portfolio Link