A story of loss and heartbreak that ended with me getting a new portfolio website

---

It was a cold night in October 2018. I was de facto unemployed, broke and about to be homeless.

It is to this grim setting that we meet our hero, frantically searching through jobs boards as he attempts to find another organization to provide him his daily bread.

---

I saw an opening for a Product Designer (I had no idea what this meant, I thought it was a front-end developer) at Paystack (who are on my list of Nigerian Companies I Would Love To Work For) and although I don’t really consider myself front-end, I decided to apply.

They asked a number of interesting questions. I felt pretty confident. But then, the last requirement was the link to a portfolio site.

I had done a few projects here and there, but I had never put them together. Usually whenever someone asked, I’d just email them a bunch of links or my résumé.

So, that meant having to build one. I had literally just started learning React the previous week and Firebase had been on my mind for a while, so I figured I’d use those to build it.

Especially since I didn’t have money for a domain and hosting. 😔

The deadline was close, however but I had about 4 days by my reckoning. More than enough time, I figured.

Day I

Inspiration

I googled for inspiration, and found a FreeCodeCamp article on the subject of portfolios. It was a list of a number of software engineer’s portfolios and what they did specifically.

I was drawn to Timmy O’Mahoney’s website at #7 on the list for the layout and even more so for the striking copy (although he’s redesigned the site now).

The first paragraph where he says “I primarily use Python, but picking up a new framework or language isn’t a probem” helped form the basis for my confidence in my ability to learn new languages and frameworks.

Prototypes

Having found inspiration, I decided to mock up what it would look like. I’m not very good with most traditional design apps and so I’ve often turned to Canva with varying levels of success.

I built the prototype the best that I could and ended up with something nice looking (beauty is in the eye of the beholder, my friend).

I can’t remember exactly how I stumbled upon these colors, but I remember asking my colleague at the time, David, for his opinion. I wasn’t quite satisfied by it, but he promised me he liked it so I figured I’d use it for the meantime, after all, I was running out of time to submit my application to Paystack.

Building Blocks

As you may have guessed, my mockups with Canva aren’t interactive. They’re just a picture in PNG format. I’m looking to learn some design next year from some of my new friends on Twitter, but until then, I typically prototype with plain HTML/CSS before using it in the final project.

I did the same with my portfolio. I typically used Bootstrap for my layouts and not much else, overriding most of the framework. I had a conversation with a colleague on how counter productive that was, so I had decided I’d do my next project without it but I wanted those grids 😭.

I found out that Bootstrap allowed you get bundles of it that only contained the grid system and even better, I found a CDN for it!

I also used CSS Variables to theme the app. Made it easy to switch up the colour scheme later when I decided that blue wasn’t such a great idea after all.

Day II & III

Creating React App

It was time to get dynamic! I had built the home page in plain ol’ HTML and I now had to translate into React.

Using create-react-app I bootstrapped the project in a few moments. I didn’t even need to install it, with the npx utility I could use the tool without first doing an npm install.

npx comes by default with npm 5.2.0 upwards. You can use it to run the create-react-app command without any additional binaries by typing:

$ npx create-react-app my-app-name

Organizing the Code

Cara’s default folder structure has the components and their tests and stylesheets along with the React app’s entry point, index.js, in the src/ directory.

I decided to move my components and their stylesheets and tests to eponymous folders within a src/Components directory. That way for the Header component, for instance, I’d have the component itself at src/Components/Header/Header.js and it’s styling at src/Components/Header/Header.css

After this, I had to update index.js to point to the new location of the App component.

From HTML to JSX

And so I begin to convert my HTML template from yesterday into JSX, the templating syntax for React.

I immediately learned the value of closing empty HTML tags (tags without a matching closing tag such as <img /> and <br /> ) with a / as the linter saw red without them.

Getting My Data, Right?

I decided quickly that I didn’t have the time to build a backend and so needed a quick way to get my data into the app. Stuff like portfolio projects and blog posts.

My first thought was to put the items in a JSON file and fetch that, but I honestly didn’t know how to do it at the time.

A few Google’s later and I had discovered how to instantiate this.state in the constructor() and I was on my way!

Thinking about it as a slightly better developer, I should have gone with the first option. For one thing, fewer rewrites when I decide to switch to a different backend for the data. For another, it would reduce the bloat within the component.

Fire on the mountain

I had my portfolio. Looking okay, it was time to put it on the internet. I used Firebase and have already written about how seamless I found the process.

In a few moments after running

$ npm run build && firebase deploy

I had my portfolio live on the internet with a .firebaseapp.com domain.

What’s in a Domain?

At this point, I should have just submitted the application, but I figured I’d it wouldn’t be fresh without my own domain, so I took a quick stroll to WhoGoHost to try to get etinobaseki.com.

I couldn’t afford it. 😔. I had less than a thousand naira in my account.

But wait! What’s this? Deals on special domains?! I rushed there. I found Etin.Space at ₦800 for the first year and I quickly purchased it with nearly all the money in my account.

The Provisioning

I read several guides on how to set up custom domains on Firebase and eventually figured out how to change DNS Settings on my domain manager.

After setting thing up, I received the news, it could take about 24 hours to fully propagate and provision an SSL Certificate for the domain.

That’s not a problem, I thought, I still have a whole day before it’s due.

And so, I called it a night.

The Faithful Morning

I woke up bright and early the next morning and almost immediately rushed to my PC. Turned it on and headed straight for my browser.

Success! Etin.Space was live! After taking a few moments to appreciate my own work, I remembered why I was doing this in the first place.

I felt accomplished, seeing as I still had several hours left to submit. I congratulated myself a few more times before finally logging into the job portal.

We’re sorry, but applications for this position have closed.

I couldn’t believe my eyes. Had I miscalculated? I went back to the ad with the closing date. Maybe my math, was faulty, but it seemed like I did still have several hours left.

Armed with the confidence of a math prodigy at the national Olympiad, I composed a mail informing the HR Manager of their mistake in reading the time, but assuring them that I was a gracious candidate and in my magnanimity, I had attached my resume and portfolio so that they could do the right thing.

Okay, maybe I didn’t quite word it like that, but for an upstart newbie like me? Man I had guts. 😅

Here’s a screenshot of the actual email.

As you probably expect, I didn’t get a response. Maybe I addressed it to the wrong email address, who knows?

Most people likely wouldn’t have replied at all though.

---

In conclusion, I learnt valuable life lessons from the experiences and got my kick-ass domain and website out of it. So, all in all, a W.

PS: I have since found out what a Product Designer is. Live, Learn, Loop yunno?😊