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