ZenYukti Developer Community Website

A fully responsive, modular, multi-page website for ZenYukti, a developer community founded by Ayush Hardeniya. The website uses HTML, CSS, and vanilla JavaScript without frameworks.

Project Overview

This project is a modern, professional website for the ZenYukti developer community with the tagline "We don't code. We play it." The website follows a clean, responsive design with a blue, white, and grayscale color scheme.

Key Features

• Fully Responsive Design: Adapts to all device sizes (mobile, tablet, desktop)
• Component-based Architecture: Reusable components for navbar, footer, and team cards
• Multi-page Structure: Six well-organized pages with consistent design
• Interactive Elements: Form validation, animations, hamburger menu, and more
• Performance Optimized: Lightweight and fast-loading
• SEO Friendly: Proper meta tags and semantic HTML structure

Project Structure

ZenYukti/
│
├── index.html                    # Landing page
├── style.css                     # Main stylesheet
├── responsive.css                # Responsive design styles
├── script.js                     # Main JavaScript file
│
├── assets/
│   ├── css/
│   │   └── placeholder.css       # CSS-based image placeholder
│   │
│   └── images/
│       └── ZenYuktiBanner.png    # Banner image (placeholder)
│
├── components/
│   ├── navbar.html               # Reusable navigation component
│   ├── footer.html               # Reusable footer component
│   └── team-card.html            # Reusable team member card component
│
├── pages/
│   ├── about.html                # About page
│   ├── team.html                 # Team page
│   ├── projects.html             # Projects page
│   ├── join.html                 # Community joining page
│   └── contact.html              # Contact form page
│
└── README.md                     # Project documentation

Pages Description

1. Home Page (index.html)

   • Hero section with banner and call-to-action
   • Values section (Learn, Build, Share)
   • Brief community introduction
   • Call-to-action section for joining

2. About Page (about.html)

   • Vision and mission statements
   • Founder's story
   • Community values

3. Team Page (team.html)

   • Founder profile
   • Core team member cards
   • Mentors section

4. Projects Page (projects.html)

   • Featured projects
   • Ongoing projects
   • Open source initiatives

5. Join Page (join.html)

   • Membership options
   • How to join steps
   • Community guidelines

6. Contact Page (contact.html)

   • Contact form with validation
   • Social media links
   • Frequently asked questions

Technologies Used

• HTML5: For structure and semantic markup
• CSS3: For styling with custom properties and modern layouts
• JavaScript: For interactivity and DOM manipulation
• CSS Grid & Flexbox: For responsive layouts
• Intersection Observer API: For scroll-based animations
• Fetch API: For loading components dynamically

Design System

The website follows a consistent design system with the following elements:

• Color Palette:

  • Primary: #1e88e5 (Blue)
  • Secondary: #0d47a1 (Dark Blue)
  • Text Dark: #333333
  • Text Light: #ffffff
  • Gray: #f5f5f5, #e0e0e0

• Typography:

  • Headings: Poppins (300, 400, 500, 600, 700)
  • Body: Inter (300, 400, 500, 600, 700)
  • Base font size: 16px

• Components:

  • Buttons
  • Cards
  • Form elements
  • Navigation
  • Accordion (FAQ)

Setup and Installation

1. Clone the repository:

   git clone https://github.com/ZenYukti/zenyukti-website.git
   

2. Navigate to the project directory:

   cd zenyukti-website
   

3. Open the project in your favorite code editor.

4. To view the website, open index.html in a web browser.

Development Notes

CSS Architecture

The CSS is organized into three main files:

• style.css: Core styles and components
• responsive.css: Media queries for responsive design
• placeholder.css: CSS-based image placeholders

Component Loading

Components (navbar, footer, team cards) are loaded dynamically using the Fetch API to maintain a DRY approach while keeping the simplicity of a static site.

Animations

The website uses the Intersection Observer API for scroll-based fade-in animations and CSS transitions for interactive elements.

Form Validation

Client-side form validation is implemented in vanilla JavaScript with custom error handling.

Future Enhancements

• Dark mode toggle
• Blog section
• Event calendar
• Member profiles
• Authentication system

Credits

• Developer: Ayush Hardeniya
• Design: Original design created for ZenYukti
• Fonts: Poppins and Inter from Google Fonts
• Icons: Font Awesome

Conclusion

This project demonstrates a modern approach to building static websites with component reusability and responsive design without relying on heavy frameworks. The ZenYukti website serves as a digital hub for the developer community, providing information about the organization, ways to join, and showcasing ongoing projects.

License

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

🎨 Design System

• Theme Colors: Blue, White, and Greyscale
• Fonts: Poppins and Inter
• Taglines:
  • "We don't code. We play it."
  • "Learn. Build. Share."
  • Footer: "Built by Passion. Shared with the World."

🚀 Features

• Responsive navigation bar and footer across all pages
• Reusable team card component
• Form validation with JavaScript
• FAQ accordion on the contact page
• Responsive grid layouts
• Smooth scrolling for anchor links
• Animation on scroll elements with Intersection Observer
• Mobile-friendly design with hamburger menu

🔗 Important Links

• Founder: Ayush Hardeniya
• GitHub: ZenYukti
• LinkedIn: ZenYukti
• Discord: Join our community
• Twitter: ZenYukti
• Contact: zenyukti@ayushhardeniya.site

💻 Setup Instructions

1. Clone the repository
2. Open index.html in your browser
3. No build process or dependencies required!

📱 Responsive Design

The website is fully responsive across all devices:

• Desktop (1200px+)
• Laptop (992px - 1199px)
• Tablet (768px - 991px)
• Mobile landscape (576px - 767px)
• Mobile portrait (< 576px)

👨‍💻 Created By

Built with passion by Ayush Hardeniya