In progress...
My bad y'all, life is crazy and/or I'm trying to remember all the deets of
this specific project.
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
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:
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:
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:
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:
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...
Frickin' ESLint and Prettier
This was surprisingly more of a pain than I anticipated