Finishing Touches

November 9th, 2019
finishing-touches

Polishing the portfolio


I've put a lot of effort into my portfolio in the last week, and I think it really paid off. The finished product, to me, looks great and I'm really proud of it. I also learned a lot about React in the process, along with a few libraries I had either never used before or wasn't very good with prior to creating my portfolio. Today, I added some animations with Pose, a library using physics for animation. I now have all of my titles bounce and wave a little bit as soon as the page opens. It's not a lot, but it definitely adds some life to the page. I still plan on going back over my portfolio and adding some more features like this, but for now I'm satisfied. Yesterday, I did a performance audit on Lighthouse. My score for accessibility and SEO was really good, in the 90s, but my scores for performance and best practices hovered around 50, really bad. It was all due to the amount of pictures weighing down my app; the load time was much higher than it should be. So, I wrapped a lot of my app in a lazy load component that only loads the enclosed components if the scroll is within 100 pixels. After doing that, I did another performance audit and both of these scores were in the 90s as well. I now have a very performant portfolio!

Now that I'm at a point of completion with the portfolio, I have to figure out what my next move will be. In the meantime, I started a course by Jason Lengstorf called "Introduction to Gatsby" on Frontend Masters, which has been really interesting. I took a course a while back that had a short section on Gatsby, but I haven't gone into much depth with it. This course centers around building a blog with Gatsby, and I'm learning a lot of new tricks. MDX is a type of markdown that interacts with React where components can be directly inserted into the markdown. It has become really popular with the rise of GraphQL, but I hadn't worked with it up until today. It's incredibly easy to use, and I can see the benefits in the case of writing blog entries. I still prefer the way I write them now, within the GUI of Storyblok. To me, it's a lot easier to write long pieces outside of the code editor. When I was writing the "About" section of my blog, I actually typed it up in Word and then copied it in. I guess I'm just more accustomed to this way of writing.

Moving on to what's next, I would like to create another app with React, for sure, but I don't exactly know what quite yet. I definitely need some practice in fetching APIs and parsing the data, so it would be a good idea to do something along those lines. SWAPI is a Star Wars API with a ton of information on those movies. I was thinking about creating something centered around that information, maybe with a search function. The user could maybe search for different elements from the movies, like the characters, planets, or vehicles used and cards would be rendered with the information matching these searches. At the end of the day, this would be great practice for me, and that's the true purpose of doing these projects. I'm not looking to sell the website or anything; I just want to get better with React and JavaScript. Since I've been so enthralled with the portfolio of late, I've neglected CodeWars since I broke my leg, and I need to get back into doing those as well. I would be totally bored staying at home all day if I didn't have this adventure to entertain me.

Until tomorrow!

Created by Sam Thoyre, © 2019