The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Developed a dynamic, responsive website for Potato Stop, a restaurant brand offering flavorful menu items and online ordering features. My work included front-end development with clean, user-friendly navigation, mobile optimization, and seamless performance for both desktop and smartphone users. The site highlights popular food options, store locations, ordering calls-to-action, app integration, and engaging content to support customer engagement and brand visibility online.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Just finished designing and building my newest Framer template, ORYN Audio 🎧
A bold product landing page with detailed product visuals, interactive color selection, and smooth scroll animations. Built to look sharp on every screen and be easy to make your own.
It’ll be available for free. Take a look and let me know what you think 👇
Fiverr Thumbnail Design — Visual Direction Exploration
Overview
Designed two visual directions for a Fiverr thumbnail, exploring different approaches to composition, typography, imagery, and visual hierarchy.
Direction 01: Centered Impact: A bold, center-focused layout that places the main message at the visual focal point for immediate readability and impact.
Direction 02: Dynamic Balance: A more dynamic composition using side-positioned typography with supporting imagery to create visual movement and stronger balance.
Both variations were created from the same core concept to explore how different layouts can influence attention, readability, and overall engagement.
3 voted
75%
1 voted
25%
4 votes
Closed
centered for me
Orive — Interactive Site with a Custom Particle Engine
Orive is a self-initiated concept site for a fictional decision-intelligence company. I used it to build the kind of motion-led marketing site that normally ships on a heavy stack — and to build it with no framework, no build step, and no WebGL. Six pages, roughly 2,000 lines of hand-written code, deployed static.
The centrepiece: a particle engine written from scratch
A fixed field of 2,800 particles sits behind every page and reacts to scroll position. It morphs between eight formations — a loose cloud, a snapped dot lattice, a tilted ring, a dense core, meridian rings, a hollow shell, concentric circles and a small ember — with each particle carrying its own delay so the shapes assemble organically instead of snapping.
Two decisions made it interesting:
Canvas2D, not WebGL. The target machine had no working WebGL, so the whole thing runs on the 2D context. To keep it smooth I project the 3D points by hand, sort particles into eight colour buckets per frame, and draw each bucket as a single batched path — rather than thousands of individual draw calls.
Choreography lives in the HTML. Each section declares its own motion with one attribute: data-shape="lattice:1.2:2.35" — shape name, where it forms, how long it holds, in viewport units. Adding a section to the site means adding one attribute, not editing the engine.
A theme that changes as you read
Sections can declare data-theme="light". Whichever section sits under the centre of the viewport wins, and the entire page — background, type, cards, borders and even the particle colour ramp — transitions between a near-black palette and a warm sand one. The particle field cross-fades its own background and colours in the same motion, so the switch reads as one continuous move rather than two things changing at once.
Interaction detail
Sticky statement sections that pin while the copy holds, with a line of text that cycles through six phrases as you scroll past.
A scattered accordion — cards positioned freely across the canvas that expand in place over the live particle field.
A stacked testimonial carousel where the top card lifts away and the incoming quote lights up word by word.
Images that resolve from coarse pixels into focus when they enter view, drawn through an offscreen canvas.
Reading highlight: long-form copy fills with colour word by word as it passes the top of the screen.
Custom dropdown menu whose dot-grid icon rearranges into a close glyph.
Buttons that fill from the bottom with a sliding double-arrow.
Smooth scrolling (Lenis), cursor-tracking glows, staggered card reveals and layered parallax throughout.
Built to be handed over
Fluid 16-column grid. Every width, gutter and type size is a clamp() expression, so the layout scales continuously between mobile and 1440px+ instead of jumping at breakpoints.
One content file. Every image and video slot is a single entry in content.js, with a per-slot colour grade. Swapping the art direction means editing one object, not hunting through markup.
Shared chrome. Header, navigation and footer are injected from one script, so six pages stay in sync.
Graceful fallbacks. Slots render generated Canvas2D artwork when no photograph is supplied, and prefers-reduced-motion is respected throughout.
Verification
I checked the build by driving headless Chrome: screenshotting every page at fixed scroll positions, measuring computed layout values against the design targets, and asserting zero console errors on all six pages, locally and again on the live deployment.
STACK / SKILLS (tags)
HTML5 CSS3 JavaScript (ES6) Canvas 2D Creative Coding Scroll Animation Lenis Responsive Design Design Engineering Motion Design Art Direction Vercel Accessibility Performance
The custom particle engine gives the concept real personality.