A fully responsive, multi-section corporate website built for RiskCube Institute (RCI) — an industry-led training and deployment institute focused on digital, cyber, and AI risk. Built with pure HTML, CSS, and JavaScript — no frameworks, no dependencies.
https://shweshd.github.io/RiskCube-Institute-Official-Website/
- Fully responsive design — mobile-first, tested across all screen sizes
- Smooth scroll reveal animations using
IntersectionObserver - Sticky navbar with dynamic background on scroll
- Hamburger menu for mobile navigation (opens/closes on click and outside tap)
- Hero — animated 3D CSS Rubik's cube, stats counter, CTA buttons
- About — interactive card stack (click to cycle through Mission / Research / Impact cards)
- Services — three service cards with icon, description, and tags
- Pipeline — 4-step talent lifecycle (Train → Hire → Innovate → Deploy)
- Community — active sector grid and community type cards
- Contact — interest registration form with validation + secure login card
- Custom-built AI-style chatbot with a 3D animated Rubik's Cube character
- 5 facial expressions (happy, thinking, surprised, cool, excited) triggered contextually
- Keyword-based knowledge base covering Academy, Advisory, Pipeline, Community, and Contact topics
- Typing indicator with randomised delay for realistic feel
- Quick-reply buttons for common questions
- Auto-wiggle animation and notification badge on page load
- Interest registration form with name, email, and message validation
- Animated portal login card with password show/hide toggle
- Button state feedback on successful form submission
| Technology | Usage |
|---|---|
| HTML5 | Semantic page structure |
| CSS3 | Animations, Flexbox, Grid, custom properties |
| Vanilla JavaScript | DOM manipulation, IntersectionObserver, event handling |
| Google Fonts | Syne + DM Sans typefaces |
├── index.html # Main HTML file
├── style.css # All styles and animations
├── script.js # JavaScript — nav, chatbot, scroll reveal, form logic
└── ELEMENTS/ # Customized cursor and icon assets
No build step required. Just clone and open:
git clone https://shweshd.github.io/RiskCube-Institute-Official-Website/
# Open index.html in your browserOr deploy instantly:
- Netlify — drag and drop the folder at netlify.com/drop
- GitHub Pages — push to a repo and enable Pages in Settings
- Building a custom chatbot from scratch using vanilla JS with a keyword knowledge base
- Creating complex 3D CSS animations (rotating cube with faces and facial expressions)
- Implementing
IntersectionObserverfor performant scroll-triggered animations - Designing and coding a fully responsive multi-section layout without any CSS framework
- Form validation and UI state management with pure JavaScript
Shwesh Dubey BCA Student — Parul University, Mumbai
.png){kind=link}
| Project | Tech | Live |
|---|---|---|
| Personal Portfolio | HTML5, CSS3, JavaScript, GitHub Pages | shweshd.github.io/Portfolio |
| YouTube Frontend Clone | HTML5, CSS3, UI/UX Design | shweshd.github.io/YouTube-Clone |
This project is for portfolio and educational purposes.