Incident 2023

Table of Contents 📁

1. Tech Stack
2. Sections
3. Important Points
4. Contributing
5. Installation Guide
6. Sample Git Workflow
7. Color Scheme
   

Tech Stack 🧰

Frameworks

• ReactJS
• Tailwind CSS

Libraries/Tools

• ViteJS
• React Icons
• Framer
• React Lottie
• Meraki UI

Sections ☑️

• Hero Section
• Events
• Competitions
• Sponsors
• About Us
• FAQs

Important Points ✨

Code changes

Three main things have to be changed to customize it your way (please open an issue if you find more such instances):

1. Information

• /src/constants/index.js contains all the information one needs to change. Each website section is written as a JavaScript object and is pretty intuitive to change.

• Icons

  • Whenever you want to use an icon, you'll have to make sure that the icon is imported.
  • Head to https://react-icons.github.io/react-icons/search and search for the desired icon. (Eg: SiReact for ReactJS)
  • Note the package it belongs to (Eg: 'Si' here)
  • Import the icon into /src/constants/index.js (Eg: import { ... SiReact, } from "react-icons/si"; here)

2. Assets

• Add any assets (images) to the assets folder.
• Import the asset and export it using the/src/assets/index.js file.

Contributing 🏆

We welcome contributions in the form of pull requests, issues and documentation. Feel free to help us in any way! ❤️

• Please read and abide by our Code of Conduct; our community aspires to be a respectful place both during online and in-person interactions.
• Please follow the installation guide and the sample git workflow to contribute.

Installation Guide 🧑‍💻

Using Git and Github

• Clone the repository
• Enter the new portfolio directory with cd portfolio
• Set the upstream remote to the original repository url so that git knows where to fetch updates from in future: git remote add upstream https://github.com/WebClub-NITK/incident-2023.git

Commit Discipline

• Make sure to write clear and descriptive commit messages

• The commit message:

  • is written in the imperative (e.g., "Fix …", "Add …")
  • is kept short (max 76 characters, ideally less), while concisely explaining what the commit does
  • is clear about what part of the code is affected – often by prefixing with the name of the section and a colon, like events: … or footer: …

• Examples:

  • footer: Add contact links
  • events: Fix scrolling issues

Install required packages

• npm install

Run server

• npm run dev

Sample Git Workflow

• Follow the installation guide to install the software
• Create a new feature branch with git checkout -b <name-of-your-feature-branch>
• Make changes and commit them in the feature branch.
• Once done developing, switch back to the main branch with git checkout main ; pull the latest version of the repo with git pull https://github.com/WebClub-NITK/incident-2023.git main
• Switch back to the feature branch with git checkout <name-of-your-feature-branch>. Apply the new changes on top of the latest version of the repo with git rebase main
• Resolve merge conflicts (if any)
• Push your feature branch upto your remote repo with git push origin <name-of-your-feature-branch>
• Submit a Pull Request to the main branch.
• After any questions or changes have been resolved, your contribution would be merged in!

Color Scheme

If you found this repo helpful in anyway, considering giving it a star! 🌟