From 8a3d0bce3212c805d56d0261240b6403a02ca9ab Mon Sep 17 00:00:00 2001 From: Daniel Diaz <39510674+IslandRhythms@users.noreply.github.com> Date: Tue, 21 Jul 2026 19:12:46 -0400 Subject: [PATCH 1/6] overhaul site with AI --- .github/workflows/ci.yml | 38 + .github/workflows/deploy.yml | 55 + README copy.md | 35 - README.md | 143 +- eslint.config.js | 39 +- index.html | 151 +- package-lock.json | 2543 ++++++-------------- package.json | 18 +- public/.nojekyll | 0 public/404.html | 25 + public/robots.txt | 4 + public/sitemap.xml | 13 + src/App.vue | 160 +- src/assets/base.css | 130 - src/assets/logo.svg | 1 - src/assets/main.css | 460 +++- src/components/AppIcon.vue | 62 + src/components/CommandPalette.vue | 459 ++++ src/components/ProjectCard.vue | 307 +++ src/components/SectionHeading.vue | 47 + src/components/ShaderField.vue | 335 +++ src/components/SiteFooter.vue | 136 ++ src/components/SiteHeader.vue | 402 ++++ src/components/ThemeToggle.vue | 68 + src/components/WordMark.vue | 109 + src/components/icons/IconCommunity.vue | 7 - src/components/icons/IconDocumentation.vue | 7 - src/components/icons/IconEcosystem.vue | 7 - src/components/icons/IconSupport.vue | 7 - src/components/icons/IconTooling.vue | 19 - src/composables/useCommandPalette.js | 47 + src/composables/useScrollSpy.js | 44 + src/composables/useTheme.js | 37 + src/content/experience.js | 72 + src/content/projects.js | 199 ++ src/content/site.js | 66 + src/content/skills.js | 55 + src/directives/reveal.js | 69 + src/main.js | 7 +- src/router/index.js | 79 +- src/sections/AboutSection.vue | 471 ++++ src/sections/ContactSection.vue | 379 +++ src/sections/HeroSection.vue | 327 +++ src/sections/WorkSection.vue | 148 ++ src/views/AboutView.vue | 173 -- src/views/ContactView.vue | 40 - src/views/HomeView.vue | 45 - src/views/LandingView.vue | 24 + src/views/NotFoundView.vue | 65 + src/views/PortfolioView.vue | 57 - src/views/ResumeView.vue | 349 +++ src/views/sectors/GameView.vue | 86 - src/views/sectors/SoftwareView.vue | 82 - src/views/sectors/WebView.vue | 90 - vite.config.js | 23 +- 55 files changed, 5986 insertions(+), 2835 deletions(-) create mode 100644 .github/workflows/ci.yml create mode 100644 .github/workflows/deploy.yml delete mode 100644 README copy.md create mode 100644 public/.nojekyll create mode 100644 public/404.html create mode 100644 public/robots.txt create mode 100644 public/sitemap.xml delete mode 100644 src/assets/base.css delete mode 100644 src/assets/logo.svg create mode 100644 src/components/AppIcon.vue create mode 100644 src/components/CommandPalette.vue create mode 100644 src/components/ProjectCard.vue create mode 100644 src/components/SectionHeading.vue create mode 100644 src/components/ShaderField.vue create mode 100644 src/components/SiteFooter.vue create mode 100644 src/components/SiteHeader.vue create mode 100644 src/components/ThemeToggle.vue create mode 100644 src/components/WordMark.vue delete mode 100644 src/components/icons/IconCommunity.vue delete mode 100644 src/components/icons/IconDocumentation.vue delete mode 100644 src/components/icons/IconEcosystem.vue delete mode 100644 src/components/icons/IconSupport.vue delete mode 100644 src/components/icons/IconTooling.vue create mode 100644 src/composables/useCommandPalette.js create mode 100644 src/composables/useScrollSpy.js create mode 100644 src/composables/useTheme.js create mode 100644 src/content/experience.js create mode 100644 src/content/projects.js create mode 100644 src/content/site.js create mode 100644 src/content/skills.js create mode 100644 src/directives/reveal.js create mode 100644 src/sections/AboutSection.vue create mode 100644 src/sections/ContactSection.vue create mode 100644 src/sections/HeroSection.vue create mode 100644 src/sections/WorkSection.vue delete mode 100644 src/views/AboutView.vue delete mode 100644 src/views/ContactView.vue delete mode 100644 src/views/HomeView.vue create mode 100644 src/views/LandingView.vue create mode 100644 src/views/NotFoundView.vue delete mode 100644 src/views/PortfolioView.vue create mode 100644 src/views/ResumeView.vue delete mode 100644 src/views/sectors/GameView.vue delete mode 100644 src/views/sectors/SoftwareView.vue delete mode 100644 src/views/sectors/WebView.vue diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..16b739f --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,38 @@ +name: CI + +on: + pull_request: + branches: [master] + workflow_dispatch: + +jobs: + verify: + name: Lint, format & build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + + - run: npm ci + + - name: Lint + run: npm run lint:check + + - name: Check formatting + run: npm run format:check + + - name: Build + run: npm run build + + # A regression here usually means an accidental dependency import. + - name: Report bundle size + run: | + echo "### Bundle contents" >> "$GITHUB_STEP_SUMMARY" + echo '```' >> "$GITHUB_STEP_SUMMARY" + du -bh dist/assets/* | sort -k2 >> "$GITHUB_STEP_SUMMARY" + echo '```' >> "$GITHUB_STEP_SUMMARY" + echo "Total: $(du -sh dist | cut -f1)" >> "$GITHUB_STEP_SUMMARY" diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..dee415f --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,55 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: [master] + # Lets you re-deploy from the Actions tab without pushing a commit. + workflow_dispatch: + +# Allow GITHUB_TOKEN to publish to Pages via OIDC. +permissions: + contents: read + pages: write + id-token: write + +# Never run two deploys at once; queue the newest and let it win. +concurrency: + group: pages + cancel-in-progress: true + +jobs: + build: + name: Build + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + + - run: npm ci + + - name: Lint + run: npm run lint:check + + - name: Build + run: npm run build + + - uses: actions/configure-pages@v5 + + - uses: actions/upload-pages-artifact@v3 + with: + path: dist + + deploy: + name: Deploy + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - id: deployment + uses: actions/deploy-pages@v4 diff --git a/README copy.md b/README copy.md deleted file mode 100644 index 824b2c9..0000000 --- a/README copy.md +++ /dev/null @@ -1,35 +0,0 @@ -# portfolio-website - -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vite.dev/config/). - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Compile and Minify for Production - -```sh -npm run build -``` - -### Lint with [ESLint](https://eslint.org/) - -```sh -npm run lint -``` diff --git a/README.md b/README.md index 87b6ac6..c8bc5cc 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,141 @@ -# IslandRhythms.github.io -Resume Website +# islandrhythms.github.io + +Personal portfolio for **Daniel Christian Diaz** — a single-page Vue 3 site with a +hand-written WebGL hero shader, a command palette, dual themes and a printable résumé. + +**Live:** https://islandrhythms.github.io/ + +--- + +## Adding content + +All content lives in [`src/content/`](src/content/). **You should never need to touch a +component to update the site.** + +| File | What it drives | +| --- | --- | +| [`site.js`](src/content/site.js) | Name, role, bio, location, email, hero stats, social links, section list | +| [`projects.js`](src/content/projects.js) | Every card in the Work section | +| [`experience.js`](src/content/experience.js) | The About timeline and the résumé | +| [`skills.js`](src/content/skills.js) | The Toolkit grid and the résumé's skills block | + +### Adding a project + +Open [`src/content/projects.js`](src/content/projects.js) and append an object to the +`projects` array: + +```js +{ + slug: 'my-project', // unique, URL-safe — becomes the #project-my-project anchor + title: 'My Project', + category: 'web', // 'web' | 'software' | 'games' — see `categories` + year: '2026', + blurb: 'One punchy sentence for the card face.', + description: 'The fuller story, revealed when someone hits "Details".', + tech: ['Vue', 'Node.js'], // rendered as chips + links: [ + { label: 'Source', href: 'https://github.com/…', kind: 'code' }, // 'code' | 'live' | 'store' + ], + status: 'live', // 'live' | 'ongoing' | 'archived' — optional status pill + featured: true, // optional: card spans two grid columns + embed: 'https://itch.io/embed/637364', // optional iframe inside the expanded card +} +``` + +That single object automatically produces: + +- a card in the Work grid, in whichever filter tab matches its `category` +- an updated count on the filter buttons +- a searchable entry in the ⌘K command palette +- an entry on `/resume`, if it's `featured` or `live` + +Adding a **new category** means adding one entry to the `categories` array in the same +file — filters with no projects behind them hide themselves automatically. + +--- + +## Development + +```bash +npm install +npm run dev # dev server with HMR +npm run build # production build to dist/ +npm run preview # serve the built output locally + +npm run lint # eslint --fix +npm run format # prettier --write +``` + +Node 22 is what CI uses; anything ≥ 20 should be fine locally. + +--- + +## Deployment + +Deployment is automatic. **Pushing to `master` builds and publishes the site** via +[`.github/workflows/deploy.yml`](.github/workflows/deploy.yml). Pull requests get a +lint + format + build check from [`ci.yml`](.github/workflows/ci.yml), which also posts a +bundle-size breakdown to the run summary. + +> **One-time setup:** in the repository's **Settings → Pages**, set **Source** to +> **GitHub Actions**. The old `gh-pages` branch flow has been removed, and Pages will keep +> serving the stale branch until this is switched over. + +There is no `npm run deploy` any more — pushing is the deploy. + +--- + +## Architecture + +``` +src/ +├─ content/ # ← all site copy and data (edit these) +├─ sections/ # the four landing-page sections +├─ components/ # reusable UI: shader, header, palette, cards, icons +├─ composables/ # theme, scroll-spy, command palette state +├─ directives/ # v-reveal scroll animation +├─ views/ # routed pages: landing, résumé, 404 +└─ assets/main.css # design tokens + base + component primitives +``` + +### Notable pieces + +**`components/ShaderField.vue`** — the hero background. A single full-screen quad running a +GLSL fragment shader: five-octave value-noise fBm, domain-warped twice, then shaped into +caustic bands with a ridged sine. Raw WebGL, no three.js. It caps resolution at 1.75× DPR, +parks its render loop when scrolled out of view or the tab is hidden, renders one static +frame under `prefers-reduced-motion`, and falls back to a CSS gradient when WebGL is +unavailable. + +**`assets/main.css`** — the design system. Raw palette ramps and motion easings live in +Tailwind's `@theme`; semantic tokens (`--bg`, `--accent`, `--line`, …) are redefined per +theme under `[data-theme]` and re-exposed to Tailwind via `@theme inline`. Themes switch by +swapping one attribute on ``, set by an inline script in `index.html` before first +paint so there's no flash on load. + +**`directives/reveal.js`** — `v-reveal` scroll animations sharing one IntersectionObserver +across the whole page. Supports variants and stagger: +`v-reveal="{ variant: 'left', delay: 120 }"`. + +**`components/CommandPalette.vue`** — ⌘K / Ctrl+K / `/` opens fuzzy search over every +section, project, link and action. Commands are derived from the content files, so it never +needs updating separately. + +### Accessibility & performance + +- Every animation respects `prefers-reduced-motion`. +- Skip link, focus-visible rings, labelled controls, and a `