Stuco-website

Stars
8
Language
TypeScript
Updated
View on GitHub

A modern, sleek website for student organizations with a cyberpunk aesthetic and elegant design elements.

✨ Features

  • Silk Champagne & Marble Gradient Background - Beautiful animated gradient that covers the entire page
  • Golden Scroll Progress Bar - Sleek progress indicator that tracks page scroll
  • Dark Mode Toggle - Elegant theme switching functionality
  • Responsive Design - Optimized for all device sizes
  • Modern UI Components - Built with shadcn/ui components
  • Three.js Background - Interactive 3D background elements
  • Merchandise Section - Product showcase with filtering and search
  • Hero Section - Dynamic landing area with animations
  • Navigation - Smooth routing with React Router

🛠️ Tech Stack

  • Frontend Framework: React 18 with TypeScript
  • Build Tool: Vite
  • Styling: Tailwind CSS
  • UI Components: shadcn/ui + Radix UI
  • Routing: React Router DOM
  • State Management: TanStack Query
  • 3D Graphics: Three.js
  • Icons: Lucide React
  • Forms: React Hook Form + Zod validation

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher)
  • npm, yarn, or bun

Installation

  1. Clone the repository

    git clone https://github.com/Manavarya09/Stuco-website.git
cd cyber-campus-glow

  2. Install dependencies

    npm install
# or
yarn install
# or
bun install

  3. Start the development server

    npm run dev
# or
yarn dev
# or
bun dev

  4. Open your browser Navigate to http://localhost:8080 (or the port shown in your terminal)

📁 Project Structure

cyber-campus-glow/
├── src/
│   ├── components/          # React components
│   │   ├── ui/             # shadcn/ui components
│   │   ├── HeroSection.tsx
│   │   ├── MerchSection.tsx
│   │   ├── Navbar.tsx
│   │   ├── DarkModeToggle.tsx
│   │   ├── ThreeBackground.tsx
│   │   └── ScrollProgressBar.tsx
│   ├── pages/              # Page components
│   │   ├── Index.tsx
│   │   ├── About.tsx
│   │   └── NotFound.tsx
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility functions
│   ├── App.tsx             # Main app component
│   ├── main.tsx            # Entry point
│   └── index.css           # Global styles
├── public/                 # Static assets
├── tailwind.config.ts      # Tailwind configuration
├── vite.config.ts          # Vite configuration
└── package.json

🎨 Design Features

Background Gradient

  • Animated silk champagne and marble gradient
  • 15-second smooth animation cycle
  • Fixed attachment for seamless scrolling

Scroll Progress Bar

  • Golden gradient design
  • Fixed position at top of page
  • Smooth width transitions
  • High z-index for visibility

Color Palette

  • Primary: Blue tones (#1D3557)
  • Secondary: Red accents (#E63946)
  • Accent: Yellow highlights (#F4A261)
  • Background: Champagne and marble gradients

📱 Available Scripts

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

🔧 Configuration

Tailwind CSS

The project uses Tailwind CSS with custom configuration for the cyberpunk theme.

Vite

Optimized build configuration with React SWC for fast development.

TypeScript

Strict TypeScript configuration for type safety.

🚀 Deployment

Build for Production

npm run build

Preview Production Build

npm run preview

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Manavarya Singh

🙏 Acknowledgments

⭐ Star this repository if you found it helpful!