How I made my first dev-portfolio website with Bootstrap & particles.js
Just after completing my 5th semester at the university, I knew that I needed a portfolio website if I wanted a web-dev internship off-campus offer. As I was mostly watching front-end videos on YouTube in my free time, I somewhat knew what I wanted.
This is the landing page of the website I created. It is currently being hosted as a GitHub page, you can check it out at:
https://toughyear.github.io/portfolio/
Before I share the short story of making this website I want to tell you that the complete source of this site is available at my GitHub repository. You can use it as you want without any attribution. If you liked this project, do leave a star. Link to the repo is:
https://github.com/toughyear/portfolio
Now that out of the way, let’s see how it all started.
From the start, I knew I wanted to have a minimalistic design. However, I didn’t have any UI design beforehand. It was more like on the go process where I added and removed things and UI items over many iterations.
Color scheme
From my wardrobe to my IDEs' colors, I always prefer dark palette. It just looks more professional and serious to me. So I knew I wanted to make the site in duo-tone i.e. black and white. But instead of choosing a pure black color (#000000), I chose a more matte type black (#0d0d0d). I used white color to complement it throughout the site.
Navigation system
I have used bootstrap in this project to make it responsive across all screens. This the reason I used navbar classes of the bootstrap library. I used the dark color scheme of bootstrap but it wasn’t the color I wanted. So I created a custom CSS file to override the color scheme. I didn’t have a brand logo so for the left side I decided to write “my portfolio” in a cursive font. I imported two fonts from Google fonts: Pacifico and Roboto. I later changed it on the suggestion of my designer friend. I used bootstrap scroll spy to highlight the section of the site the user is currently on. Bootstrap navbars are also responsive by default so that they collapse on small screens. This helped in making the navbar section responsive across all screens.
Landing page
I love movie making and motion graphics as much as I love web development. This is the reason I wanted a fade-in transition on the landing page with my roles changing continuously just like some opening sequences in movies. Initially, it stopped right after my name faded in for the first time, but there was a glitch caused by the loader due to which sometimes some of my roles never rendered. It was random and depended on browser caching and connection speed. I could have fixed it, but I was lazy and moved on to another project. For now, it continuously loops through all my roles. You can edit this if you want by changing the scripts.js file and editing the ‘for loop’. My friend said that it was better this way (looping).
Projects section
A dev-portfolio without projects is of little use. So I made a project section. Initially, I tried some crazy ways to show my projects. It failed for the simple reason that the project section needs to be scalable as well as responsive. I ended with a simple flex based card system in which I could add as many projects as I wanted. Right now some of the cards are just dummy to have a perspective as to how the site will look once complete. I will update the links with real projects once they are finished (I am lazy ☹). The project section right now is scalable and responsive on all screens.
Blog section
I thought, that I don’t want to put every stupid experiment I do in the project section. The project section was meant for meaningful projects I have done so that when someone visits my site he/she sees my important projects featured prominently. And for other random development/design/writing stuff I created this blog section. It is similar to the project section but with a more simplistic card design. It is scalable, responsive and you guessed it: dummy/placeholders. I will add links to my blogs too when I find the time.
About Me section
For the about me section, I wanted to have a little something special. First I thought I will do something with a 3d object because of my love for 3d motion graphics. For this, I learned three.js, a JavaScript library for rendering 3d objects in a web browser. However, it failed because I couldn’t find any simplistic use of three.js and advanced uses looked overkill. I ended up with something else: particles.js library. About me, section seemed a perfect place to use it and it fits well with the minimalistic design of the site. I added bootstrap buttons to link my CV and LinkedIn.
Footer
Footer of the site was inspired by a pen (a code snippet) by a Codepen user: ‘scanfcode’. Icons were imported from the CDN of font-awesome. The icons change color on hovering over them.
Loader for the site
This is one of my favorite parts of the site. The loader is the screen you first see when you access my site. It is meant to be shown until the page has completely loaded and no media on the page is left to be accessed. However, I didn’t really need a loader as the site was fast enough to be loaded quickly on most connections. There were no heavy media files that made a loader necessary. I added the loader for the simple fact that I wanted to add one. I even added a delay so that even on the fastest network you have to spend at least 2000 milliseconds (2sec) on the loader just so that you can appreciate the red wolf which glows in a breathing pattern continuously. It was initially white to match the color scheme but I later changed it to red because it looked cool 😎. Making the loader was another task in itself: dealing with SVGs paths, path properties, strokes, stroke animations, etc. But it was satisfying.
Conclusion
I learned a lot from this project. You think you know how to do something, but when you try to implement that something somewhere breaks/goes wrong. But that’s how you learn. When Making a good site, there is more than meets the eye. Making site responsive, snappy navigation, overriding CSS properties, better linking principles, hiding overflow(scroll bar) and many other things you need to take care of. You learn these as you go. So start your project right now even if you don’t know where to start because sometimes no plan is the best plan.
Extra Content
Nothing important actually. Just saying that I wrote this blog a few months back and didn’t post it because it didn’t look so awesome. But when I was going through my drafts I thought why not publish it, maybe someone will find something useful or maybe courage to write their own portfolio site.
I would love to connect with you on my twitter: https://twitter.com/RajeevSinghN
I frequently publish interesting articles on my newsletter. It’s free.
