Refactor transition animation duration in Content component

Update Hero component with CTA buttons Update About and Contact pages with spacing adjustments Update Experience page with core expertise and professional journey Remove redundant code in index page
madalinpopa · Sep 29, 2024 · ef6a8b0 · ef6a8b0
1 parent 74905e3
commit ef6a8b0
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 55 deletions.
diff --git a/src/components/layout/Content.astro b/src/components/layout/Content.astro
@@ -2,7 +2,7 @@
 import { fade } from 'astro:transitions';
 ---
 
-<main transition:animate={fade({ duration: '0.4s' })}>
+<main transition:animate={fade({ duration: '0.2s' })}>
   <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
     <div class="mx-auto max-w-4xl">
       <slot />

diff --git a/src/components/layout/Hero.astro b/src/components/layout/Hero.astro
@@ -1,5 +1,6 @@
 ---
 import HeroTitle from "../headers/HeroTitle.astro";
+import CTAButton from "../buttons/CTAButton.astro";
 ---
 
 <div>
@@ -10,5 +11,9 @@ import HeroTitle from "../headers/HeroTitle.astro";
       technology, I specialize in building scalable solutions using Python, Go,
       and various cloud services.
     </p>
+    <div class="flex gap-6">
+      <CTAButton href="/services/" text="I Can Help You With This" />
+      <CTAButton href="/contact/" text="Get in Touch" />
+    </div>
   </div>
 </div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -6,7 +6,7 @@ import Content from "../components/layout/Content.astro";
 
 <PageLayout>
   <Content>
-    <div>
+    <div class="space-y-12">
       <div>
         <PageTitle title="About me" />
         <blockquote>
@@ -16,7 +16,7 @@ import Content from "../components/layout/Content.astro";
           </p>
         </blockquote>
       </div>
-      <div class="pt-10 prose dark:prose-invert max-w-none">
+      <div class="prose dark:prose-invert max-w-none">
         <p class="indent-6">
           I'm a self-taught tech enthusiast with a passion for learning and
           problem-solving. I live in Bucharest, Romania, where my journey into

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -8,7 +8,7 @@ import Content from "../components/layout/Content.astro";
 
 <PageLayout>
   <Content>
-    <div class="space-y-8">
+    <div class="space-y-12">
       <div>
         <PageTitle title="Contact" />
         <p class="prose dark:prose-invert max-w-none">

diff --git a/src/pages/experience.astro b/src/pages/experience.astro
@@ -3,24 +3,55 @@ import PageLayout from "../layouts/PageLayout.astro";
 import PageTitle from "../components/headers/PageTitle.astro";
 import JobCard from "../components/lists/JobCard.astro";
 import Content from "../components/layout/Content.astro";
+import SectionTitle from "../components/headers/SectionTitle.astro";
 ---
 
 <PageLayout>
   <Content>
-    <div>
-      <PageTitle title="Experience" />
-
-      <p class="pb-12 indent-6">
-        Throughout my career, I’ve had the opportunity to work with a variety of
-        technologies and teams, tackling challenges in cloud infrastructure,
-        DevOps, and software development. Below, you’ll find an overview of the
-        key roles I’ve held and the valuable lessons and skills I’ve gained
-        along the way.
-      </p>
+    <div class="space-y-12">
+      <div>
+        <PageTitle title="Core Expertise" />
+        <ul class="list-disc ml-4 prose text-white">
+          <li class="dark:text-gray-400 text-gray-600">
+            <span class="font-semibold">DevOps & Automation:</span> Docker, Kubernetes,
+            Ansible, Terraform
+          </li>
+          <li class="text-gray-600 dark:text-gray-400">
+            <span class="font-semibold dark:text-white">Cloud Solutions:</span> Azure,
+            AWS
+          </li>
+          <li class="text-gray-600 dark:text-gray-400">
+            <span class="font-semibold dark:text-white">CI/CD Pipelines:</span> GitHub
+            Actions, Azure Pipelines, Jenkins
+          </li>
+          <li class="text-gray-600 dark:text-gray-400">
+            <span class="font-semibold dark:text-white"
+              >Programming Languages:</span
+            >
+            Python, Go
+          </li>
+          <li class="text-gray-600 dark:text-gray-400">
+            <span class="font-semibold dark:text-white"
+              >Infrastructure as Code (IaC):</span
+            > Terraform, Azure Resource Manager (ARM) Templates
+          </li>
+        </ul>
+      </div>
 
       <div class="space-y-8">
+        <SectionTitle title="My Professional Journey" />
+        <p class="indent-6">
+          Throughout my career, I’ve had the opportunity to work with a variety
+          of technologies and teams, tackling challenges in cloud
+          infrastructure, DevOps, and software development. Below, you’ll find
+          an overview of the key roles I’ve held and the valuable lessons and
+          skills I’ve gained along the way.
+        </p>
         <div class="relative">
-          <div class="absolute top-0 left-4 h-full w-0.5 bg-gray-400 dark:bg-slate-600"></div>
+          <div
+            class="absolute top-0 left-4 h-full w-0.5 bg-gray-400 dark:bg-slate-600"
+          >
+          </div>
 
           <JobCard
             year="2024"

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,46 +9,7 @@ import Content from "../components/layout/Content.astro";
 <PageLayout>
   <Content>
     <div class="space-y-12">
-      <Hero />
-      <div>
-        <SectionTitle title="Core Expertise" />
-        <ul class="pt-6 list-disc ml-4 prose text-white">
-          <li class="dark:text-gray-400 text-gray-600">
-            <span class="font-semibold">DevOps & Automation:</span> Docker,
-            Kubernetes, Ansible, Terraform
-          </li>
-          <li class="text-gray-600 dark:text-gray-400">
-            <span class="font-semibold dark:text-white">Cloud Solutions:</span> Azure,
-            AWS
-          </li>
-          <li class="text-gray-600 dark:text-gray-400">
-            <span class="font-semibold dark:text-white">CI/CD Pipelines:</span> GitHub
-            Actions, Azure Pipelines, Jenkins
-          </li>
-          <li class="text-gray-600 dark:text-gray-400">
-            <span class="font-semibold dark:text-white">Programming Languages:</span>
-            Python, Go
-          </li>
-          <li class="text-gray-600 dark:text-gray-400">
-            <span class="font-semibold dark:text-white"
-              >Infrastructure as Code (IaC):</span
-            > Terraform, Azure Resource Manager (ARM) Templates
-          </li>
-        </ul>
-      </div>
-      <div>
-        <div>
-          <p>
-            Need help with your cloud infrastructure, DevOps pipelines, or
-            automation? Whether you’re looking for advice or collaboration on
-            tech projects, don’t hesitate to reach out!
-          </p>
-        </div>
-        <div class="flex gap-6">
-          <CTAButton href="/services/" text="I Can Help You With This" />
-          <CTAButton href="/contact/" text="Get in Touch" />
-        </div>
-      </div>
+      <Hero />  
     </div>
   </Content>
 </PageLayout>