Atlassian Landing Page Clone
A frontend-focused project centered on layout precision and 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
Challenge: Wanted to better understand how polished production marketing sites are structured and implemented. Approach: Rebuilt Atlassian's landing page using React, TypeScript, and custom CSS while focusing on layout precision, spacing, and responsiveness. Outcome: Improved frontend architecture skills, UI accuracy, and understanding of production-level interface implementation.
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
Frontend recreation focused on responsive layouts, typography, spacing, and UI accuracy.