Nubuilt

Project Overview

Nubuilt is a minimalist and high-performance architecture portfolio template developed using raw HTML5, CSS3, and GSAP animation. Designed for architects, studios, and modern design firms, the template emphasizes structured layout, clean visuals, and smooth transitions.

The focus was on creating a timeless design that remains lightweight yet expressive, with subtle animations and strong UX flow across devices. With semantic HTML and scalable CSS, it’s ready for real-world deployment or further CMS integration.

Your Role

• Full frontend development (HTML5 & CSS3)

• Interaction and animation design with GSAP

• Mobile-first responsive design

• Accessibility and semantic code practices

• Page layout and structure planning

• Scroll-triggered visual experiences

Tech Stack Used

• HTML5 – Semantic, SEO-friendly markup

• CSS3 – Utility-based structure with custom classes

• GSAP (GreenSock) – Smooth entrance animations, scroll reveals, fade-ins

• No Frameworks – Pure, raw code project

• Deployment-ready – Lightweight and optimized

Key Features

• Fully responsive layout

• Architecture-style grid and column alignment

• GSAP-powered scroll animations

• Minimalist hover effects

• Performance-first approach (no JS bloat)

• Clean, scalable CSS structure

• Smooth fade-ins, image reveals, and section-based transitions

• Semantic HTML for SEO & accessibility

Code Structure Overview

• Cleanly separated assets

• Modular CSS for maintainability

• All animations isolated in animation.js using GSAP

Challenges & Solutions

• Challenge: Achieving fluid animation without affecting load speed
  Solution: Used GSAP's lightweight animation engine with lazy loading techniques for smoother experience

• Challenge: Making raw CSS scale without frameworks
  Solution: Followed a structured layout grid with custom media queries and reused class patterns for efficiency