Added components, code optimization, etc.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ov-template",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.6.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/vratskyi/vratskyi.github.io"

src/components/Badge.astro

@@ -0,0 +1,8 @@
+---
+let { text } = Astro.props;
+---
+
+<li
+	class='text-sm font-light blur-bg rounded-2xl px-2 py-1 inline-flex items-center'>
+	{text}
+</li>

src/components/BadgeLink.astro

@@ -0,0 +1,13 @@
+---
+let { href, text } = Astro.props;
+---
+
+<a
+	href={href}
+	target='_blank'
+	class='inline-grid justify-self-start'>
+	<li
+		class='justify-self-start font-light blur-bg hover:bg-primary-0 duration-150 rounded-2xl px-3 py-2'>
+		{text}
+	</li>
+</a>

src/components/Button.astro

@@ -0,0 +1,25 @@
+---
+let { link, text } = Astro.props;
+---
+
+<a
+	href={link}
+	target='_blank'
+	class='inline-block justify-self-start px-3 py-2 rounded-lg border-2 hover:border-primary-0 hover:bg-primary-0 duration-150'
+	>{text}
+	<svg
+		class='inline-block pl-2'
+		width='24'
+		height='24'
+		viewBox='0 0 24 24'
+		fill='none'
+		xmlns='http://www.w3.org/2000/svg'
+		><path
+			d='M15.6396 7.02527H12.0181V5.02527H19.0181V12.0253H17.0181V8.47528L12.1042 13.3892L10.6899 11.975L15.6396 7.02527Z'
+			fill='currentColor'
+		></path><path
+			d='M10.9819 6.97473H4.98193V18.9747H16.9819V12.9747H14.9819V16.9747H6.98193V8.97473H10.9819V6.97473Z'
+			fill='currentColor'
+		></path></svg
+	>
+</a>

src/components/Header.astro

@@ -34,7 +34,7 @@ import blur from '/src/assets/img/bg.svg';
 		<div class='relative'>
 			<div
 				id='main-menu'
-				class='menu bg-[#040404]/[98%] hidden overflow-y-auto animation z-40 fixed left-0 right-0 top-20 h-full w-full min-h-screen lg:min-h-[700px] min-w-full mx-auto rounded-xl'>
+				class='menu bg-[#040404]/[98%] hidden overflow-y-auto animation z-40 fixed left-0 right-0 top-20 h-full w-full min-h-screen lg:min-h-[700px] max-w-[1120px] mx-auto rounded-xl'>
 				<Picture
 					src={blur}
 					class='absolute blur-[100px] top-0 bottom-0 left-0 right-0 m-auto h-full w-full object-cover object-center z-[-1]'

src/components/PortfolioCard.astro

@@ -0,0 +1,55 @@
+---
+import { Picture } from 'astro:assets';
+import BadgeLink from './BadgeLink.astro';
+import Badge from './Badge.astro';
+import Button from './Button.astro';
+
+let { description, title, img, site, badgeLinkProps, badgeProps } = Astro.props;
+---
+
+<div class='grid blur-bg p-5 lg:p-10 rounded-xl'>
+	<div class='grid lg:grid-cols-2'>
+		<div class='grid self-start'>
+			<Picture
+				class='object-cover object-center min-h-full rounded-2xl'
+				src={img}
+				width='500'
+				height='350'
+				alt={title}
+				formats={['avif', 'webp']}
+			/>
+		</div>
+		<div class='lg:ml-10'>
+			<h3
+				class='font-black bg-clip-text text-transparent bg-gradient-to-r from-primary-0 to-accent-0 text-3xl lg:text-4xl mb-5 mt-3 lg:mt-0'>
+				{title}
+			</h3>
+			<p class='inline-flex text-xl font-light'>
+				{description}
+			</p>
+			<div class='py-5'>
+				<h4 class='text-lg mb-5'>Technologies i used:</h4>
+				<ul class='flex space-x-2 flex-wrap'>
+               {Array.isArray(badgeLinkProps) ? (
+                badgeLinkProps.map((badgeLink, index) => (
+                   <BadgeLink key={index} {...badgeLink} />
+                ))
+             ) : (
+                <BadgeLink {...badgeLinkProps} />
+             )}
+
+            {Array.isArray(badgeProps) ? (
+                badgeProps.map((badge, index) => (
+                    <Badge key={index} {...badge} />
+                ))
+                ) : (
+                <Badge {...badgeProps} />
+                )}
+				</ul>
+			</div>
+			<div class='mt-5'>
+				<Button text="Check out" link={site} />
+			</div>
+		</div>
+	</div>
+</div>

src/components/Post.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 ---
 
 <article
-	class='p-4 grid gap-y-5 mt-[12.2222%] content-center max-w-[400px] hover:bg-zinc-500/20 blur-bg rounded-2xl transition-colors duration-150'>
+	class='p-4 grid gap-y-5 mt-[12.2222%] w-full max-w-[400px] hover:bg-zinc-500/20 blur-bg rounded-2xl transition-colors duration-150'>
 	<a href={`/blog/${post.slug}`}>
 		<Picture
 			transition:name={post.data.title}
@@ -20,7 +20,7 @@ const { post } = Astro.props;
 			width='500'
 			height='350'
 			formats={['avif', 'webp']}
-			class='object-cover min-h-full rounded-2xl'
+			class='object-cover h-full max-h-[220px] w-full rounded-2xl'
 		/>
 		<a href={`/blog/${post.slug}`}>
 			<h3
@@ -78,7 +78,6 @@ const { post } = Astro.props;
 				{post.data.categories}
 			</h3>
 			<TitlePost h1={post.data.title} />
-			<ul><li>{post.data.tag}</li></ul>
 		</a>
 	</a>
 </article>

src/components/PostList.astro

@@ -11,7 +11,7 @@ const { posts } = Astro.props;
 ---
 
 <Layout>
-	<div class='grid grid-cols-2 gap-x-10 gap-y-6 max-md:grid-cols-1 mb-24'>
+	<div class='grid grid-cols-2 gap-x-10 gap-y-5 mx-auto max-md:grid-cols-1 mb-24'>
 		{posts.map((post) => <Post post={post} />)}
 	</div>
 </Layout>

src/pages/index.astro

@@ -4,6 +4,7 @@ import Head from '../components/Head.astro';
 import { Picture } from 'astro:assets';
 import blur from '/src/assets/img/bg.svg';
 import cover from '/src/assets/img/dev.jpg';
+import Button from '../components/Button.astro';
 ---
 
 <html lang='en'>
@@ -52,28 +53,7 @@ import cover from '/src/assets/img/dev.jpg';
 					as well as for blogging.
 				</p>
 				<div class='mt-5'>
-					<button
-						onclick="
-						window.open('https://github.com/vratskyi/vratskyi.github.io', '_blank');
-						"
-						class='justify-self-start px-3 py-2 rounded-lg border-2 hover:border-primary-0 hover:bg-primary-0 duration-150'
-						>Check out
-						<svg
-							class='inline-block pl-2'
-							width='24'
-							height='24'
-							viewBox='0 0 24 24'
-							fill='none'
-							xmlns='http://www.w3.org/2000/svg'
-							><path
-								d='M15.6396 7.02527H12.0181V5.02527H19.0181V12.0253H17.0181V8.47528L12.1042 13.3892L10.6899 11.975L15.6396 7.02527Z'
-								fill='currentColor'
-							></path><path
-								d='M10.9819 6.97473H4.98193V18.9747H16.9819V12.9747H14.9819V16.9747H6.98193V8.97473H10.9819V6.97473Z'
-								fill='currentColor'
-							></path></svg
-						>
-					</button>
+					<Button text="Check out" link="https://github.com/vratskyi/vratskyi.github.io" />
 				</div>
 			</div>
 		</section>