mirror of
https://github.com/xHyroM/website.git
synced 2024-11-22 06:51:05 +01:00
build: prettier
This commit is contained in:
xHyroM
parent
c79bd6ccae
commit
8a5009eeaf
10 changed files with 170 additions and 173 deletions
|
|
@ -1,11 +1,14 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: [require.resolve("prettier-plugin-astro")],
|
plugins: [
|
||||||
overrides: [
|
require.resolve("prettier-plugin-astro"),
|
||||||
{
|
require.resolve("prettier-plugin-tailwindcss"),
|
||||||
files: "*.astro",
|
],
|
||||||
options: {
|
overrides: [
|
||||||
parser: "astro",
|
{
|
||||||
},
|
files: "*.astro",
|
||||||
},
|
options: {
|
||||||
],
|
parser: "astro",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { Fireworks } from "fireworks-js";
|
import { Fireworks } from "fireworks-js";
|
||||||
|
|
||||||
export const fireworksContainer =
|
export const fireworksContainer = document.querySelector<HTMLDivElement>(
|
||||||
document.querySelector<HTMLDivElement>(".fireworks-container")!;
|
".fireworks-container"
|
||||||
|
)!;
|
||||||
|
|
||||||
const fireworks = new Fireworks(fireworksContainer, {
|
const fireworks = new Fireworks(fireworksContainer, {
|
||||||
rocketsPoint: {
|
rocketsPoint: {
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100,
|
max: 100,
|
||||||
},
|
},
|
||||||
autoresize: true,
|
autoresize: true,
|
||||||
});
|
});
|
||||||
fireworks.start();
|
fireworks.start();
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -2,63 +2,58 @@
|
||||||
import Container from "../atoms/Container.astro";
|
import Container from "../atoms/Container.astro";
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{
|
{
|
||||||
name: "Home",
|
name: "Home",
|
||||||
link: "/",
|
link: "/",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Projects",
|
name: "Projects",
|
||||||
link: "/projects",
|
link: "/projects",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Blog",
|
name: "Blog",
|
||||||
link: "/blog",
|
link: "/blog",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Docs",
|
name: "Docs",
|
||||||
link: "/docs",
|
link: "/docs",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<header class="h-16 border-b-[1px] border-neutral-800 text-xl text-white">
|
<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="text-2xl font-extrabold" href="/">xHyroM</a>
|
||||||
>
|
<nav>
|
||||||
<a class="text-2xl font-extrabold" href="/">xHyroM</a>
|
<ul
|
||||||
<nav>
|
class="nav-links absolute top-0 left-0 z-20 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"
|
||||||
<ul
|
>
|
||||||
class="nav-links absolute top-0 left-0 z-20 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=" transition-all hover:-translate-y-[2px]">
|
||||||
navItems.map((item) => (
|
<a href={item.link} class="hover:text-hyroGold text-neutral-300">
|
||||||
<li class=" transition-all hover:-translate-y-[2px]">
|
{item.name}
|
||||||
<a
|
</a>
|
||||||
href={item.link}
|
</li>
|
||||||
class="hover:text-hyroGold text-neutral-300"
|
))
|
||||||
>
|
}
|
||||||
{item.name}
|
</ul>
|
||||||
</a>
|
</nav>
|
||||||
</li>
|
<button class="hamburger block md:hidden">
|
||||||
))
|
<span class="sr-only">menu</span>
|
||||||
}
|
<img
|
||||||
</ul>
|
src="/icons/menu.svg"
|
||||||
</nav>
|
alt="hamburger menu icon"
|
||||||
<button class="hamburger block md:hidden">
|
class="h-[23px] w-[24px]"
|
||||||
<span class="sr-only">menu</span>
|
/>
|
||||||
<img
|
</button>
|
||||||
src="/icons/menu.svg"
|
<button class="hamburger-close z-30 hidden md:hidden">
|
||||||
alt="hamburger menu icon"
|
<span class="sr-only">menu</span>
|
||||||
class="h-[23px] w-[24px]"
|
<img
|
||||||
/>
|
src="/icons/x.svg"
|
||||||
</button>
|
alt="hamburger menu icon"
|
||||||
<button class="hamburger-close z-30 hidden md:hidden">
|
class="h-[23px] w-[24px]"
|
||||||
<span class="sr-only">menu</span>
|
/>
|
||||||
<img
|
</button>
|
||||||
src="/icons/x.svg"
|
</Container>
|
||||||
alt="hamburger menu icon"
|
|
||||||
class="h-[23px] w-[24px]"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</Container>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<script>
|
<script>
|
||||||
import "../../scripts/snow.js";
|
import "../../scripts/snow.js";
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -6,20 +6,20 @@ import Name from "./Name.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<main
|
<main
|
||||||
class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
|
class="mt-24 flex flex-col items-center justify-center md:mt-64 md:flex-row"
|
||||||
>
|
>
|
||||||
<div class="justify-cener flex items-center">
|
<div class="justify-cener flex items-center">
|
||||||
<Picture
|
<Picture
|
||||||
src={logo}
|
src={logo}
|
||||||
formats={["png"]}
|
formats={["png"]}
|
||||||
sizes="(max-width: 200px) 100vw, 200px"
|
sizes="(max-width: 200px) 100vw, 200px"
|
||||||
widths={[200, 400]}
|
widths={[200, 400]}
|
||||||
alt="descriptive text"
|
alt="descriptive text"
|
||||||
class={"h-[200px] w-[200px]"}
|
class={"h-[200px] w-[200px]"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<section class="text-center md:ml-6 md:text-left">
|
<section class="text-center md:ml-6 md:text-left">
|
||||||
<Name />
|
<Name />
|
||||||
<Socials />
|
<Socials />
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<div class="flex drop-shadow-yellow">
|
<div class="flex drop-shadow-yellow">
|
||||||
<h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
|
<h1 class="text-6xl font-extrabold text-white">xHyroM</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
---
|
---
|
||||||
const socials = [
|
const socials = [
|
||||||
{
|
{
|
||||||
name: "GitHub",
|
name: "GitHub",
|
||||||
link: "https://github.com/xHyroM/",
|
link: "https://github.com/xHyroM/",
|
||||||
icon: "github",
|
icon: "github",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Discord",
|
name: "Discord",
|
||||||
link: "https://discord.gg/kFPKmEKeMS/",
|
link: "https://discord.gg/kFPKmEKeMS/",
|
||||||
icon: "discord",
|
icon: "discord",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Twitter",
|
name: "Twitter",
|
||||||
link: "https://twitter.com/hyrousek/",
|
link: "https://twitter.com/hyrousek/",
|
||||||
icon: "twitter",
|
icon: "twitter",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Instagram",
|
name: "Instagram",
|
||||||
link: "https://www.instagram.com/hyro.dev/",
|
link: "https://www.instagram.com/hyro.dev/",
|
||||||
icon: "instagram",
|
icon: "instagram",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
<ul class="my-5 flex justify-center text-white md:justify-start">
|
<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 transition-all hover:-translate-y-1"
|
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`}
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -30,16 +30,17 @@ const Head = head || DefaultHead;
|
||||||
<script>
|
<script>
|
||||||
import "../scripts/menu.js";
|
import "../scripts/menu.js";
|
||||||
</script>
|
</script>
|
||||||
</body><style is:global>
|
<style is:global>
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
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>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,12 @@ const {
|
||||||
|
|
||||||
<Layout head={PostHead} title={title} date={date}>
|
<Layout head={PostHead} title={title} date={date}>
|
||||||
<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">
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<Container>
|
<Container>
|
||||||
<main class="text-white text-2xl prose">
|
<main class="prose text-2xl text-white">
|
||||||
<article>
|
<article>
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -5,43 +5,40 @@ import Layout from "../layouts/Layout.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
|
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
|
||||||
WRONG TURN?
|
WRONG TURN?
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<Container>
|
<Container>
|
||||||
<main class="text-2xl text-white">
|
<main class="text-2xl text-white">
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
We're sorry, but it looks like the page you were trying to visit
|
We're sorry, but it looks like the page you were trying to visit has
|
||||||
has been misplaced. It's not entirely clear where it's gone, but
|
been misplaced. It's not entirely clear where it's gone, but we suspect
|
||||||
we suspect it may have gotten lost in the vast expanse of the
|
it may have gotten lost in the vast expanse of the internet.
|
||||||
internet.
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
We've searched high and low, but alas, we can't seem to find it.
|
We've searched high and low, but alas, we can't seem to find it. It's
|
||||||
It's possible that it's hiding behind a particularly stubborn
|
possible that it's hiding behind a particularly stubborn firewall, or
|
||||||
firewall, or maybe it's taking a much-needed vacation on a
|
maybe it's taking a much-needed vacation on a remote server farm.
|
||||||
remote server farm.
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
Despite our best efforts, we just can't seem to locate the page
|
Despite our best efforts, we just can't seem to locate the page you were
|
||||||
you were looking for. We apologize for any inconvenience this
|
looking for. We apologize for any inconvenience this may have caused.
|
||||||
may have caused.
|
</p>
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="mb-4">
|
<p class="mb-4">
|
||||||
In the meantime, why not take a look around our <a
|
In the meantime, why not take a look around our <a
|
||||||
class="text-hyroGold"
|
class="text-hyroGold"
|
||||||
href="/">homepage</a
|
href="/">homepage</a
|
||||||
> and see if you can find something else that piques your interest?
|
> and see if you can find something else that piques your interest? Who knows,
|
||||||
Who knows, you might just stumble upon something even better than
|
you might just stumble upon something even better than what you were originally
|
||||||
what you were originally looking for.
|
looking for.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Thanks for stopping by, and we hope to see you again soon!</p>
|
<p>Thanks for stopping by, and we hope to see you again soon!</p>
|
||||||
</main>
|
</main>
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue