This is a modern, responsive web platform created for the Computer Society of India (CSI) — KARE Chapter.
The current version provides:
- CSI KARE introduction
- Professional animated landing page
- CSI KARE branding and local logo asset
- About CSI KARE section
- Technical activities overview
- “From Idea to Impact” timeline
- Connect With Us section
- Instagram, LinkedIn, official email and WhatsApp access
- Responsive design for desktop, tablet and mobile
- Opening splash/intro animation
- Scroll-based animations and interactive UI elements
The project is designed as more than a static landing page. It provides a foundation that can be continuously updated as CSI KARE grows and future student teams take ownership of the website.
The main objectives are to:
- Create a professional online presence for CSI KARE
- Provide students with information about the chapter
- Make CSI KARE’s official communication channels easily accessible
- Showcase technical activities and initiatives
- Provide a scalable foundation for future website development
- Allow future teams to maintain and expand the website
-
Opening Intro / Splash Screen
A full-screen animated introduction featuring the CSI KARE logo. It plays once per browser session and supports reduced-motion preferences. -
Navigation
Sticky navigation with Home, About, Activities and Connect links, a Connect With Us button, scroll blur, active-section indication and a responsive mobile menu. -
Hero Section
The primary introduction to CSI KARE, with the headline “Where Curiosity Meets Technology,” calls to action and an animated connected-node technology visual. -
About CSI KARE
Factual information about CSI, its establishment in 1965, CSI KARE and the chapter’s learning and collaboration focus. The section is organized around Learn, Build, Collaborate and Innovate. -
What We Do
An asymmetric activity overview covering technical workshops, coding challenges, technical seminars, project development, and community collaboration. -
From Idea to Impact
A progressive four-step timeline: Discover, Learn, Build and Share. -
Connect With Us
Interactive cards for Instagram, LinkedIn, email and the WhatsApp community using CSI KARE’s official links. -
Footer
CSI KARE branding, chapter details, contact links and the 2026 copyright notice.
The website is intentionally designed to grow beyond a single static landing page.
Future versions can include dedicated pages for individual activities and events:
/activities/
/activities/workshop-name/
/activities/hackathon-name/
/activities/coding-challenge/
/activities/seminar-name/
Each activity page could contain:
- Activity or event title
- Date and location
- Short and detailed descriptions
- Event objectives
- Speakers or mentors
- Event photographs
- Registration link
- Event highlights
- Outcomes
- Certificates or resources where applicable
The homepage Activities section could link to these dedicated pages:
What We Do
↓
Activities
↓
Technical Workshop
↓
Dedicated Activity Page
- Dedicated activity pages
- Upcoming events
- Past events archive
- Event registration
- Event galleries
- Event outcomes
The project can later connect to a backend or CMS so authorized CSI KARE members can update the following without manually editing every part of the frontend:
- Events
- Activities
- Announcements
- Workshops
- Images
- Resources
- Team information
A future backend could use technologies such as:
- Node.js
- Express.js
- MongoDB or PostgreSQL
This would allow dynamic content to be added and displayed on the website.
A future admin dashboard could allow authorized CSI KARE members to:
- Add new activities
- Edit existing activities
- Remove outdated activities
- Upload event images
- Add registration links
- Update announcements
- Manage activity pages
The public website could then display updated information automatically.
Visitor
↓
CSI KARE Website
↓
Activities / Events
↓
Individual Activity Pages
↓
Backend / CMS
↓
Database
This approach would allow the website to evolve from a simple static site into a dynamic CSI KARE information and activity platform.
csi-kare/
│
├── index.html
├── style.css
├── script.js
│
├── assets/
│ └── csi-kare-logo.svg
│
└── README.md
The current project uses a local SVG logo asset so the website does not depend on a remote image URL. If the official source image is later provided as a JPG, it can be added to assets/ and referenced consistently from the HTML.
csi-kare/
│
├── pages/
│ ├── about.html
│ ├── activities.html
│ └── contact.html
│
├── activities/
│ ├── workshop.html
│ ├── hackathon.html
│ └── seminar.html
│
├── assets/
│ ├── images/
│ └── icons/
│
├── index.html
├── style.css
├── script.js
└── README.md
If React or another framework is introduced later, the structure can be reorganized to match that framework’s conventions.
The current implementation uses:
- HTML5
- CSS3
- JavaScript
- CSS animations and transitions
- Intersection Observer API
- Session Storage API for the intro session state
- Responsive Web Design
- Git and GitHub for version control
- Vercel or Netlify for deployment
Node.js, Express.js, MongoDB, PostgreSQL, a CMS, and an admin dashboard are proposed future technologies and are not currently implemented.
- Clone or download the repository.
- Open the project folder.
- Open
index.htmlin a modern browser.
A local development server is recommended for a smoother workflow:
- Open the project folder in VS Code.
- Install the Live Server extension by Ritwick Dey.
- Right-click
index.html. - Select Open with Live Server.
The site will open at a local address similar to:
http://127.0.0.1:5500/index.html
The project has no package installation or build command because it is a static HTML, CSS and JavaScript site.
The website can be deployed through GitHub and Vercel:
- Create a GitHub repository.
- Upload or push the project files.
- Log in to Vercel.
- Import the GitHub repository.
- Select the repository root as the project directory.
- Leave the build command empty.
- Deploy the project.
- Use the generated public URL.
The same static project can also be deployed through Netlify by importing the GitHub repository or dragging the project folder into Netlify’s deployment interface.
Edit the relevant content in index.html. Keep factual information verified before publishing it.
Update the URLs in the Connect With Us cards and footer links in index.html.
Replace the logo asset inside assets/ while keeping the filename and format consistent, or update the image paths in index.html wherever the logo is used.
In the current static version, activity information can be added as new HTML pages or additional sections. In a future dynamic version, activities could be added through an admin dashboard or CMS without directly modifying the frontend code.
This project can be maintained by future CSI KARE teams. Contributors should:
- Keep the design consistent with CSI KARE branding
- Avoid adding unverified information
- Optimize images before uploading them
- Test the website on mobile and desktop
- Check all external links
- Maintain keyboard accessibility and sufficient contrast
- Keep animations performant and respectful of reduced-motion preferences
- Update this README when major features are added
- Professional landing page
- CSI KARE introduction
- Opening animation
- Responsive design
- Social and contact links
- Activity overview
- From Idea to Impact timeline
- Dedicated Activities page
- Individual activity and event pages
- Upcoming events section
- Past events archive
- Event gallery
- Registration integration
- Backend integration
- Database
- Admin dashboard
- Dynamic activity management
- CMS or content management
- Announcements management
Phase 2 and Phase 3 are proposed improvements and are not currently implemented.
CSI KARE
Official Email:
klucsi@klu.ac.in
Instagram:
instagram.com/csi_kare
LinkedIn:
linkedin.com/company/csi-kare
WhatsApp:
Join the CSI KARE community
This project is developed for CSI KARE. Usage, modification and redistribution should follow the policies and permissions of the CSI KARE chapter and KARE.