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

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.

Website Sections

✔️ 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.

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.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

Clone the repo.

git clone https://github.com/Abusayid693/Type-writer.git

2.Starting the Client application.

cd hackathon-templete 

# 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.

#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

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.

/* 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  = [
  [
    [
      {
        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, 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

Deployment

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}/"