Two weeks ago I decided the time building a portfolio was due. It has become more than a tradition, a must for developers to have their custom-built portfolio.
Making a portfolio didn't feel like a big task, and I can imagine it goes quite fast when you have made a couple of them. But building one for the first time can be other than straightforward. First, there's the issue of which tools to choose. Here's where having a clear goal for your project helps immensely. It saves you time down the road by not having to waste time switching stack tools because they weren't fit for your type of project.
I had very little idea about how I wanted the portfolio to look like. But here are some clear goals I had from the start:
- I wanted a single-page application (SPA) to display all info about me, my projects, and contact details. So only one page (except for a blog page, which is on the way).
- Building it in a way I can manage content easily in the future.
- Keep it simple. With only the necessary features in the beginning, and rather build it in a way I can easily add/edit new features later.
Why Gatsby?
When choosing between Next.js or Gatsby this post by Jamees gave me an insight into the right direction.
For a page as light as mine, it's not necessary all the customizability Next.js provides. Gatsby, on the other hand, offers many plugins so you don't have to reinvent the wheel. I have to say, I was rather modest in this respect so to avoid a bloated app.
Gatsby is quite comprehensible and it's not hard getting familiar with it.
Ok, so with Gatsby we keep it simple. How do we make it easy to manage? That's where Strapi comes in.
Why Strapi?
Strapi is an open-source CMS and a framework that helps us build our API. Strapi is going to be taking care of handling requests for the data we're feeding into our project. Strapi offers a friendly-looking admin page where you can do admin tasks like create content types or update new entries or even extend these permissions.
The best thing with Strapi is all the good documentation they have on their website. They also have helpful videos on their youtube channel. There's nothing worse than struggling to find good documentation about something.
Deployment
I decided to build a workflow with continuous integration (CI) together with GitHub. This comes back to making it easier for me to manage later changes. This would make it so that every time I push my code to GitHub, it would go on to build and deploy automatically on my hosting platform.
Deployment was done on two different platforms. For the gatsby project, I went for Netlify. The reason I chose it is because there's plentiful of documentation on pairing the two. Gatsby and Netlify work remarkably well together, making the development of a static site, as mine, feel like a breeze. Besides, on Netlify it's possible to buy your domain, which was nice.
Deploying my Strapi API had to be done with Heroku. Heroku is a great hosting service for backend applications. It offers add-ons to work together with your app, something that came in handy when trying to choose a database for my API.
In retrospective
Thinking back to when I wrote the first line of code for this project, I feel like the only thing I was focusing on was that I wanted a REALLY COOL portfolio. But I was also aware of my weakness for going into rabbit holes. I had to remind myself quite often: keep it simple (stupid). I followed a Trello board where I could keep track of the big tasks and then smaller tasks. This is a step that's so useful and yet easy to skip. I recommend it to everyone working on their projects, whatever it is.
At the moment of deploying and finishing the last parts of the portfolio, I started to document and started writing the README. That's when I learned that READMEs are the first thing to be done in a project:P. There's some good resources on readmes, the importance, and ways of writing one.
I guess one of the things I should improve for my coming projects is more planning. Even though for the most part I had a clear idea of what I wanted, some days I felt like I jumped into the code only out of habit, without a plan of attack for the task. But, to be fair, I was also very excited to get to work:P.
Something new that I implemented in my routine was the Pomodoro technique. I used a timer to work 25min on / 5min off, that way I didn't have to actively remember to take breaks. Turns out it increased productivity and my back is eternally thankful.
Resources
- Quick start Strapi (https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_1-install-strapi-and-create-a-new-project)
- Integrate Strapi and Gatsby (https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi)
- Deploy Strapi to Heroku (https://strapi.io/blog/deploying-a-strapi-api-on-heroku)
Photo by Format from Pexels
Top comments (0)