some restyling

mohdibntarek · mohdibntarek · commit c0a16d5e4ea0 · 2025-04-13T18:31:37.000+04:00
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -42,7 +42,7 @@ import "../styles/markdown.css";
     @apply pr-5 pl-10 w-full;
   }
   aside {
-    @apply pl-6 pt-15 mx-0 max-w-50 min-w-50 sticky top-0 h-screen w-100 h-full bg-slate-900 px-2 py-0 sm:px-4;
+    @apply pl-6 pt-15 mx-0 max-w-50 min-w-50 sticky top-0 h-screen w-100 h-full bg-neutral-600 px-2 py-0 sm:px-4;
   }
   body {
     @apply flex flex-row space-x-5 w-full mt-0 m-0 bg-white text-gray-900 text-xl;
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -17,22 +17,20 @@ import LeftSide from "../components/LeftSide.astro";
     <link rel="icon" href="https://fav.farm/👨🏻‍💻" />
   </head>
 
-  <body class="m-0 bg-slate-100">
+  <body class="m-0 bg-[var(--primary_bg_color)]">
     <header class="site-header">
       <h1 class="mb-5 text-4xl font-bold text-white">Mohamed Tarek, PhD</h1>
-      <p class="text-xl/8 text-orange-200">
-        Senior Product Engineer <span class="text-blue-300 font-bold">@</span> PumasAI
-        Inc.
+      <p class="text-xl/8 text-white">
+        Senior Product Engineer @ PumasAI Inc.
         <br />
-        Research Affiliate <span class="text-blue-300 font-bold">@</span> University
-        of Sydney
+        Research Affiliate @ University of Sydney
       </p>
     </header>
     <main class="flex my-5 ml-10 pr-0">
       <aside>
         <LeftSide text_color_1="text-blue-500" text_color_2="text-black" />
       </aside>
-      <div class="grid grid-cols-3 gap-x-16 gap-y-8 ml-20 mb-10 mt-5">
+      <div class="grid grid-cols-3 gap-x-16 gap-y-8 ml-35 mb-10 mt-8">
         <!-- About -->
         <a href="/about" class="card">
           <img src={userIcon.src} alt="user icon" class="card-img" />
@@ -86,13 +84,16 @@ import LeftSide from "../components/LeftSide.astro";
 
 <style>
   @import "tailwindcss";
+  :root {
+    --primary_bg_color: var(--color-violet-100);
+  }
 
   aside {
-    @apply pr-5 pl-5 mt-3 max-w-50 min-w-50 sticky top-0 bg-slate-100 sm:px-4;
+    @apply pr-5 pl-5 mt-3 max-w-50 min-w-50 sticky top-0 bg-[var(--primary_bg_color)] sm:px-4;
   }
 
   .card {
-    @apply p-2 pt-5 border-1 border-slate-300 bg-gray-200 rounded-3xl container;
+    @apply p-2 pt-5 border-1 border-slate-300 bg-blue-200 rounded-3xl container hover:scale-105 transition-shadow duration-300 hover:shadow-lg;
   }
 
   @utility card-img {

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ import "../styles/markdown.css";`
`42`	`42`	`@apply pr-5 pl-10 w-full;`
`43`	`43`	`}`
`44`	`44`	`aside {`
`45`		`- @apply pl-6 pt-15 mx-0 max-w-50 min-w-50 sticky top-0 h-screen w-100 h-full bg-slate-900 px-2 py-0 sm:px-4;`
	`45`	`+ @apply pl-6 pt-15 mx-0 max-w-50 min-w-50 sticky top-0 h-screen w-100 h-full bg-neutral-600 px-2 py-0 sm:px-4;`
`46`	`46`	`}`
`47`	`47`	`body {`
`48`	`48`	`@apply flex flex-row space-x-5 w-full mt-0 m-0 bg-white text-gray-900 text-xl;`