nickmblain.github.io

Personal portfolio and resume site for Nick Blain, a frontend developer with 12+ years of experience. Built as a Vue 3 SPA and deployed via GitHub Pages.

About the Project

This site serves as a living resume: work history, projects, recommendations, and the latest post from The Commit with Nick, all in one parallax-scrolling page. It's intentionally simple: no backend, no SSR, just a client-side Vue app.

A note on Tailwind CSS: an earlier version of this site was built with Tailwind as an experiment. The verdict: it's not something I'd recommend or reach for again. The utility-class approach trades readability and maintainability for speed of prototyping in a way that doesn't hold up well at scale or in team environments. This version replaces it with plain SCSS on a CSS custom-property design-token system.

All site content (jobs, skills, projects, recommendations, latest blog post) lives in src/data/resume.js. To update the resume, edit that file and replace public/NicholasBlainResume.pdf.

Scroll animation is dependency-free: an IntersectionObserver v-reveal directive for reveals, and CSS scroll-driven animations (behind @supports) for decorative motion like the orb drift and the experience timeline's progress line. Everything respects prefers-reduced-motion.

Stack

• Vue 3 with the Composition API and <script setup>
• Vue Router for client-side routing
• SCSS with design tokens, light-dark() theming, and breakpoint mixins
• Vite build tooling
• pnpm package manager
• GitHub Actions CI/CD to GitHub Pages

Getting Started

git clone https://github.com/nickmblain/nickmblain.github.io.git
cd nickmblain.github.io
pnpm install

Development

pnpm dev

Production build

pnpm build

Outputs to dist/ (gitignored). Preview the build locally with pnpm preview.

Lint

pnpm lint

Deployment

Every push to main triggers the deploy workflow, which builds the site and publishes dist/ to GitHub Pages. No build output is committed to the repo.

Directory Structure

index.html        Vite entry (theme pre-paint script lives here)
src/
  assets/
    images/       Photos, screenshots, logos
    scss/         abstracts (mixins), base (tokens, reset), layout, components
  components/
    layout/       AppNavbar, AppFooter, ThemeToggle
    sections/     Hero, BlogSpotlight, About, Projects, Experience, Recommendations
    ui/           AppIcon (inline SVG registry), cards, chips, headings
  composables/    useParallax, useScrollSpy, useReducedMotion
  data/           resume.js (single source of truth for content)
  directives/     v-reveal scroll animation
  pages/          Top-level page views
  router/         Vue Router configuration
public/           Static files (favicon, resume PDF)

License

MIT