For help you can join our discord click here
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.
✔️ General hackathon Info.
✔️ Registrations links.
✔️ Socials.
✔️ Description and logo.
✔️ Frequently asked questions.
✔️ Prize section.
✔️ Sponsors & Partners.
✔️ Judges.
✔️ Volunteers.
✔️ Organizers.
✔️ Footer
To view a live example, click here.
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.
[email protected] or higher
[email protected] or higher
[email protected] or higher
- Clone the repo.
git clone https://github.com/Abusayid693/Type-writer.git2.Starting the Client application.
cd hackathon-templete
# install all packages
npm install
# start the server
npm startThis will start client app on localhost:3000
In order to deploy the website in github pages you need to set you few things.
Make sure you are on the root directory.
#remove the remote repository
git remote rm origin
git remote -v- Then create your own repository on GitHub (don't initialise repo with README)
- After creating the repository, copy the repo URL.
> 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
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.
/* 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: <i class="first fas fa-4x fa-trophy"></i>,
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 "
},....We have used social and prize sections logos from Fontawesome, you just need to create a free account and copy paste <i class="fab fourth fa-3x fa-wpbeginner"></i> tag from fontawesome.
Feel free to make changes in logos
When you are done with the setup, you should host your website online. We highly recommend to read through the Deploying on Github Pages docs for React.
Move to package.json
// package.json
{
"homepage": "https://limbo-hacks.github.io/Hackathon-website-template/",
"name": "hackathon-website-template",
"version": "0.1.0",
"private": true,
"dependencies": {....
// Change homepage to = "https://{YOUR_USER_NAME}.github.io/{REPO_NAME}/" git add .
git commit -m "Preparing for deployment"
git push origin main
# Deploy command
npm run deploy
# Your website is live in "https://{YOUR_USER_NAME}.github.io/{REPO_NAME}/"
 Rehan |
 Zoheb |
 Aditya |