formatting

package.json

@@ -13,8 +13,7 @@
         "@astrojs/tailwind": "^1.0.0",
         "astro": "^1.0.7",
         "prettier": "^2.7.1",
-        "prettier-plugin-astro": "^0.5.1",
-        "prettier-plugin-tailwindcss": "^0.1.13",
+        "prettier-plugin-astro": "^0.5.3",
         "sass": "^1.54.5"
     },
     "prettier": {
@@ -25,6 +24,9 @@
         "singleQuote": true,
         "bracketSpacing": true,
         "jsxBracketSameLine": false,
-        "arrowParens": "avoid"
+        "arrowParens": "avoid",
+        "plugins": [
+            "./node_modules/prettier-plugin-astro"
+        ]
     }
 }

src/components/AboutMe.astro

@@ -1,27 +1,40 @@
 ---
 import Me from '../images/me2.jpg';
 ---
+
 <div class="lg:w-8/12 w-full flex flex-row justify-center flex-wrap pt-10">
-	<img src={Me} alt="Matt Hughes" class="lg:w-5/12 w-full max-h-[30vh] p-5 object-contain"/>
-			<div class="p-5 lg:w-7/12 w-full" >
-			<h1 class="font-semibold pb-10 gif-text text-center lg:text-left">Matt Hughes</h1>
-			<p>Hi 👋</p>
-			<p class="mb-2">I'm a full stack web developer with experience in the Financial and Healthcare tech industries</p>
-			<p>I work with tools like TypeScript // React // Vue // Node // Python // Django // C# // .NET</p>
-</div>
+    <img
+        src={Me}
+        alt="Matt Hughes"
+        class="lg:w-5/12 w-full max-h-[30vh] p-5 object-contain"
+    />
+    <div class="p-5 lg:w-7/12 w-full">
+        <h1 class="font-semibold pb-10 gif-text text-center lg:text-left">
+            Matt Hughes
+        </h1>
+        <p>Hi 👋</p>
+        <p class="mb-2">
+            I'm a full stack web developer with experience in the Financial and
+            Healthcare tech industries
+        </p>
+        <p>
+            I work with tools like TypeScript // React // Vue // Node // Python
+            // Django // C# // .NET
+        </p>
+    </div>
 </div>
 <style type="text/css">
-	.gif-text {
-	/* background-image: url('https://media1.giphy.com/media/3o7bu9zwfieCd1R9HG/giphy.gif?cid=ecf05e475do4qmq0kbbjkvhrn92kppkr9ez0g7ruua796rvq&rid=giphy.gif'); */
-	/* background-image: url('https://media1.giphy.com/media/xT0xeifG3YWtHJ4HQI/giphy.gif?cid=ecf05e47klpz2gp0rq0gl4x21664e2d6x4ip9y2n7znsuigr&rid=giphy.gif'); */
-	background-image: url('https://media3.giphy.com/media/3otO6NFBIAFg2vPZuM/giphy.gif?cid=ecf05e473pholcgergc9rzdri6w732p4t7mgdy9tqz8jl6ji&rid=giphy.gif');
-	background-size: cover;
-	color: transparent;
-	-moz-background-clip: text;
-	-webkit-background-clip: text;
-	font-size: clamp(50px, 110px, 7vw);
-	/* font-size: 4em; */
-	line-height: 0.75;
-	font-family: 'Alata', sans-serif;
-	}
+    .gif-text {
+        /* background-image: url('https://media1.giphy.com/media/3o7bu9zwfieCd1R9HG/giphy.gif?cid=ecf05e475do4qmq0kbbjkvhrn92kppkr9ez0g7ruua796rvq&rid=giphy.gif'); */
+        /* background-image: url('https://media1.giphy.com/media/xT0xeifG3YWtHJ4HQI/giphy.gif?cid=ecf05e47klpz2gp0rq0gl4x21664e2d6x4ip9y2n7znsuigr&rid=giphy.gif'); */
+        background-image: url('https://media3.giphy.com/media/3otO6NFBIAFg2vPZuM/giphy.gif?cid=ecf05e473pholcgergc9rzdri6w732p4t7mgdy9tqz8jl6ji&rid=giphy.gif');
+        background-size: cover;
+        color: transparent;
+        -moz-background-clip: text;
+        -webkit-background-clip: text;
+        font-size: clamp(50px, 110px, 7vw);
+        /* font-size: 4em; */
+        line-height: 0.75;
+        font-family: 'Alata', sans-serif;
+    }
 </style>

src/components/Card.astro

@@ -1,75 +1,80 @@
 ---
 export interface Props {
-	title: string;
-	body: string;
-	href: string;
+    title: string;
+    body: string;
+    href: string;
 }
 
 const { href, title, body } = Astro.props as Props;
 ---
 
 <li class="link-card m-12">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
+    <a href={href}>
+        <h2>
+            {title}
+            <span>&rarr;</span>
+        </h2>
+        <p>
+            {body}
+        </p>
+    </a>
 </li>
 <style>
-	:root {
-		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
-	}
+    :root {
+        --link-gradient: linear-gradient(
+            45deg,
+            #4f39fa,
+            #da62c4 30%,
+            var(--color-border) 60%
+        );
+    }
 
-	.link-card {
-		list-style: none;
-		display: flex;
-		background-image: var(--link-gradient);
-		background-size: 400%;
-		border-radius: 0.5rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
+    .link-card {
+        list-style: none;
+        display: flex;
+        background-image: var(--link-gradient);
+        background-size: 400%;
+        border-radius: 0.5rem;
+        background-position: 100%;
+        transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    }
 
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1em 1.3em;
-		border-radius: 0.35rem;
-		color: var(--text-color);
-		background-color: white;
-		opacity: 0.8;
-	}
+    .link-card > a {
+        width: 100%;
+        text-decoration: none;
+        line-height: 1.4;
+        padding: 1em 1.3em;
+        border-radius: 0.35rem;
+        color: var(--text-color);
+        background-color: white;
+        opacity: 0.8;
+    }
 
-	h2 {
-		margin: 0;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
+    h2 {
+        margin: 0;
+        transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    }
 
-	p {
-		margin-top: 0.75rem;
-		margin-bottom: 0;
-	}
+    p {
+        margin-top: 0.75rem;
+        margin-bottom: 0;
+    }
 
-	h2 span {
-		display: inline-block;
-		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-	}
+    h2 span {
+        display: inline-block;
+        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+    }
 
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-	}
+    .link-card:is(:hover, :focus-within) {
+        background-position: 0;
+    }
 
-	.link-card:is(:hover, :focus-within) h2 {
-		color: #4f39fa;
-	}
+    .link-card:is(:hover, :focus-within) h2 {
+        color: #4f39fa;
+    }
 
-	.link-card:is(:hover, :focus-within) h2 span {
-		will-change: transform;
-		transform: translateX(2px);
-	}
+    .link-card:is(:hover, :focus-within) h2 span {
+        will-change: transform;
+        transform: translateX(2px);
+    }
 </style>

src/components/Community.astro

@@ -1,10 +1,18 @@
 ---
 import Stream from '../images/stream.png';
 ---
+
 <div class="w-full flex flex-col items-center mb-20">
-	<div class="w-full border-b-[1px] border-slate-400 my-20" />
-	<h1 class="text-xl text-center font-bold mb-10">I stay in touch with the dev community through Twitch streaming, Discord server interaction, and more!</h1>
-	<a href="https://twitch.tv/zee_pk" >
-		<img class="w-full max-w-3xl hover:scale-105 transition-all duration-25 cursor-pointer" src={Stream} alt="twitch livestream"  />
-	</a>
+    <div class="w-full border-b-[1px] border-slate-400 my-20"></div>
+    <h1 class="text-xl text-center font-bold mb-10">
+        I stay in touch with the dev community through Twitch streaming, Discord
+        server interaction, and more!
+    </h1>
+    <a href="https://twitch.tv/zee_pk">
+        <img
+            class="w-full max-w-3xl hover:scale-105 transition-all duration-25 cursor-pointer"
+            src={Stream}
+            alt="twitch livestream"
+        />
+    </a>
 </div>