Skip to content

Rebuild website with Eleventy + Tailwind CSS#31

Draft
Copilot wants to merge 2 commits into
devfrom
copilot/rebuild-website-with-tailwind-css-again
Draft

Rebuild website with Eleventy + Tailwind CSS#31
Copilot wants to merge 2 commits into
devfrom
copilot/rebuild-website-with-tailwind-css-again

Conversation

Copy link
Copy Markdown

Copilot AI commented May 21, 2026

Summary

Complete rebuild of noahprail.com, replacing the legacy React/CRA app with a modern static site stack.

Stack

  • Eleventy (11ty) v2 — static site generator with Nunjucks templates and JSON data files
  • Tailwind CSS v3 — utility-first CSS with @tailwindcss/typography for blog posts
  • GitHub Actions — modernised workflow using actions/deploy-pages@v4 for GitHub Pages deployment

Pages built (all URLs match sitemap)

Page URL
Home /
Work /work/
Work — Photography /work/photography/
Work — Videography /work/videography/
Work — Rockets /work/rockets/
Blog /blog/
2017 Into 2018 /blog/2017-into-2018/
A Photo A Day /blog/a-photo-a-day-by-noah-prail/
I switched to Ubuntu /blog/i-switched-to-ubuntu-and-then-back-to-windows/
Microsoft bought GitHub /blog/microsoft-bought-github-what-does-that-mean-for-gitlab/
About /about/
Contact /contact/

Design

  • Dark minimal aesthetic (bg-neutral-950) suited for a photographer/videographer portfolio
  • CSS columns masonry grid for photo galleries (1 → 2 → 3 columns responsive)
  • Fixed, blurred navigation header
  • prose-invert typography for blog post content
  • Social links (GitHub, Instagram, YouTube, Twitter, LinkedIn, Stack Overflow, Medium, GitLab) in the footer on every page

Images

Images are not committed to the repo. They are downloaded from the Squarespace CDN at build time:

# CI runs this automatically
bash scripts/download-images.sh

# or via npm
npm run download-images

What was removed

  • All React/CRA source (src/App.js, src/Header.js, etc.)
  • public/ directory (old static files)
  • .travis.yml
  • .eslintrc.json
  • Old package.json (React dependencies)

Replace React/CRA with Eleventy 11ty v2 + Tailwind CSS v3:
- 11 pages matching sitemap (home, about, contact, work,
  work/photography, work/rockets, blog, 4 blog posts)
- Dark minimal design with responsive masonry photo galleries
- All images stored locally, downloaded via scripts/download-images.sh
- Updated GitHub Actions for modern GitHub Pages deployment
- Blog post URLs preserved exactly from sitemap
- Actual blog post content (not paraphrased)

Agent-Logs-Url: https://github.com/nprail/nprail.github.io/sessions/c50881b8-5eae-4de5-aa24-a693be72c89e

Co-authored-by: nprail <10778661+nprail@users.noreply.github.com>
@nprail
Copy link
Copy Markdown
Owner

nprail commented May 21, 2026

@copilot You missed the videography page. Also, include the social links that were on the original website.

- Add /work/videography/ page with video grid
- Add social links (GitHub, Instagram, YouTube, Twitter, LinkedIn,
  Stack Overflow, Medium, GitLab) to footer on all pages
- Update home hero to link to videography alongside photography/rockets
- Update work landing page to include videography card (3-column grid)
- Add src/_data/social.json and src/_data/videography.json
- Fix build script to use local node_modules binaries (no npx version drift)

Agent-Logs-Url: https://github.com/nprail/nprail.github.io/sessions/9b1ec270-a96e-4cda-af23-6d72a7249891

Co-authored-by: nprail <10778661+nprail@users.noreply.github.com>
Copy link
Copy Markdown
Author

Copilot AI commented May 21, 2026

@copilot You missed the videography page. Also, include the social links that were on the original website.

Done in commit 80d6789:

  • Videography page added at /work/videography/ — video card grid with a YouTube channel link
  • Work landing page updated to 3-column grid including Photography, Videography, and Rockets
  • Home hero updated to link to all three work sections
  • Social links (GitHub, Instagram, YouTube, Twitter, LinkedIn, Stack Overflow, Medium, GitLab) added to the footer on every page — sourced from the original App.js

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • nprail.dev
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot finished work on behalf of nprail May 21, 2026 19:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants