I made this Hackathon Finder all over the world on @Replit
1. Tech Stack
Frontend: React + Vite, TanStack Query, Tailwind v4
API Layer: Express 5, OpenAPI spec, Zod validation
Codegen: OpenAPI → Orval → typed React Query hooks
Database: PostgreSQL, Drizzle ORM, session store
Auth: Session-based, bcrypt hashing (no JWT)
Country dataset: 195-country, offline capital city inference
Planned mobile: Expo / React Native (Q4 2026)
2. Core Features
Global Radar: search 50+ events by country, continent, mode, status, real-time filters
Event Detail: prize pool, perks, eligibility, direct registration link
Saved Events: bookmark + shortlist synced across devices
Secure Auth: session login, bcrypt, profile management
Smart Event Lifecycle: auto-status Upcoming → Ongoing → Registration Closed → auto-remove 7 days post-end (hourly engine)
IQ Assessment: 25 questions, one attempt, 5 domains (Logical, Numerical, Verbal, Spatial, Memory), timed per-question, radar chart results, permanent score on profile
Track Coverage: AI/ML, Web3, Cybersecurity, Climate +15 more
Discovery UX: continent-grouped country filter
Home Feed: featured carousel + trending grid
3. Scale
50+ events live
195 countries indexed
20+ countries active coverage
0
6
Formula 1 fan base website using @Replit
1. Software/Platform:
Primary build: Replit (AI Agent + IDE)
Pre-loader screen: custom-built from scratch, not Replit-generated
2. Tech Stack:
Frontend: React + Vite
Styling: TailwindCSS
Animation: Framer Motion + GSAP (ScrollTrigger)
Fonts: Google Fonts (Titillium Web / Orbitron for headings, Inter for body)
Media: Canvas-based frame-sequence scroll effect (extracted from promo video via ffmpeg).
3. API Keys / Data
Teams + Races data: Jolpica-F1 API (free, no key required)
News data: mock JSON (no free official news API available; swappable later)
Store/merch data: mock JSON (no public F1 merch API exists).
4. Assets
F1 Custom logo (svg)
Custom-extracted video frames (ffmpeg, png/webp) for hero scroll-scrub
1
14
DUNE Premium Mechanical Keyboard Concept Website
💡 Why this project came to my mind
Custom mechanical keyboards are all about premium tactile feel and sound design. However, most keyboard landing pages are generic and fail to capture that sensory experience.
I wanted to build a high-fidelity, interactive prototype that makes users feel the luxury, weight, and acoustic precision of the keyboard right from their screens.
🔍 Research & Problem Solving
Visual Storytelling & Video Selection: I needed a cinematic video background that immediately set a premium tone. I researched and compared dozens of keyboard films, analyzing pacing, lighting, and sound, until I selected the perfect high-contrast, atmospheric loop of a keyboard in action.
AI-Assisted Design: Instead of using placeholder images, I utilized advanced AI image generation models to design the bespoke product renders (the Dune Light Burnt Orange casing, the Space Grey option, and the Oasis Limited Edition theme). This allowed me to iterate on industrial design concepts rapidly and build a cohesive visual identity.
Asset Optimization: Solved local asset loading and subdirectory pathing bugs for GitHub Pages by implementing dynamic base path prefixing, ensuring 100% asset uptime.
💻 Technologies & Languages Used
Next.js (App Router) & React: For building modular, high-performance components.
TypeScript: Enforced type safety and codebase scalability.
Tailwind CSS: Implemented sleek glassmorphism, responsive bento grids, and tailored dark-mode layouts.
GSAP & Framer Motion: Created smooth scroll-triggered parallax backdrops, dynamic image crossfades, custom cursor actions, and cinematic entry animations.
💼 Open for Work
I specialize in turning creative visual concepts into high-performance, pixel-perfect web experiences. If you have an exciting product, website, or concept you want to bring to life:
DM me here on Contra!
Available for: Freelance, Contract, or Full-Time Frontend Engineering / Web Design roles.
2
3
63
Obsidian Men's Care is a high-end, dark-themed landing page and e-commerce concept for a premium men's grooming brand. The project is designed with a "macho" aesthetic, emphasizing precision engineering and "tactical" skincare. It utilizes modern web technologies to provide a smooth, interactive user experience, including a consultation feature that leverages local sample data to provide personalized grooming strategies.
Features:
1. Premium branded website
2. Custom mouse cursor
3. GSAP
0
36
This project outlines the conceptualization branding and packaging design for LUX-100 a premium limited edition sunglass model. Positioned at the intersection of futuristic aesthetics and high end craftsmanship the LUX-100 is designed for a discerning market that values exclusivity advanced optical performance and striking design. The project emphasizes a "high-touch" execution where the unboxing experience is as critical as the product itself.
Features:
1. Professional branded website
2. Custom cursor
3. GSAP
0
48
Obsidian Men's Care is a high-end, dark-themed landing page and e-commerce concept for a premium men's grooming brand. The project is designed with a "macho" aesthetic, emphasizing precision engineering and "tactical" skincare. It utilizes modern web technologies to provide a smooth, interactive user experience, including a consultation feature that leverages local sample data to provide personalized grooming strategies.
0
44
Create a fan-made Umbrella Corporation company inspired by the Resident Evil universe, featuring a 3D Umbrella logo integrated into the admin panel along with a terminal interface enhanced by 3D elements.