Welcome to my new fully redesigned website!

Hello and welcome to my new website, this is my third version, the previous versions of my site included: an HTML, site built with bulmaCSS, after this site I decided to use Nuxt.JS which is built using VueJS and has a great static site generator allowing for fast HTML sites to be generated, I had also moved towards TailwindCSS as my CSS framework which I have decided to use again!

Which brings us to this new website and what I have used to build it, throughout this blog post I hope to showcase a little sample of each of the technologies, and how they have empowered my development process!

Next.js

Next.js is an open source JavaScript framework created by Vercel, Next.js is built on top of the popular React JavaScript library, which allows for powerful component based applications. Next.js offers a few key features such as: file based routing, Image optimization, hybrid, static and server-side rendered web pages, Fast refresh and the Next CLI.

I have used mostly the static rendering methods for this website which has allowed for fast performance and less resources used on the client and server as all files are pre-rendered HTML, another key feature I have used is the next linting tools that test my website code against the web core vitals preset provided by vercel.

TypeScript

TypeScript is a superset of JavaScript which proivdes additional language features such as static typing classes and interfaces, with all of these additions, Typescript is also backwards compatible this is because all TypeScript is transpiled to JavaScript, you can choose the JavaScript version you want to use among many other rules in your tsconfig.json file.

TypeScript also has great IDE support which helps to auto-complete code, boosting productivity and even linting in the IDE which spots bugs before they hit the browser!

TailwindCSS

TailwindCSS is a utility-first CSS framework which is packed full of classes to create and build any design easily within HTML, and can also be used with @apply directives in CSS. TailwindCSS also comes with additional packages such as typography which for the HTML that is pre-rendered for example in my blogs which are rendered by contentLayer, I have added the prose class so that I can control the CSS with ease! TailwindCSS also takes care of any unused CSS rules by using purge CSS, so you can use the rules you want to and in production any of the CSS you don't use is removed for fast performance.

ContentLayer

ContentLayer provides an easy way to create type-safe JSON data using markdown files in my case MDX, currently it only supports Next.js however it allows for live reloading, has strong typing for TypeScript, and is static which means I can pre-render all blog posts for fast performance in production.

In addition to these features I have also used contentLayer to add various plugins such as rehypeSlug and rehypeAutolinkHeadings these together allow for each heading to have a link for easy sharing, the other two plugin I used were rehypeCodeTitles and rehypePrism, these allow for code to be written in my MDX files and styled for easy reading.

Tools

I have alrady described the main technologies used however I also wanted to highlight a few other tools that have helped such as the package manager Yarn, which provides a fast and safe way of installing packages, my current IDE of choice VSCode allows for quick and light weight code editing with plugins and even an integrated terminal.

Husky which I have configured to run a suite of test before I commit my code to GitHub, these tests include prettier formatting, next linitng, TypeScript type checking and building the website using Next. Finally, Font Awesome has been my go to for icons since the beginning and I have used them again for fast and simple SVG icons.

Future

Thank you for reading through my long blog post, I hope you enjoyed learning a little about the wonderful technologies which have gone together to build this website. Within the next few weeks I hope to update the website with my certfications and what I have been learning, and the new projects which I am working on.