This commit is contained in:
OLIMINATOR 2022-12-07 15:48:48 +01:00
parent 68a7003713
commit 51684426bc
5 changed files with 20 additions and 12 deletions

View file

@ -2,14 +2,17 @@
import Socials from "../widgets/Socials.astro"; import Socials from "../widgets/Socials.astro";
import { Image } from "@astrojs/image/components"; import { Image } from "@astrojs/image/components";
import logo from "../../assets/logo.png"; import logo from "../../assets/logo.png";
import Name from "../widgets/Name.astro";
--- ---
<main <main
class="mt-24 md:mt-64 flex flex-col md:flex-row justify-center items-center" class="mt-24 md:mt-64 flex flex-col md:flex-row justify-center items-center"
> >
<Image src={logo} width={200} height={200} alt="descriptive text" /> <div class="flex justify-cener 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="md:ml-6 md:text-left text-center">
<h1 class="text-white font-extrabold text-6xl">xHyroM</h1> <Name />
<Socials /> <Socials />
</section> </section>
</main> </main>

View file

@ -0,0 +1,6 @@
---
---
<div class="flex drop-shadow-yellow">
<h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
</div>

View file

@ -29,7 +29,7 @@ const navItems = [
<li> <li>
<a <a
href={item.link} href={item.link}
class="hover:text-[#fbc119] hover:underline" class="hover:text-[#fbc119] hover:underline hover:drop-shadow-yellowalt"
> >
{item.name} {item.name}
</a> </a>

View file

@ -1,5 +1,4 @@
--- ---
import { Image } from "@astrojs/image/components";
const socials = [ const socials = [
{ {
name: "GitHub", name: "GitHub",
@ -17,9 +16,9 @@ const socials = [
icon: "twitter", icon: "twitter",
}, },
{ {
name: "YouTube", name: "Instagram",
link: "https://www.google.com/", link: "https://www.google.com/",
icon: "youtube", icon: "instagram",
}, },
]; ];
--- ---
@ -28,13 +27,9 @@ const socials = [
{ {
socials.map((social) => ( socials.map((social) => (
<li class="mr-4 "> <li class="mr-4 ">
<a <a class=" w-10 h-10" href={social.link} title={social.name}>
class="hover:-translate-y-1 transition-all w-10 h-10"
href={social.link}
title={social.name}
>
<img <img
class="w-8 h-8" class="w-8 h-8 hover:-translate-y-1 transition-all"
src={`/icons/${social.icon}.svg`} src={`/icons/${social.icon}.svg`}
alt={`${social.name} icon`} alt={`${social.name} icon`}
/> />

View file

@ -6,6 +6,10 @@ module.exports = {
colors: { colors: {
dark: "#0D0D0D", dark: "#0D0D0D",
}, },
dropShadow: {
yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
},
}, },
}, },
plugins: [], plugins: [],