noahtigner.github.io

Noah Tigner's Portfolio Website

Checklist:

• Scaffold React / TypeScript project with Vite
• Configure Prettier
• Configure ESLint
• Configure Vitest
• Add new scripts to package.json & README
• Configure Husky pre-commit hooks
• Configure CICD for Github Pages
  • quality.yml: Checks formatting, lints, and tests code
  • codeql.yml: Checks for security vulnerabilities
  • dependabot.yml: Checks for outdated dependencies
  • deploy.yml: Builds and deploys to Github Pages
• Remove Vite placeholders
• Set up basic SEO and meta info
  • Set up meta tags
  • Set up Open Graph Protocol (OGP) tags and preview image. Open Graph Debugger
  • Semantic HTML & ARIA roles
  • Sitemap Generation
  • webp images
• Choose color palette and font family
• Design System / Component Library
  • Material UI ✅ -> Base UI ✅
  • Chakra UI
  • Mantine
  • Tailwind
• Build UI
  • Intro or Hero section
  • Card component for portfolio items
  • Timeline component for experience / work history
  • Contact Section
    • Contact Dropdown
    • Contact Footer
• Optimization
  • skeletons for sections and components
  • optimize images
  • lazy-load sections routes
  • lazy-load images
  • Prefetch important routes when certain links are rendered
• Telemetry & Analytics
• Custom 404 Page (that works with Github Pages)
  • Redirect invalid routes to 404 page
• Blog / Articles
  • Markdown support
  • Components:
    • Basic components (Headings, Paragraphs, Lists, Links, Images)
    • Quotes / Callouts
    • Syntax highlighting for code blocks w/ MakrdownIt + Highlight.js
  • Tags / Categories
  • Server-side generation of article pages
• Pull data from Github???
• Test
  • Unit / Component Testing
  • Accessibility Testing

Articles / Blog Posts:

• Creating a Custom Github Pages 404 Page with React Router v7's Framework Mode
• React Conf 2025 Highlights
• Notes on Alex Petrov's Database Internals:
  • Chapter 1 - Introduction & Overview

Available Scripts:

• pnpm dev - Runs the app in the development mode.
• pnpm build - Builds the app for production to the dist folder.
• pnpm preview - Serves the production build from the dist folder.
• pnpm lint - Checks the source code for linting issues.
• pnpm lint:fix - Checks the source code for linting issues and fixes as many as possible.
• pnpm format - Checks the source code for formatting issues.
• pnpm format:fix - Checks the source code for formatting issues and fixes as many as possible.
• pnpm test - Runs Vitest and outputs a coverage report.