My Portfolio Site

I made this portfolio site to practice building sites and to showcase my projects. This site was built with Next JS and CSS Tailwind.

Deployed Link

To visit the deployed version of the site, click here:

https://simranrai.vercel.app/

Challenges and Lessons

Getting Started

Building a site from scratch is overwhelming as I did not know where to start.

After looking at many portfolios of other software developers, I knew the main components I needed on my site.

I made a high fidelity wireframe on Figma to reflect what I wanted my site to look like.

With the layout and components of the site decided, I chose to follow a YouTube tutorial to build the skeleton of my site.

This was helpful because:

Following along allowed me to learn the process of how to build a site from scratch
I had only built one project with Next JS and CSS Tailwind before starting this project, so following along with the tutorial helped me learn a lot about both technologies.
The tutorial taught me how to make a site responsive using CSS Tailwind, something I struggled with in the previous Personality Quiz project.

Colour Scheme

The colour scheme of this website was important because I wanted the site to look good as well as being accessible.

My initial colour scheme (background: #DB5375 + #2F97C1, text: #EEF4ED) did not score well on the Coolors Contrast Checker. The score was Very Poor.

I had to rework my wireframes and went with #000000 as my background colour and #EA9EB1 + #ffffff as my text colours. This colour scheme had a score of Very Good.

What I've Learnt

This project has been very helpful as I've become more confident with building a site using Next JS and CSS Tailwind.
I have a better understanding of pages and components in Next JS.
I have learnt how make a site responsive with CSS Tailwind properties.
I can fix errors with deployment with confidence.
Because of this project, I want to learn more about accessibility and basic UI to make better decisions with styling.
I have followed agile principles during this project, regularly reworking wireframes and initial plans when problems arise.

Upcoming Plans

Add project tiles to my site
Experiment further with styling and functionality