Introduction

Having a personal site of mine has been a distant goal for a long time but I never got around to doing it. At the beginning of this year I decided I'd make this goal a reality by having a site up and running in time for applying for my second round of co-op internships that start in Fall '20. I have just about achieved my goal, there are a lot of nitty-gritty details that I'd like to address over the summer, but for the most part I have a functioning, presentable site.

Disclaimer: This is a very high-level run through of this site and I will come back to it to make it much more structured in the future. Time is of the essence for now 😅

Goals

My primary goal for having a personal site was to have somewhere to show my portfolio, my projects are a bit over the place and in the 1½ years I've grown a bit more organized through GitHub and using the README files to shed some context. But I know with this site the process will become even more streamlined. As I type this, I can already see it being a bit messy because I'm just typing chunks of text here. But over time I'll have specific headings and I'll know what content to place where.

I became an avid writer as soon as I began university but I never thought about writing techinically about things that I learn. I'm the sort of person who explores a lot of the new technologies that are coming out all the time but never dig deeper to make a full-fledged project out of them, so it's kind of hard to account for those little nuggets of experience that I gain. I think having a blog where I can express myself professionally is a big goal with this site.

Process

If this is too much to read, here's a summary of the technologies this site is using:

• React
• Gatsby
• CosmicJS
• GraphQL for getting content
• React-Material UI for design
• Markdown for content

In the past my trouble with getting a personal site up and running was being overwhelmed before starting, purely because of the plethora of ways to make a site. Should I just use a CMS like WordPress or Squarespace? If I do develop it on my own, what stack will I focus on? Even once I'd decided on questions like these, I'd keep digging myself into a hole by having a new subset of questions at every stage.

I began learning React very casually sometime in 2018, while the back-end aspect of web development came more naturally (I was hooked up to Firebase), I kind of left it at that without really getting into editing CSS files and making my practice projects look presentable. Nonetheless, I went through the core concepts of React and it came to me very intuitively and while I put it on the backburner for a while, I knew I'd come back to it. I discovered Gatsby in late 2018 and was immediately attracted to the idea of a static site that's been pre-generated. Specifically, I was blown away by the speed, but I also realized that given it's built on React that it could most definitely harness its strengths and be much more dynamic than it may seem initially.

Through these developments I knew in the back of my head that I'd be building my personal site using these technologies, I don't regret it one bit. I've enjoyed every part of developing my site, even when its gotten frustrating. My one concern was how to was what my back-end environment would look like; once I actively started pursuing building my site, though, I discovered headless CMSs and decided to go with CosmicJS (it's the first one I found, but also discovered that it's one of the popular ones that's free). I have no regrets here, connecting my CosmicJS bucket was a breeze and getting data to show up on my site was too.

I'm glad I found the headless CMS route, because one thing that did put me off about Gatsby was having to generate every page. Now I just have the core of the site built out, and then two templates for my blog posts and portfolio items, respectively.

Design

Coming from an Android background, I've always been a huge fan of Material Design. It's a design language I understand well and it can lead to some awesome designs. There are TONS of design frameworks for the web and honestly I just keep looking for the Material Design variant. While learning vanilla JS in school I began using Materialize.CSS and once I started getting into React I found React-Material UI. This framework has made it so easy for me to implement my site because I know the components that I'm looking for in each case and I have the skills to customize them to my needs.

Most of my pages are structured using Grids to make my site responsive. I can definitely improve on the responsiveness this over time but it's a good start. Most items for a component are then contained within these <Grid /> components and more often than not have been other React-Material components. This is a very wordy site, so I wanted it to be very clean and have lots of space so that reading would be a pleasant experience, but typography also ties into this aspect. I chose a few open source fonts on Google Fonts and used Typography.js to download them onto my site, and then using React-Material's <Typography /> component have given each of the styles a specific look.

Functionality

I have tried to stick to using just Gatsby documentation and following their best practices in this project, of course I've done a few things (or tried) differently but mostly the documentation has been very easy to follow and most problems I encountered had been already addressed online. It's certainly been very interesting to see how Gatsby works in the background, and I'll be honest it's a little hard to remember all the details. For example, I really had to understand what Gatsby was doing during its build process to implement dynamic routing for my blog posts and portfolio items. I was trying to shortcut my way to generating the content in a component which was alright, what was not alright was trying to assign these new components a dynamic URL that hadn't been created during the Gatsby build. I'd keep running into a 404 because of this. Tweaking my method even worked at one point, but it was more akin to my site becoming a single page application in certain instances.

Page Structure

I started out with a template and while I kept most of the files, I changed them completely because I knew the things I was going to be using and the practices I was going to follow. I do admit, my old tendency to get bogged down by so many options annoyed me more than once but I didn't really let it stop me from the main goal of having this site done before applying for internships. All my files in the /pages directory are basically very small, they have a similar structure:

import React from "react"

import Layout from "../components/layout"
import Contact from "../components/contact"

class AboutPage extends React.Component {
  render() {
    return (
      <Layout>
        <Contact />
      </Layout>
    )
  }
}

export default AboutPage

I did this so my pages could have flexibility for whenever I changed them in the future. Most functionality has been implemented in my components save for index.js. While right now I only have a single component in the above code snippet, this could very easily not be the case in the future as the site continues to evolve and so I want to keep them simple so that I can focus specifically on components that can be re-used across the site.

Markdown

I knew I'd be using markdown to create blog posts and portfolio items. I learnt it for my GitHub repos and fell in love, it is so powerful and I low-key feel like I'm still coding when I'm not really coding 😏. In all seriousness though, the fact that Gatsby and React actively support the format through various packages and plugins gave me all the more reason to use it. I used the package markdown-to-jsx for converting my markdown files stored on CosmicJS into JSX. I encountered the hiccup of since I was using React-Material but through some refactoring, I found a solution. So now all I have to do is type my post and make sure the structure is good, and I don't have to worry about the styling because I know it's taken care of in my templates.

Miscellaneous

I recently learned React Hooks and they have been implemented on this site to a very limited degree thus far. I will actually be utilizing hooks in order to manage state on the site. You'll notice the filter chips with the technology logo and name (not functional yet!) on my blog and portfolio pages. These chips will be implemented using hooks so that I can access their specific attributes in whatever page they've been placed on.

Conclusion

I have thoroughly enjoyed making my site, there have been some frustrations along the way (mostly my laziness), but I'm extremely happy with the way it's come out looking. I'm even more impressed with how it works. Alas, this'll be an ongoing project because I have A LOT of ideas I'd like to implement and here's a list of some:

• Animations/Transition
• Filtering content by technology
• More advanced design techniques and trends
• Dynamic Resume
  This is certainly a rushed document with not enough pictures and way too much text. This page will probably evolve into a blog post and and be replaced by a much more structured and streamlined portfolio review, but for now it shall have to do!