This website was designed with a few core criteria
- Modern and professional design
- Easy to edit and maintain without changing the code
- Clone the Git repository by running the following command in your terminal:
git clone <repository-url>
- Checkout a branch to make changes to website without effect main branch. You can use this command to create a new branch and check it out.
git checkout -b <branch-name>
- Navigate to the cloned repository's directory using the
cd
command:
cd <repository-name>
npm install
- Start the development server by running the following command:
npm run dev
- Open your web browser and visit http://localhost:3000 to view the locally running Next.js app. The app should automatically reload when you make changes
To learn more about Next.js, 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.
This project is designed to highly customizable without digging into the code.
the file config/homepage.json
defines the "Recent Projects" section. This should be limited to 3 items.
[
{
"name": "name of project",
"description": "short description of project",
"image": "image.png",
// this file should exsist in the directory
// public/images/sponsors/
"link": "/projects/group/name_of_file"
// path of project file without file extension
// its under
// public/
}, ...
]
the file config/sponsors.json
defines the sponsor section of the homepage. More details are under Change Sponsors section.
The projects page is rendered based on the public/projects
folder. The sub folders within public/projects
create sections for the different projects and the name of the folder is rendered to the site without "_". For every file .pdf and .md file within these sub folders a page is generated and the link is displayed on the projects paged as the name of the file wihtout the extension and "_"s.
The main content of this page is rendered markdown from the config/resources.md
the file config/ourteam.json
defines the team members that show up on the team page.
[
{
"groupName": "name of the group",
"description": "short description of the group's roles",
"members": [
{
"name": "name of team member",
"title": "org title for this team member",
"image": "image.png",
// this file should exsist in the directory
// public/images/team/
"linkedin": "link to their linkedin (optional)",
"github": "link to their github (optional)",
}, ...
]
}, ...
]
the file config/sponsors.json
defines how sponsors will be rendered on the site. The first element in the list will be displayed on the homepage. Every element will be displayed on the sponsors page in the order its listed in the array.
The file should follow this format
[
{
"tier": "first sponsor tier",
"sponsors": [
{
"name": "name of sponsor",
"link": "website link",
"image": "image.png"
// this file should exsist in the directory
// public/images/sponsors/
}, ...
]
}, ...
]
The main content of this page is rendered markdown from the config/join.md
TODO
This website is a Next.js app that statically generates pages that are then deployed to Github Pages Via Github actions.
Styling is done with Tailwind.css
Icons are done with Ionicons 4 through React-Icons
Fonts are done with Next.js and Google Fonts