Intro
The portfolio I created back in 2020 made me learn a lot of skills. Initially just having the idea of posting my artworks in behance and look out for jobs. But on the second hand, I learnt to code frontend and the limitations that come with it.
How I wanted my portfolio to be
I wanted to showcase a culmination of my creative journey in 2020. As an artist and designer, I have poured my passion into three main categories: About Me, Artworks, and UI Design. Drawing inspiration from esteemed platforms like Awwwards and CodePen, I aimed to create a digital space that not only showcases my skills and experiences but also reflects my unique style and vision. Through the fusion of HTML5, CSS, and JavaScript, I meticulously crafted each element of my website, ensuring a seamless and immersive user experience.
Basic rules of UI and UX I would have implemented:
Challenges
Some of the challenges that i faced were as follows:
The biggest challenge was to bring my vision and functionality on the same grounds.
As a creative person I had to compromise on my grand visions and focus on low code and functionality. I had to choose a style before jumping on to the landing page of my portfolio.
During 2020 parallax scrolling was a trending style and I found it amusing back in the day and later realized that apart from looking cool the navigation and functionality seemed much more complex.
Micro animations played a huge role and attracted me. So I wanted to utilize those fancy functions in my portfolio.
Approach
To overcome these challenges and create a functional and responsive portfolio, I went on the following approach which later led to many iterations:
Jumped straight on to coding: I had an internal ideation of the visual aspect of how my website is going to look and jumped straight into it by starting to code the website rather than sketching, ideating and providing a map for how to code the visual challenges.
Iterations: After following the first step mentioned above I created 3 different landing pages in the course of two weeks just to find out that their functionality weren't working and I had to iterate all the 3 into one single functioning website.
Inspirations & Sketches: After the above two flawed steps I did some research as to where to gather inspiration from. I came across awwwards, codepen, dribble and behance. Started sketching a basic wireframe as to how my website is going to look.
Iterations(Initial Designs):
Frontend
I had a to learn a few frameworks and techniques in order to achieve what I was aiming at and here are the few parameters I had to consider:
Responsiveness: I had learnt the term responsive website and thought that it was something to do with the response times involved. Later found out that it was the adaptability of different sizes for different devices ad had to learn parameters like "breakpoints".
Bootstrap: Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. this gave me a basic understanding of containers and stacks.
CSS, Javascript, SCSS: Came to know that there are many frameworks involved in the design of frontend coding. I utilized all 3 frameworks that I came across while learning in the design frameowrk of my website.
UI Showcase:
Results
The result was a simple one page LP with a header and 3 categories to choose from without the footer:
Slideshow: My LP had a slideshow with a filter running over it utilizing javasript, forewshadowing the artwork I've done.
Artworks section: I love this section and how it runs because of the slide to pop animations I learnt on codepen and utilized it accordingly.
PHP: I learnt basics of PHP on how to create a mailing system in order to reach me via mail ad further extending my knowledge of frontend.
Using GCP: I bought a free domain name called "everyotherportfolio.tk" and ran it i Google cloud platform servers. I had to link it via the apache tomcat server protocol. It was an idea given to me by my brother so that I had my website up and running without spending a single dime.
How I would have re-iterated it today
12-Grid and 6-Grid system was something I was completely unaware of while designing my portfolio.
Over - saturation of the projects I did. I would have avoided that and chosen what I thought were my best works, in order for the recruiter to filter.
Fundamentals of UI in the apps I created in order to showcase my User Interface part in my portfolio. Looking back at the examples I've shown, I feel like ai have missed out on the basics of UI.UI Showcase.
Conclusion
In conclusion, my portfolio stood as a testament to my dedication and growth as both an artist and designer. I had not only showcased my talents but also expressed my individuality and creativity. Drawing inspiration from industry-leading platforms like Awwwards and CodePen has fueled my ambition to push boundaries and set new standards in digital design. With the careful integration of HTML5, CSS, and JavaScript, I have strived to create an immersive and captivating user experience. As I look back on this journey, I am filled with pride and excitement for the future possibilities that await. In fact, this portfolio landed my first job and I was very grateful for the hours I put in creating this.
