Portfolio
All Projects
Demo shop Shirt with custom
Demo shop Shirt with customThis website presents a factory-driven custom uniform brand, combining product browsing, educational content, and an in-browser apparel design tool in one experience.The main strengths of the demo are its premium visual direction, category-based product browsing, and the Custom Design page where users can change fabric, color, fit, collar, sleeves, pocket, logos, and text.Home PageThe home page is the main landing page for the brand, introducing the “real-time uniform design” service with strong CTAs leading to the Design and Shop pages.Its main content includes a hero section, service highlights, popular product categories, free services, how-it-works steps, reasons to choose the brand, a CTA block, latest articles, and customer reviews.About PageThe About page explains the identity, mindset, and strengths of the JustUchoice brand, positioning it as a service that makes custom uniform ordering easier and more enjoyable.The hero section communicates that the brand helps organizations create team apparel that reflects their identity without long delays or unnecessary cost, supported by bullet points about local production, free design assistance, online tracking, and a 60-day quality warranty.The middle section uses accordions to explain key service pillars such as the easy-to-use design system, in-house factory production, multiple printing methods, and ERP/order tracking for end-to-end visibility.The lower section presents a service grid highlighting 9 major brand benefits such as Faulty-Proof, Free Sample, Overage Protection, 60 Days Warranty, Corporate Onsite, Online Status Check, Corporate Stylist, Instant PriceCheck, and Online Designer.The About page ends with a CTA encouraging users to start designing or contact the team, guiding them into the site’s conversion flow.Shop Page-The Shop page is the category overview page for all product types such as polo shirts, t-shirts, shirts, uniforms, jackets, aprons, caps, and tote bags.Each card shows the category name, number of products, starting price, and minimum order quantity, leading users to that category’s detail page.Shop Detail PageThe Shop Detail page is the detail view for each product category, such as /shop/polo, focusing on selecting the available fabric tiers for that category.It includes a category hero section, descriptive copy, usage-style badges, and an accordion list of fabric tiers showing fabric name, composition, features, price, minimum quantity, and a CTA to continue into the design page.Blog PageThe Blog page is the article listing page where users can explore educational and inspirational content about apparel design, fabric selection, printing methods, and business tips.It includes category filtering for topics such as news, product highlights, design ideas, business tips, and printing techniques.Blog Detail PageThe Blog Detail page displays the full article with title, excerpt, author, publish date, reading time, cover image, article body, and share buttons.A sidebar promotes the design page, shows popular articles, and lists article categories, while the bottom section features related articles.Contact Us PageThe Contact Us page is the team contact page, showing address, phone, LINE, email, office hours, and a mock map/showroom section.Users can fill out a form with first name, last name, email, subject, and message to submit inquiries or request initial pricing information.Custom Design PageThe Custom Design page is the core designer experience, allowing users to customize apparel interactively and see a live preview instantly.Users can choose the product type, fabric, fit, collar, placket, sleeves, pocket, color zones, upload logos, add text, position overlays, view a design code, copy a design link, see unit pricing, adjust quantity, review volume discounts, and save or request a quote.Click here to visit https://d2d-demo-shop-shirt.vercel.app
Demo Luxury Real Estate by D2D
Demo Luxury Real Estate by D2DA premium single-page real estate landing website for a luxury housing project. It is designed to present the brand, house types, project atmosphere, location advantages, promotions, and appointment booking, while also collecting sales leads and offering a simple admin dashboard.HeroThe main first-screen section that introduces the project with a luxury visual, key selling points, call-to-action buttons, and a lead registration form.StatBar & HighlightSectionA quick credibility strip showing headline project numbers such as booking rate, awards, resident families, and security level.A project highlight section focusing on lifestyle and functional benefits like smart home support, security, EV readiness, and premium facilities.MortgageCalculatorAn interactive payment estimator that helps users calculate home price, down payment, interest, loan term, and estimated monthly payment.UnitsSectionA section presenting the master plan and available house models, including positioning, house size, bedroom/bathroom counts, and starting prices.GallerySectionA visual gallery that showcases curated project spaces such as the living area, dining area, clubhouse, and master bedroom.LocationSectionA location-focused section explaining nearby landmarks and transport convenience, supported by an embedded map.AppointmentSection A visit-booking section where interested buyers can schedule a project tour by submitting contact details, date, time, and number of visitors.Promotion Section A campaign-focused section highlighting limited-time offers and special booking benefits to encourage faster conversion.FooterA closing section containing brand recap, contact information, operating hours, social placeholders, and an email subscription field.Click here to visit https://d2d-real-estate-luxury-demo.vercel.app/Tech stackFrontend: React 19 + TypeScriptBuild tool: Vite 6Styling: Tailwind CSS 4Animation: Framer Motion และ motionIcons: lucide-reactBackend entry/server: Express ผ่าน server.tsDatabase / Auth: Firebase โดยใช้ Firestore และ Firebase AuthForm/data handling: ฟอร์มใน React state โดย submit เข้า FirestoreUtility libs: clsx, tailwind-merge, date-fns
DEMO LOGISTICS by D2D
DEMO LOGISTICS by D2DThis project is a demo landing page for a logistics/transport business. It focuses on sales, trust-building, service presentation, pricing, fleet display, and lead generation, rather than being a full logistics platform with a real backend.Hero Section & Estimate / Track CardThe hero section uses a large background image and headline messaging such as fast delivery, quick booking, and fast pricing, with strong call-to-action buttons.The right-side card inside the hero has two tabs: price estimation and shipment tracking. The estimation logic is mocked.Trust MetricsA stats section showing completed trips, enterprise clients, on-time delivery rate, and available vehicles to build credibility.Services SectionThis section presents six core service offerings, including express delivery, contracted transport, moving services, industrial transport, labor support, and cargo insurance.Vehicle FleetShows available vehicle types such as pickup, box truck, 6-wheel truck, and trailer, along with load dimensions, weight, and usage highlights.Pricing SectionThe pricing section is split into Personal, Business, and Enterprise plans so visitors can match a package to their business size.How It WorksExplains the service flow in four steps: booking, pickup, delivery/tracking, and successful handoff.About Us & Why Choose UsDescribes the company as a trusted logistics partner, including experience, vision, and mission statements.Highlights four core selling points: safety, punctuality, professional team, and transparent pricing.FAQ SectionA FAQ section covering same-day delivery, insurance, tax invoices, and upcountry delivery coverage.FooterThe footer contains brand information, service links, main navigation, a promo email field, and policy links.Click here to visit https://d2d-fastmove-logistics-demo.vercel.app/Tech stack ViteReact 19TypeScriptTailwind CSS 4motionlucide-reactReact DOMGoogle FontsNode.js
Demo The Grande Residenc by D2D
Demo The Grande Residenc by D2DThe Grande Residence is a premium real estate landing page demo designed for housing projects, residential brands, and property marketing campaigns. Its purpose is to present the brand, highlight property value, capture leads, support visit bookings, and provide a lightweight CRM-style admin view for demo or sales use.This project is a single-page real estate marketing website built to simulate a modern luxury property campaign. It combines brand storytelling, visual presentation, lead generation, booking flow, and a simple admin dashboard in one frontend app. It is suitable as a showcase, prototype, or starter reference for property developers and real-estate-focused web builds.Hero & Lead Form- English: The hero section is the main sales introduction. It presents the project identity, key value proposition, pricing highlight, location convenience, promotional offer, and primary call-to- action. It also includes the lead capture form directly in the hero for immediate conversion.- English: This section collects potential customer information such as name, phone number, and preferred contact time. It is designed for fast conversion and feeds both Firestore and local fallback storage.HighlightsThis section presents the core project benefits, such as transit access, security, green space, or smart-home features. It is meant to communicate lifestyle value beyond basic property specs.Unit CardsThe unit section showcases available house types or product models. Each card summarizes size, room count, pricing, and visual identity, helping visitors compare options quickly.GalleryThe gallery displays curated project imagery to support the premium brand impression. It strengthens emotional appeal and helps visitors imagine the living experience.LocationThe location section communicates where the project is situated and why the location matters. It usually supports convenience messaging such as access to transit, city zones, schools, or lifestyle destinations.Mortgage Calculator- English: This section helps visitors estimate affordability or monthly payment expectations. It supports practical buying decisions and makes the page more useful than a static brochure.FooterThe footer closes the page with branding and supporting information. It helps complete the landing structure and gives users a final reference point before leaving or converting.Click here to visit https://d2d-real-estate-demo.vercel.app/Tech stackFrontend: React 19 + TypeScript + Vite 6 package.json src/main.tsxStyling: Tailwind CSS 4 @tailwindcss/vite และ custom theme/fonts src/index.cssAnimation/UI: motion (motion/react) lucide-reactForm/validation: react-hook-form + zod + @hookform/resolversData layer: Firebase Firestore src/lib/firebase.tsFallback persistence: localStorage CRM fallback src/lib/crmStorage.ts
GemiTrans AI Translator
GemiTrans AI TranslatorWhat it doesGemiTrans is a high-performance web application designed for real-time translation powered by Google’s Gemini AI. It allows users to translate source text into multiple target languages simultaneously (up to 3 side-by-side translation cards). Unlike traditional translators, it offers granular control over the output's formality and specific objectives (e.g., technical, casual, or general).Problem SolvedWorkflow Efficiency Eliminates the need to manually switch between languages or tabs by providing a side-by-side comparison in one view.Nuance & Tone Control Addresses the "one-size-fits-all" translation problem by allowing users to adjust formality levels (0-100) and context, ensuring the output matches the intended audience.Knowledge OrganizationFeatures an integrated Notebook (Rich Text Editor) and Translation History, enabling users to save, edit, and organize important translations for long-term use.Resource Management Implements a token-based Daily Quota system to manage AI usage costs while providing a sustainable service to usersLanding pageThe entry point of the application designed to showcase value propositions. It features a modern, high-conversion UI with smooth animations (Framer Motion) to introduce key features like AI-powered translation and multi-language support. It guides new users to get started or learn about pricing and benefits.Log in & sign inA secure authentication system integrated with Firebase Authentication. Users can create accounts or log in to sync their translation history, saved words, and notebooks across devices. The interface includes validation, error handling, and a seamless transition between registration and login states.Main productThe core engine of the app. It provides a "workspace" where users input source text and receive real-time translations. Key features includeMulti-Card UI Translate into up to 3 languages simultaneously.Customization Adjust formality levels and specific translation objectives via AI.Drag & Drop Reorder translation cards using dnd-kit for better comparison.Action Tools Copy results, listen to speech (TTS), or save directly to the Notebook.SettingA personalization hub where users can manage their experience. It allows users to set Default Target Languages for the workspace, view their current Daily Token Quota (monitored by Firebase), and update profile information. This ensures the app adapts to each user's specific workflow.NotebookA productivity tool featuring a Rich Text Editor (Tiptap). It allows users to organize their thoughts by creating, editing, and managing notes. Users can append translations directly from the Main Product into their notes, making it an essential tool for language learners and researchers to store structured information.Click here to visit https://gemitrans-d2d.vercel.appTech StackFrontend React 19, Tailwind CSS, HeroUI (Component Library), Framer Motion (Animations), Tiptap (Rich Text Editor), dnd-kit (Drag-and-Drop UI).Backend Node.js (Serverless API), Google Generative AI (Gemini 1.5 Flash / 3.1 Flash-Lite).Infrastructure Firebase (Authentication, Firestore Database, Hosting).
Contact us
Location
Bangkok, Thailand
2024 — Present
Office hours
Mon – Fri: 9:00 AM – 6:00 PM
09 AM — 06 PM
Drop us a line
design2deploy.work@gmail.com