How I Created My Portfolio Website (Frontend Web Developer)

6 min readMay 17, 2020

I recently graduated from Flatiron Coding Bootcamp in New York and entered the job market. As a frontend web developer looking for an entry — level position I believe it’s important to have a professional portfolio website that displays all your projects, especially if you don’t have any previous coding experience or a formal CS degree. Entering the job market amidst of coronavirus pandemic is daunting to say the least so I decided to use this time to practice my skills, learn new ones and hopefully build cool projects along the way. This blog post is about my very first project that I built during quarantine that went live — my personal portfolio website.

Workflow

Before building my website I created a plan of how am I going to approach it. The segments that I needed to work on looked like this:

Planning — understand the purpose, outline deliverables
Design — sketching out ideas, working on color scheme and typography
Development — writing the code
Publishing — hosting and getting a custom domain name

Planning

To start building anything in life it’s helpful to have a plan or idea of what you want to build and how you want it to look. It’s great to start with the purpose in mind, or how Simon Sinek would say — “Start With Why”. In my case my purpose was to build a personal portfolio website that would have all my information, all the projects that I’ve built in the past and my personal bio. This website should be pretty simple, intuitive, responsive and represent me as an individual as well as a skilled web developer. It has to have a clean and modern design and have a beautiful interface. It should be unique and creative. Phew, that was a lot! But the more concrete you get on all the details the easier it will be to execute. In outlining the deliverables I implemented user stories like so:

— the user is greeted with a Home page (this should be something creative and unique, in my case I used three.js — a cross-browser JavaScript library used to create and display animated 3D computer graphics in a web browser)

— the user can navigate to About Me page (this page will have a compelling personal story as well as information about education, current tech stack, past work experiences and interests/hobbies — for a personal touch)

— the user can navigate to Projects page (this is where all the best projects will live, with descriptions of technologies used and links to Gitub and live video demos)

— the user can navigate to Contact Me page (this page will have all the necessary contact information as well as links to any social media and Github)

Design

After understanding the purpose and planning a rough outline it’s time to think about design! I’m a very visual person so that was definitely one of my favorite parts. I started with sketching out the wireframes/blueprints for my pages. I simply used pen and paper, but you can use any tools you like, for example I also like Figma which is a digital design and prototyping tool. You can use it to create websites, apps, or smaller user interface components that can be integrated into other projects. The first sketch of my wireframes looked like this:

Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project. After the blueprints were finished I started researching the color scheme for my website. I’m not a designer but I had an understanding that the color scheme should be very modern and clean. I will list some great resources that I found for color research at the end of this blog. After a considerable amount of research I ended up picking black as my primary color (mainly because my Home page had a 3D graphics of traveling through space) and neon pink as my secondary pop of color.

Typography plays an important role in setting the tone, theme, and message of a website. For my website I picked Orbitron — a geometric sans-serif typeface intended for display purposes. It worked perfectly with my space theme and it’s reminiscent of the science fiction movies I used to watch and love as a kid. The second choice for the font fell to Raleway — it was one of the most popular pairings with Orbitron according to Google Fonts. This is my About page featuring a photo of the graffiti wall that I took at the Flatiron school in downtown Manhattan, that says “Work hard, be nice, get positive, stay hungry and have faith that everything will work out — The Flatiron School” — my mantra up to this day!

Development

Now is the time for the most exciting part — writing the code! There’s a lot of debate online about creating a custom website vs using a template and there are certainly pros and cons for both of those options. As far as I understand it’s okay to use a template — it’s faster, more simple and minimal and if you’re just in the beginning of your career as a web developer it will definitely be easier for you. However, don’t get me wrong you should still customize it and add features and functionality to showcase your programming skills.

I personally started with a Bootstrap template but ended up creating all of my pages from scratch, because that way I could customize it more. It definitely took way longer but it was all worth it and I’m very happy with the way it turned out. The main goal of this portfolio website is to showcase the projects you’ve built but the website itself also counts as a project of course! This is my Projects page featuring the projects I built at Flatiron:

Publishing

In order to publish your brand new website you’ll have to decide on the domain name and web hosting. Domain name is the address of your website that people type in the browser’s URL bar to visit your website. According to my research it’s important to have a custom domain name because it increases credibility and helps you get found online more easily, however, it’s not mandatory. I personally decided to go with the custom domain name that I purchased from namecheap.com.

Web hosting is the place where all the files of your website are located. It is like the home of your website where it actually lives. A good analogy would be if the domain name was the address of your house, then web hosting is the actual house that address points to. All websites on the internet, need web hosting.

GitHub Pages are public webpages hosted for free through GitHub and it’s the resource I used for hosting mine. GitHub users can create and host both personal websites (one allowed per user) and websites related to specific GitHub projects as long as they have the source code on a public repository on GitHub. After my website was published, I made a couple changes to it and every time it got deployed with no problems. This option worked out great for me because it was free and easy to set up.

Since I bought my domain name from a separate company and hosted my website for free with GitHub Pages it required a bit of setup. After I point my domain name to my web hosting company by editing the DNS settings and waiting for a day my website went live! If you’re interested you can find it here https://alenanikulina.nyc