I built my Portfolio Website using nothing but HTML & CSS!

What I built

I built a developer portfolio showcasing my projects, tech stack, and more using plain HTML, CSS, and a bit of JavaScript. This project is also submitted to the DigitalOcean + DEV hackathon and is deployed using DigitalOcean's App Platform.

Category Submission

This project comes under the Personal Site/Portfolio category of this hackathon.

App Link

The app has been deployed using DigitalOcean's App platform and can be viewed at this link.

Screenshots

Here are some screenshots of the website for those interested:

Description

This is a simple portfolio website that can be used by developers. Nowadays, it is important to have a website that can showcase your skills, projects, work experience, and contact information. It is especially important for freelancers as it gives the potential clients a one-stop-shop to find previously completed projects and contact information.

Link to Source Code

This project is open-sourced and can be used by anyone. Link to the GitHub repo: https://github.com/codewithfahad/portfolio-website

Permissive License

The project is licensed under the MIT License.

Background

I wanted to have a portfolio website for quite some time. But I wasn't sure about a design so I kept on procrastinating. But when I heard about this hackathon, I knew this might well be my best chance at not only building this thing out but also participating in the hackathon in the process.

Thus, I decided to skip the designing process in something like Figma and jump right into coding. Long story short, I was able to come up with a somewhat decent design and complete the website in a little over 2 days.

How I built it

For building this website, my first inclination was to use React. Since I have been using it to build other applications, I thought why not use it for this project as well.

But at the last moment, I decided to go with nothing but simple HTML, CSS, and vanilla JS for this website. I wanted to see what I can build without using any framework whatsoever. So, no React, no bootstrap, and no library of any kind was used to build this website. I believe that many applications can be built using these fundamental technologies without jumping into frameworks.

So beginner web developers should not feel intimidated that they don't know any frameworks. Because in most cases, plain HTML & CSS can do the trick!

Things I learned when building this website:

• Smooth Scroll
• Deployment to DigitalOcean
• CSS Grid and Flexbox usage

Deployment was simple using DigitalOcean. I signed up for an account and then was able to connect by GitHub to my DigitalOcean account. After that, it was as simple as choosing the correct repo, and voila! The site was published in seconds!

Additional Resources/Info

For the design, I took inspiration from Luke Netti's portfolio.

For implementing smooth scroll functionality, I took help from the following website.

That's All Folks!

That is all for this blog. Hope you enjoyed it. As always I would appreciate it if you follow me on Twitter @codewithfahad. You can find more of my blogs here. Thanks for reading and happy coding!