Portfolio

Preface

At the time of creating this portfolio, I found myself in a place where I was finally comfortable in a number of languages, theories and technologies. It was time to delve in and make something for myself that I could show prospective employers, while giving me a creative outlet with a personal touch.

Building the portfolio website was full of challenges, firsts and a heap of personal growth. I had a small amount of experience building in Next.Js using TypeScript and Sass, but this was the first time I had gone full-stack on a project like this. I was eager to design and build a website that could showcase my skills as a designer and developer, while also injecting some of my personality with a few animations and design choices that I feel are uniquely me!

Background

I wanted to create a personal website that showcases my skills and projects as a web developer. I decided to use Next.js as my framework because it offers many benefits such as server-side rendering, routing and image optimisation. I also wanted to make my website a progressive web app (PWA) that can work offline, load fast and be installable on mobile devices.

Design Process

I went through many iterations of design. It felt like a fun opportunity to source inspiration from AI. I have a deep fascination with this tech, so what better way to kick off a new project!

Firing up Midjourney, I tried to hone in my vision for what my portfolio could look like. However, I immediately recognised the limitations in generating a modern design. Most results felt very dated (early to mid 2010's), but I was able to gain small pieces of inspiration.

I started by layout out some concepts for the home page of my website, primarily the hero section which I would then use to inspire the design and colour scheme of the rest of the website. I used Figma to create a few mockups based on my rough designs in Affinity Designer.

Through numerous iterations, I settled on a white-space focussed design. Going for contrast with solid black text and wide solid lines, I also generated a hero image that I was able to hone in and pretty closely resemble myself. I took samples of the various colours in the image to create a multi-coloured theme that also tied in to the index of each case study for consistency across the site.

The Initial Build

Next, I set up the folder structure for my Next.js project using a combination of horizontal and vertical slices. The outer folder structure is vertical, while each component was laid out more horizontally to keep relevant files together.

Starting with the Next.Js TypeScript boilerplate, I added some packages that I needed such as next-pwa for PWA support, bundle-analyzer for bundle size analysis, Sass for styling and Apollo for fetching data from APIs using GraphQL.

I created some utility functions that I could reuse throughout the project such as isBrowser to check if the document existed client side, RandomColour which loops through a list of Sass variables, and ColourForIndex, which assigns a colour from the Sass variables to an index number for case studies, keeping their theme consistent across the website.

I built each component using React hooks like useState and useEffect. I used Next.js 'Link' component for client-side routing between pages and used Next.js 'Image' component for image optimisation such as lazy loading, resizing and quality adjustment, (this is in addition to using Cloudinary to serve images).

As mentioned earlier, I structured my components in a horizontal slice. Each component’s styles were stored in the same folder as the component, eg. Hero.component.tsx, Hero.module.scss. However, for site-wide styles, I set up a theme.module.scss, which imported multiple theme asset files such as breakpoints, colours and typography. Each component stylesheet merely needed to import the theme.module.scss file, and had instant access to theme-specific styling.

Challenges

One of the challenges that I faced was how to fetch data from different APIs for each project in my portfolio as this was all new to me. Luckily, the internet is a place of vast knowledge! Following a few tutorials showed me the best practices for fetching data with GraphQL and Strapi, and I ultimately set up a separate file for queries that could be used across my portfolio.

Another challenge was really digging into TypeScript and accurately typing fetched data. I’ll admit, I was still a little green in this department, so it certainly required a little digging, but I ultimately wrapped my head around it.

Animation and Interactivity

After building a pretty solid base version of the website and integrating version control with GitHub, it was time to breathe a little bit of life and interactivity to the portfolio.

I started with the case study section on the home page. As a part of my design, I wanted the section to only rely on fonts, vectors and colours to convey the style. But with limited information on display, it was only fitting to work in some CSS animation. This resulted in the onClick animation which added an 'Active' class to the various elements, expanding and growing to reveal the snippet.

After building a pretty solid base version of the website and integrating version control with GitHub, it was time to breathe a little bit of life and interactivity to the portfolio.

Some time had passed an I felt that hero image was a little bit... static. I recalled working on a breathing animation for the WebCrunch website some time before, and thought it could be an interesting way to add life to the image. I implemented a perspective shift and animated it to create the 'breathing' effect. While subtle, I feel it adds a dynamic feel to the home page!

Going Headless

My only experience working with a headless CMS was headless Wordpress on the Nation Energie website. However, it had been coded by another back end dev, so I really had no experience during the implementation. I ultimately settled on using Strapi, as it seemed to be very barebones, which is all I needed.

Now, I'll admit, it took me a little time to get my head around fetching data for the first time! I took the GraphQL/Apollo route, which felt pretty good in the end. It was surely a learning experience and an awesome way to help wrap my head around fetching data.

In Conclusion

Building my portfolio website was a great learning experience for me. It allowed me to grow as a web developer and gave me the opportunity to work with new technologies and design concepts. I am proud of the end result and am excited to continue learning and growing in my field.