From 758ce3eda1fb573512458efe4139466f64bf7d02 Mon Sep 17 00:00:00 2001
From: Toks <tokslaw@chiefsoft.com>
Date: Mon, 4 May 2026 15:20:04 -0400
Subject: [PATCH] styling for about section

---
 app/Views/about.php  |  31 +++++++------
 app/Views/styles.css | 106 +++++++++++++++++++++++++++++--------------
 2 files changed, 87 insertions(+), 50 deletions(-)

diff --git a/app/Views/about.php b/app/Views/about.php
index d1e0315..613055a 100644
--- a/app/Views/about.php
+++ b/app/Views/about.php
@@ -255,7 +255,7 @@
                         <div class="col col-12 col-md-6 lqd-unit-animation-done" style="">
                             <div class="module-content relative flex flex-col items-start pr-5percent pl-15percent lg:pr-0">
                                 <p class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/05em text-black">Who am I?</p>
-                                <h2 class="ld-fh-element mb-0/4em text-65 leading-0/8em text-black text-init">Tokunbo Strategy</h2>
+                                <h2 class="ld-fh-element mb-0/4em text-65 leading-0/8em text-black text-init">Tokunbo Lawal Tokslaw</h2>
                                 <p class="ld-fh-element mb-2em text-16 leading-1/6em text-black">I'm an Enterprise Architect and Developer based in Atlanta, USA. I build immersive infrastructure, microservice applications and architecture through carefully crafted code and user-centric solutions</p>
                                 <div class="w-full relative">
                                     <div class="flex flex-wrap -mx-15 mb-50 md:mb-0">
@@ -314,24 +314,25 @@
 
 
         <section id="about1" class="active">
-            <div class="container page-title ">
-                <h5 class=" ld-fh-element mb-0/5em relative text-40 "><span>Experience</span></h5>
-                <?php if (! empty($content)) { ?>
-                    <div class="experience-container">
+            <div class="container page-title">
+                <h5 class="ld-fh-element mb-0/5em relative text-40"><span>Experience</span></h5>
+                <?php if (!empty($content)) { ?>
+                    <div class="experience-cards">
                         <?php foreach($content as $item) { ?>
-                            <div class="experience-item">
-                                <ul>
-                                    <li class="title"><?php echo htmlspecialchars($item['title']); ?></li>
-                                    <li class="title"><?php echo htmlspecialchars($item['company']);?></li>
-                                    <li class="title"><?php echo  htmlspecialchars($item['duration']); ?></li>
-                                    <li class="title"><?php echo nl2br(htmlspecialchars($item['description'])); ?></li>
-                                </ul>
+                            <div class="exp-card">
+                                <div class="exp-header">
+                                    <div class="exp-title-group">
+                                        <h4 class="exp-role"><?php echo htmlspecialchars($item['title']); ?></h4>
+                                        <span class="exp-company"><?php echo htmlspecialchars($item['company']); ?></span>
+                                    </div>
+                                    <span class="exp-duration"><?php echo htmlspecialchars($item['duration']); ?></span>
+                                </div>
+                                <hr class="exp-divider">
+                                <p class="exp-description"><?php echo nl2br(htmlspecialchars($item['description'])); ?></p>
                             </div>
-                            <?php
-                        } ?>
+                        <?php } ?>
                     </div>
                 <?php } ?>
-
             </div>
         </section>
 
diff --git a/app/Views/styles.css b/app/Views/styles.css
index 37adad4..ff1a784 100644
--- a/app/Views/styles.css
+++ b/app/Views/styles.css
@@ -21,53 +21,89 @@
 }
 /* ─────────────────────────── */
 
-.experience-container {
+/* ── Experience cards ── */
+.experience-cards {
+    max-width: 820px;
+    margin: 40px auto 0;
     display: flex;
     flex-direction: column;
-    gap: 10px;
-    max-width: 600px;
-    margin: 0 auto;
-    text-align: justify;
+    gap: 20px;
 }
 
-.experience-item {
-    background: #d72f2f;
-    padding: 10px;
-    border-radius: 5px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+.exp-card {
+    background: #fff;
+    border-radius: 14px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-top: 4px solid #000;
+    padding: 28px 32px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+    transition: box-shadow 0.25s ease, transform 0.25s ease;
 }
 
-.experience-item ul {
-    list-style: none;
-    padding: 0;
+.exp-card:hover {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    transform: translateY(-3px);
+}
+
+.exp-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.exp-title-group {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.exp-role {
+    font-size: 19px;
+    font-weight: 700;
+    color: #000;
     margin: 0;
 }
 
-.experience-item li {
-    padding: 5px 0;
-    font-size: 16px;
+.exp-company {
+    font-size: 12px;
+    font-weight: 600;
+    color: #888;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.exp-duration {
+    font-size: 12px;
     font-weight: 500;
-    color: #333;
+    color: #fff;
+    background: #000;
+    padding: 5px 14px;
+    border-radius: 100px;
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 
-.experience-item .title {
-    font-weight: bold;
-    font-size: 18px;
-    color: #007bff;
+.exp-divider {
+    border: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.08);
+    margin: 18px 0;
 }
 
-.experience-item .company {
-    font-style: italic;
-    color: #555;
-}
-
-.experience-item .duration {
-    color: #777;
-    font-size: 14px;
-}
-
-.experience-item .description {
-    color: #444;
+.exp-description {
     font-size: 15px;
-    margin-top: 5px;
-}
\ No newline at end of file
+    line-height: 1.8;
+    color: #555;
+    margin: 0;
+}
+
+@media (max-width: 640px) {
+    .exp-card {
+        padding: 22px 20px;
+    }
+    .exp-header {
+        flex-direction: column;
+        gap: 10px;
+    }
+}
+/* ───────────────────── */
\ No newline at end of file