UX Portfolio Website

This is my website to showcase my UX work and learning. It includes a blog.

Tech Stack

• Site generator: Eleventy
• HTML Templating: Nunjucks
• Styling: Tailwind
• JavaScript: Alpine.js

File Structure

• 📦 ux-portfolio
  • 📂 assets: fonts, svgs, video, and images, directly passed through to compiled site
  • 📂 src: Eleventy looks in this folder to compile pages
    • 📂 _data: global data, available in all templates
    • 📂 _includes: anything that's not a full page to be rendered by Eleventy
      • 📂 case-studies: partials for case studies
      • 📂 components: Nunjucks macros that produce markup based on inputs
      • 📂 elements: static chunks of markup
      • 📂 layouts: templates for the outer HTML shell of pages
      • 📂 markdown-partials: bits of markdown to be rendered inside pages
      • 📜 files: partial pages or groups of UI elements
      • 📂 _styles: tailwind configuation and additional CSS
      • 📂 _shortcodes: tags that Eleventy can use to transform data into markup
    • 📂 folders: all non-underscored folders are transformed into website pages
    • 📜 index.njk: home page
  • 📜 files: config files for Eleventy, Github, and NPM