I made my first portfolio about 7 months ago. I loved it. It was simple and static, and the design was really lovely. I got the design from the BootCamp that I was enrolled in and made the website with HTML, SCSS, and some JavaScript. Not too long ago I decided it was time to change it to my liking, make the website more dynamic and make use of the knowledge that I gained.
Step one: Design
I'm a front-end developer and I always loved designing, following the fundamentals, and using beautiful color schemes. The first thing I did was to decide on the color scheme of my portfolio and choose fonts. After doing some research and figuring out what I wanted this is what I went with:
Color scheme.
Very minimalistic and simple color scheme, I didn't want to overcomplicate it.
The font that I chose was also very simple: Roboto
Now, I am not a designer, so when it comes to it I just operate on vibes and whatever happens, happens. The first iteration of it looked like this:
The tool I used to design is Figma.
It looked very simple and I liked it, so I went with it.
I like breaking down my designs into components:
As you can see there are some things that I was trying out, the process of designing, I was changing it like 100 times, and when I was developing I changed it 100 more times.
Step two: Development.
From the beginning I knew what tech stack I was going to use, it was one of the main reasons I wanted to redevelop my website.
NextJS, according to the official website is a Full-Stack React Framework. It has a lot of good features, but the main one for me is the Static Site Generation. In short, static site generation makes the SEO of your website more performant, since all the content gets rendered on the server and it gets served as static pages, which makes your websites very performant and easy to read for the SEO bots.
As my first step, I set up the environment and started developing using the mobile-first approach. In this case, TailwindCSS was really helpful, it made it so much easier to style while developing.
Pages on the website:
- home
- project details pages
- about
- contact
- blog
I decided to go with different pages so that every page has one purpose and to keep it very simple. Plus, NextJS makes it really easy to work with pages.
For the home and project pages, I was going to use a headless CMS like Strapi or Sanity, but a couple of months ago I started learning Ruby on Rails and I decided to make a simple RESTful API to keep the data about my projects.
The blog page
For the blog page, I was planning to use the medium API to retrieve the data for my profile. But the API documentation was really complicated and I gave up on it… Until I found the API that made it all simple. Big shout out to the author of this repository, they have done a great job retrieving posts for Medium users, God bless.
https://mediumpostapi.herokuapp.com/?usermedium=anuarshaidenov
So I used the very handy NextJS feature for the blog page: Incremental Static Regeneration. Basically, it is like static site generation, but on steroids. Every time there are any changes on the server, i.e. I add a new blog post, NextJS would detect that change and rebuild my pages.
The same thing I did for the home page and the project details pages.
Ruby on Rails API
As I mentioned, instead of using a headless CMS I decided to create my own API. Ruby on Rails is the best and easiest option for that. I created endpoints to retrieve, add and edit the data for my projects, an example response would look like this:
{
"id": 1,
"title": "Car Booking",
"description": "A web app that allows you to register and reserve premium cars. The project was dne in a group of 5 people. It consisits of front-end and back-end. I was working mainly in a front-end team, leading the teammates and controlling the proccess of the app.",
"created_at": "2022–05–23T12:13:03.248Z",
"updated_at": "2022–05–23T12:13:03.248Z",
"image": "https://raw.githubusercontent.com/anuarshaidenov/car-booking-service-front-end/dev/screenshot-1.png",
"technologies": [
"React",
"Redux",
"TailwindCSS",
"Ruby on Rails",
"Authentication",
"CRUD",
"RSpec Testing",
"TDD"
],
"repository": "https://github.com/DelhinRharl/car-booking-service-front-end",
"live": "https://deploy-preview-37--willowy-empanada-95e169.netlify.app/"
}
Home page
I used the data from the backend to retrieve the data for my projects and used ISR for it.
Step three: Deployment
I deployed the website on Vercel. It is the best option when it comes to NextJS websites. Before doing that I added Google Analytics to the page, and configured my domain.
I loved the process, I would not say it was simple, it took me 2 months to actually finish the website, because throughout the process I faced a lot of blockers, sometimes I just barely had time to even sit down and do it, the other times the imposter syndrome would attack me out of nowhere. The main thing is - I finished it.
Now hire me. Please.
And check out the website. And tell me your opinion, don't be shy.
Top comments (0)