Over the past few days, I challenged myself to build a premium business consulting landing page without using any frameworks, UI libraries, CSS frameworks, build tools, or npm packages.
The objective wasn't simply to recreate a beautiful design—it was to see how far modern HTML, CSS, and JavaScript can go on their own.
The result is Scale Architects, a landing page designed for a fictional business growth consulting firm that combines lead generation, portfolio showcase, and trust-building into one responsive page.
🚀 Live Demo
Live: https://gerealdochristopher.github.io/scale-architects-landing-page/
GitHub: https://github.com/GerealdoChristopher/scale-architects-landing-page
Why Vanilla?
Frameworks are amazing productivity tools, but sometimes they hide how browsers actually work.
For this project I wanted:
complete control over every line of code
zero runtime dependencies
instant page loading
browser-native ES Modules
maintainable architecture without a build step
Everything runs directly in the browser.
No React.
No Vue.
No Tailwind.
No Bootstrap.
No jQuery.
No GSAP.
No npm install.
Design System
One thing I focused on was making the project easy to maintain.
Instead of scattering colors and spacing values everywhere, I built a design system using more than 200 CSS Custom Properties.
That means changing the brand colors, spacing, typography, or shadows only requires editing a single file.
Typography is fully fluid using clamp(), so many elements scale naturally without relying on dozens of media queries.
CSS Architecture
Rather than putting thousands of lines into one stylesheet, I separated everything into independent modules using a SMACSS-inspired structure.
css/
├── base/
│ ├── reset.css
│ ├── variables.css
│ └── typography.css
├── layouts/
└── components/
Each UI section has its own stylesheet, making the project easier to navigate and maintain.
JavaScript Architecture
The JavaScript is also modular.
js/
├── modules/
│ ├── navigation.js
│ ├── smoothScroll.js
│ └── testimonialCarousel.js
└── script.js
Each module has one responsibility.
The main entry file simply initializes everything.
Features
Some of the interactions I implemented include:
3D tilt effects
Scroll reveal animations
Animated particle background
Glow effects
Floating badges
Animated testimonial cards
Progress indicator
Smooth scrolling
Counter animations
Swipe-enabled testimonial carousel
Mobile-friendly navigation
Everything is built using the browser APIs—no animation libraries.
The Bug That Cost Me Hours
Deployment worked perfectly locally...
...until GitHub Pages broke my entire CSS architecture.
The reason?
GitHub Pages enables Jekyll by default, and Jekyll ignores files or folders beginning with an underscore.
My component styles looked like this:
_header.css
_hero.css
_footer.css
None of them were being served.
The solution turned out to be surprisingly simple:
.nojekyll
Adding one empty .nojekyll file in the repository root disables Jekyll processing, and everything immediately worked.
Sometimes the smallest fixes take the longest to discover.
What I'd Improve Next
Although I'm happy with the current result, there are several things I'd like to improve:
Dark mode
Functional contact form
Better accessibility
AVIF/WebP image optimization
Lighthouse performance optimization
More keyboard navigation support
Final Thoughts
This project reminded me that modern browsers are incredibly capable.
Frameworks certainly make development faster, but it's refreshing to build something from scratch and understand exactly how every interaction works.
I'd love to hear your thoughts.
Are the animations too much?
How does the mobile experience feel?
Would you structure the CSS differently?
What would you improve first?
Feedback is always appreciated.
If you'd like to explore the project:
⭐ GitHub: https://github.com/GerealdoChristopher/scale-architects-landing-page
🌐 Live Demo: https://gerealdochristopher.github.io/scale-architects-landing-page
Thanks for reading!
Top comments (0)