AlmaSphere - Alumni Management Platform

A modern, responsive alumni management platform built with React, Vite, and Tailwind CSS. Connect with fellow graduates, discover job opportunities, and stay updated with alumni events.

🚀 Features

• Responsive Design: Mobile-first approach with Tailwind CSS
• Dark/Light Theme: Toggle between themes with persistent storage
• Alumni Directory: Search and filter alumni by batch, major, and company
• Events Management: Browse and register for alumni events
• Job Board: Discover career opportunities shared by alumni
• Profile Management: Create and manage your alumni profile
• Smooth Animations: Framer Motion powered page transitions and interactions
• Modern UI: Clean, accessible interface with shadcn/ui components

🛠️ Tech Stack

• Frontend: React 18, JSX
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Redux Toolkit
• Routing: React Router v6
• Animations: Framer Motion
• Icons: Lucide React
• UI Components: Custom components (shadcn/ui inspired)

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd alma-sphere

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173 to view the application.

🏗️ Build for Production

npm run build

The built files will be in the dist directory.

📁 Project Structure

src/
├── components/          # Reusable UI components
│   ├── ui/             # Base UI components (Button, Card, etc.)
│   ├── Navbar.jsx      # Navigation component
│   ├── Footer.jsx      # Footer component
│   └── RippleBackground.jsx
├── pages/              # Page components
│   ├── Home.jsx
│   ├── Directory.jsx
│   ├── Events.jsx
│   ├── Jobs.jsx
│   ├── Profile.jsx
│   └── About.jsx
├── store/              # Redux store and slices
│   ├── slices/
│   └── index.js
├── lib/                # Utility functions
├── App.jsx             # Main app component
├── App.css             # Global styles
├── index.css           # Base styles
└── main.jsx            # Entry point

🎨 Theme Colors

Light Mode

• Text: #050316
• Background: #fbfbfe
• Primary: #a33b00
• Secondary: #f52929
• Accent: #ff7b34

Dark Mode

• Text: #fbfbfe
• Background: #050316
• Primary: #ff7b34
• Secondary: #f52929
• Accent: #a33b00

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📱 Responsive Design

The application is fully responsive and works on:

• Mobile devices (320px+)
• Tablets (768px+)
• Desktop (1024px+)
• Large screens (1280px+)

♿ Accessibility

• ARIA labels for interactive elements
• Keyboard navigation support
• High contrast theme support
• Screen reader friendly
• Focus management

🎭 Animations

• Page transitions with Framer Motion
• Hover effects on interactive elements
• Ripple background effect on homepage
• Smooth theme transitions
• Loading states and micro-interactions

📚 External Libraries

• Google Fonts: Fjord One (body), Paytone One (headings)
• Lucide React: Icon library
• Framer Motion: Animation library
• Redux Toolkit: State management
• React Router: Client-side routing

🚧 Development Notes

• All "Coming Soon" buttons show a toast notification
• Mock data is provided for demonstration
• Theme persistence is handled via localStorage
• Responsive navigation with hamburger menu
• Custom CSS variables for theme colors

📄 License

This project is licensed under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📞 Support

For questions or support, please contact:

• Email: hello@almasphere.com
• Phone: +1 (555) 123-4567

---

Built with ❤️ for the alumni community.