Svelte/Tailwind-Powered Portfolio Development

https://jonathanmarshall.xyz → interactive, mobile-first, dark-mode UX

Full-Stack Portfolio SPA – Built with Svelte 5’s compiler-based framework for sub-20 kB bundles and instant reactivity.

Utility-First Styling – Tailwind CSS classes provide consistent spacing, color tokens, and dark-theme palette without handwritten CSS overrides.

Dynamic Project Cards – Auto-generated cards pull data for projects like ResumeAI, Vacation Tracker, and an e-commerce demo, each linking to live previews or repos.

Skills & Tech Stack Panel – Animated counters and icon grid highlight core languages, frameworks, cloud tools, and dev-ops skills.

Resume & Contact Gateway – One-click resume download and “Get in touch” button that routes to LinkedIn for lead capture.

CloudFlare Pages CI/CD Pipeline – Git push → preview → production with roll-back safety, edge caching, and web analytics.

I engineered this Svelte-powered portfolio to present my projects and skill set with near-instant loading and a sleek dark UI. Visitors can explore live demos, scan my tech stack, and download my resume— all on a friction-free, single-page experience that’s continuously deployed via CloudFlare Pages.

Design & Wireframes – Sketched section flow and selected a dark, neon-accent palette to match my brand.

Framework Selection – Chose Svelte 5 for its compiler-driven speed and zero-runtime reactivity.

Component Build-out – Built hero, project grid, skills matrix, and contact card as reusable Svelte components with Tailwind classes.

Data Binding – Fed project metadata through a JSON array so future items render automatically.

Deployment & CI – Configured CloudFlare Pages for automatic previews on every commit, leveraging SvelteKit’s adapter-auto preset.

Performance & SEO Pass – Achieved 100/100 Lighthouse scores in performance and best-practices on initial release.

< 1 s Largest Contentful Paint on desktop and mobile.

Time-to-interactive reduced by 40 % versus my previous React static site, thanks to Svelte’s compile-time optimizations.

Consistent conversion path – average of 3 recruiter contacts per week via the LinkedIn CTA since launch.

Why Svelte instead of React or Next.js? Svelte shifts reactivity into a build step, eliminating virtual-DOM overhead and shrinking bundle size for faster first paints.

Is Tailwind “bloated”? Tailwind’s JIT engine purges unused classes at build time, so CSS payloads stay tiny while dev velocity remains high.

How easy is maintenance? New projects are added by dropping a JSON entry—components re-render automatically, and CloudFlare Pages pushes a preview URL to my email on every commit.

Frontend: Svelte 5, SvelteKit, TypeScript

Styling: Tailwind CSS, DaisyUI utility components.

Hosting & CI/CD: CloudFlare Pages

Analytics & Monitoring: Vercel Web Analytics, Lighthouse audits

Other Tools: Heroicons SVG set, ESLint, Prettier

A clean, performant personal site demonstrates that I can deliver production-ready Svelte/Tailwind apps, optimize Core Web Vitals, and automate deployments—all skills directly transferable to client projects that need fast, modern front-ends and rock-solid dev-ops pipelines.