prajjwalkapoor / hall4-website

👋  Hey there! I'm Prajjwal

👨🏻‍💻  About Me

💡  I like to explore new technologies and develop products for others.
🎓  I'm currently studying Computer Science and Engineering at the Indian Institute of Information Technology Jabalpur.
🌱  I'm also interested in learning about Systems Design, and Cloud Architecture.
✍️  In my free time, I do UI Design and Blog Writing as hobbies/side hustles.
✉️  You can shoot me an email at [email protected]! I'll try to respond as soon as I can.

🛠  Tech Stack

             
             

🤝🏻  Connect with Me

hall4-website's Issues

[UI] Create gallery for Home page

Create a responsive Gallery section according to the given design.

• Make sure to make changes to the folder(directory) containing index.html, gallery.css, and gallery.js

• Do follow this approach, For the gallery section images, images will be loaded from the gallery.json by using fetch API, This will help us, to add the latest and recent pictures of events that happened in the hostel. JSON will include image data in the following format.

{ "images" : [
      {
        "date" : "15 August 2022",
        "category": "event-photos",
        "image_link": "/assets/gallery/15-august-22-celebration-1.png",
      },
      {
        "date" : "09 Sept 2022",
        "category": "hostel-images",
        "image_link": "/assets/gallery/hostel-front-gate.png",
      }
  ]
}

For Mobile responsiveness, We will share the layout once the design team comes up with a new idea.
Also, new layout/UI ideas are appreciated so do share them with us before implementing.

Image for reference :

• Layout-image

[UI] Create Footer for Home Page

Create a responsive Footer Section according to the given design.

• Make sure to make change to the folder(directory) containing index.html and footer.css
• Leave empty anchor tags for the required links for now.

Image for reference :

Make the administration Page

Create a responsive Adminstration page according to the given design.

• Make sure to make changes to the folder(directory) containing index.html, gallery.css, and gallery.js

Note : The following design will be updated gradually so keep checking the design file.

Make footer section responsive

Create variables for breakpoints in global CSS file

Create CSS variables for all three breakpoints i.e mobile, tablet and desktop. Also, change each hard-coded value to breakpoint variables.

[UI] Create the facilites section

Create a Facilities Section according to the design.

• Make sure to make these change within this folder having index.html and about.css
• Make sure to add proper description in the facilites section
• You can also use a facilities.js file to create the button for see more.
• Use icon of appropriate format and try to keep the size within 50kb
• Try to add the responsiveness for mobile displays, for this you can just use flex wrap column

Note: Do your changes on a new branch, dont make commits to the master/main bramch.

Image for Reference:

[UI] Putting all sections of home-page into index.html and making uniformity in design

As fellow contributors have made each home page section, the design might look non-uniform. So to avoid this UI issue, we need to make the home page look uniform according to the Figma design.

Also, make sure to follow the following constraints.

• gallery section includes images.json and it includes the src link of each image (relative link), so after changing its directory it won't work. so fixed that issue.
• navbar is not mobile-responsive. consider making it mobile responsive.

Setup file structure for UI

Setup the basic file structure for pages and styles. Create a separate folder for the setup.

[UI] Create About Hostel Section

Create a responsive about section according to the design.

• Make sure to make these change within this folder having index.html and about.css
• Make sure to add proper description in the about section
• For mobile displays first display about heading then the image and after that the description, all the above things should be in a column instead of row.
• Use photo of appropriate format and try to keep the size within 300kb
• You can also use single photo adjacent to the about instead of multiple

Image for reference:

Introduction Document

The introduction document should contain all the basic information about the project like the tech stack, information about pages, features etc.

Design for home page

Take ideas for content from https://www.iiitdmj.ac.in/hall3.iiitdmj.ac.in/
color theme need not be same

Write readme.md

A brief introduction to the project and contribution details.

create CONTRIBUTION.md

CONTRIBUTION.md should contain all the information about how to contribute to this repository like local setup, commit message format, how to raise PR, etc.

Make navbar and hero section responsive

[UI] Create Navbar

Create a responsive navbar according to the design https://www.figma.com/file/ZvkpEgMiIBZ1XLpVdcP1s7/Hall-4-Webpage?node-id=168%3A4
Navbar is a global component so write CSS for the navbar only in the global CSS file. Also, use camel casing for writing class names.