https://github.com/abusayid693/hackathon-website-template
A cool website template for your upcoming hackathon.
https://github.com/abusayid693/hackathon-website-template
cool-template hackathon-website html-template html-templates react react-template template template-project templates website-template website-templates
Last synced: 3 months ago
JSON representation
A cool website template for your upcoming hackathon.
- Host: GitHub
- URL: https://github.com/abusayid693/hackathon-website-template
- Owner: Abusayid693
- License: mit
- Created: 2021-06-27T20:53:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-01-30T18:55:07.000Z (about 1 year ago)
- Last Synced: 2024-05-01T16:26:17.572Z (12 months ago)
- Topics: cool-template, hackathon-website, html-template, html-templates, react, react-template, template, template-project, templates, website-template, website-templates
- Language: JavaScript
- Homepage: https://lovely-bublanina-c45f81.netlify.app
- Size: 57.8 MB
- Stars: 92
- Watchers: 1
- Forks: 77
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hackathon website Folio template ⚡️
## A clean, beautiful and mobile responsive portfolio template for your upcoming hackathon!
#### Demo view
**For help you can join our discord [click here](https://discord.com/invite/8XJSzmtWPp)**
Just change `src/Module/general.js` to get your hackathon portfolio. Customize and your sponsors, team-member and judges by adding images in `src/Module/Assets` . Feel free to use it as-is or personalize it as much as you want.
## [Prerequisites]()
- Node js : 8.1.0
- NPM : 8.1.0
## [Netlify configuration variables](https://docs.netlify.com/configure-builds/environment-variables/)
- CI: false
- NODE_VERSION: 8.1.0
- NPM : 8.1.0
## Table of Contents
- [Sections]()
- [Getting started]()
- [Change and Customize]()
- [Deployment]()
- [Technologies Used]()
- [Contributors]()
---
## [Website Sections]()
✔️ General hackathon Info.
✔️ Hackathon calender with schedule.
✔️ Registrations links.
✔️ Socials.
✔️ Description and logo.
✔️ Frequently asked questions.
✔️ Prize section.
✔️ Sponsors & Partners.
✔️ Judges.
✔️ Volunteers.
✔️ Organizers.
✔️ Footer
To view a live example, [click here](https://limbohacks.tech).
## [Getting Started]()
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
You'll need `Git` and `Node.js` (which comes with npm) installed on your computer.
```bash
[email protected] or higher
[email protected] or higher
[email protected] or higher
```
1. Clone the repo.
```bash
git clone https://github.com/Abusayid693/Hackathon-website-template.git
```
2.Starting the Client application.
```bash
cd Hackathon-website-template
# install all packages
npm install
# start the server
npm start
```
`This will start client app on localhost:3000`
## [Linking Portfolio to your Github]()
In order to deploy the website in github pages you need to set you few things.
Make sure you are on the root directory.
```bash
#remove the remote repository
git remote rm origin
git remote -v
```
1. Then create your [own repository on GitHub]() (don't initialise repo with README)
2. After creating the repository, copy the repo URL.
```bash
> git remote add origin "YOUR REPO URL"
# you should see your repo here
> git remote -v
# Now you can push/publish it to your own repository!
git push origin master
# Wolla! It’s committed to your GitHub repository.
```
If you are having any difficulties [click here](https://dev.to/dance2die/push-git-cloned-repository-to-your-own-on-github-1ili)
## [Change and customize every section according to your need]()
Now once you have project running on your local environment and repo in github you are all set to customize and publish your hackathon website.
Personalize page content in `/src/Module/general.js` & modify it as per your need. You will also need to add your sponsors, team-members, judges, volunteer images in assets or you can provide a cloud link, dont worry we will guide you in the section.
#### **Please follow the instructions given in `src/Module/general.js` file.**
```javascript
/* Change this file to get your hackthon Porfolio */
import boy from "./Assets/boy.png";
/* Change top section of the website */
const TOP_SECTION = {
TITLE: "Join Limbo Hacks",
// Typing effect
Typed_effect: ["24 hours of creation", "Win awesome prizes"],
SHORT_DESCRIPTION:
"Join us on 20th November 2021 with over 300 students from across the nation for 24 hours of creation, innovation, & fun.",
// This image will be used for top section right side image
IMG_SRC:boy ,
DISCORD_LINK: "",
JUDGES_FORM_LINK:"",
HACKERS_REGISTRATION_FORM_LINK:""
};
/* Add all your social media handels*/
const SOCIALS = {
instagram: "https://www.instagram.com/limbohacks/",
discord: "https://discord.com/invite/8XJSzmtWPp",
linkedin: "https://www.linkedin.com/company/limbo-hacks/",
twitter: "https://twitter.com/HacksLimbo",
devpost: "https://limbo-hacks-12968.devpost.com/",
email: "mailto:[email protected]",
mail:"[email protected]"
};
/* Customize middle section of your website */
const MIDDLE_SECTION = {
TITLE: "What is Limbo hacks?",
LONG_DESCRIPTION:
"Hack Limbo is 24 hour long running hackathon will be held on November 20th & 21th ........",
// keep LOGO_EFFECT to false
LOGO_EFFECT: false,
// Your hackathon logo src
LOGO: ""
};
/* Customize footer section */
const FOOTER = {
VOLUNTEERING_FORM: {
required: true,
src: ""
},
JOIN_TEAM: {
required: true,
src: ""
}
{........
};
/* Add your prize descriptions,
*INFORTANT : please follow the instructions provided in Genereal.js file above Prizeinfo */
const Prizeinfo = [
[
//Array 1
{
icon: ,
type: "overall First",
content:
"First Overall prize .."
},{....
/*Add your team members
*INFORTANT : please follow the instructions provided in Genereal.js file above TeamInfo */
/*Put your team member images in Assets/team and simply import them*/
import Rehan from "./Assets/team/me.png";
import moon from "./Assets/team/moon.png";
const TeamInfo = [
[
//Array 1
{
Name: "Rehan",
role: "Organizer",
github: "",
linkedin: "",
img: Rehan
},
/*Put your sponsors logos in Assets/sponsors and simply import them*/
import interviewCake from "./Assets/sponsorsLogos/interview-cake.jpg";
import echoAR from "./Assets/sponsorsLogos/echoAR.png";
const sponsorLogos = [
[{src: interviewCake}, {src: echoAR}, {src: echoAR}], //Array 1
[....
/* Add or change frequently asked questions */
const frequentlyAskedQuestions = [
[
[
{
label: "What is a hackathon?",
content:
'Icons are everywhere
},
{
label: "I have no idea what coding is?",
content: "Thats why you must attend our "
},....
```
#### Using General logos.
We have used social and prize sections logos from [Fontawesome](http://fontawesome.com), you just need to create a free account and copy paste ` ` tag from fontawesome.
Feel free to make changes in logos
## [Meta Tags]()
Change meta tags content in `/public/index.html`
```html
```
## [Technologies Used]()
- [React]()
- [Bootstrap]()
- [React Routers]()
- [Material UI]()
## Project Maintainers
