// projects
OptoLens — Optical salon site
Full-Stack ApplicationProblem: Client had an old WordPress site and wanted a faster, server-rendered Next.js replacement from a new Figma design — without losing the SEO value of already-indexed blog posts and pages.
Outcome: Shipped a full-stack Next.js + Payload CMS app with booking, client portal, admin panel, and SMS / Instagram / email integrations. Migrated existing WordPress content to preserve SEO, deployed on Vercel with ISR.
Timeline: ~4 weeks · Role: Full-stack
A full-stack website for a Polish optical salon, built from Figma to code. Features expert and service pages, blog with tags and categories, pricing, contact form, appointment booking with time-slot selection, client portal (login, registration, dashboard), and admin panel for appointments, reservations, Instagram feed, and data migration. Integrations include SMS (SMSAPI), Instagram OAuth, and email (Nodemailer). Built with Next.js 16, App Router, TypeScript, Payload CMS (headless CMS), PostgreSQL, Vercel Blob, ISR with cache revalidation, and deployed on Vercel.
Positivus Landing Page
Landing PageProblem: Portfolio piece to demonstrate Figma → production fidelity, using an open Positivus design from Figma Community.
Outcome: Shipped a pixel-perfect Next.js + Tailwind implementation using Figma MCP + Cursor AI with manual polish for pixel fidelity. Source code kept open on GitHub so prospective clients can review the work.
Role: Frontend, solo
A modern, responsive landing page for a digital marketing agency, built from a Figma design. This project showcases a pixel-perfect implementation of a professional landing page with smooth animations, interactive components, and a fully responsive design.
DrBitcoin Investment Platform
Full-Stack ApplicationProblem: No single API provides historical data across crypto, stocks, gold, and silver. The platform needed unified historical + live data with an admin surface to manage the pipeline.
Outcome: Built a custom ETL aggregating three financial APIs (CryptoCompare, Financial Modeling Prep, TwelveData) into PostgreSQL with on-demand refresh for the latest data. Shipped full-stack Next.js app with Figma-to-code frontend, interactive Highcharts, multi-currency UI, and admin panel.
Timeline: ~3 weeks · Role: Full-stack
A full-stack Next.js investment comparison platform built from Figma designs. Features include a PostgreSQL database schema for historical financial data, integration with multiple financial APIs (CryptoCompare, Financial Modeling Prep, TwelveData) with ETL data pipelines, interactive charts using Highcharts, multi-currency support, responsive UI with Tailwind CSS, and an admin data management panel. Delivered complete backend infrastructure, data processing, and pixel-perfect frontend using Next.js 16, TypeScript, and React Server Actions.
Luxterior — Interior Design Landing Page
Landing PageProblem: Portfolio piece to demonstrate pixel-perfect, responsive front-end work in plain HTML / CSS without a framework.
Outcome: Coded a Dribbble interior-design landing into a single-page site with hero and testimonial sliders (Siema), responsive breakpoints, and smooth interactions — hosted on CodePen.
Role: Frontend, solo
A responsive, single-page landing for an interior design brand, built from a Dribbble design (UI to HTML). Features a hero with image carousel/slider, benefits section (Best Quality, Free Shipping, Warranty), experience stats (15 years, 95 awards, 475 furnitures sold), process steps (Briefing, Processing, Finishing), testimonials slider, newsletter signup form, and footer. Includes top nav with search toggle and mobile menu, custom CSS with Google Fonts (Noto Sans, Playfair Display), and Siema for the hero and testimonials sliders. Hosted on CodePen.
Interactive SVG Funnel Chart Builder
Data VisualizationProblem: Client needed editable, presentation-ready funnel graphics without relying on heavy design software or static hand-made assets.
Outcome: Delivered a browser-based SVG funnel builder with real-time updates, configurable stages and styling, and reusable vector output the client could quickly adapt for marketing pages and slide decks.
Timeline: ~1 week · Role: Frontend, solo
A Vue 3 single-page app for building interactive marketing and sales funnel visuals directly in the browser. Includes a schema-driven control panel and a pure JavaScript SVG engine that procedurally generates funnel paths, gradients, typography, and multi-stage layouts. Morphdom powers efficient DOM patching for smooth live previews, letting users iterate stages, colors, and copy in real time and export reusable, scalable graphics for landing pages and presentations.
SVGMorphdom
Vue.js Multi-Step Subscription Signup Flow
E-commerce FrontendProblem: Client needed a guided, multi-step subscription experience that fit into an existing e-commerce setup while preserving the current storefront implementation.
Outcome: Shipped a production-ready Vue signup flow with progress persistence, reliable option-to-variant mapping, and checkout URL generation, then iterated quickly on UX and copy updates to match revised requirements.
Timeline: ~1 week · Role: Frontend, solo
A Vue 3 (Composition API) front-end for a 'Build My Box' subscription flow built for an e-commerce retailer, delivered without changing the existing store or theme. Includes multi-step navigation, selection state management, URL hash syncing to preserve progress, variant and pricing mapping, and cart URL generation for checkout. Styled to match the existing CSS system, with follow-up refinements to progress behavior, scroll/animation, and pricing copy after updated specs.
Pi Slider JS: High-Performance Vanilla JavaScript Slider Library
JavaScript LibraryProblem: Developers needed a fast, flexible slider solution with rich effects and mobile support, without the overhead of external dependencies.
Outcome: Designed and shipped a production-ready vanilla JavaScript library with extensive transitions and API controls, then successfully launched it on CodeCanyon for worldwide developer adoption.
Timeline: ~5 weeks · Role: JavaScript library author, solo
A lightweight, zero-dependency JavaScript slider library created for high-performance web transitions and commercialized on CodeCanyon. Built with pure JavaScript for speed and broad compatibility, the library includes 100+ transition effects (including 3D transforms, fade, and vertical sliding), touch-swipe support, responsive breakpoints, and a developer-friendly API. Released to a global audience through the Envato marketplace.
Problem: The workflow depended on one-off mockups and manual theme coding, which slowed delivery and made repeated deployments hard to scale.
Outcome: Delivered a repeatable design-to-deploy pipeline that let pages be assembled visually, previewed live, and exported as Blogger-ready XML templates for faster handoff and reuse.
Role: Frontend (Vue/JavaScript) in collaboration with designer
A visual site builder co-created with a designer for assembling Blogger pages and exporting a deployable theme without hand-coding XML. Built with Vue 2, the admin experience includes panels for templates, layers, components, customizer, settings, media, and fonts, plus a live iframe preview with parent/child state sync. The build system uses a custom Gulp pipeline (no Webpack) for Vue SFC compilation, shared SCSS, conditional Blogger vs localhost blocks, Express + LiveReload, and export to Blogger-compatible XML.
RTL book catalog: Vue.js search over 14k+ Arabic library titles
Data VisualizationProblem: Users needed quick, reliable search across a large Arabic catalog, but the project had to remain static and lightweight without a traditional backend.
Outcome: Delivered a responsive, client-side catalog experience with worker-based processing and branch-level lazy loading, making large-scale RTL discovery fast and practical on the web.
Timeline: ~2 weeks · Role: Frontend, solo
A static Arabic RTL library web app that enables search across 14,000+ titles by section, type (book/thesis), title, and author. Built with Vue.js and optimized for responsiveness using a Web Worker for search and pagination, plus lazy-loaded JSON datasets per branch. Includes PWA capabilities (service worker and manifest) and deployment on Netlify for fast, backend-free client-side discovery.
Problem: Client needed a production-ready news-focused site delivered from design files with responsive behavior and rich interactions, while keeping the frontend lightweight.
Outcome: Delivered a clean, performant front end with reusable sections and media interactions, then deployed it on Netlify for reliable publishing and fast global asset delivery.
Timeline: ~1 week · Role: Frontend, solo
A multi-section site for CAPmena built from client-provided visual designs. Implemented with semantic HTML, responsive CSS, and vanilla JavaScript for navigation, sliders, image and video lightboxes, and touch-friendly galleries without heavy frameworks. Deployed on Netlify for fast delivery and CDN-backed assets, with a polished UI aligned to the provided mockups.
Custom RTL Blogger template from client-supplied design
Blogger TemplateProblem: Client needed a maintainable Blogger theme matching their design and RTL content needs, but without a redesign or platform migration.
Outcome: Delivered a deployable, production-ready XML theme for Blogger with the requested look and feel, responsive behavior, and SEO/share metadata rules tailored to Blogger page conditions.
Timeline: ~4 weeks · Role: Blogger template developer, solo
A full Blogger (Blogspot) XML template implemented from client-provided visuals, with an Arabic RTL layout, custom CSS and web fonts, responsive structure, fixed navigation, post and archive templates, and widget areas (including contact, ad slots, and default images). Added conditional SEO and social metadata rules for key page types (titles/descriptions, robots for archives and search pages, Open Graph, and Twitter tags), plus a custom 404 treatment for platform-consistent UX.