Interactive Portfolio / SvelteKit / 2026

Abdulahad Sheid

Frontend Engineer + Interaction Designer

I turn product ideas into fast, tactile experiences that feel engineered instead of assembled. This portfolio is designed as a living proof of interaction design, accessibility, and performance discipline.

Selected work

Projects that prove product thinking and frontend range.

Each case study is routed individually, optimized for responsive layouts, and presented with production-style detail.

Whisper-box img.
2026 web-app

WhisperBox End-2-End Encrypted Platform

A live analytics workspace for product teams.

WhisperBox is a Vite + React end-to-end encrypted messaging frontend. It depends on a separate backend for auth, user search, message storage, websocket signaling, and media/call infrastructure.

  • WhisperBox API
  • ReactJS
  • WebSockets
  • Tailwind CSS variables
Product showcase screenshot for Atlas Commerce project.
2025 immersive

Admin Dashboard | Material UI

A dashboard platform with material user interface.

A responsive admin dashboard built with Material-UI and Nivo charts, using mock data to showcase data tables, charts, theming, and modern UI design with React.

  • React
  • Material UI
  • Nivo Charts
  • Tailwind Css
  • Mock Data (JSON)
Developer tooling interface screenshot for Terminal Flow project.
2025 web-app

SkySwift Booking System

A booking system for flights, hotels, and travel packages.

SkySwift is a booking system for flights, hotels, and travel packages. It uses a modern user interface and a responsive design to provide a seamless booking experience. A responsive flight booking platform where users can search, compare, and book flights seamlessly. Developed with React, it offers a smooth, traveler-friendly experience with a modern UI and fast navigation.

  • ReactJS
  • TailwindCss
  • React-date-range
  • Firebase
  • React Router
  • Framer Motion
  • EmailJS
  • Date-fns
  • React Hot Toast
  • Lucide React
Nova SaaS dashboard interface with analytics charts and user management panels
2025 web-app

Nova SaaS

A modern SaaS dashboard for startups with analytics, user management, and intuitive navigation.

A sleek and scalable SaaS platform dashboard built for startups and growing businesses. It includes user management, analytics visualization, and a clean interface designed to make navigation simple and efficient.

  • React
  • TailwindCSS
  • Framer Motion
  • Chart.js
Resume builder web app with editable resume sections, live preview, and template selection
2025 web-app

Resume Builder - Portfolio Website

A customizable resume builder that helps users create ATS-friendly resumes with live preview and export options.

A professional resume builder and portfolio-style web application designed to help users create polished, ATS-friendly resumes. It includes customizable templates, real-time preview functionality, and export options for a smooth and user-friendly resume creation experience.

  • React
  • Tailwind
  • Firebase
  • React Router
  • Framer Motion
PageMind Chrome extension popup showing an AI-generated webpage summary with highlighted key phrases
2026 tooling

PageMind

An AI-powered Chrome extension tool that instantly summarizes webpages into key points, insights, and reading-time estimates.

PageMind is a Chrome extension that uses OpenAI GPT-4o-mini to summarize webpages without disrupting the browsing experience. It delivers structured bullet-point summaries, key insights, estimated reading time, in-page phrase highlighting, and local caching to help users scan long-form content faster and more efficiently.

  • JavaScript
  • Chrome Extensions API
  • OpenAI API
  • HTML
  • CSS
  • chrome.storage.local

Engineering craft

Built to score well in reviews, not just screenshots.

This portfolio deliberately covers the HNG rubric: reusable architecture, refined interactions, accessibility discipline, and fast-loading visuals.

Core strengths

  • HTML
  • CSS
  • JavaScript
  • ReactJS
  • SvelteKit
  • Svelte 5
  • TypeScript
  • Motion Design
  • Accessibility
  • Performance Optimization
  • Design Systems
  • Responsive Engineering

Delivery notes

  • Built for SvelteKit with reusable components and modular data.
  • Includes keyboard-friendly command palette and reduced motion support.
  • Optimized for Lighthouse, routing clarity, and deploy-ready hosting.

Contact

Let’s build something that feels unforgettable.

The contact flow uses client-side validation, sanitized inputs, and a mail integration that keeps secrets out of the frontend.

Reach out

I enjoy building premium interfaces, product landing experiences, dashboards, and frontend systems that stay smooth under real use.

sheidabdulahad0@gmail.com
Or email directly

Your message stays on-device until you choose to send it through your email client.

Built with SvelteKit, accessibility discipline, and product-level frontend care.