From f2350d4c277b45af3981ad909b8837050e177b3d Mon Sep 17 00:00:00 2001
From: Toks <tokslaw@chiefsoft.com>
Date: Tue, 5 May 2026 23:45:52 -0400
Subject: [PATCH] more styles added to about

---
 app/Views/about.php          | 139 +++++------------------------------
 public/assets/css/styles.css |  77 +++++++++++++++++++
 2 files changed, 97 insertions(+), 119 deletions(-)

diff --git a/app/Views/about.php b/app/Views/about.php
index b9cd9d9..4788966 100644
--- a/app/Views/about.php
+++ b/app/Views/about.php
@@ -220,133 +220,35 @@
     </header>
 
 
-    <section id="about" class="active">
+    <section id="about" class="active meet-toks-section"">
         <div class="container page-title text-center">
-            <h2 class= "ld-fh-element mb-0/5em relative text-50 text-rotator-activated text-center margin-top:30px">Meet <span>Toks</span></h2>
-<!--            <h5><span class="title-head-subtitle row title-bar-container justify-center margin-bottom:50px">Building Secure, Scalable Digital Systems That Move Businesses Forward.</span></h5>-->
-            <h5><span class="title-head-subtitle row title-bar-container justify-center margin-bottom:50px">A technology professional focused on
-                    enterprise architecture, software engineering, cloud systems, cybersecurity, and digital transformation
+            <h2 class= "ld-fh-element mb-0/5em relative text-50 text-rotator-activated text-center">
+                Meet <span>Toks</span>
+            </h2>
+            <h5>
+                <span class="title-head-subtitle row title-bar-container justify-center">
+                    A technology professional focused on enterprise architecture, software engineering, cloud systems, cybersecurity, and digital transformation
                 </span>
             </h5>
         </div>
-
-
-<!--                <div class="container">-->
-<!--                    <div class="row">-->
-<!--                        <div class="col col-12 lqd-unit-animation-done" style="">-->
-<!--                            <div class="w-full relative flex flex-col flex-grow-1 pt-40 pb-10 mb-50 border-bottom border-black module-line">-->
-<!--                                <div class="container-fluid p-0">-->
-<!--                                    <div class="row items-center">-->
-<!--                                        <div class="col col-2 animation-element lqd-unit-animation-done" style="">-->
-<!--                                            <div class="w-30percent relative flex border-top border-black-50">-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!---->
-<!---->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                            </div>-->
-<!--                        </div>-->
-<!--                        <div class="col col-12 col-md-6 lqd-unit-animation-done" style="">-->
-<!--                            <div class="lqd-imggrp-container relative mb-2em transition-all ca-initvalues-applied lqd-animations-done" data-custom-animations="true" data-ca-options="{&quot;triggerHandler&quot;:&quot;inview&quot;,&quot;animationTarget&quot;:&quot;.lqd-imggrp-single&quot;,&quot;duration&quot;:&quot;1800&quot;,&quot;delay&quot;:&quot;160&quot;,&quot;ease&quot;:&quot;power4.out&quot;,&quot;direction&quot;:&quot;forward&quot;,&quot;initValues&quot;:{&quot;y&quot;:65,&quot;scaleY&quot;:1.1,&quot;opacity&quot;:0},&quot;animations&quot;:{&quot;y&quot;:0,&quot;scaleY&quot;:1,&quot;opacity&quot;:1}}">-->
-<!--                                <div class="lqd-imggrp-inner flex flex-wrap justify-center">-->
-<!--                                    <div class="lqd-imggrp-single block absolute top-10percent left-0 lqd-unit-animation-done" data-shadow-style="4" style="">-->
-<!--                                        <div class="lqd-imggrp-img-container">-->
-<!--                                            <figure><img class="img-fluid d-block" src="./assets/images/tokslaw.png" alt="Toks Lawal">-->
-<!--                                        </div>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                            </div>-->
-<!--                        </div>-->
-<!--                        <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"> Toks Lawal - Tokslaw</h2>-->
-<!--                                <p class="ld-fh-element mb-2em text-16 leading-1/6em text-black">I'm an Enterprise Architect and Full-Satck Software Engineer based in Atlanta, USA. I build immersive infrastructure, microservice applications and architecture through carefully crafted code and user-centric solutions</p>-->
-<!--                                <p class="ld-fh-element mb-2em text-16 leading-1/6em text-black"> I'm an Enterprise Architect and Full-Stack Software Engineer helping organizations modernize applications, strengthen security, and design cloud-ready platforms that support real business growth.</p>-->
-<!--                                <div class="w-full relative">-->
-<!--                                    <div class="flex flex-wrap -mx-15 mb-50 md:mb-0">-->
-<!--                                        <div class="w-50percent px-15 sm:w-full">-->
-<!--                                            <div class="one-bullet-list mb-1em">-->
-<!--                                                <ul class="reset-ul module-list">-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Toks Lawal</h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black"><a href="mailto:tokunbolawal4@gmail.com">Email</a></h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black"><a href="https://www.linkedin.com/in/toks-lawal/" target="_blank">-->
-<!--                                                                LinkedIn-->
-<!--                                                            </a></h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black"><a href="https://teams.live.com/meet/9341380056053?p=V911xeL3Quy6VDajy5" target="_blank">-->
-<!--                                                                Teams-->
-<!--                                                            </a></h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black"><a href="tel:+14042038915">-->
-<!--                                                                404 203-8915-->
-<!--                                                            </a></h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black"><a href="https://www.upwork.com/freelancers/tokslaw" target="_blank">Freelance Available</a></h6></li>-->
-<!---->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black"><a href="./assets/images/Sr Full Stack Software Engineer_Tokunbo Lawal copy.pdf" target="_blank" class="btn btn-solid">-->
-<!--                                                                <span><i class="fa fa-download"></i> Download My Resume</span>-->
-<!--                                                            </a></h6></li>-->
-<!---->
-<!--                                                </ul>-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!--                                        <div class="w-50percent px-15 sm:w-full">-->
-<!--                                            <div class="one-bullet-list mb-1em">-->
-<!--                                                <ul class="reset-ul module-list">-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Leadership</h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Problem Solving</h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Communication</h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Strategy</h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Adaptability</h6></li>-->
-<!--                                                    <li><h6 class="flex items-center mb-0/5em text-black">Project Management</h6></li>-->
-<!--                                                </ul>-->
-<!--                                            </div>-->
-<!--                                        </div>-->
-<!--                                    </div>-->
-<!--                                </div>-->
-<!--                            </div>-->
-<!--                        </div>-->
-<!--                    </div>-->
-<!--                </div>-->
-
-
-        <div class="container col-12 mx-auto text-center">
-                <hr class="about-section" />
-        </div>
-
-
-<!--        <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-cards">-->
-<!--                        --><?php //foreach($content as $item) { ?>
-<!--                            <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 //} ?>
-<!--                    </div>-->
-<!--                --><?php //} ?>
-<!--            </div>-->
-<!--        </section>-->
-
     </section>
 
-    <section>
+    <div class="container col-12 mx-auto text-center about-divider">
+        <hr class="about-section" />
+    </div>
 
-        <div class="flex justify-center mb-10" style="opacity: 1; transform: none;">
-            <div class="relative">
-                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-br from-primary/40 to-accent/40 blur-xl"></div>
-                <img src="./assets/images/tokslawal.png" alt="Toks Lawal" class="relative w-56 h-56 sm:w-64 sm:h-64 md:w-72 md:h-72 object-cover object-top rounded-2xl border border-primary/20 shadow-glow">
+
+        <div class="profile-image-wrapper">
+            <div class="profile-image-card">
+                <div class="profile-image-glow"></div>
+                <img
+                        src="./assets/images/tokslawal.png"
+                        alt="Toks Lawal"
+                        class="profile-image"
+                />
             </div>
         </div>
+
         <section class="about-wrapper">
             <div class="about-card">
                 <h2>Hi, I’m Tokunbo "Toks" Lawal</h2>
@@ -516,7 +418,6 @@
         </section>
         <hr class="about-section" />
 
-    </section>
 
     <div>
         <footer id="site-footer" class="main-footer bg-transparent py-70" style="background-image: linear-gradient(170deg, #2D3140 0%, #19272C 100%);">
diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css
index a9fdcce..c579dcf 100644
--- a/public/assets/css/styles.css
+++ b/public/assets/css/styles.css
@@ -158,4 +158,81 @@ body {
     .belief-box h4 {
         font-size: 1.15rem;
     }
+}
+.about-divider {
+    margin-bottom: 60px;
+}
+.meet-toks-section {
+    padding-top: 30px;
+    padding-bottom: 45px;
+}
+
+.meet-toks-section h2 {
+    margin-bottom: 18px;
+}
+/*.title-head-subtitle {*/
+/*    display: block;*/
+/*    margin-bottom: 20px;*/
+/*    line-height: 1.7;*/
+/*}*/
+/*---------------------------------------------*/
+/*About-Profile image*/
+/*----------------------------------------------*/
+.profile-image-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 40px;
+    margin-top: 20px;
+}
+
+.profile-image-card {
+    position: relative;
+    width: 280px;
+    height: 280px;
+    border-radius: 32px;
+    padding: 8px;
+    background: linear-gradient(135deg, #ffffff, #f8fafc);
+    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.16);
+    transition: transform 0.35s ease, box-shadow 0.35s ease;
+}
+
+.profile-image-card:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 35px 90px rgba(15, 23, 42, 0.22);
+}
+
+.profile-image-glow {
+    position: absolute;
+    inset: -10px;
+    z-index: 0;
+    border-radius: 36px;
+    background: linear-gradient(135deg, rgba(244, 162, 174, 0.45), rgba(59, 130, 246, 0.25));
+    filter: blur(24px);
+    opacity: 0.75;
+}
+
+.profile-image {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: top center;
+    border-radius: 26px;
+    border: 1px solid rgba(244, 162, 174, 0.35);
+    display: block;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .profile-image-card {
+        width: 230px;
+        height: 230px;
+        border-radius: 26px;
+    }
+
+    .profile-image {
+        border-radius: 22px;
+    }
 }
\ No newline at end of file