Initial website setup
- Created project structure with necessary directories and files - Set up Next.js with Tailwind CSS and Font Awesome - Added base HTML structure and layout components - Configured routing and created the homepage - Styled the homepage with basic styling - Added FontAwesome icons - Configured font imports and styles - Integrated HackClub branding elements This commit establishes the foundation for our website, including the project structure, styling, and initial content.
This commit is contained in:
Kartikey S. Chauhan
Conrad Kramer
parent
cb1bc1c8aa
commit
a97063f9b7
18 changed files with 417 additions and 0 deletions
3
site/.eslintrc.json
Normal file
3
site/.eslintrc.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
5
site/.gitignore
vendored
Normal file
5
site/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/node_modules
|
||||
/out/
|
||||
|
||||
/.next/
|
||||
next-env.d.ts
|
||||
6
site/.prettierignore
Normal file
6
site/.prettierignore
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
# Ignore artifacts:
|
||||
build
|
||||
coverage
|
||||
|
||||
# Ignore all HTML files:
|
||||
**/*.html
|
||||
BIN
site/assets/Bold.woff2
Normal file
BIN
site/assets/Bold.woff2
Normal file
Binary file not shown.
BIN
site/assets/Italic.woff2
Normal file
BIN
site/assets/Italic.woff2
Normal file
Binary file not shown.
BIN
site/assets/Regular.woff2
Normal file
BIN
site/assets/Regular.woff2
Normal file
Binary file not shown.
47
site/layout/layout.tsx
Normal file
47
site/layout/layout.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { Space_Mono, Poppins } from "next/font/google";
|
||||
import localFont from "next/font/local";
|
||||
|
||||
const space_mono = Space_Mono({
|
||||
weight: ["400", "700"],
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
variable: "--font-space-mono",
|
||||
});
|
||||
|
||||
const poppins = Poppins({
|
||||
weight: ["400", "500", "600", "700", "800", "900"],
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
variable: "--font-poppins",
|
||||
});
|
||||
|
||||
const phantomSans = localFont({
|
||||
src: [
|
||||
{
|
||||
path: "../assets/Regular.woff2",
|
||||
weight: "400",
|
||||
style: "normal",
|
||||
},
|
||||
{
|
||||
path: "../assets/Italic.woff2",
|
||||
weight: "400",
|
||||
style: "italic",
|
||||
},
|
||||
{
|
||||
path: "../assets/Bold.woff2",
|
||||
weight: "700",
|
||||
style: "normal",
|
||||
},
|
||||
],
|
||||
variable: "--font-phantom-sans",
|
||||
});
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
className={`${space_mono.variable} ${poppins.variable} ${phantomSans.variable}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
6
site/next.config.js
Normal file
6
site/next.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: "export",
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
36
site/package.json
Normal file
36
site/package.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "site",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.4.2",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@headlessui/react": "^1.7.17",
|
||||
"@headlessui/tailwindcss": "^0.2.0",
|
||||
"@types/node": "20.5.8",
|
||||
"@types/react": "18.2.21",
|
||||
"@types/react-dom": "18.2.7",
|
||||
"autoprefixer": "10.4.15",
|
||||
"eslint": "8.48.0",
|
||||
"eslint-config-next": "13.4.19",
|
||||
"next": "13.4.19",
|
||||
"postcss": "8.4.29",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"tailwindcss": "3.3.3",
|
||||
"typescript": "5.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-tailwindcss": "^0.5.4"
|
||||
}
|
||||
}
|
||||
14
site/pages/_app.tsx
Normal file
14
site/pages/_app.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import Layout from "@/layout/layout";
|
||||
import type { AppProps } from "next/app";
|
||||
import { config } from "@fortawesome/fontawesome-svg-core";
|
||||
import "@fortawesome/fontawesome-svg-core/styles.css";
|
||||
config.autoAddCss = false;
|
||||
import "static/globals.css";
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
13
site/pages/_document.tsx
Normal file
13
site/pages/_document.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body className="bg-backgroundBlack text-white">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
154
site/pages/index.tsx
Normal file
154
site/pages/index.tsx
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
import { faGithub } from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import Head from "next/head";
|
||||
import {
|
||||
faChevronDown,
|
||||
faChevronUp,
|
||||
faUpRightFromSquare,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
export default function Page() {
|
||||
const [chevron, setChevron] = useState(false);
|
||||
const menuButtonRef = useRef<HTMLButtonElement | null>(null);
|
||||
const toggleDropdown = () => {
|
||||
setChevron(!chevron);
|
||||
};
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
menuButtonRef.current &&
|
||||
!menuButtonRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setChevron(false);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("click", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Burrow</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Burrow is an open-source tool for bypassing firewalls, built by teenagers at Hack Club."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
</Head>
|
||||
<div className="flex min-h-screen items-center justify-center">
|
||||
<div className="mb-48 text-center">
|
||||
<h1 className="font-PhantomSans text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl">
|
||||
<span className="font-bold text-hackClubRed">Burrow</span> Through{" "}
|
||||
Firewalls
|
||||
</h1>
|
||||
<div className="mx-auto my-2 w-11/12 font-PhantomSans text-lg md:my-10 md:w-3/4 lg:text-xl xl:text-2xl 2xl:text-3xl">
|
||||
<p>
|
||||
Burrow is an open source tool for burrowing through firewalls,
|
||||
built by teenagers at{" "}
|
||||
<span className="text-hackClubRed underline">
|
||||
<a href="https://www.hackclub.com/" target="_blank">
|
||||
Hack Club.
|
||||
</a>
|
||||
</span>{" "}
|
||||
<span className="rounded-md bg-burrowHover p-0.5 font-SpaceMono text-hackClubBlue">
|
||||
burrow
|
||||
</span>{" "}
|
||||
is a Rust-based VPN for getting around restrictive Internet
|
||||
censors.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center">
|
||||
<div className="flex w-full justify-center gap-x-4 md:w-auto">
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<div>
|
||||
<Menu.Button
|
||||
onClick={() => toggleDropdown()}
|
||||
ref={menuButtonRef}
|
||||
className="w-50 h-12 rounded-2xl bg-hackClubRed px-3 font-SpaceMono hover:scale-105 md:h-12 md:w-auto md:rounded-3xl md:text-xl 2xl:h-16 2xl:text-2xl "
|
||||
>
|
||||
Install for Linux
|
||||
{chevron ? (
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronUp}
|
||||
className="pl-1.5 text-lg"
|
||||
/>
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
icon={faChevronDown}
|
||||
className="pl-1.5 text-lg"
|
||||
/>
|
||||
)}
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Menu.Items
|
||||
as="div"
|
||||
className="absolute right-0 z-10 mt-2 h-auto w-auto origin-top-right divide-black rounded-md bg-hackClubBlueShade font-SpaceMono text-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-xl 2xl:text-2xl"
|
||||
>
|
||||
<div className="divide-y-2 divide-hackClubRed px-1 py-1">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a className="block px-4 py-2 hover:rounded-lg hover:bg-slate-600">
|
||||
Install for Windows
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<a className="block px-4 py-2 hover:rounded-lg hover:bg-slate-600">
|
||||
Install for MacOS
|
||||
</a>
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
<a>
|
||||
<button className="h-12 rounded-2xl border-2 border-hackClubRed bg-transparent px-3 font-SpaceMono text-lg text-hackClubRed hover:scale-110 md:h-12 md:rounded-3xl md:text-xl 2xl:h-16 2xl:text-2xl">
|
||||
Docs
|
||||
<FontAwesomeIcon
|
||||
icon={faUpRightFromSquare}
|
||||
className="pl-3"
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-4 flex w-full justify-center hover:scale-110 md:mt-0 md:w-auto md:pl-4">
|
||||
<a href="https://github.com/hackclub/burrow" target="_blank">
|
||||
<button className="h-12 w-40 rounded-xl border-2 border-hackClubRed bg-transparent px-3 font-SpaceMono text-hackClubRed md:h-12 md:w-auto md:rounded-3xl md:text-xl 2xl:h-16 2xl:text-2xl">
|
||||
<FontAwesomeIcon icon={faGithub} className="pr-3" />
|
||||
Contribute
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{/* Footer */}
|
||||
{/* <div className="fixed bottom-0 mb-20 left-[25vw] md:left-[40vw] lg:left-[44vw]">
|
||||
<a href="https://hackclub.com/" target="_blank">
|
||||
<button className="flex items-center bg-transparent border-2 border-burrowStroke text-hackClubRed font-SpaceMono text-lg md:text-2xl rounded-xl md:rounded-2xl h-12 md:h-16 px-3">
|
||||
<Image
|
||||
src="/hackclub.svg"
|
||||
width={35}
|
||||
height={35}
|
||||
className="mx-2"
|
||||
alt="Hack Club's logo"
|
||||
/>
|
||||
By Hack Club
|
||||
</button>
|
||||
</a>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
6
site/postcss.config.js
Normal file
6
site/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
3
site/prettier.config.js
Normal file
3
site/prettier.config.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: ["prettier-plugin-tailwindcss"],
|
||||
};
|
||||
66
site/public/hackclub.svg
Normal file
66
site/public/hackclub.svg
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="256" height="256">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M128 256C230.4 256 256 230.4 256 128C256 25.6 230.4 0 128 0C25.6 0 0 25.6 0 128C0 230.4 25.6 256 128 256Z" fill="black"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<g filter="url(#filter0_ii)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M128 256C230.4 256 256 230.4 256 128C256 25.6 230.4 0 128 0C25.6 0 0 25.6 0 128C0 230.4 25.6 256 128 256Z" fill="url(#paint0_radial)"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_ddii)">
|
||||
<path d="M115.103 48.3682C115.103 47.1299 113.989 46.1892 112.769 46.3965L81.6652 51.6777C80.7036 51.8409 80 52.6741 80 53.6494V205.085C80 206.189 80.8954 207.085 82 207.085H113.103C114.208 207.085 115.103 206.189 115.103 205.085V148.397C115.103 131.127 124.261 120.429 131.892 120.429C138.76 120.429 140.744 127.307 140.744 137.699V205.085C140.744 206.189 141.639 207.085 142.744 207.085H174C175.105 207.085 176 206.189 176 205.085V132.656C176 109.12 167.148 93.9892 144.102 93.9892C134.852 93.9892 125.825 96.2163 118.633 101.146C117.205 102.125 115.103 101.161 115.103 99.4284V48.3682Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_ii" x="-6" y="-6" width="268" height="268" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="6" dy="6"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-6" dy="-6"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
|
||||
</filter>
|
||||
<filter id="filter1_ddii" x="64" y="42.3677" width="128" height="192.717" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="12"/>
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.125 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.125 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="3"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.215686 0 0 0 0 0.313726 0 0 0 0.5 0"/>
|
||||
<feBlend mode="normal" in2="effect3_innerShadow" result="effect4_innerShadow"/>
|
||||
</filter>
|
||||
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(58.6367) scale(245.935)">
|
||||
<stop stop-color="#FF8C37"/>
|
||||
<stop offset="1" stop-color="#EC3750"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0">
|
||||
<rect width="256" height="256" fill="white" transform="translate(256) rotate(90)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
3
site/static/globals.css
Normal file
3
site/static/globals.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
28
site/tailwind.config.ts
Normal file
28
site/tailwind.config.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
backgroundBlack: "#17171D",
|
||||
hackClubRed: "#EC3750",
|
||||
hackClubBlueShade: "#32323D",
|
||||
hackClubBlue: "#338EDA",
|
||||
burrowStroke: "#595959",
|
||||
burrowHover: "#3D3D3D",
|
||||
},
|
||||
fontFamily: {
|
||||
SpaceMono: ["var(--font-space-mono)"],
|
||||
Poppins: ["var(--font-poppins)"],
|
||||
PhantomSans: ["var(--font-phantom-sans)"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@headlessui/tailwindcss")({ prefix: "ui" })],
|
||||
};
|
||||
export default config;
|
||||
27
site/tsconfig.json
Normal file
27
site/tsconfig.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue