LaRocque.dev v1

Building a portfolio site with Nuxt, Bulma, and Contentful.

This one might be sloppy, trying to largely get everything up quick.

Overview

Having recently used Nuxt/Netlify/Contentful for Wifeapedia and liking it, I stuck with it. I started with a ‘projectPage’ content type in Contentful that covered most of my bases, but eventually added a ‘tech’ content type as well so I could highlight/split out my experience by technology used. I could have technically merged these 2 down to the same ‘workExperience’ content type (arbitrary example name), with an ‘experienceType’ selection to differentiate but like I said: quick & dirty. I had a basic pages directory to cover a homepage, relevant ‘list’ and ‘detail’ pages for project and tech content types, and a general ‘about’ page.

Defining and setting up content types

identical-my-cousin-vinny I had two essentially identical content types: projectPage and tech, where projectPage covered a development project I’ve worked on and tech was a more general page for the different technologies I used on the projects so prospective employers could see only my React stuff, etc.

Project pages

Here’s the content model I set up for project pages in Contentful: Project page content model in Contentful

Here’s a breakdown of the fields and their purpose:

Field	Description
Title	Name of the project
Description	Shorter overview for link card previews
Slug	Used to define the url (larocque.dev/projects/project-slug
Body	Description of the work I did
Site	Live example of the project
Related projects	Projects using similar tech or on the same website
Tech	The tech used when building the project
Github link	Link to github for project if available

Tech pages

Largely identical set of info to the project page, and I could have absolutely just used a projectPage with a new infoType field to select between project or tech, but I have something like 40 content types left before I have to pay Contentful, so I split them up.

Screenshot of the tech content type fields: Tech content model

And a table of the fields:

Field	Description
Title	The title of the entry for internal search and reference
Name	The ‘display name’, the actual name of the item as it appears on the site
Slug	Used to define the url (larocque.dev/tech/tech-slug
Description	Shorter overview for link card previews
Experience	More comprehensive breakdown of how I’ve used the technology
Homepage	Link to the homepage/general point of reference for the tech
Related links	Unused at the moment

Pages and default layout

I set up the pages directory as follows: pages directory for larocque.dev

There’s an index.vue for the homepage, and 3 directories: /me, /projects, and /tech, each with their own index.vue for their top-level pages. /projects and /tech also have dynamic page templates from Nuxt (_project.vue and _tech.vue) to account for slugs passed to those routes.

Static/list pages

…‘static’ of course being a loose way for me to say ‘not dependent on a dynamic slug’ 😎

The homepage, /projects, and /tech have pretty similar markup, there’s a Bulma hero component fed static props, and a tweaked Bulma card component fed data from the content types in Contentful.

Here’s the <template> and <script> sections from my index.vue. Surprisingly simple! The Contentful client is set up basically precisely like their integration guide. Homepage template: larocque.dev homepage index.vue template Homepage script:

The script section gets the info for the 2 Cards components from Contentful, and I feed some strings to the Hero.

Dynamic pages

Bulma and components

I used Bulma on this guy after getting annoyed that Tailwind added most of the file size to Wifeapedia, but this could definitely be something I configured wrong when adding Tailwind (update I didn’t set up tree-shaking). I also believe Tailwind has since come out with v3 with does JIT to only build what you’re using. Regardless I liked Bulma’s naming conventions and default styling a bit more so here we are…