Connor Dinnadge

I am excited to announce the launch of my new portfolio website, this site is a showcase of my work, skills and professional experience. In this article I discuss the planning, design and development that went into this project.

Building this project was a goal of mine to show off the different projects I have worked on, the skills I have learned along the way and to help me connect with like-minded individuals.

Website Overview

The design of this website focuses on a modern clean user interface, with an intuitive user experience. The website's key features are a project showcase to show off websites I have created, my work experience to show of relevant past professional experience,a blog to share my thoughts on various topics and my contact information for easy communication.

Tech Stack

• NextJS - A react based framework which allows developers to build fast server rendered web apps with built in support for static site generation and API routes.
• Tailwind CSS - Tailwind CSS is a utility first CSS framework which provides low-level, reusable style classes to build custom designs efficiently without writing traditional CSS.
• Shadcn UI - A component library that combines Tailwind CSS with Radix UI primitives to provide accessible, unstyled components which can easily be customised with utility classes.
• Typescript - TypeScript is a statically typed superset of JavaScript that adds type definitions to improve code quality, maintainability, and developer productivity by catching errors at compile time.
• Next Themes - A library for managing and persisting theme selection in NextJS apps allowing for easy implementation of dark mode and other custom themes with minimal configuration.
• Content Collections - A lightweight package for transforming your content into type-safe data collections using zod for validation.
• Font Awesome - Font Awesome is a popular icon library that provides a vast collection of scalable vector icons and social logos, easily customizable with CSS for use in web design and development.
• Plausible - Plausible is a lightweight, privacy-focused web analytics tool that provides simple and actionable insights without tracking personal data or using cookies.

Development Process

The website started out as a simple wireframe design which was used to visualise the layout of the user interface, I then created simple designs using Figma to test out the design of the website in a more complete way before I started to develop the website in NextJS.

When setting up the project I used the Create T3 App CLI to setup my NextJS project. The reason for this choice is I like the strict Typescript configuration as well as the ESLint configuration of this stack. From there I setup Tailwind CSS, initialise Shadcn UI installing the required UI components and setup Next Themes for dark mode functionality, configuring both the light and dark theme colours as CSS variables.

I then quickly built out the portfolio webpage using Shadcn UI components and Tailwind CSS utility classes focusing on a mobile first design and then working up into the different breakpoints provided by Tailwind CSS, I then moved on to implementing the Content Collections post functionality which is used to power the blog of this website. It allows me to use Markdown or MDX, depending on the configuration, and transform that into HTML or JSX based posts to display within my NextJS application.

Conclusion

Creating this portfolio website has been an incredibly rewarding project, allowing me to consolidate the skills I have learned over the past 10 years and showcase my professional experience on a single platform, free from the strict requirements of client or corporate work. Each step of the process has been a valuable learning experience.

Thank you for taking the time to read about the creation of my portfolio. Your support and feedback are greatly appreciated, and I look forward to what the future holds.