Tailwind CSS home page

Showcase

GitHub Next

Screenshot of the GitHub Next website header. There’s a black Octocat logo with a star orbiting it. There’s a headline and a paragraph of text introducing GitHub Next. Below is a horizontal site navigation bar with links to different homepage sections.
Technologies
Tailwind CSS, Next.js, React
Date
URL
githubnext.com
Go to website

GitHub Next

Researching the future of software development at GitHub.

GitHub Next is where GitHub investigates and explores what the future of software development will look like. In addition to research projects, GitHub Next also host talks with outside experts and influencers. The GitHub Next website is built on Next.js and uses Tailwind CSS as its CSS framework.

Screenshot of the team section of the GitHub Next homepage with a 4-column grid of team profiles. Each profile contains a round headshot, a name, a title, and a link to their GitHub profile.
Team section with round headshots and a link to each team member’s GitHub profile. The site menu is sticky throughout the site as you scroll.
Screenshot of the Events section of the GitHub Next homepage with a 3-column grid of white cards on a dark background. Each card contains an event title, a date, and the avatars of the team members involved.
Events section with a 3-column grid showing past events at which the GitHub Next team has given talks.
Screenshot of the ‘Speakers Series 2020’ section of the GitHub Next website, with a 3-column grid showing profile images of past speakers with their name, company name, and the date they spoke listed below.
Speakers section with a 3-column grid of outside speakers that have given talks as a part of GitHub Next.
Screenshot of the Projects section of the GitHub Next homepage on a mobile device showing two cards, each containing information about a project.
Screenshot of a project page on the GitHub Next website on a mobile device with a headline, introductory paragraph, and some metadata and sharing options below.
Screenshot of the Team section on the GitHub Next homepage on a mobile device showing two team profiles with a round headshot, name, title, and link to their GitHub profile below.
The GitHub Next website experience on mobile devices.
Screenshot of a talk page on the GitHub Next website with the speaker’s name as the headline and their title and company as the subheadline. The second headline contains the talk’s title, and there is a YouTube video of the talk below.
Each talk given by an outside speaker has its own page. It features a YouTube video of the talk and a written article below.
Screenshot of a project page on the GitHub Next website with the project name as a large headline and a description as the subheadline below it. Below the headline is metadata about the project, such as who has been working on it.
Each project has a detailed page describing the research and project work.
Screenshot of an expandable table of contents overlay on a project page. The project’s name is listed to the left, and the table of contents is on the right. There’s a button with an ‘x’ to close the table of contents overlay.
Each project page has its own expandable table of contents that works similarly to a traditional hamburger menu.