Update headings style

madalinpopa · Sep 21, 2024 · b17070f · b17070f
1 parent ed335dd
commit b17070f
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 59 deletions.
diff --git a/src/components/JobCard.astro b/src/components/JobCard.astro
@@ -4,18 +4,18 @@ const { title, company, year, description } = Astro.props;
 
 <div class="relative z-10">
   <div
-    class="font-bold text-xl mb-4 inline-block bg-slate-600 px-4 py-2 rounded-full shadow"
+    class="font-bold text-xl mb-4 inline-block bg-slate-700 px-4 py-2 rounded-full shadow"
   >
     {year}
   </div>
 
-  <div class="ml-8 mb-8 p-6 rounded-lg shadow-md bg-slate-600">
-    <h3 class="text-xl font-semibold">
+  <div class="ml-8 mb-8 p-6 rounded-lg">
+    <h3 class="text-xl font-semibold text-gray-400">
       {title}
     </h3>
     <p class="text-gray-400 mt-1">{company}</p>
-    <p class="mt-2">
-        {description}
+    <p class="prose max-w-none text-white mt-2">
+      {description}
     </p>
   </div>
 </div>
diff --git a/src/components/PageTitle.astro b/src/components/PageTitle.astro
@@ -2,7 +2,7 @@
 const { title } = Astro.props;
 ---
 
-<div class="pt-20 mb-8 border-b border-slate-600 pb-4">
+<div class="pt-20 mb-6 border-b border-slate-600 pb-4">
   <div>
     <h1 class="text-3xl md:text-4xl font-bold tracking-wide">{title}</h1>
   </div>

diff --git a/src/components/SectionTitle.astro b/src/components/SectionTitle.astro
@@ -1,6 +1,7 @@
 ---
 const { title } = Astro.props;
 ---
-<div class="border-b border-slate-600 pb-4">
-    <h2 class="text-2xl font-bold">{title}</h2>
-</div>
+
+<div class="border-b border-slate-600 pb-4 text-gray-400">
+  <h2 class="text-2xl font-bold">{title}</h2>
+</div>
diff --git a/src/components/ServiceItem.astro b/src/components/ServiceItem.astro
@@ -1,9 +1,10 @@
 ---
-const { title  } = Astro.props;
+const { title } = Astro.props;
 ---
+
 <div class="space-y-4">
-    <h3 class="font-semibold">{title}</h3>
-    <p class="prose text-white">
-        <slot />
-    </p>
-</div>
+  <h3 class="font-semibold text-gray-400">{title}</h3>
+  <p class="prose text-white max-w-none">
+    <slot />
+  </p>
+</div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -15,8 +15,7 @@ import PageTitle from "../components/PageTitle.astro";
       </blockquote>
     </div>
     <div class="pt-10 prose max-w-none text-white">
-
-      <p>
+      <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 IT
         began when I was 14. That's when I discovered Linux, and I was
@@ -25,21 +24,21 @@ import PageTitle from "../components/PageTitle.astro";
         network, and it wasn't long before I realized how much I enjoyed
         figuring out how everything connected and keeping it running smoothly.
       </p>
-      <p>
+      <p class="indent-6">
         As I spent more time with technology, I started exploring programming,
         beginning with simple bash scripts. This opened the door to learning
         languages like C, Java, and eventually Python, which became my go-to
         language for automation and building efficient solutions.
       </p>
-      <p>
+      <p class="indent-6">
         Over time, I expanded my skills into web development, infrastructure
         management, and cloud technologies. I'm always looking for ways to
         automate processes, streamline workflows, and build systems that scale
         easily. Whether it's coding, setting up cloud environments, or solving
         complex technical problems, I'm driven by a desire to make things work
         better and more efficiently.
       </p>
-      <p>
+      <p class="indent-6">
         When I'm not working, I'm probably learning something new or tinkering
         with a new technology. For me, the fun part of tech is seeing everything
         come together, from the first line of code to a fully functional

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -9,7 +9,7 @@ import SocialIcons from "../components/SocialIcons.astro";
   <div class="space-y-8">
     <div>
       <PageTitle title="Contact" />
-      <p class="prose text-white">
+      <p class="prose text-white max-w-none">
         I'd love to hear from you! Whether you have a question, a project idea,
         or just want to say hi, feel free to reach out via email or social
         media. I look forward to connecting with you! Let's work on something
@@ -23,11 +23,12 @@ import SocialIcons from "../components/SocialIcons.astro";
           <strong>Email:</strong>
           <a
             href="mailto:[email protected]"
-            class="text-primary hover:text-accent">[email protected]</a>
+            class="text-primary hover:text-accent">[email protected]</a
+          >
         </li>
       </ul>
       <div class="space-y-4">
-        <p class="prose text-white">
+        <p class="prose text-white max-w-none">
           Please also feel free to connect with me on any of these platforms.
         </p>
         <div>

diff --git a/src/pages/experience.astro b/src/pages/experience.astro
@@ -5,10 +5,10 @@ import JobCard from "../components/JobCard.astro";
 ---
 
 <PageContent>
-  <div class="space-y-12">
+  <div>
     <PageTitle title="Experience" />
 
-    <p>
+    <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

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -11,26 +11,40 @@ import CTAButton from "../components/CTAButton.astro";
     <div>
       <SectionTitle title="Core Expertise" />
       <ul class="pt-6 list-disc ml-4 prose text-white">
-        <li><span class="font-semibold">DevOps & Automation:</span> Docker, Kubernetes, Ansible, Terraform</li>
-        <li><span class="font-semibold">Cloud Solutions:</span> Azure, AWS</li>
-        <li><span class="font-semibold">CI/CD Pipelines:</span> GitHub Actions, Azure Pipelines, Jenkins</li>
-        <li><span class="font-semibold">Programming Languages:</span> Python, Go</li>
-        <li>
-          <span class="font-semibold">Infrastructure as Code (IaC):</span> Terraform, Azure Resource Manager (ARM)
-          Templates
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">DevOps & Automation:</span> Docker,
+          Kubernetes, Ansible, Terraform
+        </li>
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">Cloud Solutions:</span> Azure, AWS
+        </li>
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">CI/CD Pipelines:</span> GitHub Actions,
+          Azure Pipelines, Jenkins
+        </li>
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">Programming Languages:</span> Python,
+          Go
+        </li>
+        <li class="text-gray-400">
+          <span class="font-semibold 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>
+        <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>
   </div>
 </PageContent>
diff --git a/src/pages/services.astro b/src/pages/services.astro
@@ -10,7 +10,7 @@ import SectionTitle from "../components/SectionTitle.astro";
     <div>
       <PageTitle title="Let’s Work on These Together" />
 
-      <p class="prose text-white">
+      <p class="prose text-white indent-6 max-w-none">
         When it comes to cloud infrastructure, DevOps pipelines, and automation,
         I’m here to help you streamline your workflows and build scalable,
         efficient solutions. With a strong background in Python, cloud services,
@@ -64,30 +64,30 @@ import SectionTitle from "../components/SectionTitle.astro";
         <SectionTitle title="Certifications" />
       </div>
       <ul class="pt-6 list-disc ml-4 prose text-white">
-        <li>
-          <span class="font-semibold">Microsoft Certified:</span> Azure Developer
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">AZ-104:</span> Azure Administrator
           Associate
         </li>
-        <li>
-          <span class="font-semibold">Microsoft Certified:</span> DevOps Engineer
-          Expert
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">AZ-204:</span> Azure Developer Associate
         </li>
-        <li>
-          <span class="font-semibold">Microsoft Certified:</span> Azure Administrator
-          Associate
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">AZ-400:</span> DevOps Engineer Expert
         </li>
-        <li>
-          <span class="font-semibold">Microsoft Certified:</span> Azure Fundamentals
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">AZ-900:</span> Azure Fundamentals
         </li>
-        <li>
-          <span class="font semibold">KCNA:</span> Kubernetes and Cloud Native Associate
+        <li class="text-gray-400">
+          <span class="font semibold text-white">KCNA:</span> Kubernetes and Cloud
+          Native Associate
         </li>
-        <li>
-          <span class="font-semibold">CKAD:</span> Certified Kubernetes Application
-          Developer
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">CKAD:</span> Certified Kubernetes
+          Application Developer
         </li>
-        <li>
-          <span class="font-semibold">Docker:</span> Foundations Professional Certificate
+        <li class="text-gray-400">
+          <span class="font-semibold text-white">Docker:</span> Foundations Professional
+          Certificate
         </li>
       </ul>
     </div>