<h2>Preface</h2>
<p>
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.</p> 
<p>
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!</p>

<h2>Background</h2>

<p>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.</p>

<h2>Design Process</h2>
<p>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!
</p>

<Image src='https://res.cloudinary.com/djpwmjgwi/image/upload/v1678515880/small_midjourney_web_design_grid_9085f1a5f6.png' alt='examples of midjourney website design inspiration' />

<p>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.</p>

<p>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.</p>

<Image src='https://res.cloudinary.com/djpwmjgwi/image/upload/v1678515881/small_midjourney_hero_grid_b81a9b9d2a.png' alt='midjourney hero image generation' fill  />

<p>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.</p>

<h2>The Initial Build</h2>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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).</p>

<p>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.</p>

<h2>Challenges</h2>

<p>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.</p>

<p>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.
</p>

<h2>Animation and Interactivity</h2>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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!</p>

<h2>Going Headless</h2>

<p>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.</p>

<p>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.</p>

<h2>In Conclusion</h2>

<p>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.</p>

Portfolio

<h2>Background</h2>

<p>
Aside from some small personal projects, Nation Energie was my first real introduction to working with Next.Js, TypeScript, Sass and headless Wordpress. It had come to me via another developer. He handled the back end, while I headed up the front end of the project.
</p>
<p>
The brief was for a brochure style website made up of a number of components including a hero, counters, sliders, scroll indicator and form - a perfect introduction! The design was fairly simple and clean with a focus on white space and imagery showing of the product.
</p>

<h2>A Few Firsts</h2>
<p>
Navigating through TypeScript for the first time proved to be a bit of a challenge! I learned how to type data fetched from headless Wordpress and use it with optional chaining and conditional blocks.
</p>
<p>
I was introduced to styling in Sass modules, which involved creating a theme .scss file which imported styles for typography, colours and other relevant variables. This allowed the theme module to be imported anywhere in the project for use. The components had their own style sheets.
</p>
<p>
The website was built using css grid which was set up in a component for readability at a glance. This, along with a typography component proved quite valuable in teaching me ways to restructure reusable code in a meaningful way.</p>
<p>
As for the slider, due to the small scale and timeframe for the project, I opted to npm install Swiper to handle the slide functionality.
</p>
<h2>Challenges</h2>
<p>
There were a few minor speed bumps in getting this website production ready.
Getting headless Wordpress set up in a docker container for development was certainly a new challenge, followed by actually using Wordpress as a headless CMS and configuring Custom Fields for use in the front end.
</p>

<h2>In Conclusion</h2>
<p>
The Nation Energie project came at a very opportune moment in my studies. Having just completed courses in React, it was an incredible chance to really put my skills to the test and pick up a few more along the way. Working with the flexibility of Sass was a real eye opener, and now I feel a bit exposed without TypeScript!
</p>

Nation Energie

<h2>
Background
</h2>

<p>
Killik Handcrafted Rum is a family run distillery based in Belgrave. They make quality Jamaican style rum and use it to make tiki cocktails in their venue.
</p>

<p>
Not only do they make rum, but they also make gin under the brand GinFinity.
</p>

<p>
With numerous products and an interesting story, of course they needed websites for Killik and GinFinity respectively.
</p>

<p>
For their needs, they required something easy to use, could link up with their Shopify store for managing products, and be easily maintainable by multiple members of staff. 
</p>

<p>
In addition to ecommerce, the websites also act as an online menu for food, cocktails and tasting paddles, so it was imperative that these pages were easy to amend frequently.
</p>

<h2>
Accessible and maintainable
</h2>

<p>
My time at WebCrunch had me working a lot with Wordpress, and at the time I was most comfortable working within it and felt it was the best option for managing content.
</p>

<p>
As for the page layout and styling, I opted to use Elementor. It has a broad set of tools for defining global styles and creating reusable components that are easy to change.
</p>

<p>
As mentioned above, the menus and sometimes layouts needed to be altered to suit changes or promotions, and that had to be accessible for someone who was not familiar with website creation or maintenance.
</p>

<p>
With Wordpress and Elementor, the process was made easy. Multiple people can have logins to edit content and visually make necessary changes.
</p>

<p>
It was also the primary choice as I wanted the website to be easily maintainable in the future without a developer necessarily on staff. 
</p>

<h2>
Challenges
</h2>

<p>
The main challenge in getting these sites up and running was time constraints. Covid had affected their venue opening, and when it was safe to do so there was little time to get everything ready. Elementor helped greatly with the speed of deployment, especially paired with WP Engine.
</p>

<h2>
In Conclusion
</h2>

<p>
The Killik and GinFinity websites were some of my first solo websites after working at WebCrunch. They also came at a time before I had really started to dig in to Javascript and JS frameworks like React. Looking back, there are a lot of things I feel I could do better, but ultimately I’m pretty content with the usability for the staff to confidently make changes.
</p>

Killik / GinFinity

<h2>Background</h2>

<p>
Depend Services is a small business focusing on electrical work and air conditioner installation.
</p>

<p>
Their needs for a website were very simple - an outline of their services and a place for potential customers to get in touch in a professional looking package.
</p>

<h2>
Keeping it simple
</h2>

<p>
I had previously built a website for Depend Services in Wordpress and an outdated builder. The old website was a bit confused and unnecessarily spread over multiple pages.
</p>

<p>
In a meeting I suggested we scrap the complexity and go for a single page brochure design. This single page would be concise, clean and professional.
</p>

<p>
In line with my skill set at the time, I opted to stick with Wordpress, change hosts to WPEngine for their extensive backup tools, and use Elementor to build the front end.
</p>

<h2>
Challenges
</h2>

<p>
With a project this straight forward, the main challenge was in the design. Primarily, what to add and what to leave out. It was easy to add a feature and get carried away with another idea and lose sight of the primary goal - simplicity. 
</p>

<p>
Through many iterations and minor tweaks, the design ended in a light, clean look that presented only the necessary information.
</p>

<h2>
In Conclusion
</h2>

<p>
The final Depend Services website meets the needs of the client perfectly. Elementor is easy to use so they can change their details where necessary and add complexity if the need arises.
</p>

<p>
I would love the opportunity to go back and rebuild this website in Next.Js as I have become aware of some of the limitations and unoptimised image serving in Elementor, so I feel there could be some more value to add.
</p>

React Developer. Designer. Bob.

React Developer.
Designer.
Bob.