How I Made My Portfolio Website

As a software engineering student, having a portfolio website is essential. It’s a way to showcase your skills, projects, and experiences to potential employers and collaborators. In this blog post, I’ll walk you through the process of how I created my portfolio website.

Introduction and Motivation

Creating a portfolio website is a must for every software engineering student. It serves as a platform to display your work, share your knowledge through a blog, and provide a way for people to contact you.

Planning and Preparation

The first step in building my portfolio was planning. I designed the initial layout of the website using Figma, a popular design tool. To gather design ideas, I browsed various portfolio websites on Google. This helped me visualize the structure and aesthetics of my site.

After the design phase, I planned the pages and content for the site. My portfolio includes the following sections:

• Home
• About
• Projects
• Blog
• Contact

For coding, I used Visual Studio Code (VS Code) as my code editor, along with the Live Server extension to get a live preview of my changes as I developed the site.

Design and Development

I chose a straightforward technology stack for my website: HTML, CSS, and JavaScript. I didn’t use any frameworks, which gave me full control over the code and allowed me to learn more about web development.

Developing my portfolio site was my first significant project with HTML and CSS. One of the main challenges I faced was ensuring mobile responsiveness. It took a lot of trial and error, but I eventually managed to make the site look good on various devices.

Content Creation

In terms of content, I focused on the essentials. The Home page gives a brief introduction, the About page contains more detailed information about me and my skills, the Blog section is where I share my thoughts and tutorials, and the Contact page allows visitors to get in touch with me.

Implementation and Testing

I used GitHub for version control, which made it easier to manage changes and collaborate if needed. For deployment, I hosted my website on GitHub Pages, a free service provided by GitHub that allows you to publish static websites directly from a GitHub repository.

Deployment and Maintenance

Hosting on GitHub Pages was straightforward, and I plan to add a custom domain in the future to make my portfolio more professional. I also integrated the Web3Forms API for the contact form functionality, which I’ll explain in detail in my next blog post.

Reflections and Advice

Building my portfolio website was a valuable learning experience. Here are a few tips for others looking to create their own portfolio:

• Start with a Plan: Design your site and plan your content before you start coding.
• Learn the Basics: Understanding HTML, CSS, and JavaScript is crucial. Don’t rely solely on frameworks initially.
• Use Version Control: Tools like Git and GitHub are essential for managing your code and collaborating with others.
• Focus on Responsiveness: Ensure your site looks good on all devices.
• Deploy and Iterate: Don’t be afraid to deploy your site and make improvements over time.

I hope this post has been helpful. Stay tuned for my next blog post, where I’ll explain how I set up the contact form using the Web3Forms API.

Thanks for reading! Feel free to reach out if you have any questions or feedback.