Skip to content

Akkilesh-A/HumanoidXVITCC-Club-Website

Repository files navigation

🌟 Starter Repo for HumanoidXVITC Club Website 🌟

Just clone the repo, make some edits, and there you go, you have a good looking responsive club website! 🚀


How to Run 🏃‍♂️

  1. Install Dependencies:
    npm i
  2. Running it locally:
    npm run dev
  3. Visit localhost:5173

Adding new Components

📁 src

📂 App.jsx

Add your component here after importing using import exportedComponent from 'path'


Easily Editable Components (Inside src folder)

📁 OBs - (Office Bearers)

📂 Pictures.jsx

Use {id:---,imgURL: '---',dept: "---",text: "---",}, to add a new photo card element to the const pictures array.

imgURL Path of Image stored in assets folder.
dept Text to be shown when hovered.
text Text for filtering using Photo Gallery Menu

Use "Text", to add a new filter for photo cards to the const MenuItems array.


📁 Section-1 - Landing Page

📂 LandingContent.jsx

Edit text and image to be shown on landing page here and the image is set to jump up and down (A cute Robot in this case!)


📁 Section-2 - About Section

📂 About.jsx

Just add whatever text you want in each section and an image too!


📁 Section-3 - Image Carousel

📂 picturesImageCarousel.jsx

Use {id:---,src: '---',text: "---",}, to add a new photo to the const pictures array.

src Path of Image stored in assets folder.
text Text shown under the image

📁 Section-4 - New Event Banner Section

📂 EventBanner.jsx

Create new components for each new event and add that here


📁 Components

📂 Footer.jsx

Your normal footer(responsive too!)

📂 NavBar.jsx

Navbar with buttons to scroll to specific components

📂 MusicPlayer.jsx

Music Player button and text to play music with specified file path

📂 sectionHeading.jsx

Use SectionHeading text1="white-text" text2="custom-color-text" ptext="sub-text" to create a heading for every section.