American Institute Hissar
A comprehensive educational website featuring courses, dynamic blogs, and engaging animations.
Overview
Developed a custom markdown-driven blog engine using gray-matter and react-markdown.
Integrated the native View Transitions API for seamless, app-like page navigation.
Implemented smooth, interactive animations and dynamic counters using Framer Motion and React CountUp.
Key Challenges:
- •Building a highly accessible, fast-loading educational platform that feels dynamic and modern while serving diverse student demographics.
- •Implementing a scalable markdown blog pipeline that supports rich text formatting.
Built With
Next.js
Framework
React
Frontend Library
Tailwind CSS
Styling
Framer Motion
Animation
TypeScript
Language
Key Features
Dynamic Markdown Blog
A custom blog pipeline that seamlessly parses and renders local markdown files.
App-like Navigation
Native app-like page transitions utilizing the modern View Transitions API.
Engaging Animations
Scroll-triggered animations, statistical counters, and infinite marquees for a dynamic feel.
Accessible Interfaces
Leveraged Radix UI primitives to ensure high accessibility across interactive elements.
Visual Showcase
Development Journey
Design & Planning
- Outlined site architecture including courses, about, and blogs
- Designed responsive UI components tailored for educational content
Development
- Built Next.js pages and implemented the markdown blog engine
- Added Framer Motion animations and view transitions
Launch & Polish
- Optimized SEO and accessibility standards
- Finalized content and deployed to production
Looking for a Full-Stack Developer?
I'm actively seeking opportunities to join a great team and contribute to exciting products. Drop me a message!