This is a Next.js project bootstrapped with create-next-app.
This website is designed to be completely reusable for every hackathon. The site is hosted using Github Pages. It's accessed at https://uark-acm.github.io/hackathon/.
For each hackathon, open the EDITME.ts file and modify the values listed at the top. Each value has a short description above it with formatting.
The whole site is designed around the EDITME file. You shouldn't have to touch any of the actual code.
Make sure to run the site to preview the changes before publishing.
Try to do this every hackathon. The colors are a bit tricky to get right, but you should still do it. Updating the site colors makes it actually look like the site's been updated for a new hackathon. If there's people checking the site, seeing the new colors gives an immediate alert that a new hackathon is scheduled.
You can edit the colors in styles/colors.module.scss. There's some sites in the Tools section at the bottom.
- Place the new images in the public/img directory
- Update the file names in the EDITME file
The images should automatically scale to fit the boxes.
- Open terminal
- Navigate to the project directory
- Run the following...
npm installYou can preview the site changes one of two ways.
- Storybook - preview individual components
- Development Server - run the site locally
Storybook lets you preview each individual component on it's own. You'll be able to see each section isolated. The development server will run the site locally. You'll see the site in it's entirety as a user.
To run the site in a local development server, run the following...
npm run devOpen http://localhost:3000 with your browser to see the result. The page auto-updates as you make any edits.
Use the following command to open storybook...
npm run storybookStorybook will automatically open in your default browser.
To learn more about Next.js (the framework this site is based on), take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Storybook is a really cool tool to try out. This project just uses it as a sandbox for developing individual components but it's great for just documentation.