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
Atelier: Premium Architecture & Interior Design Website
Atelier is a modern, minimalist website concept for a premium architecture and interior design studio, designed to showcase projects through elegant layouts, refined typography, and immersive visual storytelling.
Built with React, TypeScript, Tailwind CSS v4, and GSAP, the website features responsive page layouts, animated interactions, a project gallery, individual project detail pages, and a functional contact form integrated with Formspree.
The design combines a warm, neutral color palette with editorial-style typography and subtle motion to create a sophisticated digital experience that keeps the focus on the work.
Key features:
Responsive design across desktop and mobile
Interactive project gallery and detailed project pages
Smooth GSAP animations and scroll-triggered effects
React Router navigation
Functional contact form with Formspree integration
SEO metadata and social-sharing configuration
Tech stack: React, TypeScript, Tailwind CSS v4, GSAP, React Router, Formspree, Vite, and Vercel.
This is a self-initiated concept project exploring how thoughtful design and modern frontend development can elevate a creative studio’s online presence.
Beautiful 😍
Thank you, Dim ❤️
Your welcome
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
Challenges
View all
Related posts
A procedural shaded-relief cartographer's table; export the map as PNG.
I built this project to test A procedural shaded-relief cartographer's table; export the map as PNG. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Real-time topographic contour line extraction using Marching Squares
Mountain ridge carving and hydrographic river basin generation
THE TECHNICAL SIDE:
Combines domain-warped fractional brownian motion (fBm) with Marching Squares contour generation. Renders vintage parchment styled topographic maps with seeded coordinates.
Everything executes in the browser using Canvas2D, Procedural Cartography, Contour Line Marching Squares. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Contour line marching squares often generated disconnected micro-segments. Stitching adjacent line segments into continuous polyline paths allowed smooth canvas stroke rendering.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Really nice map detail
My portfolio is live! ✨
I’m Arooj, a full-stack developer building responsive websites and web applications. My portfolio brings together projects like SafeSocial, Aurelia, and GymFlow, with a dark theme, soft pink accents, and interactive animations.
Take a look: https://arooj-portfolio-ivory.vercel.app
I’m available for freelance projects and collaborations. If you need a website or web app, let’s connect!
I’d love to hear your feedback on the design 💬
Great Interface
CARTELLE: The Society for Speculative Cartography.
"High-Performance Creative Web Exploration"
Drag a procedurally inked globe of places that don't exist. An archive of maps of places that do not exist. The Society for Speculative Cartography charts imaginary worlds with scholarly rigor and unreasonable devotion.
I built this project to test Drag a procedurally inked globe of places that don't exist. An archive of maps of places that do not exist. The Society for Speculative Cartography charts imaginary worlds with scholarly rigor and unreasonable devotion. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of procedural globe under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Procedural globe. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Procedural globe. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of procedural globe with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
Attractive visual design