Conversation
- Upgraded tailwindcss to v4.1.18 and added @tailwindcss/postcss plugin - Fixed Tailwind v4 configuration with proper content paths and CSS import syntax - Replaced react-typing-effect with custom React hook-based typing animation (React 19 compatible) - Fixed Button component Link usage for React 19 compatibility - Fixed Nav component layout for proper desktop alignment with logo and nav buttons on one line - Fixed iconMap in project pages to use function references instead of direct JSX elements - Removed non-existent script references from contact.html that were causing 404 errors - Updated PostCSS config to use @tailwindcss/postcss plugin - Fixed component barrel exports to use named re-exports instead of default object export
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- nav: add Mikel Matticoli logo/subtitle on left, replace emoji with Bootstrap SVG icons - hi: fix typing cursor from | to _ to match live site - fireflies: add 30-particle animated component with fireflies.css from live site - contact-popup: new component with sticky toggle button, iframe form, SVG social links, correct -rotate-90 animation - layout: wire in Fireflies, ContactPopup, bounce label, SVG footer icons, View Transitions page transitions - layout.ts: export prerender=true for adapter-static build - about: fix self-closing spans, add iframe title for a11y - .gitignore: exclude .svelte-kit/ build artifacts https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
Side-by-side screenshots of matticoli.net (live) vs SvelteKit port across home, header, contact popup, about, and projects pages. https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
matticoli
changed the title
- fireflies: use {length: 30} iterable instead of sparse Array(30)
- nav: replace reactive label with plain function (reads $page store directly)
- contact-popup: remove redundant text-center on panel div
https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
'Lexend, Helvetica, sans-serif' in a CSS style attribute treats the entire comma-separated list as one invalid font name. Without the outer quotes the browser correctly resolves the font stack. https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
- .github/workflows/pr-preview.yml: builds SvelteKit on PR open/sync/close
and uses rossjrw/pr-preview-action to deploy/clean up previews on the
gh-pages branch under /pr-preview/pr-{number}/
- svelte.config.js: read BASE_PATH env var into kit.paths.base so internal
links and assets resolve correctly when served from a subdirectory
Preview URL pattern: https://matticoli.github.io/pr-preview/pr-{number}/
https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
SvelteKit errors when paths.base is set and internal hrefs/srcs lack the base prefix. Fix by importing `base` and `assets` from `$app/paths` across all components and routes. Configure handleHttpError to warn (not throw) for project markdown data that contains absolute asset paths not under base. https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
Contributor
|
GitHub Pages uses Jekyll by default, which ignores directories starting with _. Adding .nojekyll disables Jekyll so _app/ is served correctly. https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ports the remaining features from the live Next.js site (matticoli.net) to the SvelteKit branch, achieving visual and functional parity. Playwright was used to drive automated comparison across all pages and interactions.
Changes
nav.svelte— Added "Mikel Matticoli / Full Stack Engineer • UX Designer" logo on the left; replaced emoji nav icons with Bootstrap SVG icons (house, person-lines, tools) to match live sitehi.svelte— Fixed typing cursor from|to_fireflies.svelte— New component: 30 animated firefly particles, CSS ported from live site (src/styles/fireflies.css)contact-popup.svelte— New component: sticky bottom toggle button (business-card/hand images), slide-in contact panel with/contact.htmliframe, SVG social links (PDF/LinkedIn/GitHub), correct-rotate-90closed-state animation withorigin-right+layout.svelte— Wired in<Fireflies>,<ContactPopup>, bouncing "Contact me 👉" label, SVG footer icons, SvelteKit View Transitions page transitions viaonNavigate+layout.ts—export const prerender = truesoadapter-staticbuilds cleanlyabout/+page.svelte— Fixed self-closing<span />tags (Svelte error), addedtitleto resume<iframe>for a11ysrc/.gitignore— Added/.svelte-kit/to stop tracking generated build artifactsBuild
npm run buildpasses cleanly —adapter-staticproduces a fully prerendered static site. No warnings other than the pre-existing deprecatedkit.files.assetsoption (functional, just flagged).Visual Comparison — Live (matticoli.net) vs SvelteKit Port
Header / Nav
Home Page
Contact Popup (open)
About Page
Projects Page
https://claude.ai/code/session_012QUyTtg5yUBfbkbtzic3qw