mirror of
https://github.com/xHyroM/website.git
synced 2024-11-22 06:51:05 +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",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/image": "^0.12.0",
|
||||
"@astrojs/prefetch": "^0.1.1",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
"astro": "^1.6.12",
|
||||
"astro-compress": "^1.1.17",
|
||||
"astro-robots-txt": "^0.3.10",
|
||||
"fireworks-js": "^2.10.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
"tailwindcss": "^3.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/html-minifier": "^4.0.2"
|
||||
}
|
||||
"name": "@example/basics",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/image": "^0.12.0",
|
||||
"@astrojs/prefetch": "^0.1.1",
|
||||
"@astrojs/sitemap": "^1.0.0",
|
||||
"@astrojs/tailwind": "^2.1.3",
|
||||
"@tailwindcss/typography": "^0.5.8",
|
||||
"astro": "^1.6.12",
|
||||
"astro-compress": "^1.1.17",
|
||||
"astro-robots-txt": "^0.3.10",
|
||||
"fireworks-js": "^2.10.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
"tailwindcss": "^3.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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
|
||||
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>
|
||||
<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) => (
|
||||
<li class=" hover:-translate-y-[2px] transition-all">
|
||||
<li class=" transition-all hover:-translate-y-[2px]">
|
||||
<a
|
||||
href={item.link}
|
||||
class="hover:text-[#fbc119] text-neutral-300"
|
||||
class="text-neutral-300 hover:text-[#fbc119]"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
|
|
@ -44,13 +44,21 @@ const navItems = [
|
|||
}
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="hamburger md:hidden block">
|
||||
<button class="hamburger block md:hidden">
|
||||
<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 class="hamburger-close md:hidden hidden z-30">
|
||||
<button class="hamburger-close z-30 hidden md:hidden">
|
||||
<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>
|
||||
</Container>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -20,18 +20,18 @@ const categories = Object.keys(sections);
|
|||
---
|
||||
|
||||
<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">
|
||||
{
|
||||
categories.map((category) => (
|
||||
<li>
|
||||
<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}
|
||||
</h1>
|
||||
<ul>
|
||||
{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">
|
||||
{section.frontmatter.title}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ import Name from "./Name.astro";
|
|||
---
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
<section class="md:ml-6 md:text-left text-center">
|
||||
<section class="text-center md:ml-6 md:text-left">
|
||||
<Name />
|
||||
<Socials />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
<li class="mr-4 ">
|
||||
<a class="h-10 w-10" href={social.link} title={social.name}>
|
||||
<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`}
|
||||
alt={`${social.name} icon`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- Primary Meta Tags -->
|
||||
<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="description" content="Ultimate placeholder text." />
|
||||
|
||||
|
|
@ -37,31 +37,32 @@
|
|||
/>
|
||||
|
||||
<!-- 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.gstatic.com"
|
||||
crossorigin
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;500;700;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body class="bg-dark overflow-x-hidden font-['Source Code Pro']">
|
||||
<body class="font-['Source Code Pro'] overflow-x-hidden bg-dark">
|
||||
<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>
|
||||
import "../scripts/menu.js";
|
||||
import "../scripts/snow.js";
|
||||
|
||||
import { Fireworks } from 'fireworks-js';
|
||||
import { Fireworks } from "fireworks-js";
|
||||
|
||||
export const fireworksContainer = document.querySelector<HTMLDivElement>(
|
||||
'.fireworks-container'
|
||||
)!
|
||||
export const fireworksContainer =
|
||||
document.querySelector<HTMLDivElement>(".fireworks-container")!;
|
||||
|
||||
const fireworks = new Fireworks(fireworksContainer, {
|
||||
rocketsPoint: {
|
||||
|
|
@ -69,8 +70,8 @@
|
|||
max: 100,
|
||||
},
|
||||
autoresize: true,
|
||||
})
|
||||
fireworks.start()
|
||||
});
|
||||
fireworks.start();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -79,11 +80,11 @@
|
|||
::-webkit-scrollbar {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 6px solid rgba(0, 0, 0, 0);
|
||||
background-clip: padding-box;
|
||||
border-radius: 9999px;
|
||||
background-color: #AAAAAA;
|
||||
background-color: #aaaaaa;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ const {
|
|||
<Sidebar />
|
||||
|
||||
<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}
|
||||
</h1>
|
||||
|
||||
<main class="text-white text-2xl prose">
|
||||
<main class="prose text-2xl text-white">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,60 +47,62 @@ const projects: Project[] = [
|
|||
{
|
||||
name: "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",
|
||||
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",
|
||||
link: "https://github.com/xHyroM/hykord",
|
||||
desc: "My @discord client modification."
|
||||
desc: "My @discord client modification.",
|
||||
},
|
||||
{
|
||||
name: "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) {
|
||||
const repository = await (await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`
|
||||
}
|
||||
})).json();
|
||||
const repository = await (
|
||||
await fetch(`https://api.github.com/repos/${project.link.slice(19)}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${import.meta.env.GITHUB_ACCESS_TOKEN}`,
|
||||
},
|
||||
})
|
||||
).json();
|
||||
|
||||
project.stats = {
|
||||
forks: repository.forks,
|
||||
stars: repository.stargazers_count
|
||||
}
|
||||
stars: repository.stargazers_count,
|
||||
};
|
||||
}
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<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
|
||||
</h1>
|
||||
|
||||
<Container>
|
||||
<main class="flex gap-12 flex-wrap justify-center">
|
||||
<main class="flex flex-wrap justify-center gap-12">
|
||||
{
|
||||
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">
|
||||
<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}
|
||||
</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">
|
||||
<img
|
||||
src="/icons/star.svg"
|
||||
alt=""
|
||||
class="w-[21px] h-[21px] translate-y-[1px]"
|
||||
class="h-[21px] w-[21px] translate-y-[1px]"
|
||||
/>
|
||||
<p>{project.stats!.stars}</p>
|
||||
</div>
|
||||
|
|
@ -109,35 +111,35 @@ for (const project of projects) {
|
|||
<img
|
||||
src="/icons/code-fork-solid.svg"
|
||||
alt=""
|
||||
class="w-[21px] h-[21px] translate-y-[1px]"
|
||||
class="h-[21px] w-[21px] translate-y-[1px]"
|
||||
/>
|
||||
<p>{project.stats!.forks}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-neutral-300 mb-6 break-all">
|
||||
<p class="mb-6 break-all text-neutral-300">
|
||||
{project.desc}
|
||||
</p>
|
||||
<div>
|
||||
<a
|
||||
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{" "}
|
||||
<img
|
||||
src="/icons/arrow-up-right.svg"
|
||||
class="ml-2 w-5 mt-[1px] "
|
||||
class="ml-2 mt-[1px] w-5 "
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
src="/icons/book-open.svg"
|
||||
class="w-5 mr-2 "
|
||||
class="mr-2 w-5 "
|
||||
alt=""
|
||||
/>
|
||||
Docs{" "}
|
||||
|
|
|
|||
Loading…
Reference in a new issue