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
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.
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
Starting the Client application.
cd hackathon-templete
# install all packages
npm install
# start the server
npm startThis will start client app on localhost:3000
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:hello@limbohacks.tech",
mail:"hello@limbohacks.tech"
};
/* 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 = [
[
{
q: "What is a hackathon?",
ans: "Hackathons are community events, where you get to interact with students from all around the world as well as forming teams to create future tech"
},
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 |
 Zoheb |