A clean, modern single-page landing page. Built as a frontend portfolio project showcasing UI design, component architecture, and smooth user interactions.
Open
index.htmldirectly in your browser — no build step required.
- Fullscreen video hero with a minimal scrim for text legibility
- Liquid-glass UI — custom frosted-glass button and card effect using
backdrop-filter - Smooth scroll navigation — nav links scroll to each section seamlessly
- Responsive hamburger menu for mobile viewports
- Animated entrance — fade-rise keyframe animations on hero content
- 5 complete sections: Hero · Services · Approach · Case Studies · Contact
- Footer with branding and nav links
| Technology | Usage |
|---|---|
| React 18 (CDN) | Component-based UI |
| Babel Standalone | In-browser JSX transpilation |
| Tailwind CSS (CDN) | Utility-first styling |
| Instrument Serif + Inter | Google Fonts typography |
| Coverr | Free stock video background |
No build tools, no npm — runs entirely in the browser from a single HTML file.
cru-research/
└── index.html # Entire app — React components, styles, and logic
# Clone the repo
git clone https://github.com/DirtRareDary/glass-ui-landing.git
# Open in browser
open index.htmlOr simply download index.html and open it in any modern browser.
- Dark teal background (
hsl(201 100% 13%)) gives a premium, academic feel - Liquid-glass effect is achieved with
backdrop-filter: blur, gradient border via CSS masking, and subtle inner shadow — no images or external UI libraries - Single-file architecture was chosen intentionally to keep the project portable and easy to review
This project is open source and available under the MIT License.