build: prettier

This commit is contained in:
xHyroM 2023-02-25 21:34:13 +01:00
parent c79bd6ccae
commit 8a5009eeaf
10 changed files with 170 additions and 173 deletions

View file

@ -1,11 +1,14 @@
module.exports = {
plugins: [require.resolve("prettier-plugin-astro")],
overrides: [
{
files: "*.astro",
options: {
parser: "astro",
},
},
],
plugins: [
require.resolve("prettier-plugin-astro"),
require.resolve("prettier-plugin-tailwindcss"),
],
overrides: [
{
files: "*.astro",
options: {
parser: "astro",
},
},
],
};

View file

@ -1,15 +1,16 @@
<script>
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: {
min: 0,
max: 100,
},
autoresize: true,
});
fireworks.start();
</script>
const fireworks = new Fireworks(fireworksContainer, {
rocketsPoint: {
min: 0,
max: 100,
},
autoresize: true,
});
fireworks.start();
</script>

View file

@ -2,63 +2,58 @@
import Container from "../atoms/Container.astro";
const navItems = [
{
name: "Home",
link: "/",
},
{
name: "Projects",
link: "/projects",
},
{
name: "Blog",
link: "/blog",
},
{
name: "Docs",
link: "/docs",
},
{
name: "Home",
link: "/",
},
{
name: "Projects",
link: "/projects",
},
{
name: "Blog",
link: "/blog",
},
{
name: "Docs",
link: "/docs",
},
];
---
<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="text-2xl font-extrabold" href="/">xHyroM</a>
<nav>
<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]">
<a
href={item.link}
class="hover:text-hyroGold text-neutral-300"
>
{item.name}
</a>
</li>
))
}
</ul>
</nav>
<button class="hamburger block md:hidden">
<span class="sr-only">menu</span>
<img
src="/icons/menu.svg"
alt="hamburger menu icon"
class="h-[23px] w-[24px]"
/>
</button>
<button class="hamburger-close z-30 hidden md:hidden">
<span class="sr-only">menu</span>
<img
src="/icons/x.svg"
alt="hamburger menu icon"
class="h-[23px] w-[24px]"
/>
</button>
</Container>
<Container class="flex justify-around md:justify-between items-center h-full">
<a class="text-2xl font-extrabold" href="/">xHyroM</a>
<nav>
<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]">
<a href={item.link} class="hover:text-hyroGold text-neutral-300">
{item.name}
</a>
</li>
))
}
</ul>
</nav>
<button class="hamburger block md:hidden">
<span class="sr-only">menu</span>
<img
src="/icons/menu.svg"
alt="hamburger menu icon"
class="h-[23px] w-[24px]"
/>
</button>
<button class="hamburger-close z-30 hidden md:hidden">
<span class="sr-only">menu</span>
<img
src="/icons/x.svg"
alt="hamburger menu icon"
class="h-[23px] w-[24px]"
/>
</button>
</Container>
</header>

View file

@ -1,3 +1,3 @@
<script>
import "../../scripts/snow.js";
import "../../scripts/snow.js";
</script>

View file

@ -6,20 +6,20 @@ import Name from "./Name.astro";
---
<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">
<Picture
src={logo}
formats={["png"]}
sizes="(max-width: 200px) 100vw, 200px"
widths={[200, 400]}
alt="descriptive text"
class={"h-[200px] w-[200px]"}
/>
</div>
<section class="text-center md:ml-6 md:text-left">
<Name />
<Socials />
</section>
<div class="justify-cener flex items-center">
<Picture
src={logo}
formats={["png"]}
sizes="(max-width: 200px) 100vw, 200px"
widths={[200, 400]}
alt="descriptive text"
class={"h-[200px] w-[200px]"}
/>
</div>
<section class="text-center md:ml-6 md:text-left">
<Name />
<Socials />
</section>
</main>

View file

@ -1,3 +1,3 @@
<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>

View file

@ -1,40 +1,40 @@
---
const socials = [
{
name: "GitHub",
link: "https://github.com/xHyroM/",
icon: "github",
},
{
name: "Discord",
link: "https://discord.gg/kFPKmEKeMS/",
icon: "discord",
},
{
name: "Twitter",
link: "https://twitter.com/hyrousek/",
icon: "twitter",
},
{
name: "Instagram",
link: "https://www.instagram.com/hyro.dev/",
icon: "instagram",
},
{
name: "GitHub",
link: "https://github.com/xHyroM/",
icon: "github",
},
{
name: "Discord",
link: "https://discord.gg/kFPKmEKeMS/",
icon: "discord",
},
{
name: "Twitter",
link: "https://twitter.com/hyrousek/",
icon: "twitter",
},
{
name: "Instagram",
link: "https://www.instagram.com/hyro.dev/",
icon: "instagram",
},
];
---
<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 transition-all hover:-translate-y-1"
src={`/icons/${social.icon}.svg`}
alt={`${social.name} icon`}
/>
</a>
</li>
))
}
{
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 transition-all hover:-translate-y-1"
src={`/icons/${social.icon}.svg`}
alt={`${social.name} icon`}
/>
</a>
</li>
))
}
</ul>

View file

@ -30,16 +30,17 @@ const Head = head || DefaultHead;
<script>
import "../scripts/menu.js";
</script>
</body><style is:global>
::-webkit-scrollbar {
width: 16px;
}
<style is:global>
::-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;
}
</style>
::-webkit-scrollbar-thumb {
border: 6px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
border-radius: 9999px;
background-color: #aaaaaa;
}
</style>
</body>
</html>

View file

@ -18,12 +18,12 @@ const {
<Layout head={PostHead} title={title} date={date}>
<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}
</h1>
<Container>
<main class="text-white text-2xl prose">
<main class="prose text-2xl text-white">
<article>
<slot />
</article>

View file

@ -5,43 +5,40 @@ import Layout from "../layouts/Layout.astro";
---
<Layout>
<Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
WRONG TURN?
</h1>
<Navbar />
<h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
WRONG TURN?
</h1>
<Container>
<main class="text-2xl text-white">
<p class="mb-4">
We're sorry, but it looks like the page you were trying to visit
has been misplaced. It's not entirely clear where it's gone, but
we suspect it may have gotten lost in the vast expanse of the
internet.
</p>
<Container>
<main class="text-2xl text-white">
<p class="mb-4">
We're sorry, but it looks like the page you were trying to visit has
been misplaced. It's not entirely clear where it's gone, but we suspect
it may have gotten lost in the vast expanse of the internet.
</p>
<p class="mb-4">
We've searched high and low, but alas, we can't seem to find it.
It's possible that it's hiding behind a particularly stubborn
firewall, or maybe it's taking a much-needed vacation on a
remote server farm.
</p>
<p class="mb-4">
We've searched high and low, but alas, we can't seem to find it. It's
possible that it's hiding behind a particularly stubborn firewall, or
maybe it's taking a much-needed vacation on a remote server farm.
</p>
<p class="mb-4">
Despite our best efforts, we just can't seem to locate the page
you were looking for. We apologize for any inconvenience this
may have caused.
</p>
<p class="mb-4">
Despite our best efforts, we just can't seem to locate the page you were
looking for. We apologize for any inconvenience this may have caused.
</p>
<p class="mb-4">
In the meantime, why not take a look around our <a
class="text-hyroGold"
href="/">homepage</a
> and see if you can find something else that piques your interest?
Who knows, you might just stumble upon something even better than
what you were originally looking for.
</p>
<p class="mb-4">
In the meantime, why not take a look around our <a
class="text-hyroGold"
href="/">homepage</a
> and see if you can find something else that piques your interest? Who knows,
you might just stumble upon something even better than what you were originally
looking for.
</p>
<p>Thanks for stopping by, and we hope to see you again soon!</p>
</main>
</Container>
<p>Thanks for stopping by, and we hope to see you again soon!</p>
</main>
</Container>
</Layout>