mirror of
https://github.com/xHyroM/website.git
synced 2024-11-14 19:48:06 +01:00
tailwind class sorting
This commit is contained in:
OLIMINATOR
parent
13ae401363
commit
52a75e2acd
10 changed files with 13364 additions and 13315 deletions
26487
package-lock.json
generated
26487
package-lock.json
generated
File diff suppressed because it is too large
Load diff
57
package.json
57
package.json
|
|
@ -1,29 +1,32 @@
|
||||||
{
|
{
|
||||||
"name": "@example/basics",
|
"name": "@example/basics",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "^0.12.0",
|
"@astrojs/image": "^0.12.0",
|
||||||
"@astrojs/prefetch": "^0.1.1",
|
"@astrojs/prefetch": "^0.1.1",
|
||||||
"@astrojs/sitemap": "^1.0.0",
|
"@astrojs/sitemap": "^1.0.0",
|
||||||
"@astrojs/tailwind": "^2.1.3",
|
"@astrojs/tailwind": "^2.1.3",
|
||||||
"@tailwindcss/typography": "^0.5.8",
|
"@tailwindcss/typography": "^0.5.8",
|
||||||
"astro": "^1.6.12",
|
"astro": "^1.6.12",
|
||||||
"astro-compress": "^1.1.17",
|
"astro-compress": "^1.1.17",
|
||||||
"astro-robots-txt": "^0.3.10",
|
"astro-robots-txt": "^0.3.10",
|
||||||
"fireworks-js": "^2.10.0",
|
"fireworks-js": "^2.10.0",
|
||||||
"html-minifier": "^4.0.0",
|
"html-minifier": "^4.0.0",
|
||||||
"tailwindcss": "^3.2.4"
|
"tailwindcss": "^3.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/html-minifier": "^4.0.2"
|
"@types/html-minifier": "^4.0.2",
|
||||||
}
|
"prettier": "2.8.1",
|
||||||
|
"prettier-plugin-astro": "^0.7.1",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.2.1"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,21 +21,21 @@ const navItems = [
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="text-white text-xl h-16 border-b-[1px] border-neutral-800">
|
<header class="h-16 border-b-[1px] border-neutral-800 text-xl text-white">
|
||||||
<Container
|
<Container
|
||||||
class="flex justify-around md:justify-between items-center h-full"
|
class="flex justify-around md:justify-between items-center h-full"
|
||||||
>
|
>
|
||||||
<a class="font-extrabold text-2xl" href="/">xHyroM</a>
|
<a class="text-2xl font-extrabold" href="/">xHyroM</a>
|
||||||
<nav>
|
<nav>
|
||||||
<ul
|
<ul
|
||||||
class="absolute top-0 left-0 md:relative nav-links gap-10 md:flex hidden md:flex-row bg-gray md:bg-transparent w-full [&_li]:my-2 [&_li]:ml-4 border-b-[1px] md:border-b-0 border-neutral-800 transition-all"
|
class="nav-links absolute top-0 left-0 hidden w-full gap-10 border-b-[1px] border-neutral-800 bg-gray transition-all md:relative md:flex md:flex-row md:border-b-0 md:bg-transparent [&_li]:my-2 [&_li]:ml-4"
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
navItems.map((item) => (
|
navItems.map((item) => (
|
||||||
<li class=" hover:-translate-y-[2px] transition-all">
|
<li class=" transition-all hover:-translate-y-[2px]">
|
||||||
<a
|
<a
|
||||||
href={item.link}
|
href={item.link}
|
||||||
class="hover:text-[#fbc119] text-neutral-300"
|
class="text-neutral-300 hover:text-[#fbc119]"
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -44,13 +44,21 @@ const navItems = [
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<button class="hamburger md:hidden block">
|
<button class="hamburger block md:hidden">
|
||||||
<span class="sr-only">menu</span>
|
<span class="sr-only">menu</span>
|
||||||
<img src="/icons/menu.svg" alt="hambuerger menu icon" class="h-[23px] w-[24px]" />
|
<img
|
||||||
|
src="/icons/menu.svg"
|
||||||
|
alt="hambuerger menu icon"
|
||||||
|
class="h-[23px] w-[24px]"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button class="hamburger-close md:hidden hidden z-30">
|
<button class="hamburger-close z-30 hidden md:hidden">
|
||||||
<span class="sr-only">menu</span>
|
<span class="sr-only">menu</span>
|
||||||
<img src="/icons/x.svg" alt="hambuerger menu icon" class="h-[23px] w-[24px]" />
|
<img
|
||||||
|
src="/icons/x.svg"
|
||||||
|
alt="hambuerger menu icon"
|
||||||
|
class="h-[23px] w-[24px]"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</Container>
|
</Container>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -20,18 +20,18 @@ const categories = Object.keys(sections);
|
||||||
---
|
---
|
||||||
|
|
||||||
<aside aria-label="Sidebar">
|
<aside aria-label="Sidebar">
|
||||||
<nav class="w-full mr-16 py-4">
|
<nav class="mr-16 w-full py-4">
|
||||||
<ul class="overflow-y-auto overflow-x-visible">
|
<ul class="overflow-y-auto overflow-x-visible">
|
||||||
{
|
{
|
||||||
categories.map((category) => (
|
categories.map((category) => (
|
||||||
<li>
|
<li>
|
||||||
<div class="pt-5">
|
<div class="pt-5">
|
||||||
<h1 class="text-white text-2xl w-full font-extrabold ">
|
<h1 class="w-full text-2xl font-extrabold text-white ">
|
||||||
{category}
|
{category}
|
||||||
</h1>
|
</h1>
|
||||||
<ul>
|
<ul>
|
||||||
{sections[category].map((section) => (
|
{sections[category].map((section) => (
|
||||||
<li class="text-white my-2 hover:bg-white/20 rounded-sm p-2 transition-colors duration-150">
|
<li class="my-2 rounded-sm p-2 text-white transition-colors duration-150 hover:bg-white/20">
|
||||||
<a href={section.url} class="px-4">
|
<a href={section.url} class="px-4">
|
||||||
{section.frontmatter.title}
|
{section.frontmatter.title}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,12 @@ import Name from "./Name.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<main
|
<main
|
||||||
class="mt-24 md:mt-64 flex flex-col md:flex-row justify-center items-center"
|
class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
|
||||||
>
|
>
|
||||||
<div class="flex justify-cener items-center">
|
<div class="justify-cener flex items-center">
|
||||||
<Image src={logo} width={200} height={200} alt="descriptive text" />
|
<Image src={logo} width={200} height={200} alt="descriptive text" />
|
||||||
</div>
|
</div>
|
||||||
<section class="md:ml-6 md:text-left text-center">
|
<section class="text-center md:ml-6 md:text-left">
|
||||||
<Name />
|
<Name />
|
||||||
<Socials />
|
<Socials />
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<div class="flex drop-shadow-yellow">
|
<div class="flex drop-shadow-yellow">
|
||||||
<h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
|
<h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -23,13 +23,13 @@ const socials = [
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<ul class="flex text-white my-5 md:justify-start justify-center">
|
<ul class="my-5 flex justify-center text-white md:justify-start">
|
||||||
{
|
{
|
||||||
socials.map((social) => (
|
socials.map((social) => (
|
||||||
<li class="mr-4 ">
|
<li class="mr-4 ">
|
||||||
<a class="h-10 w-10" href={social.link} title={social.name}>
|
<a class="h-10 w-10" href={social.link} title={social.name}>
|
||||||
<img
|
<img
|
||||||
class="h-8 w-8 hover:-translate-y-1 transition-all"
|
class="h-8 w-8 transition-all hover:-translate-y-1"
|
||||||
src={`/icons/${social.icon}.svg`}
|
src={`/icons/${social.icon}.svg`}
|
||||||
alt={`${social.name} icon`}
|
alt={`${social.name} icon`}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<!-- Primary Meta Tags -->
|
<!-- Primary Meta Tags -->
|
||||||
<title>xHyroM</title>
|
<title>xHyroM</title>
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<meta name="title" content="xHyroM" />
|
<meta name="title" content="xHyroM" />
|
||||||
<meta name="description" content="Ultimate placeholder text." />
|
<meta name="description" content="Ultimate placeholder text." />
|
||||||
|
|
||||||
|
|
@ -37,31 +37,32 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- CSP -->
|
<!-- CSP -->
|
||||||
<meta http-equiv="Content-Security-Policy" content="img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'" />
|
<meta
|
||||||
|
http-equiv="Content-Security-Policy"
|
||||||
|
content="img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
|
||||||
|
/>
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
rel="preconnect"
|
|
||||||
href="https://fonts.gstatic.com"
|
|
||||||
crossorigin
|
|
||||||
/>
|
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-dark overflow-x-hidden font-['Source Code Pro']">
|
<body class="font-['Source Code Pro'] overflow-x-hidden bg-dark">
|
||||||
<slot />
|
<slot />
|
||||||
<div class='fireworks-container h-full w-full absolute top-0 left-0 z-[-1000]' />
|
<div
|
||||||
|
class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
<script>
|
<script>
|
||||||
import "../scripts/menu.js";
|
import "../scripts/menu.js";
|
||||||
import "../scripts/snow.js";
|
import "../scripts/snow.js";
|
||||||
|
|
||||||
import { Fireworks } from 'fireworks-js';
|
import { Fireworks } from "fireworks-js";
|
||||||
|
|
||||||
export const fireworksContainer = document.querySelector<HTMLDivElement>(
|
export const fireworksContainer =
|
||||||
'.fireworks-container'
|
document.querySelector<HTMLDivElement>(".fireworks-container")!;
|
||||||
)!
|
|
||||||
|
|
||||||
const fireworks = new Fireworks(fireworksContainer, {
|
const fireworks = new Fireworks(fireworksContainer, {
|
||||||
rocketsPoint: {
|
rocketsPoint: {
|
||||||
|
|
@ -69,8 +70,8 @@
|
||||||
max: 100,
|
max: 100,
|
||||||
},
|
},
|
||||||
autoresize: true,
|
autoresize: true,
|
||||||
})
|
});
|
||||||
fireworks.start()
|
fireworks.start();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -84,6 +85,6 @@
|
||||||
border: 6px solid rgba(0, 0, 0, 0);
|
border: 6px solid rgba(0, 0, 0, 0);
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
background-color: #AAAAAA;
|
background-color: #aaaaaa;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -22,11 +22,11 @@ const {
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
|
|
||||||
<div class="w-full p-8">
|
<div class="w-full p-8">
|
||||||
<h1 class="text-white text-5xl py-10 font-extrabold">
|
<h1 class="py-10 text-5xl font-extrabold text-white">
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<main class="text-white text-2xl prose">
|
<main class="prose text-2xl text-white">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -47,60 +47,62 @@ const projects: Project[] = [
|
||||||
{
|
{
|
||||||
name: "Roles Bot",
|
name: "Roles Bot",
|
||||||
link: "https://github.com/xHyroM/roles-bot",
|
link: "https://github.com/xHyroM/roles-bot",
|
||||||
desc: "Discord bot for \"button\" roles, using Cloudflare Workers.",
|
desc: 'Discord bot for "button" roles, using Cloudflare Workers.',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Bun Discord Bot",
|
name: "Bun Discord Bot",
|
||||||
link: "https://github.com/xHyroM/bun-discord-bot",
|
link: "https://github.com/xHyroM/bun-discord-bot",
|
||||||
desc: "Official serverless discord bot for bun discord server."
|
desc: "Official serverless discord bot for bun discord server.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "hykord",
|
name: "hykord",
|
||||||
link: "https://github.com/xHyroM/hykord",
|
link: "https://github.com/xHyroM/hykord",
|
||||||
desc: "My @discord client modification."
|
desc: "My @discord client modification.",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "frog",
|
name: "frog",
|
||||||
link: "https://github.com/xHyroM/frog",
|
link: "https://github.com/xHyroM/frog",
|
||||||
desc: "Frog is an extremely simple language based on the monkey language."
|
desc: "Frog is an extremely simple language based on the monkey language.",
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
for (const project of projects) {
|
for (const project of projects) {
|
||||||
const repository = await (await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
|
const repository = await (
|
||||||
headers: {
|
await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
|
||||||
'Authorization': `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`
|
headers: {
|
||||||
}
|
Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
|
||||||
})).json();
|
},
|
||||||
|
})
|
||||||
|
).json();
|
||||||
|
|
||||||
project.stats = {
|
project.stats = {
|
||||||
forks: repository.forks,
|
forks: repository.forks,
|
||||||
stars: repository.stargazers_count
|
stars: repository.stargazers_count,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<h1 class="text-white text-5xl w-full text-center py-32 font-extrabold">
|
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
|
||||||
Projects
|
Projects
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<Container>
|
<Container>
|
||||||
<main class="flex gap-12 flex-wrap justify-center">
|
<main class="flex flex-wrap justify-center gap-12">
|
||||||
{
|
{
|
||||||
projects.map((project) => (
|
projects.map((project) => (
|
||||||
<section class="flex flex-col md:w-96 w-80 min-h-max border-[1px] border-neutral-800 bg-gray p-6 rounded-md">
|
<section class="bg-gray flex min-h-max w-80 flex-col rounded-md border-[1px] border-neutral-800 p-6 md:w-96">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<h2 class="text-3xl font-bold text-white mb-4 break-words">
|
<h2 class="mb-4 break-words text-3xl font-bold text-white">
|
||||||
{project.name}
|
{project.name}
|
||||||
</h2>
|
</h2>
|
||||||
<div class="bg-neutral-800 text-neutral-300 flex justify-center items-center h-fit rounded-lg py-1 px-4 ml-4 gap-2 translate-y-1">
|
<div class="ml-4 flex h-fit translate-y-1 items-center justify-center gap-2 rounded-lg bg-neutral-800 py-1 px-4 text-neutral-300">
|
||||||
<div class="flex gap-1">
|
<div class="flex gap-1">
|
||||||
<img
|
<img
|
||||||
src="/icons/star.svg"
|
src="/icons/star.svg"
|
||||||
alt=""
|
alt=""
|
||||||
class="w-[21px] h-[21px] translate-y-[1px]"
|
class="h-[21px] w-[21px] translate-y-[1px]"
|
||||||
/>
|
/>
|
||||||
<p>{project.stats!.stars}</p>
|
<p>{project.stats!.stars}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -109,35 +111,35 @@ for (const project of projects) {
|
||||||
<img
|
<img
|
||||||
src="/icons/code-fork-solid.svg"
|
src="/icons/code-fork-solid.svg"
|
||||||
alt=""
|
alt=""
|
||||||
class="w-[21px] h-[21px] translate-y-[1px]"
|
class="h-[21px] w-[21px] translate-y-[1px]"
|
||||||
/>
|
/>
|
||||||
<p>{project.stats!.forks}</p>
|
<p>{project.stats!.forks}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="text-neutral-300 mb-6 break-all">
|
<p class="mb-6 break-all text-neutral-300">
|
||||||
{project.desc}
|
{project.desc}
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<a
|
<a
|
||||||
href={project.link}
|
href={project.link}
|
||||||
class="inline-flex bottom-0 w-fit py-2 px-6 text-neutral-300 bg-neutral-800 rounded-md hover:bg-neutral-700 transition-colors duration-100 [&_img]:hover:translate-x-[2px] [&_img]:transition-all"
|
class="bottom-0 inline-flex w-fit rounded-md bg-neutral-800 py-2 px-6 text-neutral-300 transition-colors duration-100 hover:bg-neutral-700 [&_img]:transition-all [&_img]:hover:translate-x-[2px]"
|
||||||
>
|
>
|
||||||
GitHub{" "}
|
GitHub{" "}
|
||||||
<img
|
<img
|
||||||
src="/icons/arrow-up-right.svg"
|
src="/icons/arrow-up-right.svg"
|
||||||
class="ml-2 w-5 mt-[1px] "
|
class="ml-2 mt-[1px] w-5 "
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href={project.link}
|
href={project.link}
|
||||||
class=" translate-y-[6px] inline-flex bottom-0 w-fit py-2 px-6 text-neutral-300 transition-all duration-100 hover:text-neutral-200 hover:-translate-y-[-4px]"
|
class=" bottom-0 inline-flex w-fit translate-y-[6px] py-2 px-6 text-neutral-300 transition-all duration-100 hover:-translate-y-[-4px] hover:text-neutral-200"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="/icons/book-open.svg"
|
src="/icons/book-open.svg"
|
||||||
class="w-5 mr-2 "
|
class="mr-2 w-5 "
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
Docs{" "}
|
Docs{" "}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue