Building a UI/UX focused portfolio

What I built

A Personal Portfolio site I built to showcase some of my selected work and achievements. The entire website is static and makes use of HTML, Javascript, and CSS. The animations are done in barba and locomotive scroll.

Category Submission: Personal Site/Portfolio

App Link: https://personal-portfolio-fkqsn.ondigitalocean.app/

Screenshots

The website is composed of smooth animations and free flowing text to create parallax like effects.

The white background and black text coupled with ighly scaled images produces the perfect mix of beauty and authenticity.

Gifs do add a new tone to the website. Don't you think so?

Texts that required emphasis had different fade-in effects and it adds to the user giving more attention to those.

The rule of thirds have been widely used in the design.

The use of images does make the site look good, doesn't it? :D

Link to Source Code

View it Github: https://github.com/abishekvashok/personal-portfolio

View the app live at: https://personal-portfolio-fkqsn.ondigitalocean.app/

Permissive License

The MIT License

Background

Many a times, people have been asking me to reflect what I've built, on my personal website. I wanted to do so, but couldn't find enough time to build a stellar website. So here I did: I built up a kick-ass static website that showcases my work over the years.

I've wanted it to be centered upon good design and for which I have made use of barba and locomotive-scroll, two widely used javascript libraries. Lot of high scale images alongside smooth animations and effects give each visitor the exact look and feel of my work! The exact thing I aimed at!

I further believe that design should inspire, and ignite the passion in the viewer and I have done my best here and I hope everyone would like it!

How I built it

I've thought about using NodeJS at first, but ventured upon HTML,CSS, and JavaScript as Node would be overkill for a simple project as this. Yes, only HTML5, CSS3, JavaScript and JQuery are used in this project. I wanted it to be a static site and fast. Moreover, it had to be mobile compatible. Mobile compatibility and speed were important to me. Because I worked intensively on SEO on many blog sites I opened before. I wanted to act with this awareness.

But I regretted having to theme the styles all the way, took inspiration from some WP themes, but in the end mixed them all up instead of using their styles/theme.

After I made a working copy, I utilized Digital Ocean App Platform to host the website and further tweak from there. I minimized most scripts and style-sheets in hope that the page loads faster. And it did! Digital ocean's reliability and robustness coupled with the matrices it gave, was really helpful!

Using static versions of barba and locomotive-scroll was a bit of challenge and I've had to tweak the scripts a bit more in the process (ended up suing two minimized scripts, one loading before the page contents and other after).

Polyfill library has been used to provide backward compatibility across older browsers so that each user be he from mobile/desktop, or from an old/new browser could have the same experience.

All of the theme-ing has come from the fact that recently I've became a bit more addictive to design thanks to a new Adobe illustrator course I am taking. I've taken courses on illustrator and coupled with the old rules I've not forgotten from my drawing classes, I given fresh air to my portfolio.

I haven't mastered the use of colors yet so I've stuck to the fundamental colors - Black (#000000) and White(#FFFFFF)

Finding a font has been challenging but I settled on the Unica (typeface)after a bit of research and it yielded beautiful results:

I believe I have done justice to the world by making a more UI/UX focused portfolio than a developer focused one and that I can inspire more people to follow the same.

So what are you waiting for? Go and see what I've built: https://personal-portfolio-fkqsn.ondigitalocean.app/