# Syauqizaidan Khairan Khalaf — Portfolio > Full-stack engineer with design taste — portfolio of Syauqizaidan Khairan Khalaf. TypeScript, Next.js, Laravel, Postgres, Framer. Ships product surfaces end-to-end. Syauqizaidan Khairan Khalaf (syauqi) is a full-stack engineer based in Ciamis, West Java, Indonesia. Currently Framer Developer at HitPay. Stack: TypeScript, Next.js, React, Laravel, PostgreSQL, Docker, Figma, Framer. Ships product surfaces end-to-end, from schema to motion. This site renders two complete UI modes from the same data: a faux-Figma desktop UI ("figma" mode) and a terminal CRT ("dev" mode). The mode is stored in the `ui-mode` cookie. Both modes share routes and content. ## Core pages - [Home](https://www.syauqizaidan.com/): bento-grid landing page with project highlights, music, status, git activity, reading. - [About](https://www.syauqizaidan.com/about): bio, history timeline, awards, contact details. - [Projects](https://www.syauqizaidan.com/projects): selected client + open-source work with full case studies. - [Writing](https://www.syauqizaidan.com/writing): essays on design, frontend engineering, and motion craft. - [Store](https://www.syauqizaidan.com/store): Framer components, Framer plugins, software, and SaaS by the author. - [Uses](https://www.syauqizaidan.com/uses): daily-driver tools, hardware, and fonts. ## Projects - [HitPay](https://www.syauqizaidan.com/projects/hitpay): HitPay's marketing surface — the product pages 20,000+ SEA businesses land on. Framer-built, motion-polished. (fintech marketing site, 2024, active) - [GenAdvance](https://www.syauqizaidan.com/projects/genadvance): Marketing landing for an Indonesian IT consultancy. Calm gradient hero, services grid, partner-bank wall, project-progress timeline. (IT consulting landing, 2024, stable) - [DealDulu](https://www.syauqizaidan.com/projects/dealdulu): Live-commerce marketplace app — sell during livestreams, browse during downtime. Yellow accent, dark hero, three-phone product showcase. (live commerce app, 2023, stable) - [Ciradyka](https://www.syauqizaidan.com/projects/ciradyka): Website for Ambalan Ciung Wanara & Dyah Pitaloka — the oldest Pramuka organization in Ciamis Regency. Warm peach / maroon palette, photo-led hero. (pramuka org website, 2023, stable) - [Ultras Smansa](https://www.syauqizaidan.com/projects/ultras-smansa): ULTRAS SMANSACIS — supporter community for SMA Negeri 1 Ciamis. Black hero, big typographic headline, fraternity / identity / art / members info cards. (supporter community, 2023, stable) - [VocaGame](https://www.syauqizaidan.com/projects/vocagame): Corporate site for VocaGame — "Pelopor Promotor E-Sport Di Industri Game Indonesia". Green brand, bold underlined headline, portrait + corporate trust strip. (e-sport corporate site, 2022, stable) - [Panel VocaGame](https://www.syauqizaidan.com/projects/vocagame-pawil): White-label gaming-topup site builder — let resellers spin up their own branded VocaGame topup site. Two-up product-card hero, voucher-management dashboards, payment-gateway logos. (white-label gaming topup, 2023, stable) - [VocaGame Mobile](https://www.syauqizaidan.com/projects/vocagame-mobile): Mobile companion app — tournament browser, topup, voucher wallet, transaction history. Designed in Figma; multi-screen presentation across the home, tournament, voucher, and history flows. (tournaments + topup app, 2022, stable) - [TokoJob](https://www.syauqizaidan.com/projects/tokojob): TokoJob — Indonesian freelance-jobs marketplace. Fullstack work across React + Redux on the front and Laravel + REST on the back, plus the lint/format rollout that kept the codebase from drifting. Designed and shipped the latest revamp. (freelance jobs platform, 2022, archived) - [Pariwisely](https://www.syauqizaidan.com/projects/pariwisely): Pariwisely — cultural-heritage tourism site for Indonesia. "Temukan keindahan dan keberagaman budaya negara Indonesia." A campus project that took the Wonderful Indonesia mood as starting reference. (cultural-heritage tourism, 2022, archived) - [Restawrant](https://www.syauqizaidan.com/projects/restawrant): Restawrant — restaurant landing + reservation flow. Yellow brand, illustrated host hero, menu grid, location/gallery, reservation CTA. (restaurant reservations, 2022, archived) - [Collegetivity](https://www.syauqizaidan.com/projects/collegetivity): Collegetivity — student productivity workspace built fullstack on Laravel + MySQL during the pandemic. Tasks, schedule, file storage, study resources, class chats — all behind one auth model. "Solusi kece & ampuh bagi para mahasiswa waktu kuliah." (student productivity workspace, 2021, archived) - [Learnify](https://www.syauqizaidan.com/projects/learnify): Learnify — open-source online learning platform built fullstack on CodeIgniter 3 + MySQL during the 2020 pandemic at CV. Lestari Multikreasi. Schema, controllers, and the exam engine all mine. Won best internship project at SMKN 1 Ciamis. (online-learning platform, 2020, archived) - [Gameina](https://www.syauqizaidan.com/projects/gameina): Gameina — portal for Indonesian-made games. Red brand, energetic landing, category browser, voucher / topup integration. (indonesian games portal, 2021, archived) - [LetsTrip](https://www.syauqizaidan.com/projects/letstrip): A travel-booking app (client under NDA — real name withheld) — browse trips and book, built on a modern Laravel + React (Inertia) stack with shadcn/ui. Shipped through Sauwarna Studio; in active development. (travel booking app, 2026, active) - [KTM Verifikasi](https://www.syauqizaidan.com/projects/ktm): Desktop app that verifies the authenticity of Universitas Siliwangi student ID cards (KTM) in real time — ORB feature-matching to spot genuine cards, plus QR-code authentication. Built in Python. (student-ID verification app, 2025, stable) - [Pinwave](https://www.syauqizaidan.com/projects/pinwave): A Pinterest-style pin board on Laravel — post pins, follow other users, like and search an image feed. A clone project to drill the social graph (follow / like) and feed UX on a classic Blade stack. (pinterest-style pin board, 2024, archived) - [Bootwind UI](https://www.syauqizaidan.com/projects/bootwind-ui): Open-source component library that brings Tailwind's utility-first design to ready-made React components — ship UI fast without re-inventing primitives. I'm a core contributor to the public React package (56 commits). (tailwind component library, 2024, stable) - [Zaqat](https://www.syauqizaidan.com/projects/zaqat): Zaqat helps mosque committees (DKM) digitalise zakat fitrah — collecting payments and recording donor data per neighbourhood, so the yearly count stops living in paper ledgers. Laravel + Bootstrap. (zakat digitalization platform, 2023, stable) - [DataWarga](https://www.syauqizaidan.com/projects/datawarga): Resident-data system for Indonesian RT/RW administration — manage warga (residents) and kartu keluarga (family cards), with role-based access for admin, RT head and bendahara (treasurer). Laravel. (citizen data & KK admin, 2023, archived) - [VocaBisnis](https://www.syauqizaidan.com/projects/vocabisnis): Landing page for VocaBisnis — a voucher-products storefront with a polished, fully responsive design. Built in Next.js during my VocaGame era. (voucher business landing, 2023, stable) - [Interpolasi](https://www.syauqizaidan.com/projects/interpolasi): A solver for linear-interpolation problems, built as the final project for a Numerical Analysis course. A clean Tailwind UI walks through the computation step by step. (numerical-method solver, 2023, archived) - [AesCrypt](https://www.syauqizaidan.com/projects/aescrypt): Encrypt and decrypt text with AES, layered with a password for a second factor of security. A small, focused crypto utility with a Tailwind interface. (AES encryption tool, 2023, stable) - [MBTI AI](https://www.syauqizaidan.com/projects/mbti-ai): An AI-assisted MBTI personality test — answer the prompts and get a typed personality read-out. A quick experiment pairing a classic questionnaire with an LLM, shipped for the Siliwangi community. (AI personality test, 2023, archived) - [Ecosystem](https://www.syauqizaidan.com/projects/ecosystem): An online assessment engine — model instruments (instrumen) made of categorised questions (soal), capture answers (jawaban) and score each respondent's response. Laravel-backed. (online assessment engine, 2023, archived) - [Sicodev](https://www.syauqizaidan.com/projects/sicodev): Homepage for Siliwangi Code Developer, the developer community at Universitas Siliwangi — documentation, member data and event records (berita acara) in one place. (dev-community homepage, 2022, archived) - [Sppie](https://www.syauqizaidan.com/projects/sppie): School tuition (SPP) payment system in Laravel — student billing, payment recording and reporting. Shipped as my UJIKOM 2021 competency-exam final project. (school tuition payments, 2021, archived) - [Pusaka](https://www.syauqizaidan.com/projects/pusaka): PUSAKA (Pantau Sekolah SMK) — a monitoring & reporting platform that lets vocational schools log their condition for West Java's education office (Dinas Pendidikan Jawa Barat) to track. Laravel + Vue + Firebase; my largest team contribution at 100 commits. (school monitoring platform, 2021, archived) - [Syaucademy](https://www.syauqizaidan.com/projects/syaucademy): Landing for Syaucademy, an education-academy brand I started — kept in early development as a side project. (education academy site, 2021, archived) - [Smeaify](https://www.syauqizaidan.com/projects/smeaify): Campus academic-data platform — manages course contracts (kontrak mata kuliah) and grading to streamline a university's academic workflow. PHP + Bootstrap. (campus academic system, 2020, archived) - [Corofight](https://www.syauqizaidan.com/projects/corofight): COVID-19 prevention education microsite from 2020 — high-quality Lottie animations carry the messaging, served free as a public-health explainer. (covid-19 education site, 2020, archived) - [Bootwind Marketplace](https://www.syauqizaidan.com/projects/bootwind-marketplace): A full e-commerce marketplace — a Next.js + React storefront with Stripe checkout and i18n, a React admin dashboard (charts, maps, order management), and a Laravel API on the Marvel shop engine with Stripe, bKash and BitPay gateways. Distinct from the Bootwind UI library; this is the product that uses it. (e-commerce marketplace, 2024, stable) - [ACTSM](https://www.syauqizaidan.com/projects/actsm): A fashion-store frontend in Next.js + Tailwind — category pages for baju, celana, jaket and aksesoris, a product catalogue and an about page, fronted by a Splide-powered hero carousel. (fashion store frontend, 2023, archived) - [Trading](https://www.syauqizaidan.com/projects/trading): A Binomo-style trading-platform clone — Bootstrap UI with Chart.js driving the live price charts. A front-end study of how a binary-options dashboard is laid out and animated. (trading platform clone, 2023, archived) - [Chatbot](https://www.syauqizaidan.com/projects/chatbot): A web chatbot built with Python and Flask — app.py serves a templated chat UI with the bot logic behind it. A compact end-to-end conversational-app experiment. (flask chatbot app, 2023, archived) - [Depresi](https://www.syauqizaidan.com/projects/depresi): A lightweight depression self-screening tool — a guided questionnaire runs a simple detection pass and returns a result page. Static HTML/CSS, no backend. (depression self-screening, 2023, archived) - [Desa](https://www.syauqizaidan.com/projects/desa): A village-profile website (profil desa) on Laravel — gallery, news, announcements, a UMKM (local-business) directory, event listings, org structure and contact, all in one civic site. (village profile site, 2023, archived) - [Stefana](https://www.syauqizaidan.com/projects/stefana): An online wedding-invitation site (undangan pernikahan) — a single elegant scrolling page with the couple, event schedule and venue, hand-built in HTML/CSS. (wedding invitation site, 2024, archived) - [Azure](https://www.syauqizaidan.com/projects/azure): An open-source Bootstrap 5 landing-page template built around the Azure illustration set — a fast starting point for a startup, social-media or portfolio site. (bootstrap landing template, 2021, stable) - [Monochore](https://www.syauqizaidan.com/projects/monochore): An open-source Bootstrap 5 startup template built on the Pixeltrue illustration set — clean monochrome sections to spin up a marketing site fast. (bootstrap startup template, 2021, stable) ## Writing - [the portfolio I actually finished](https://www.syauqizaidan.com/writing/the-portfolio-i-actually-finished): Every designer I know has a half-built portfolio site. Here is how I got mine to a public URL by stopping short of perfect on purpose. (2026-05-08, 7 min) - [framer, as a production tool](https://www.syauqizaidan.com/writing/framer-as-a-production-tool): What I've learned shipping HitPay's product pages on Framer for a year and a half. The strengths, the limits, and the moves you only learn the hard way. (2026-04-12, 6 min) - [the cats built the studio](https://www.syauqizaidan.com/writing/the-cats-built-the-studio): Mochi naps on the keyboard, Kopi judges every PR, Susu owns the radiator. Notes on co-working with four cats and why my deadlines feel calmer for it. (2026-03-22, 4 min) - [draw before you code](https://www.syauqizaidan.com/writing/draw-before-you-code): Why I still start every new feature on paper. A short defence of low-fidelity in the year that everyone has access to magic. (2026-02-08, 4 min) ## Store - [Schemark](https://www.syauqizaidan.com/store/schemark): Ship schema.org JSON-LD to your Framer site in one click — rich results without the markup wrangling. (framer-plugin, live) - [OS Download Button](https://www.syauqizaidan.com/store/os-download-button): Smart download button that auto-detects the visitor's OS and routes to the right installer. (framer-component, live) - [Message Chat](https://www.syauqizaidan.com/store/message-chat): Animated phone-sized chat component with typing indicators, spring bubbles, and auto-scroll. (framer-component, live) - [CSV DataTable](https://www.syauqizaidan.com/store/csv-datatable): Drop a CSV in, get a sortable, searchable, paginated data table on your Framer canvas. (framer-component, live) - [Animated List](https://www.syauqizaidan.com/store/animated-list): Activity-feed list with notification cards that slide in, stagger, and breathe. (framer-component, live) - [File Tree](https://www.syauqizaidan.com/store/file-tree): IDE-style file tree explorer for documenting repos, project structures, and tutorials. (framer-component, live) - [FOMO Toast](https://www.syauqizaidan.com/store/fomo-toast): Recent-activity social-proof toast — "Chris just bought…" — with city + timestamp. (framer-component, live) - [Animated Terminal](https://www.syauqizaidan.com/store/animated-terminal): Faux-CLI terminal that types out commands and output — perfect for dev-tool landing pages. (framer-component, live) - [Image Locker](https://www.syauqizaidan.com/store/image-locker): Password-gate any image or section behind a clean "Protected Content" prompt. (framer-component, live) - [Code Block Generator](https://www.syauqizaidan.com/store/code-block-generator): Syntax-highlighted code blocks with copy button, language switcher, and gradient frames. (framer-component, live) ## Optional - [Sitemap](https://www.syauqizaidan.com/sitemap.xml): XML sitemap of every indexable URL. - [Robots](https://www.syauqizaidan.com/robots.txt): crawler permissions. - [Manifest](https://www.syauqizaidan.com/manifest.webmanifest): PWA manifest with theme colours and icons. - [GitHub](https://github.com/syauqi): public source code. - [LinkedIn](https://linkedin.com/in/syauqizaidan): professional profile.