Atlassian Landing Page Clone
Practiced pixel-perfect UI recreation.
Project demonstration video
Technologies Used
Project Screenshots
Full landing page view built to replicate Atlassian’s site. Full landing page view built to replicate Atlassian’s site.
Altassian Hero feutures section replication. Altassian Hero feutures section replication.
Altasssian Useability across occupations section replication. Altasssian Useability across occupations section replication.
Atlassian Main feutures section replication. Atlassian Main feutures section replication.
Project Background
I wanted to test how close I could get to a professional-grade marketing site. Atlassian's landing page became my blueprint. I broke down their layout, typography, and micro-interactions, then rebuilt everything in React + TypeScript with only custom CSS. The end result was a nearly indistinguishable clone that sharpened my eye for design accuracy and taught me how production-grade UIs are structured under the hood.
Video Demonstrations
Walkthrough of the page on a mobile device. Walkthrough of the page on a mobile device.
Page performance and responsiveness on desktop. Page performance and responsiveness on desktop.
Full scrolling experience of the replicated page. Full scrolling experience of the replicated page.
Project Summary
Exact copy of Atlassian's landing page built from scratch. Showcases advanced CSS skills and attention to detail. No frameworks used - pure React and custom CSS.