portfolio Svelte Themes

Portfolio

A highly interactive, visually impressive developer portfolio using Svelte or SvelteKit.

Demo Download

Precious Odion — Interactive Developer Portfolio

A cinematic, highly interactive developer portfolio built with SvelteKit to showcase frontend engineering skill, interaction design, accessibility, performance optimization, dynamic theming, AI integration, and creative developer tooling.

This is not a static resume page. It is a portfolio experience designed to feel immersive, engineered, memorable, and production-ready.

Live Demo

Portfolio: https://portfolio-eta-virid-77.vercel.app/

Repository

GitHub: https://github.com/dreadhead0/portfolio

Overview

This portfolio was built for the Frontend Wizards Stage 5B challenge: build an interactive developer portfolio using Svelte or SvelteKit.

The goal was to create a portfolio that goes beyond a normal landing page by combining:

  • a strong hero identity
  • smooth animated sections
  • dynamic project data
  • cinematic project case-study modals
  • an interactive terminal
  • a Groq-powered AI portfolio assistant
  • persistent dynamic accent themes
  • responsive layouts
  • accessibility-conscious interactions
  • performance-aware implementation

The visual direction combines:

  • futuristic developer portfolio
  • deep-web hacker aesthetic
  • terminal-inspired navigation
  • cinematic project storytelling
  • clean Apple-level spacing and hierarchy

Core Features

1. SvelteKit-Based Architecture

The portfolio is built with SvelteKit, using reusable components and centralized project data.

Key implementation areas:

  • component-based UI
  • reactive state handling
  • reusable project cards
  • modal-driven case studies
  • server route for AI integration
  • dynamic theme store
  • accessible layout structure
  • production build support

2. Hero Section

The hero section is designed to immediately communicate personality, technical direction, and visual identity.

It includes:

  • name and professional title
  • animated role text
  • short introduction
  • project CTA
  • terminal CTA
  • social/contact shortcuts
  • resume download button
  • responsive code card
  • animated background/grid styling
  • cursor glow interaction
  • dynamic accent theme support

Positioning:

Frontend Systems Engineer focused on real-time systems, frontend architecture, performance, UI polish, and accessibility.

3. Dynamic Projects Showcase

Projects are rendered dynamically from a central data file.

Each project includes:

  • title
  • description
  • technologies used
  • project category
  • project type
  • status
  • screenshot/image
  • live demo link
  • GitHub repository link
  • problem/build/impact case-study content

Project interactions include:

  • category filtering
  • responsive project grid
  • hover effects
  • animated transitions
  • cinematic case-study modal
  • screenshot preview
  • full screenshot view
  • live demo/GitHub actions

Featured projects:

  1. E2EE Messaging App
  2. Interactive Todo Card
  3. Testable Profile Card
  4. Invoice Management App
  5. Habit Tracker PWA
  6. AI Page Summarizer Extension
  7. Real-time Data Visualization Platform
  8. Interactive Developer Portfolio

E2EE Messaging App

A secure messaging application where messages are encrypted on the client before reaching the backend.

Tech: Web Crypto API, AES-GCM, RSA-OAEP, IndexedDB, JWT Auth, API Integration
Live: https://whisperbox-six.vercel.app/
GitHub: https://github.com/dreadhead0/whisperbox

Highlights:

  • client-side encryption
  • encrypted backend storage
  • decryption failure states
  • secure messaging flow
  • separation between plaintext UI state and encrypted API payloads

Interactive Todo Card

A stateful todo card with editing, status transitions, priority handling, collapsible content, and live due-time logic.

Tech: HTML, CSS, JavaScript, Accessibility, State Management
Live: https://todo-card-hng-stage-0.vercel.app/
GitHub: https://github.com/dreadhead0/Todo-Card-HNG-Stage-0

Highlights:

  • edit mode
  • status synchronization
  • priority indicators
  • overdue detection
  • keyboard-accessible expand/collapse behavior
  • responsive UI layout

Testable Profile Card

A semantic and responsive profile card built with strict data-testid requirements and accessibility-first markup.

Tech: HTML, CSS, JavaScript, Semantic HTML, Responsive Design
Live: https://profile-card-hng-14.vercel.app/
GitHub: https://github.com/dreadhead0/Profile-card-HNG-14

Highlights:

  • semantic HTML
  • accessible avatar alt text
  • social links
  • hobbies/dislikes lists
  • current epoch time display
  • test-friendly DOM structure

Invoice Management App

A React invoice app with CRUD flows, validation, filtering, draft handling, payment states, and persistent data.

Tech: React, JavaScript, LocalStorage, Forms, Responsive UI
Live: https://invoice-app-omega-bice.vercel.app/
GitHub: https://github.com/dreadhead0/invoice-app

Highlights:

  • create, read, update, delete flows
  • form validation
  • draft saving
  • paid-state transitions
  • status filtering
  • confirmation modal
  • persistent local state

Habit Tracker PWA

A technical-spec-driven Progressive Web App with strict routes, persistence rules, required selectors, tests, and installable app behavior.

Tech: PWA, JavaScript, Testing, LocalStorage, Service Worker
Live: https://habit-tracker-pwa-ashen.vercel.app/
GitHub: https://github.com/dreadhead0/habit-tracker-pwa

Highlights:

  • requirements-driven implementation
  • local persistence
  • PWA behavior
  • installability support
  • required selectors
  • automated test awareness

AI Page Summarizer Extension

A Manifest V3 Chrome extension that extracts webpage content, summarizes it, and caches summaries per URL.

Tech: Chrome Extension, Manifest V3, JavaScript, AI API, Security
Live: https://ai-page-summarizer-doy6.onrender.com
GitHub: https://github.com/dreadhead0/ai-page-summarizer

Highlights:

  • popup UI
  • content script extraction
  • background service worker messaging
  • AI summarization flow
  • loading/error states
  • summary caching
  • secure extension architecture

Real-time Data Visualization Platform

A real-time Vue analytics dashboard with live metrics, charts, process tables, activity feed, and dashboard controls.

Tech: Vue, Vite, TypeScript, Charts, Realtime UI, Performance
Live: https://real-time-data-visualization-platfo.vercel.app/
GitHub: https://github.com/dreadhead0/real-time-data-visualization-platform

Highlights:

  • simulated real-time data
  • metric cards
  • line/bar/area charts
  • activity feed
  • filtering controls
  • responsive dashboards
  • performance-conscious UI updates

Interactive Developer Portfolio

This portfolio itself is also treated as a project case study.

Tech: SvelteKit, Svelte, TailwindCSS, GSAP, Lenis, Accessibility
Live: https://portfolio-eta-virid-77.vercel.app/
GitHub: https://github.com/dreadhead0/portfolio

Highlights:

  • dynamic accent themes
  • persistent theme store
  • interactive terminal
  • Groq-powered AI assistant
  • cinematic project modals
  • animated sections
  • responsive project screenshots
  • accessible navigation
  • production build cleanup

Creative Features

This portfolio includes multiple advanced creative features.

AI Portfolio Assistant

A Groq-powered assistant that answers questions about my projects, skills, architecture, performance choices, accessibility decisions, and contact paths.

Features:

  • secure SvelteKit server endpoint
  • Groq API integration
  • environment-based API key handling
  • persistent chat history
  • clear-chat confirmation
  • in-panel toast feedback
  • clickable links
  • loading and error states
  • mobile-safe panel layout
  • terminal-inspired visual style

The assistant is intentionally scoped to portfolio-related questions.

Interactive Terminal

The portfolio includes a command-driven terminal experience.

Available commands include:

help
whoami
skills
projects
focus
contact
resume
clear

The terminal reinforces the developer-tools experience and gives visitors another way to explore the portfolio.

Cinematic Project Modals

Each project opens into a case-study modal with:

screenshot preview
project metadata
problem section
build section
impact section
full tech stack
live demo link
GitHub repository link

This turns the project showcase into a more immersive, product-style experience.

Dynamic Accent Themes

The portfolio supports persistent custom accent themes:

red
green
blue
violet
purple

Theme features:

localStorage persistence
no flash on initial page load
theme-aware cards
theme-aware modals
theme-aware assistant
theme-aware terminal
animated switching feel
Tech Stack:
Core
SvelteKit
Svelte
JavaScript
TailwindCSS
Native CSS
Vite
Animation / Interaction:
GSAP
Lenis
CSS transitions
Intersection Observer
custom reveal animations
reduced-motion support
AI:
Groq API
SvelteKit server route
environment variables
Deployment / Tooling:
Vercel
GitHub
npm
Git
Project Structure
src/
  lib/
    components/
      About.svelte
      Contact.svelte
      CursorGlow.svelte
      Footer.svelte
      Hero.svelte
      Nav.svelte
      PortfolioAssistant.svelte
      ProjectCard.svelte
      ProjectModal.svelte
      Projects.svelte
      Skills.svelte
      Terminal.svelte
      ThemeToggle.svelte

    data/
      projects.js

    stores/
      theme.js

  routes/
    api/
      chat/
        +server.js
    +layout.svelte
    +page.svelte

static/
  projects/
    e2ee-messaging.jpeg
    todo-card.jpeg
    profile-card.jpeg
    invoice-app.jpeg
    habit-tracker.jpeg
    ai-extension.jpeg
    realtime-dashboard.jpeg
    portfolio.jpeg

  profile.jpg
  resume.pdf

Architecture Explanation

The portfolio is organized around reusable Svelte components.

Component Layer

Each major section is isolated into its own component:

Hero.svelte handles the landing experience.
About.svelte presents identity, profile image, and focus areas.
Skills.svelte renders grouped technical skills.
Projects.svelte controls filtering and modal state.
ProjectCard.svelte renders individual project summaries.
ProjectModal.svelte renders full cinematic case studies.
PortfolioAssistant.svelte handles the AI chat UI.
Terminal.svelte powers the command-line interaction.
Contact.svelte handles form interaction and validation.
Data Layer

Project content lives in:

src/lib/data/projects.js

This keeps the project showcase dynamic and maintainable.

Each project object includes:

title
category
description
long description
problem/build/impact
technologies
live link
GitHub link
image
visual type
status
featured state
State Layer

Theme state is handled in:

src/lib/stores/theme.js

The assistant also stores chat history in localStorage for persistence.

Server Layer

The AI assistant uses:

src/routes/api/chat/+server.js

This protects the Groq API key by keeping requests server-side.

Setup Instructions:

Clone the repository:

git clone https://github.com/dreadhead0/portfolio.git
cd portfolio

Install dependencies:

npm install

Create your environment file:

cp .env.example .env

Add your Groq API key:

GROQ_API_KEY=your_groq_api_key_here

Start the development server:

npm run dev

Open the local URL shown in your terminal.

Environment Variables

The AI assistant requires a Groq API key.

GROQ_API_KEY=replace_with_your_groq_api_key

Important:

.env contains the real key and must not be committed.
.env.example is safe to commit.
The key is only accessed from the SvelteKit server route.
Available Scripts

Run the development server:

npm run dev

Run Svelte checks:

npm run check

Build for production:

npm run build

Preview the production build locally:

npm run preview
Animation Decisions

The animation system was designed to feel smooth and intentional without becoming distracting.

Animation choices include:

reveal-on-scroll sections
staggered cards
hover transitions
animated cursor glow
spinning profile ring
cinematic modal entrance
assistant loading animation
terminal-style interactions
theme-aware glow effects

Design principles:

use motion to guide attention
avoid excessive animation
avoid janky scroll effects
keep transitions consistent
support reduced-motion preferences
keep animation lightweight and CSS-driven where possible
Performance Optimization Techniques

Performance was considered throughout the implementation.

Optimization decisions:

lightweight Svelte components
centralized project data
lazy-loaded project screenshots
CSS-based preview visuals
no heavy WebGL or 3D dependency
cleanup of IntersectionObserver instances
cleanup of keyboard listeners in modals
responsive images from the static folder
reduced-motion media query support
minimal global state
production build verification

The project avoids unnecessary rendering complexity while still delivering a polished interactive experience.

Accessibility Considerations

Accessibility was treated as a core requirement.

Implemented accessibility features:

semantic HTML sections
accessible navigation
skip navigation link
visible focus states
keyboard-accessible controls
form labels
validation feedback
aria labels for buttons and controls
modal close buttons
Escape key support
alt text for images/screenshots
readable color contrast
reduced-motion support
no intentional keyboard traps in non-modal UI
external links use rel="noopener noreferrer"

The project was checked with:

npm run check
npm run build

to catch Svelte and accessibility warnings.

Security and Stability Decisions

Security-related decisions include:

Groq API key is stored server-side only.
.env is ignored by Git.
.env.example documents required variables safely.
AI requests go through a SvelteKit server route.
User input is validated before being sent to Groq.
External links use safe link attributes.
Contact form inputs are validated.
Terminal commands are simulated and scoped to portfolio content.
No real shell execution is performed.
Responsive Design

The portfolio was optimized for:

desktop
tablet
mobile

Responsive considerations:

mobile-safe navigation
adaptive hero layout
responsive code card
profile image layout on mobile
project grid collapse
scrollable category filters
mobile-safe project modal
mobile-safe AI assistant panel
touch-friendly buttons
no horizontal overflow target

Tested breakpoints include:

375px
430px
768px
1024px
desktop widths
Contact Section

The contact section includes a functional form experience with:

name input
email input
message textarea
validation feedback
success state
keyboard-friendly controls
accessible labels
responsive layout
Trade-offs
AI Assistant

The AI assistant uses a real Groq integration through a server endpoint. This makes the feature more impressive and functional, but requires a deployed environment variable.

Screenshots

Project screenshots are stored in static/projects for simplicity. A future improvement would be adding image compression, responsive image variants, or a CDN.

Animation

Most animations are CSS-based instead of relying heavily on JavaScript animation libraries. This improves performance and keeps the experience smooth.

Terminal

The terminal is a controlled portfolio interaction, not a real shell. This keeps it safe while still delivering a developer-tools experience.

Theme System

The project uses dynamic accent themes instead of a traditional light/dark toggle. This better matches the visual identity and satisfies the dynamic theming requirement.

Deployment

This project is deployed on Vercel.

To deploy your own version:

Push the repository to GitHub.
Import the project into Vercel.
Add this environment variable:
GROQ_API_KEY=your_groq_api_key_here
Deploy.

Before deployment, run:

npm run check
npm run build

Author

Precious Odion
Frontend Systems Engineer
Lagos, Nigeria

Email: [email protected]

LinkedIn: https://linkedin.com/in/precious-odion

GitHub: https://github.com/dreadhead0

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes