Building A Responsive Portfolio Website As a Beginner Over a Week

First of all, this is NOT a step by step tutorial of making a website. It’s more of a diary about the development ofmy own portfolio website. Hope my approach to learning something new will be able to inspire you as well!

Chill buddy

Building a portfolio website for a beginner sounds quite intimidating. Especially when the goal is to make it standout from the other pre-made templates. We have tech stack to consider:

• The fundamentals of HTML/CSS/Javascript;
• The web page layout;
• CSS syntax and visual effects;
• The retrieval of HTML elements and the calculation through Javascript scripting;
• What frameworks and tools to use;
• What about back-end?
• How do deploy it using proper CI/CD tools, etc.

Overwhelmed, eh?

Fortunately starting to focus on one goal at a time will help immensely to get the steps right.

Before learning everything yourself. If you know someone who has decent knowledge of web development, simply ask them nicely about what tech stack we could use depend on our needs.

For my situation, I have these goals in mind:

• I wanted a website to introduce myself to the recruiters, help them know me more effectively;
• My fast learning ability;
• Clean visual effect with nice touch to be able to stand-out.

After a lengthy discussion with an expert, a static website is more than enough to serve that purpose. So back-end is out of the way. And it can be deployed directly through Github Pages and it’s free.

The expert helped me narrow down what framework, tools and deployment to approach when it comes down to building a static website. The rest is up to me to make it reality.

Here is an article about how to set and launch a static website to Github Pages: https://kinsta.com/blog/github-pages/

With the goals and clear path, it is much less overwhelming than it seems. So let’s get started!

Even though I love reading books, it is ineffective to read a whole bunch of them under time constraint. Video tutorial is a better way to learn and see the result of programming in real time, and it has been proven extra helpful during my academic studies. Fortunately the development community is quite mature regarding helping beginners to learn.

After a short amount of time of research, Traversy Media has a lot of up-to-date tutorial videos to code along. The goal of this stage is not to remember everything that I code along with the videos and to be able to program all of them immediately without assistance. A better way to learn from them is to observe the way of how he write the code and to listen attentively about the explanations on the code.

Learn HTML/CSS/Javascript

These are the basic of basics in terms of Web Development. A must learn if you will. Mostly I code along with these videos and make changes that could be adopted to my vision of portfolio site.

The entire learning repository is here: https://github.com/e-choness/html-css-js-exercise.git

It is much easier to keep track of what I’ve learned. Also it will be source material to get back to it when it comes to implementation in case I forget about some details on it.

And the videos I followed along are:

This Is Not Enough!

But knowing these are not sufficient enough to make a portfolio site that suits my vision. So I will have to keep pushing for learning more. Knowing that utilizing mature frameworks and tools will greatly improve efficiency.

The next step of learning are:

• Sass: Better structured CSS format with features like inheritance and polymorphism;
• Bootstrap 5: A responsive framework with flexible layouts and snippets. This framework will make a site adjustable to screenwidth much much easier.

Reality Is Not Theory

After a rigorous phase of learning. I felt like I could finally get started, using tools for effective programming was one thing what I’ve learned from professional experience. Looking for a well-structed template to learn and adjust from was my next objective.

There are challenges on that as well:

• What kind of template is in alignment with my vision?
• What are the tech stack and plugins that I’m not aware of?

The answer only lied in multiple templates I chose from random template sites and took more dedicated time to look at the code.

One template used gulp for build pipeline. Another one had cool visual elements but horribly structured, very hard to read through the code. Some had plugins that required jQuery to function, etc. So I ended up rushing through additional materials to get a gist of what I got myself into.

At this stage I get myself familiar with these plugins:

• JQuery: https://jquery.com/
• Isotope: https://isotope.metafizzy.co/
• Typed: https://github.com/mattboldt/typed.js/
• Animate on Scroll: https://michalsnik.github.io/aos/
• Slick: https://kenwheeler.github.io/slick/
• Google Fonts: https://fonts.google.com/
• Font Awesome: https://fontawesome.com/
• Devicon: https://devicon.dev/
• Bootstrap Icons: https://icons.getbootstrap.com/

Videos I watched through:

Eventaully I was rewarded with the effort by an up-to-date template using bootstrap 5. And that was it, exactly what I want. Clean visual, easy to read and modify, simple build pipeline embedded into npm. It is Under MIT License which means free to use for personal purposes.

Deployment is the Hidden Evil

The deployment and publishing of any software is the step often overlooked by beginners. Github provides Actions as internal CI/CD pipeline to automate this step. To get automation work, we will need to make configurations on what actions should be taken in the pipeline. The configuration settings is under .github/workflow/static.yml file.

Github Pages’ default setting is to build in a selected branch. However, the downside is that you cannot configure subdirectory under the main root. That’s quite a bummer, since the web page I built was under /dist directory.

Luckily, the community already has a bunch of workaround for it. One of the simpliest way is to use gh-pages plugin to copy all compiled files in /dist folder into a branch called gh-pages. Every push into the main branch will automatically copy all the compiled files into the gh-pages branch.

In static.yml not much changes should be make. Just to make sure branches has the value gh-pages and we are all good to go.

Here is a video tutorial how to deploy front-end web pages and how to use gh-pages plugin:

Naturally every step of previous learning paid off. I knew where to change colors, add transparency, adjust layout, embed icons, modify links, apply scripts and more. Getting more confident when the knowledge grew.

The end result was well-received by most people and the community I asked feedback for. The last step to take is to make subtitles changes based on those feedback. I’m grateful that people never held back with good words and suggestions. A really rewarding experience!

Please go check it out here: https://e-choness.github.io/portfolio-site/

Source code: https://github.com/e-choness/portfolio-site

Now in site maintaining phase I could divert my spoons of energy to the on-going projects. Looking forward to learn more!

Special Thanks

JJ Montee: a mentor provided guidance on tech stack.

Sean Carton: for advices on personal portfolio site.

Zack Maldonado: for valuable suggestions and encouragement.

Women in Games community, Angelina Bayer, Michael House, Jane Whittake, Azime Ulker, Kichelle Momohara-Pelous, Marlo Jimenez, Daniel Milo, Brad Bamble, Jair, Miguel Neves and Josh Griffinhs: for being a great and engaging community that provided valuable feedback.