React is one of the main focuses of this journey I am on. My first experience was actually with React Native, that I choose to learn and build my graduation final project (2016-2017), and later I had tried React by curiosity a few times. But in my day-to-day work I never had the opportunity to use it, and most of the job positions I have an interest in now ask for it.
Therefore, I choose the first version of my new portfolio to be the React one, but first I started drafting the layout. Design is an important part of building something for me, and I need to visualize what I am attempting to do. So I used Codepen to play with colors, forms, ways to show the information I wanted to, and I got to this template. With that I decided the parts and functionalities I wanted to implement:
- projects showcase
- about me
- experiences timeline
- skills list
- interactive contact form to test the suitability of the opportunity and me
- blog
After that, I was planning to do several courses, but I was so excited that I started with what I knew. Using Create React App I started the portfolio project and sewed the layout I created on Codepen to it. I created some components to do the layout, and searched for a router to use, and made things happen. But when I got to the juicy part, I froze.
Now, that is something I need to tell you about me: when I don’t master a subject, I get insecure about how to do, but mainly, start things. Since I had heard a lot and read about React Hooks, and the last time I used React they weren’t a thing, I knew I would need to learn how to use it properly.
During the years I bought some online courses, I did a few but most of them were barely touched. So I choose a React one to catch up, but it was taking too long because it is very complete, – remember I was excited and eager to have my portfolio up and running – so I paused the course again, and found a tutorial on how to do a listing with filters and followed it making some modifications to do what I wanted.
As my idea was to develop the back-end part in the future, I decided to use a JSON file to list the projects I wanted to showcase on the portfolio, and so I build the Projects part, and later the Experience timeline – that took me a great time. Obviously, along the way, I changed my mind or found better ways to do some things. The skills part was the most uncertain, I redid it at least three times.
And the clock was ticking, it was almost two months since I had started my sabbatical trimester. Of course, I was doing a lot of other things, but when I realize the time, I got anxious about hadn’t finished anything and not having the updated portfolio I would need when I started looking for a job again.
The urge to deploy the portfolio but also the self-care made me decide to release a version without all the functionalities I wanted. So I gave up the form and the blog, I choose to only display my contact info and list my posts, linking them to this current blog (instead of migrating the role blog to the portfolio).
Then, after some finishing up, it was time to put the project online and replace the old portfolio. And I got really nervous because I have never done it with react! Most of the projects I had done didn’t get to that part or I had used different deployment platforms, and my website was on a conventional shared host with lots of limitations and I thought I would have to install something or have some service running.
Again I found some articles and tutorials on it, and it was really easy since I have no back-end for now. npm run build and there it is, all the build files are there ready to be uploaded to my server. When I had the first version online I made some performance, SEO e accessibility tests, using GTMetrix, Lighthouse, and the Meta SEO Inspector, and I made some improvements, updating the build a few times.
In the future, I will implement the parts missing to a new version of this React portfolio, but the next step will be to develop the backend using Node.js.
Meanwhile, I started new side projects, and I plan to take you on those journeys too. The next one will be about how I developed my new favorite: Week Planner. See you soon!
Ana.