IXON is a cutting-edge frontend web project designed to deliver an immersive user experience. It features smooth scrolling, sophisticated UI animations, and a highly responsive layout, all built on a scalable architecture.
- Smooth Scrolling: Implemented using Lenis for a premium feel.
- Dynamic Animations: Powered by Motion (formerly Framer Motion) for scroll-based and hover effects.
- Custom Loader: A real initial page loader with seamless exit transitions.
- Responsive Design: Fully optimized for all device sizes, from mobile to desktop.
- Modern UI: Inspired by high-end SaaS websites, featuring clean lines and interactive elements.
- Modular Architecture: Built with reusable React components for maintainability.
- React – The library for web and native user interfaces.
- Vite – Next Generation Frontend Tooling.
- Tailwind CSS – A utility-first CSS framework for rapid UI development.
- Motion – A production-ready motion library for React.
- Lenis – A lightweight smooth scrolling library.
- Remix Icon – A huge set of open-source neutral style system symbols.
The project maintains a clean and intuitive directory structure:
src/
├── components/ # Reusable UI components
│ ├── Footer.jsx # Site footer
│ ├── Hero.jsx # Above-the-fold landing component
│ ├── Info.jsx # Information/Data display
│ ├── Loader.jsx # Initial page loading screen
│ ├── Nav.jsx # Navigation bar
│ ├── Video.jsx # Video player/background component
│ └── Works.jsx # Portfolio/Project showcase
├── pages/ # Page-level layouts
│ └── Home.jsx # Main landing page composition
├── App.jsx # App root (Loader + Smooth Scroll logic)
├── main.jsx # React entry point
└── index.css # Global styles and Tailwind configuration
Follow these steps to set up the project locally.
git clone https://github.com/your-username/ixon.git
cd ixonnpm installnpm run devVisit http://localhost:5173 (or the port shown in your terminal) to view the application.