Personal project remakes

I gave my project websites (this blog, my portfolio, and my accessibility info site) either a facelift or a complete remake. I figured I'd write a post on the thought processes for each site.

My blog

I was pretty content with the site's layout. The color themes were quite minimalistic, which is what I prefer. But I wanted to give it a little more character.

The back-end

The original back-end was created with Forestry.io. Mainly because I might have needed it at work and I wanted to be familiar with it beforehand. Forestry is pretty nice and there was nothing really wrong with it... it just wasn't Drupal. To give you some context here, I use Drupal at work, so Drupal is a CMS I'm familiar with, and I also like it quite a lot. Content creation was easy with Forestry, but I wasn't just feeling the editor and the content creation process. So when I thought about a facelift project, I also decided to switch the backend to Drupal to make myself happier.

I wanted to try out the GraphQL module for Drupal. I had previously tested version 3.x of the module, so I knew a little of how that worked. I wanted to use the 4.x version of the module, which didn't create a GraphQL schema automatically. I figured I'd try to make the most out of this learning experience.

The process wasn't as painless as I'd hoped. The documentation for the GraphQL module wasn't really directed at beginners, and I soon noticed I was desperately attempting to search how to use quite basic fields, like links and entity references. There just weren't many instructions or examples available. I figured the GraphQL side of the process quite quickly, as my project is fairly simple. The Drupal side of the process took me a bit more time to figure out. But in the end, though, I was able to create a schema I could use in my frontend. I learned a lot in the process, and I also got another reminder that not everyone is willing or able to create really newbie-friendly documentation.

The front-end

The front-end was created with Gatsby originally. I had been thinking about getting to know Next.js for a while. At first, I thought I'd use Next.js as the front end. I actually nearly finished the project, but then I realized that Next didn't offer some features I had used in Gatsby. These missing features were nothing that special, I could have created the features myself. But in this case, I just didn't want to. Because while working on this project, Gatsby released their 3.0 version, and after a while, I decided to switch the frontend to Gatsby after all. I dug deeper into the Gatsby vs Next.js side of things in my previous post, if you're interested in that, check out Gatsby versus Next.

My portfolio

My portfolio has two different sites. I used Drupal as the backend of my portfolio, and I felt like theming the Drupal one as well. Both versions are available online. The Gatsby version [sanna.ninja] is my main portfolio and the Drupal version is some kind of backup of sorts. The theme in them is different, as well as the content and the structure. I was pretty content with the Drupal layout and theme, but for the Gatsby, I wanted more change. Having a background image behind the whole page is alright, but that easily creates possible issues with accessibility. I did theme my earlier site so that no accessibility errors were present, but I wasn't content in achieving just the minimum requirements for color contrast in some parts of the site.

The back-end

I was happy with the Drupal back-end; I wasn't planning on changing that. In my original portfolio, I had used the REST API for providing the content to the front-end. But after battling with GraphQL 4.x in my blog, I switched to GraphQL also in my portfolio. I was able to get the schema ready a lot quicker than in my blog. And I also had some new things to add to the schema. I required also some new content, some affected both the sites, but most were only for the new "main portfolio".

The front-end

Also with this project, I was considering using Next.js. And then I played around with a thought of a one-pager portfolio (I'm not even particularly fond of those! :D), but soon realized that neither Next.js nor Gatsby was really suitable for such an approach. For a while, I thought about whether I should create the one-pager with another technique, but I decided to stay with Gatsby after all.

The front-end is currently still definitely a work in progress, I'm planning on adding maybe an image two of me in there at some point. I just wanted to get the new version out so I could update the content.

The Drupal one also got a facelift to match my new "brand" look.

My accessibility site

This site is a more traditional Drupal site. I was considering creating this as a decoupled site as well, but since the purpose of this site is not to showcase my technical skills, I ended up sticking with a basic Drupal theme for this one, at least for now.

The front-end

I had created small facelifts for this project several times before this. I got the light theme the way I liked it, but there was just always something off with the dark theme. I couldn't figure out what that was, and my goodness how annoying that was. But now, in this version, I also like the dark theme.

The content

I had been adding more content over time, and the original content structure had started to feel a bit lacking. So I added the content restructuring to my remake project. Now the structure is clearer for the content I currently have on the site. The content is the most important thing on this site, or actually, it is the sole purpose of this site, so I really want to keep the structure as clear as possible. I'm still actively adding more content on the site, I add all the good resources I come across, and I try to add also all the new things I learn.

Unity

After this project, Drupal powers all my sites. The decoupled front-ends both use the same version of Gatsby (this actually was the case before this project as well) and the back-ends have GraphQL 4.x. This makes it easier to keep my sites updated.

I also wanted to unify the look of my sites. The base for both the light and dark themes is very similar in these sites. This is done completely on purpose, I wasn't being lazy or something. I wanted the sites to be easily recognizable as mine. Hover and focus styles are different in each site, though. I really like experimenting with those styles.