astn/personal-website-2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
443 commits 3 branches 0 tags 380 MiB
  • Astro 51.6%
  • SCSS 25.3%
  • Svelte 16.7%
  • TypeScript 6.2%
  • JavaScript 0.2%
Find a file
Exact
astn f4ff79be26
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 8m8s
Details
Refactored project posts and blog posts to use a shared layout, and most information was shared between them anyway. Fixed a type issue with shiki. Using the site property from the astro.config.mjs file to determine the site url instead of manually entering it now.
2026-04-16 12:48:33 -07:00
.forgejo/workflows Added a workflow to auto deploy my site to test.astn.io 2026-04-05 12:50:07 -07:00
.vscode Installed Astro 2026-03-13 11:10:07 -07:00
project-images Added a new schema for frontend projects. Added 15 mockup project documents and images for each one. 2026-03-29 18:44:43 -07:00
public Updated the OpenGraph image 2026-04-15 12:19:41 -07:00
src Refactored project posts and blog posts to use a shared layout, and most information was shared between them anyway. Fixed a type issue with shiki. Using the site property from the astro.config.mjs file to determine the site url instead of manually entering it now. 2026-04-16 12:48:33 -07:00
.gitignore Installed Astro 2026-03-13 11:10:07 -07:00
astro.config.mjs Refactored project posts and blog posts to use a shared layout, and most information was shared between them anyway. Fixed a type issue with shiki. Using the site property from the astro.config.mjs file to determine the site url instead of manually entering it now. 2026-04-16 12:48:33 -07:00
ATTRIBUTIONS.md Added search page and function searching using Fuse.js 2026-04-12 23:29:44 -07:00
CLAUDE.md Updated README and CLAUDE 2026-04-13 13:10:16 -07:00
LICENSE Added license 2026-03-25 09:59:12 -07:00
package-lock.json Added search page and function searching using Fuse.js 2026-04-12 23:29:44 -07:00
package.json Added search page and function searching using Fuse.js 2026-04-12 23:29:44 -07:00
README.md Adjusted the style of the hero title. Updated the readme. 2026-04-15 13:39:33 -07:00
svelte.config.js Refactored AppBar to use runes and types. Added LightToggle file to implement light/dark mode toggling for the user 2026-03-13 13:45:50 -07:00
tsconfig.json Added shortcodes for common paths 2026-03-15 21:42:23 -07:00

README.md

Austin Hagel's Personal Website - 2026

About

This is the frontend for my personal site. It will also be used as a template for other sites I plan on making, too.

Content is stored within this repo as markdown files in src/content/, validated with Zod schemas. Three content collections exist — blog, guides, and frontend projects — each with co-located cover images. Navigation links are driven by JSON configs (internalLinks.json, externalLinks.json). I plan to keep content separate in the future, likely with a CMS such as Payload.

Technology

Tool Version Role
Astro 6 Static site generation, file-based routing, content collections
Svelte 5 Interactive components using runes ($state, $props)
Sass — Custom SCSS theming with CSS custom properties
Fuse.js 7 Client-side fuzzy search across content collections

Notable design choices:

  • OKLCH color space for theme variables with dark/light mode support
  • View Transitions API for page and theme-toggle animations (circular reveal from button origin)
  • No CSS framework — fully custom styles
  • Dark/light favicons that update dynamically with the color scheme
  • Code blocks with a custom Shiki theme, per-line copy on click, and a language badge with full-block copy

Prerequisites

  • Node.js >=22.12.0
  • npm

Project Structure

src/
├── components/
│   ├── cards/             # BlogCard, FrontendProjectCard and their content sub-components
│   ├── drawer-mobile-nav/ # Mobile drawer navigation (DrawerMobileMenu, DrawerMobileNav, DrawerMobileNavLink)
│   ├── home-sections/     # Home page sections (Hero, About, Blog, Projects, Links)
│   ├── state/             # Shared Svelte state modules (appBarState, mobileMenuState)
│   └── ...                # AppBar, Navigation, Paginator, Tabs, DirectoryHero, SearchBar,
│                          # BreadCrumb, ContactForm, ContactButton, Badge, etc.
├── content/
│   ├── blog/         # Blog posts (Markdown with co-located cover images)
│   ├── guides/       # Guides & tutorials
│   └── projects/
│       └── frontend/ # Frontend project write-ups
├── layouts/
│   ├── Base.astro      # Base layout (AppBar, Drawer, Footer, scroll restoration, meta)
│   ├── CommonHead.astro # <head> fragment (meta, favicons, ClientRouter, theme init script)
│   ├── Directory.astro # Reusable paginated listing with sidebar fields
│   └── Taxonomy.astro  # Listing for taxonomy terms (categories, tags)
├── pages/            # File-based routes (see Routing below)
├── scripts/
│   ├── search/           # Fuse.js search logic (fuseOptions, search, resultTemplate)
│   ├── customTransitions.ts
│   ├── initCodeCopy.ts   # Per-line and full-block clipboard copy for code blocks
│   ├── initScrollAnimations.ts
│   └── ...               # drawerUtils, fieldDataUtils, slugify, types
└── styles/
    ├── code.scss         # Code block styles (Shiki output, badges, copy interactions)
    ├── shiki-theme.json  # Custom Shiki syntax-highlight theme
    ├── theme.scss        # OKLCH color tokens, dark/light modes
    ├── transitions.scss  # View transition animations
    └── ...               # index, reset, variables, fonts, search
public/
└── fonts/
    ├── plus-jakarta-sans/ # Self-hosted Plus Jakarta Sans (body text)
    └── jetbrains-mono/    # Self-hosted JetBrains Mono (code blocks)

Routing

/                           Home
/about                      About page
/blog/                      Blog directory (paginated)
/blog/[id]                  Individual blog post
/blog/categories/           All blog categories
/blog/categories/[category] Posts filtered by category (paginated)
/blog/tags/                 All blog tags
/blog/tags/[tag]            Posts filtered by tag (paginated)
/projects/                  Projects index
/projects/frontend/         Frontend projects directory (paginated)
/projects/frontend/[id]     Individual frontend project
/projects/frontend/categories/              All frontend project categories
/projects/frontend/categories/[category]    Projects filtered by category (paginated)
/projects/frontend/tags/                    All frontend project tags
/projects/frontend/tags/[tag]               Projects filtered by tag (paginated)
/search                     Search page (fuzzy search via Fuse.js, paginated results)

Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro -- --help Get help using the Astro CLI

Roadmap

Core

  • AppBar with floating style and auto-hiding
  • Dark/Light Mode & Toggle
  • View Transitions
    • Light Mode Toggle transition
    • Page transitions
  • Scroll-triggered reveal animations
  • Mobile Drawer (navigation, light toggle, featured links, contact button)
  • Responsive Layout
  • Navigation progress bar
  • Breadcrumb navigation
  • Search
    • Search bar UI
    • Functional search (Fuse.js, client-side)
    • Search results page (paginated)
  • Contact
    • Contact form UI (modal dialog with honeypot)
    • Functional contact form (submission handling)

Pages

  • Complete 'Home' page
    • Hero section
      • Video Background
      • Floating Particles Effect Background
      • Social Links
    • About section
    • Featured Posts section
    • Featured Projects section
    • External Links section
  • Complete 'About' page
    • Intro section
    • Story section
    • Expertise section
    • Philosophy section
    • Connect section
  • Routes for collections
    • Pagination
    • Categories view (directory + filtered listing)
    • Tags view (directory + filtered listing)
    • Featured items on first page
    • Sorting & filtering
  • Complete 'Blog' page
  • Complete 'Projects' page
    • Projects index (list of project collections)
    • Frontend projects (personal + Frontend Mentor)
    • Graphic Design projects
    • Backend projects
    • 3D Modeling/Animation projects
  • Archive pages
    • Blog archive
    • Projects archive

Future

  • Implement a CMS (Looking at Payload)
  • Guides collection pages
  • Share button/link for posts

License

MIT — free to use, modify, and distribute, including commercially.

Attributions

Please check the Attributions Document to view the resources used to make this project possible.

Documentation