Portfolio

Source | Visit | Built with: JavaScript, Next.js, Tailwind, CSS Modules, SASS, Flexbox, Grid, Markdown

What it does

It showcases my projects and process, as well as my voice as a writer-programmer-learner.

How I built it

I began with a Next.js + Tailwind CSS example that includes a starter tailwind.config.js file. I had never used Tailwind before and had heard about how it can help to speed up styling -- it definitely can. I turned often to the Tailwind docs to develop a grasp of the syntax, and once that was familiar the process of styling components and making changes felt quick and efficient.

Both the blog entries and the project descriptions (such as what you're reading right now) utilise Next.js dynamic routing, with the slug content for both areas coming from separate sets of Markdown files. Tailwind is highly customisable, and I took advantage of how it supports the use of JSX and its own class names within Markdown files. The Markdown files themselves utilise frontmatter that is passed to a slug during the process of a dynamic page being generated.

I used CSS Grid for the overall layout structure and Flexbox for more granular positioning, CSS Modules and SASS for global Markdown styling passed to the blog post and project slugs, and @font-face to add one consistent and locally accessible font. I downloaded the Inter font from Google Fonts and converted it from ttf to woff and woff2 files with transfonter .

The portfolio's light-dark theme toggling is based on Tailwind's dark mode feature and the next-themes package which comes with a ThemeProvider that is wrapped around the application's central Component. The next-themes useTheme() hook is integrated with the toggle, which makes the application globally aware of the theme being 'light' or 'dark'.

The first set of colours for the app only partially met the WCAG for colour contrast. Not good enough. To improve accessibility, I changed the colour and decoration of the links to a deep dark orange with underlining -- this change makes the link accessibility sufficient (not amazing) on either a black or white background. I changed the rest of the styling to be white-on-black or black-on-white for optimum contrast (amazing).

How I tested it

I've begun testing with Lighthouse before I use the Testing Library for testing the JavaScript specifically. Initially, the app scores highest for SEO and lowest for performance, with an overall score of 87. Much more testing to follow.

What challenges I ran into

Deciding on the best approach to the light-dark toggle and trying different implementations felt like rabbit holes initially, until I discvovered the easy combo of Tailwind's dark mode feature and next-themes.

I also struggled with linking the images from the project markdown frontmatter with the image files. Originally, I placed the image files in an image folder inside the Public folder. The pathnames in the frontmatter were correct, and the images loaded on the local server, but the deployment on Vercel kept throwing 404s for the images. Moving the project images straight into the Public folder and changing the paths in the frontmatter solved the problem, but I'd rather keep the images in their own sub-directory. More exploring there to be done.

What I learned

Along with first steps with Tailwind, I learned, or relearned really, that Next.js is super fast. I also discovered that MDX really opens up the Markdown game, and that Markdown files play really nicely with Next.js routing.

How I deploy it

The portfolio is deployed as a project on Vercel with a link to the repository on Github. Vercel uses its own CI pipeline with automated tests and sends me emails with reports on the success or failure of attempted deployments after I've pushed changes to the remote repository.

What's next for this project

• I need to test the JavaScript. The Testing Library will be my toolbox for that. Once that is done, I'll update this page with details on what I found and learned.

• Clean up my use of Tailwind with custom classes.