How I Built My Portfolio Website

Building a portfolio website is a crucial step for any developer or creative professional. It showcases your skills, projects, and achievements in a visually appealing and accessible way. When I started building my portfolio, I wanted it to reflect my journey, highlight my accomplishments, and create an online space where potential clients or employers could easily connect with me. Here's how I went about creating my personal portfolio.

Step 1: Planning the Structure

Before jumping into coding, I spent some time planning the structure of my portfolio. I knew that my portfolio had to include sections like:

• Home: A brief introduction and an overview of my skills.
• About Me: Detailing my educational background, work experience, and interests.
• Blog: A space to share my learning experiences and tutorials.
• Certificates: Highlighting my certifications and accomplishments.
• YouTube Channel: Embedding videos from my channel for easy viewing.
• Contact: A simple and effective way for visitors to get in touch with me.
• Footer: Actually I already created a footer section for every project created by me.

The key to planning was making sure each section served a clear purpose and was easy to navigate. I sketched out the layout and planned how users would move through the site, from the homepage to other sections.

Step 2: Setting Up the Repository on GitHub

I chose to host my portfolio on GitHub Pages. GitHub Pages provides free hosting for static websites, making it the perfect platform to deploy my portfolio. Here’s what I did:

1. Created a new repository on GitHub, named after my portfolio.
2. Cloned the repository locally using Git, allowing me to start coding directly on my machine.
3. Once I had all my files ready, I pushed them to GitHub, which automatically deployed my website.

GitHub Pages also helps in maintaining version control, which is crucial as I keep improving and updating my website.

Step 3: Building the Layout with HTML and CSS

With the structure planned and GitHub set up, I dove into coding the front end. I used HTML5 for the structure and CSS3 to style the pages. Here are the key elements:

• Responsive Navigation Bar: I created a navbar that looks great on both desktop and mobile screens. I made sure the navbar was clean, simple, and easy to use.
• Home Section: I added a brief introduction about myself along with links to my social media profiles and portfolio projects.
• Certificates Section: I used a grid layout to showcase my certificates in a neat and organized manner. Each certificate is clickable and opens up in a larger view.

To ensure that my website was responsive, I used media queries in CSS to adjust the layout for different screen sizes.

Step 4: Adding JavaScript for Interactivity

To make my website more interactive, I incorporated JavaScript. One of the main features was the smooth scrolling functionality, which I achieved by using this simple CSS rule:

html {
    scroll-behavior: smooth;
}

This allowed users to navigate between sections smoothly when they clicked on links in the navbar. I also used JavaScript to handle the navigation toggling for mobile views, ensuring a better user experience on smaller screens.

Step 5: Embedding YouTube Videos

I wanted to showcase my YouTube channel directly on my portfolio. For this, I created a dedicated YouTube section, where I embedded a few videos using YouTube's iframe embed code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qSSuTN2ZfKU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Visitors can now watch my videos directly on my portfolio without needing to leave the site.

Step 6: Customizing the Blog Section

I included a Blog section to share my thoughts on web development, JavaScript, and other topics I’m passionate about. Each blog post has a summary with a "Read More" link, directing users to the full post. This allows me to keep sharing valuable content and showcase my learning journey.

Step 7: Testing and Making It Responsive

Before deploying my site, I thoroughly tested it across various devices and browsers. I wanted to ensure that it looked great on desktops, tablets, and smartphones. I used Chrome DevTools for live previews and made adjustments where necessary.

Using flexbox and media queries, I ensured that all elements on the page resized and rearranged themselves for optimal readability on any device.

Step 8: Deploying on GitHub Pages

Once everything was in place, I committed my changes to GitHub and enabled GitHub Pages from the repository settings. Within a few seconds, my portfolio was live!

Whenever I make changes, all I have to do is push my updated code to GitHub, and the live version of my portfolio is updated automatically.

Final Thoughts

Building my portfolio was a rewarding experience. It not only allowed me to showcase my skills but also pushed me to learn new technologies and best practices. I plan to keep updating my portfolio with new blog posts, videos, and projects as I grow in my career.

What’s Next?

I plan to continue writing blogs, creating videos, and refining my portfolio. Stay tuned for updates on my journey!