"Transmute curiosity into code, and code into wonders."
A mystically-themed hackathon website for Wes:Hack 26, featuring an immersive alchemy-inspired design with interactive easter eggs and engaging animations.
Digital Alchemy is the official website for Wes:Hack 26, a 48-hour student hackathon taking place on February 13-14, 2026 at Wesgreen International School, Sharjah, UAE. The site embraces an alchemical theme, transforming the typical hackathon experience into a mystical journey of creation and innovation.
- Hero Section - Captivating introduction with alchemy-themed visuals
- Registration - Participant sign-up with validation
- Process Guide - Step-by-step explanation of the hackathon journey
- Schedule - Event timeline and important dates
- Prizes - Showcase of rewards and recognition
- Archives - Gallery of past events (Checkpoint, Scrapyard, WesHack 24)
- Team - Meet the organizers
- Contact - Get in touch section
- Binary Rain - Matrix-style animation effects
- Console Messages - Hidden messages in browser console
- Konami Code - Secret activation sequence
- Random Glitch - Mysterious visual glitches
- Scroll Secrets - Discoveries triggered by scrolling
- Time Greeting - Dynamic messages based on time of day
- Alchemy Sigils - Custom mystical symbols and icons
- Parchment Buttons - Themed UI components
- Dark Theme - Immersive atmosphere with next-themes
- Responsive Design - Mobile-first approach
- Smooth Animations - Powered by Tailwind CSS animations
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4
- UI Components: Radix UI
- Forms: React Hook Form + Zod
- Icons: Lucide React
- Analytics: Vercel Analytics
- Theming: next-themes
- Node.js 18+
- npm, yarn, pnpm, or bun
-
Clone the repository:
git clone <repository-url> cd "Digital Alchemy"
-
Install dependencies:
npm install # or yarn install # or pnpm install
-
Run the development server:
npm run dev # or yarn dev # or pnpm dev
-
Open http://localhost:3000 in your browser.
Digital Alchemy/
├── app/ # Next.js app directory
│ ├── page.tsx # Home page
│ ├── layout.tsx # Root layout
│ ├── globals.css # Global styles
│ ├── gallery/ # Event gallery page
│ └── transmutation/ # Additional page
├── components/ # React components
│ ├── easter-eggs/ # Interactive easter eggs
│ ├── sections/ # Page sections
│ └── ui/ # Reusable UI components
├── lib/ # Utility functions
│ ├── data.ts # Site content and configuration
│ ├── images.ts # Image paths
│ ├── links.ts # External links
│ ├── sigils.ts # Alchemy symbols
│ └── ui.ts # UI utilities
├── public/ # Static assets
│ └── images/ # Image files
├── types/ # TypeScript type definitions
└── components.json # shadcn/ui configuration
All site content is centralized in lib/data.ts. You can easily modify:
- Event details (name, dates, location)
- Section content
- Team members
- Schedule
- Prizes
- And more...
Place images in the public/images/ directory and reference them in lib/images.ts.
Customize the theme in:
app/globals.css- CSS variables and global stylestailwind.config.js- Tailwind configuration (if present)
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
The easiest way to deploy is using Vercel:
Or deploy to any platform that supports Next.js:
Contributions are welcome! Please feel free to submit a Pull Request.
This project is private and proprietary.
Created with ❤️ by the Wes:Hack 26 organizing team.
For questions or inquiries about Wes:Hack 26, please visit the contact section on the website.
Wes:Hack 26 - Where digital transformation meets ancient wisdom ⚗