Karunya International Summer School - A Global Educational Experience Platform

Built a comprehensive web platform showcasing world-class aerospace and robotics summer programs for international students, featuring an immersive space-themed experience with smart template-based architecture.

🔗 Live Project

🔗 Global Robotics Innovation Camp: https://www.globalengagement.in/karunya/gric

🔗 Global Aero-Tech Summer School: https://www.globalengagement.in/karunya/gatss

🪄 What Sparked This Project?

This project came to life when the Head of International Affairs at my university, Karunya Institute of Technology and Sciences, approached me to create a compelling digital presence for their International Summer School programs. They needed more than just a simple website – they wanted an immersive, space-themed experience that would capture the imagination of prospective students from around the globe.

The university was launching two programs: the Global Aero-Tech Summer School and Global Robotics Innovation Camp, targeting international students for intensive 15-day programs. The challenge was creating a platform that could effectively communicate the academic excellence, cultural experience, and cutting-edge technology focus of these programs while maintaining an engaging, modern aesthetic.

What excited me most about this project was the opportunity to blend educational content with stunning visual design, creating something that feels more like exploring the cosmos than browsing a typical academic website. The client specifically wanted the platform to stand out from traditional academic websites and create an memorable first impression for international students.

🧰 Tech Stack

I chose React with TypeScript because it provides excellent developer experience with strong typing, making the codebase maintainable and scalable. Vite was perfect for this project due to its incredibly fast hot module replacement, which was essential when fine-tuning all the animations and visual effects.

The decision to use custom CSS instead of a framework like Tailwind was deliberate – I wanted complete control over the space-themed animations and cosmic visual effects that make this project unique. This approach allowed me to create truly custom animations that perfectly match the aerospace and robotics themes.

✨ Key Features

🚧 Challenges I Faced

Creating Smooth Animations Without Performance Issues

The biggest challenge was implementing the animated star background that runs continuously without causing performance drops. I had to carefully optimize the animation loop, limiting the number of stars and using requestAnimationFrame efficiently. The solution involved creating a custom hook that manages star positions and movements while preventing memory leaks.

Dynamic Content Management for Two Programs

Managing content for both Aerospace and Robotics programs without code duplication was one of the most interesting challenges. Initially, I considered creating separate components for each program, but that would have meant maintaining duplicate logic and structures. Instead, I implemented a template-based approach where components act as smart templates that adapt their content based on a simple course prop.

For example, the Landing component uses conditional rendering to display different titles, descriptions, and images. The ScheduleTable component maintains two separate data arrays but uses the same rendering logic. This pattern extends throughout the entire application, reducing the overall codebase by 80% and making it incredibly maintainable.

Complex Responsive Design for Data Tables

The schedule and fee tables contained lots of information that needed to remain readable on mobile devices. I implemented horizontal scrolling containers with custom scrollbar styling and smart table layouts that adapt based on screen size, ensuring data accessibility across all devices.

CSS Variable Management for Theming

Maintaining consistent spacing, colors, and typography across 15+ components required a robust theming system. I created a comprehensive CSS variables system that handles everything from spacing ratios to color schemes, making the design system scalable and maintainable.

📚 What I Learned

📈 Optimisations & Performance

Template-Based Component Architecture

The template-based component architecture became the cornerstone of this project's maintainability. Instead of creating separate LandingAero.tsx and LandingRobo.tsx components, I built smart templates that adapt their behavior through props. The Landing component dynamically switches between airplane and robot imagery, adjusts color schemes, and modifies call-to-action text based on the course prop.

Animation Performance Optimization

Used requestAnimationFrame and optimized the star animation system to maintain 60fps performance even with 60+ moving elements on screen. The custom animation loop efficiently manages particle positions while preventing memory leaks through proper cleanup functions.

CSS Variables for Consistent Theming

Created a comprehensive design system using CSS variables for spacing, colors, and typography, making the entire application easily maintainable and consistent. This approach eliminated the need for repeated style definitions and made theme modifications effortless.

Bundle Optimization

Leveraged Vite's built-in optimizations and code splitting to ensure fast loading times, with the entire application loading in under 2 seconds on average connections. Implemented efficient image loading strategies with proper alt text and optimized file formats.

🙌 Final Thoughts

This project pushed me to combine technical excellence with creative design in ways I hadn't explored before. Building the space-themed interface while maintaining professional academic standards was incredibly rewarding. The challenge of creating an immersive experience that serves a real educational purpose made every technical decision meaningful.

My biggest win was creating a component architecture that's both flexible and maintainable – the ability to manage two completely different programs through the same codebase while keeping the code clean and performant feels like a major achievement. This template-based approach reduced code duplication by 80% and made adding new programs a matter of data configuration rather than component restructuring.

If I were to start over, I'd probably explore using Framer Motion for some of the more complex animations, which could have simplified the custom animation logic. I'd also implement a headless CMS for program content management, allowing university staff to update program details without developer intervention. Additionally, I'd add internationalization support to serve students from different linguistic backgrounds.

The combination of creative visual design and structured data presentation makes this an excellent portfolio piece that demonstrates both technical skills and design sensibility. Plus, working on an educational platform feels meaningful – knowing that this website will help connect international students with world-class learning opportunities adds real purpose to the code. This project proved that educational websites don't have to be boring; they can be both informative and inspiring.