Search for a command to run...
![Portfolio website [Planning and Execution]](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1642466788402%2F9VGCatiwx.png&w=3840&q=75)
I am a software engineer with passion for coding and learning new stuff everyday.
No comments yet. Be the first to comment.
In this series I will be posting tutorials on how to create basic applications from scratch from planning to deployment, using free/cheap internet services
They say that a picture is worth a thousand words. Well then, what about a website that has lots of pictures?
The first steps of a developer in his/her career are static web pages/websites. These projects have served as an introduction to most of the programmers I know. Also, now since we live in what is called the "internet era", you cease to exist the moment you are off the grid.
As a programmer with no experience or education, your chances to land an entry-level job are lower if you don't have a showcase website to present your work. Github is fine, but most of the people who do HR will not bother to check your GitHub repositories. To address this issue, one of the first things a programmer should do is host these applications so everyone can get a feeling of what you do. For that reason, we are starting this series with a tutorial on how to build and host a portfolio website using nothing else except HTML, CSS, Javascript, and just a little bit of Bootstrap.
The reason why I will not use something like React or Angular is that I want to start at the lowest level possible and work my way up to use other tools and frameworks. A better, more beautiful version of this website will be somewhere in the future and will serve as a comparison between what a beginner's work looks like in contrast to a bit more experienced programmer. You will probably end up with a better beginner's website than me. (I don't want to give away spoilers in the series)
To build this website we will need to come up with a design first. If you lack creativity and cannot design a website from scratch, you can get ideas by visiting other portfolio websites or visiting websites where designers expose their work. Some of these websites are https://dribbble.com/ and https://themeforest.net/ . If you like somebody's work and have the financial capabilities to support these people, then please do so because, in the end, we all got bills to pay.
After choosing such a design for your website you can start looking for CSS libraries that can help you style your website if you don't want to build the whole CSS for your website, but I HIGHLY discourage this, since you will not get to see in action how a CSS file looks like and you will not get to know lots of CSS properties.
You can use different applications to create your own design, some of them that I find pretty useful are Figma and Adobe XD. They are some of the best design tools, and we will use one of them to create a more serious design in the upcoming articles.
Your website will surely need some icons, right? As in all of the above cases, you can make them yourself or search for them on the internet. There are lots of free icons that should be more than enough for you to start building your website. Some of these websites are https://icons8.com/icons/set/svg and https://freeicons.io/ .
I like the layout of this theme and will be implementing something similar in this tutorial: https://themeforest.net/item/niko-resume-wordpress-theme/23936124
Now since we have a design in our head, we can choose the tools that we will use and we can start. Since this is just a static website, all we need is a text editor. I will be using Visual Studio Code for this project since it is my favorite.
It is important we lay a solid structure for the project so it is easily maintainable. For that reason, I have chosen the following file hierarchy model:
Also important to note, you don't have to follow the rules strictly. For such demo projects you can start by writing everything in a single file, but before you submit it to the general public make sure to refactor your code and follow some design patterns. This is okay ONLY when you are developing something small and work alone. If you work in a team, please never do that, always follow design patterns.
I will not discuss the HTML because that would take lots of space and would make the article boring, rather I will go through the thought process of what I did and why I did it in that fashion.
Now, we can start by dividing the layout into what I call sections.
Here we can see that our layout has three main sections, the menu section (red), profile picture (green), and content section (blue).
The red section only has vertical icons and will serve as a menu bar, while the green section has only a picture that we will display. Most of our time will be spent on the blue section. The blue section will be like an array of containers for each section and only one of those sections will be visible at a given time.
Here you can see the thought process for the "about me" and "resume" sections. The other sections follow a similar thought pattern but will be different from the theme. For the sake of time we will cover those sections in the next article.
Now it is time to start writing the content we will display. I will write the following sections: "about me", "contact me", "blog", "resume" , "projects".
The code for the website will be publicly hosted on Github so you can see exactly what has been written.
