Files
TokslawMain/app/Views/portfolio.php
T
2026-05-05 15:39:30 -04:00

834 lines
71 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Enterprise Architect, Full-Stack Software Engineer, DevSecOps Engineer, Cloud Solutions Architect, Software Architecture Consultant, Digital Transformation Architect">
<meta name="author" content="Toks Lawal, Tokslaw, Tokunbo Lawal">
<meta name="google-site-verification" content="qC-NzYstxEbgViItWRCXWmWohJDBplsD-mc8M8IMatQ" />
<meta name="description" content="secure application development,microservices architecture, API development,technical strategy, system design.">
<meta property="og:title" content="Tokunbo Lawal | Enterprise Architect, Full-Stack Software Engineer & DevSecOps Strategist">
<meta property="og:description" content="Toks Lawal helps businesses design secure, scalable, and cloud-ready digital platforms through enterprise architecture, full-stack development, DevSecOps, and technology strategy.">
<meta property="og:type" content="website">
<meta property="og:image" content="./assets/images/common/og-image.jpg">
<link rel="stylesheet" href="./assets/vendors/liquid-icon/lqd-essentials/lqd-essentials.min.css">
<link rel="stylesheet" href="./assets/css/theme.min.css">
<link rel="stylesheet" href="./assets/css/utility.min.css">
<link rel="stylesheet" href="./assets/css/demo/dark-portfolio/base.css">
<link rel="stylesheet" href="./assets/css/demo/dark-portfolio/dark-portfolio.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">
<title>Few Portfolio</title>
<script>
window.liquidParams = {
currentZIndex: 10
}
</script>
</head>
<body class="lqd-pf-single lqd-pf-single-style-1 lqd-preloader-activated lqd-preloader-style-curtain site-wide-layout" data-mobile-nav-breakpoint="1199" data-mobile-nav-style="minimal" data-mobile-nav-scheme="custom" data-mobile-nav-trigger-alignment="right" data-mobile-header-scheme="custom" data-mobile-logo-alignment="default" data-lqd-cc="true">
<section>
<h2 class="screen-reader-text">Skip links</h2>
<ul class="liquid-skip-link screen-reader-text">
<li>
<a href="#primary" class="screen-reader-shortcut"> Skip to primary navigation</a>
</li>
<li>
<a href="#content" class="screen-reader-shortcut"> Skip to content</a>
</li>
</ul>
</section>
<div class="lqd-preloader-wrap lqd-preloader-curtain" data-preloader-options='{ "animationType" : "slide", "animationTargets" : ".lqd-preloader-curtain-el", "stagger" : 215 }'>
<div class="lqd-preloader-inner">
<div class="lqd-preloader-curtain-el absolute top-0 start-0 lqd-preloader-curtain-front"></div>
<div class="lqd-preloader-curtain-el absolute top-0 start-0 lqd-preloader-curtain-back"></div>
</div>
</div>
<div id="wrap">
<div class="lqd-sticky-placeholder hidden"></div>
<header class="main-header main-header-overlay sticky-header-noshadow main-header-dynamiccolors lqd-active-row-dark bg-transparent pointer-events-none" data-sticky-header="true" data-sticky-values-measured="false" data-sticky-options='{ "disableOnMobile" :true, "dynamicColors" :true }' style="background-image: linear-gradient(180deg, rgba(0,0,0,0.73) 2.2293%, rgba(0,0,0,0.65) 19%, rgba(0,0,0,0.54) 34%, rgba(0,0,0,0.38) 48.5924%, rgba(0,0,0,0.19) 65.3185%, rgba(0,0,0,0.13) 73%, rgba(0,0,0,0.07) 80.9554%, rgba(0,0,0,0.04) 86.3185%, rgba(0,0,0,0.02) 88.4522%, rgba(17,17,17,0.01) 96.5924%, rgba(0,0,0,0) 96.8153%, rgba(0,0,0,0) 100%);">
<section class="lqd-section lqd-head-sec-wrap px-40 md:hidden">
<div class="lqd-head-sec container-fluid flex items-stretch justify-between p-0">
<div class="col lqd-head-col">
<div class="header-module module-logo no-rotate navbar-brand-plain py-55">
<a class="navbar-brand pointer-events-auto" href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/'; ?>" rel="home">
<span class="navbar-brand-inner">
<img width="50" height="50" style="object-fit: contain;" src="./assets/images/demo/start-hub-8/tokslaw_logo_main.png" alt="Tokslaw">
</span>
</a>
</div>
</div>
<div class="col lqd-head-col justify-end">
<div class="header-module module-primary-nav flex-col items-end">
<div class="collapse navbar-collapse lqd-submenu-default-style navbar-visible-ontoggle flex-col items-stretch px-5" id="main-header-collapse" aria-expanded="false" role="navigation">
<ul class="main-nav lqd-menu-counter-right main-nav-hover-fade-inactive nav reset-ul h-full flex items-stretch justify-end link-14 link-white-80 pointer-events-auto" data-submenu-options='{ "toggleType" : "fade" , "handler" : "mouse-in-out" }' data-localscroll="true" data-localscroll-options='{ "itemsSelector" : "> li > a", "trackWindowScroll" : true }'>
<li class="is-active">
<a href="#portfolio" aria-current="page">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li class="menu-item-has-children">
<a href="#case-studies">
Case Studies
<span class="submenu-expander"></span>
</a>
<ul class="nav-item-children">
<li>
<a href="./page-dark-portfolio-nexa-mobile.html">Donezo</a>
</li>
<li>
<a href="./page-dark-portfolio-the-portraits.html">PrismaDB</a>
</li>
<li>
<a href="#">ADL Skills Adventure</a>
</li>
<li>
<a href="#">EcoBridge</a>
</li>
<li>
<a href="#">Volunteer App</a>
</li>
<li>
<a href="#">Slider</a>
</li>
<li>
<a href="#">Classic Stack</a>
</li>
<li>
<a href="#">Video</a>
</li>
<li>
<a href="#">UI/UX Design & Development</a>
</li>
</ul>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div class="header-module flex-col items-end py-10 ml-25">
<button class="nav-trigger main-nav-trigger collapsed style-2 solid rounded-full txt-left relative flex items-center justify-center pointer-events-auto text-white hover:text-white module-trigger" type="button" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#main-header-collapse" aria-expanded="false" aria-controls="main-header-collapse">
<span class="bars relative ml-10">
<span class="bars-inner w-full h-full flex flex-col">
<span class="bar relative"></span>
<span class="bar relative"></span>
<span class="bar relative"></span>
</span>
</span>
<span class="txt">Menu</span>
</button>
</div>
</div>
</div>
</section>
<section class="lqd-section lqd-mobile-sec">
<div class="lqd-mobile-sec-inner navbar-header flex items-stretch justify-between bg-gray-800">
<div class="lqd-mobile-modules-container"></div>
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile flex items-center text-white" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#lqd-mobile-sec-nav" aria-expanded="false" data-toggle-options='{ "changeClassnames" : { "html" : "mobile-nav-activated" } }'>
<span class="sr-only">Toggle navigation</span>
<span class="bars">
<span class="bars-inner w-full h-full flex flex-col">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
</span>
</button>
<a class="navbar-brand flex justify-start" href="./index-dark-portfolio.html">
<span class="navbar-brand-inner">
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
</span>
</a>
</div>
<div class="lqd-mobile-sec-nav">
<div class="mobile-navbar-collapse navbar-collapse collapse bg-gray-800 text-white" id="lqd-mobile-sec-nav" aria-expanded="false" role="navigation">
<ul class="main-nav lqd-menu-counter-right main-nav-hover-fade-inactive nav reset-ul items-stretch justify-end p-15 text-16 link-white" data-submenu-options='{ "toggleType" : "fade" , "handler" : "mouse-in-out" }' data-localscroll="true" data-localscroll-options='{ "itemsSelector" : "> li > a", "trackWindowScroll" : true }'>
<li class="is-active">
<a href="#portfolio" aria-current="page">Home</a>
</li>
<li>
<a href="#about">About</a></li>
<li class="menu-item-has-children">
<a href="#services">
Case Studies
<span class="submenu-expander absolute"></span>
</a>
<ul class="nav-item-children link-14">
<li>
<a href="./page-dark-portfolio-nexa-mobile.html">Donezo</a>
</li>
<li>
<a href="./page-dark-portfolio-the-portraits.html">EcoBridge</a>
</li>
<li>
<a href="#">Volunteer App</a>
</li>
<li>
<a href="#">PrismaDB</a>
</li>
<li>
<a href="#">Sticky</a>
</li>
<li>
<a href="#">Slider</a>
</li>
<li>
<a href="#">Classic Stack</a>
</li>
<li>
<a href="#">Video</a>
</li>
<li>
<a href="#">User Interface</a>
</li>
</ul>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</section>
</header>
<main class="content bg-repeat bg-gray-900" id="lqd-site-content" style="background-image: url(./assets/images/demo/dark-portfolio/bg-dark-lines.svg);">
<div id="lqd-contents-wrap">
<!-- Start Portfolio -->
<section class="lqd-section portfolio pt-250 pb-90" id="portfolio" data-section-luminosity="dark">
<div class="container">
<div class="row">
<div class="col col-12" data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : "all-childs" , "duration" : "1800" , "delay" : "180" , "ease" : "power4.out" , "direction" : "forward" , "initValues" : {"y" :70, "rotationX" :-6, "transformOriginX" :50, "transformOriginY" :50, "transformOriginZ" : "0px" , "opacity" :0}, "animations" : {"y" :0, "rotationX" :0, "transformOriginX" :50, "transformOriginY" :50, "transformOriginZ" : "0px" , "opacity" :1} }'>
<h1 class="ld-fh-element relative mb-0 text-52 leading-1/1em text-gray-300 module-title" data-text-rotator="true">
I'm a passionate
<span class="txt-rotate-keywords text-white">
<span class="txt-rotate-keyword active">
<span>Enterprise Architect</span>
</span>
<span class="txt-rotate-keyword">
<span>Software Engineer</span>
</span>
<span class="txt-rotate-keyword">
<span>Cybersecurity Engineer</span>
</span>
</span>
</h1>
<h2 class="ld-fh-element relative mb-0/5em text-52 text-gray-300 module-title"> looking for collaboration.</h2>
<div class="w-full relative h-30"></div>
<div class="lqd-pf-grid">
<div class="row">
<div class="col col-12">
<div class="liquid-filter-items items-center justify-between">
<div class="liquid-filter-items-inner">
<ul class="filter-list filter-list-inline size-custom text-14 md:hidden" id="lqd-portfolio">
<li class="active" data-filter="*">
<span>All</span>
</li>
<li data-filter=".branding">
<span>Enterprise Software Product</span>
</li>
<li data-filter=".custom-print">
<span>Product Design</span>
</li>
<li data-filter=".digital-design">
<span>Product Branding</span>
</li>
</ul>
<div class="lqd-filter-dropdown hidden md:block" data-form-options='{ "dropdownAppendTo" : "self" }'>
<select name="lqd-filter-dropdown-lqd-portfolio" id="lqd-filter-dropdown-lqd-portfolio">
<option selected data-filter="*" value="*">All</option>
<option data-filter=".branding" value="branding">Branding</option>
<option data-filter=".custom-print" value="custom-print">Custom Print</option>
<option data-filter=".digital-design" value="digital-design">Digital Design</option>
</select>
</div>
<a href="https://tokslaw7.github.io/portfolio/" target="_blank" class="btn btn-naked btn-has-label font-family-inherit flex items-center text-15 text-gray-300 hover:text-white" data-localscroll="true">
<span class="btn-txt" data-text="See more">See more</span>
<span class="btn-icon justify-end w-auto">
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="lqd-pf-row row flex flex-wrap" data-liquid-masonry="true" data-masonry-options='{ "filtersID" : "#lqd-portfolio" }' data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : ".lqd-pf-item" , "duration" : "1800" , "startDelay" : "500" , "delay" : "180" , "ease" : "power4.out" , "initValues" : {"y" :60, "opacity" :0}, "animations" : {"y" :0, "opacity" :1} }'>
<div class="lqd-pf-column col col-md-6 col-12 masonry-item branded-ecommerce digital-design">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branded-ecommerce liquid-portfolio-category-digital-design mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="1120" height="1120" src="./assets/images/community_app.png" alt="Dark Portfolio">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Time Well Served</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="#">Connect Volunteers</a>
</li>
</ul>
</div>
</div>
<a href="http://localhost:5055" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger"></a>
</div>
</article>
</div>
<div class="lqd-pf-column col col-md-6 col-12 masonry-item branded-ecommerce branding branding-strategy digital-design">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branded-ecommerce liquid-portfolio-category-branding liquid-portfolio-category-branding-strategy mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="1140" height="520" src="./assets/images/demo/dark-portfolio/ecobridge.png" alt="Dark Portfolio">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Game Glitch Investigator</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="https://github.com/tokslaw7/gameglitchinvestigator-starter">AI Guessing Game</a>
</li>
</ul>
</div>
</div>
<a href="./assets/images/demo/dark-portfolio/dark-portfolio-2.jpg" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
</div>
</article>
</div>
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item branded-ecommerce branding digital-experiences digital-design">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branded-ecommerce liquid-portfolio-category-branding liquid-portfolio-category-custom-print liquid-portfolio-category-digital-experiences mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="540" height="520" src="./assets/images/card_profile.png" alt="Dark Portfolio">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Card Profile</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="#">Setup Database</a>
</li>
</ul>
</div>
</div>
<a href="./assets/images/card_profile.png" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
</div>
</article>
</div>
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item branding digital-experiences digital-design">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branding liquid-portfolio-category-digital-experiences mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="540" height="520" src="./assets/images/demo/dark-portfolio/ByteBites.png" alt="Dark Portfolio">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Ordering App</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="#">FastAPI</a>
</li>
</ul>
</div>
</div>
<a href="./assets/images/demo/dark-portfolio/ByteBites.png" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
</div>
</article>
</div>
<div class="lqd-pf-column col col-lg-9 col-md-6 col-12 masonry-item custom-print ecommerce masonry portfolio-single">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-custom-print liquid-portfolio-category-ecommerce liquid-portfolio-category-masonry liquid-portfolio-category-portfolio-single mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="1720" height="1160" src="./assets/images/mermsai.png" alt="Dark Portfolio">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Mermsemr</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="https://www.mermsemr.com">AI Agent for Your Practice </a>
</li>
</ul>
</div>
</div>
<a href="./assets/images/mermsai.png" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
</div>
</article>
</div>
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item custom-print ecommerce">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branding liquid-portfolio-category-custom-print liquid-portfolio-category-ecommerce mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="520" height="520" src="./assets/images/demo/dark-portfolio/healthcare_dash.png" alt="Dark Portfolio">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Healthcare Dashboard</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="#">API</a>
</li>
</ul>
</div>
</div>
<a href="https://tokslaw7.github.io/health_care_dashboard/" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger" target="_blank"></a>
</div>
</article>
</div>
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item branding-strategy custom-print">
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branding-strategy liquid-portfolio-category-custom-print liquid-portfolio-category-digital-design mb-50">
<div class="lqd-pf-item-inner">
<div class="lqd-pf-img">
<figure>
<img width="518" height="518" src="./assets/images/demo/dark-portfolio/google_auth.png" alt="Google Auth">
</figure>
</div>
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
<h2 class="relative my-0 h5">Google Auth</h2>
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
<li>
<a href="https://authentication-nu-murex.vercel.app/">Authentication</a>
</li>
</ul>
</div>
</div>
<a href="./assets/images/demo/dark-portfolio/google_auth.png" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Portfolio -->
<!-- Start About -->
<section class="lqd-section about py-80 md:pt-0" id="about" data-section-luminosity="dark">
<div class="container">
<div class="row">
<div class="col col-lg-3 col-12 mb-30">
<h5 class="ld-fh-element relative mb-1em"> About me</h5>
</div>
<div class="col col-lg-9 col-12">
<div class="lqd-imggrp-single">
<div class="lqd-imggrp-img-container" data-reveal="true" data-reveal-options='{ "direction" : "lr" , "bgcolor" : "rgb(116, 116, 116)" , "delay" : "" }' data-parallax="true" data-parallax-from='{ "y" :55 }' data-parallax-to='{ "y" :-100 }' data-parallax-options='{ "overflowHidden" :false, "ease" : "linear" , "start" : "top bottom" }'>
<figure>
<img width="1720" height="876" src="./assets/images/demo/dark-portfolio/tokslaw.png" alt="about">
</figure>
</div>
</div>
<div class="container p-0">
<div class="row justify-end md:justify-start">
<div class="col col-lg-3 col-md-5 col-6">
<div class="w-full relative flex flex-col -mt-170">
<div class="lqd-counter lqd-counter-default relative z-1 mb-20 text-orange-300">
<div class="lqd-counter-element relative mb-0/3em font-bold text-300 leading-1em xs:mb-0" data-enable-counter="true" data-counter-options='{ "targetNumber" : "9" }'>
<span>10+</span>
</div>
</div>
</div>
</div>
<div class="col col-md-3 col-6">
<p class="ld-fh-element relative mb-0/5em text-20 leading-1/25em text-white-70 module-text">
Years of
<br>
<br>
experience
</p>
</div>
<div class="col col-12 -mt-4/5em md:mt-0">
<div class="ld-fancy-heading mask-text">
<p class="ld-fh-element mb-0/5em lqd-split-lines text-18 leading-28" data-split-text="true" data-split-options='{ "type" : "lines" }' data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : ".lqd-lines > .split-inner" , "duration" : "1800" , "delay" : "250" , "ease" : "power4.out" , "direction" : "forward" , "initValues" : {"y" :80}, "animations" : {"y" :0} }'>
Hi, my name is Toks! I am a self-taught software engineer with diverse experience in enterprise architecture, application development and full-stack engineering. I build products so that it is functional and user-friendly but at the same time attractive. My aim is to bring across your message and identity . I also have major skills in Cybersecurity.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End About -->
<!-- Start Services -->
<section class="lqd-section services pt-80 pb-50 md:pt-0" id="services" data-section-luminosity="dark">
<div class="container">
<div class="row">
<div class="col col-lg-3 col-12 mb-30">
<h5 class="ld-fh-element relative mb-1em"> Services</h5>
</div>
<div class="col col-lg-9 col-12">
<div class="container p-0">
<div class="row">
<div class="col col-lg-4 col-6 mb-50 md:mb-0">
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
<div class="iconbox-icon-wrap">
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="45.375" height="48" viewbox="0 0 45.375 48"><path d="M36-45a3.836,3.836,0,0,1,2.813,1.172,3.836,3.836,0,0,1,1.172,2.813V-.984a3.836,3.836,0,0,1-1.172,2.813A3.836,3.836,0,0,1,36,3H12A3.836,3.836,0,0,1,9.188,1.828,3.836,3.836,0,0,1,8.016-.984V-41.016a3.836,3.836,0,0,1,1.172-2.812A3.836,3.836,0,0,1,12-45Zm2.016,3.984a1.889,1.889,0,0,0-.562-1.43A2.013,2.013,0,0,0,36-42.984H12a2.013,2.013,0,0,0-1.453.539,1.889,1.889,0,0,0-.562,1.43V-.984a1.889,1.889,0,0,0,.563,1.43A2.013,2.013,0,0,0,12,.984H36A2.013,2.013,0,0,0,37.453.445a1.889,1.889,0,0,0,.563-1.43ZM24-30.984a10,10,0,0,1,3.938.773A9.848,9.848,0,0,1,31.1-28.1a9.848,9.848,0,0,1,2.109,3.164A10,10,0,0,1,33.984-21a10,10,0,0,1-.773,3.938A9.848,9.848,0,0,1,31.1-13.9a9.848,9.848,0,0,1-3.164,2.109A10,10,0,0,1,24-11.016a10,10,0,0,1-3.937-.773A9.848,9.848,0,0,1,16.9-13.9a9.848,9.848,0,0,1-2.109-3.164A10,10,0,0,1,14.016-21a10,10,0,0,1,.773-3.937A9.848,9.848,0,0,1,16.9-28.1a9.848,9.848,0,0,1,3.164-2.109A10,10,0,0,1,24-30.984Zm0,18a7.827,7.827,0,0,0,5.672-2.344A7.97,7.97,0,0,0,32.2-20.812a5.887,5.887,0,0,0-.281-1.781,16.769,16.769,0,0,0-.7-1.828l-7.031,7.031-4.781-4.828,1.406-1.359L24-20.391l6-6a9.573,9.573,0,0,0-2.719-1.922,7.634,7.634,0,0,0-3.281-.7,7.711,7.711,0,0,0-5.648,2.367A7.711,7.711,0,0,0,15.984-21a7.711,7.711,0,0,0,2.367,5.648A7.711,7.711,0,0,0,24-12.984ZM20.016-39h7.969v2.016H20.016Zm6,33.984a1.945,1.945,0,0,1-.586,1.43A1.945,1.945,0,0,1,24-3a1.945,1.945,0,0,1-1.43-.586,1.945,1.945,0,0,1-.586-1.43A1.891,1.891,0,0,1,22.57-6.4,1.945,1.945,0,0,1,24-6.984a1.945,1.945,0,0,1,1.43.586A1.891,1.891,0,0,1,26.016-5.016ZM41.3-31.734l3.984-3.937,1.406,1.406L42.75-30.328ZM42-21h3.984v2.016H42Zm-.7,10.734,1.453-1.406,3.938,3.938L45.281-6.328Zm-39.984-24,1.406-1.406L6.7-31.734,5.25-30.328ZM2.016-21H6v2.016H2.016Zm-.7,13.266L5.25-11.672,6.7-10.266,2.719-6.328Z" transform="translate(-1.313 45)" fill="#d3aa85"></path></svg>
</span>
</div>
<div class="contents relative z-2">
<h3 class="mb-15 text-18 text-white">Custom Software Development</h3>
<p>I provide custom software development services that deliver tailored solutions to meet your unique business needs.
I build scalable, secure, and high-performance software that optimizes workflows, enhances efficiency, and supports growth,
ensuring a seamless experience across all platforms.
</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
<div class="iconbox-icon-wrap">
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M23.2-21.8l1.406,1.406,6.984-7.031a9,9,0,0,1,1.8,3A10.1,10.1,0,0,1,33.984-21a10,10,0,0,1-.773,3.938A9.848,9.848,0,0,1,31.1-13.9a9.848,9.848,0,0,1-3.164,2.109A10,10,0,0,1,24-11.016a10,10,0,0,1-3.937-.773A9.848,9.848,0,0,1,16.9-13.9a9.848,9.848,0,0,1-2.109-3.164A10,10,0,0,1,14.016-21a10,10,0,0,1,.773-3.937A9.848,9.848,0,0,1,16.9-28.1a9.848,9.848,0,0,1,3.164-2.109A10,10,0,0,1,24-30.984a11.4,11.4,0,0,1,1.781.141,8.394,8.394,0,0,1,1.641.422l1.594-1.594a23.831,23.831,0,0,0-2.437-.7A11.438,11.438,0,0,0,24-33a11.678,11.678,0,0,0-4.664.938,12.12,12.12,0,0,0-3.82,2.578,12.12,12.12,0,0,0-2.578,3.82A11.678,11.678,0,0,0,12-21a11.678,11.678,0,0,0,.938,4.664,12.12,12.12,0,0,0,2.578,3.82,12.12,12.12,0,0,0,3.82,2.578A11.678,11.678,0,0,0,24-9a11.678,11.678,0,0,0,4.664-.937,12.12,12.12,0,0,0,3.82-2.578,12.12,12.12,0,0,0,2.578-3.82A11.678,11.678,0,0,0,36-21a11.9,11.9,0,0,0-.727-4.2,12.376,12.376,0,0,0-2.086-3.586l2.2-2.2H42l.984-1.031a18.151,18.151,0,0,1,1.266,2.438q.516,1.219.938,2.578H47.2a20.216,20.216,0,0,0-1.2-3.352,33.862,33.862,0,0,0-1.617-3.07L48-36.984l-3.187-3.234,1.969-1.969-1.359-1.406-2.016,2.016L39.984-45l-6,6v6.609ZM36-38.2l3.984-3.984,5.2,5.2L41.2-33H36Zm9.8,15.188a5.9,5.9,0,0,0,.094,1.008A5.9,5.9,0,0,1,45.984-21q0,.469-.023,1.008a4.119,4.119,0,0,1-.164,1.008h2.016a5.9,5.9,0,0,1,.094-1.008A5.9,5.9,0,0,0,48-21v-2.016ZM24,.984A21.676,21.676,0,0,1,15.4-.727,21.964,21.964,0,0,1,8.414-5.414,21.964,21.964,0,0,1,3.727-12.4,21.676,21.676,0,0,1,2.016-21a21.676,21.676,0,0,1,1.711-8.6,21.964,21.964,0,0,1,4.688-6.984A21.964,21.964,0,0,1,15.4-41.273,21.676,21.676,0,0,1,24-42.984a22.178,22.178,0,0,1,4.359.422,24.027,24.027,0,0,1,4.031,1.172l1.594-1.594a32.337,32.337,0,0,0-4.828-1.477A23.829,23.829,0,0,0,24-45a23.107,23.107,0,0,0-9.328,1.9,24.484,24.484,0,0,0-7.617,5.156A24.484,24.484,0,0,0,1.9-30.328,23.107,23.107,0,0,0,0-21a23.107,23.107,0,0,0,1.9,9.328A24.484,24.484,0,0,0,7.055-4.055,24.484,24.484,0,0,0,14.672,1.1,23.107,23.107,0,0,0,24,3a23.4,23.4,0,0,0,7.992-1.359,24.314,24.314,0,0,0,6.82-3.75,23.926,23.926,0,0,0,5.227-5.7A23.392,23.392,0,0,0,47.2-15H45.188a21.624,21.624,0,0,1-3,6.4,22.09,22.09,0,0,1-4.8,5.063A22.2,22.2,0,0,1,31.172-.211,21.59,21.59,0,0,1,24,.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
</span>
</div>
<div class="contents relative z-2">
<h3 class="mb-15 text-18 text-white">API Development</h3>
<p>I specialize in creating secure, scalable, and high-performance APIs that enable seamless integration across systems.
Bespoke custom APIs enhance functionality, improve data exchange, and streamline workflows, driving efficiency and innovation for your business.</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
<div class="iconbox-icon-wrap">
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M33.984-11.016v-7.969L8.016-45,0-36.984,26.016-11.016Zm-1.969-1.969h-5.2L7.219-32.812l5.2-5.2L32.2-18.187v5.2Zm-24-29.2,2.766,2.766-4.969,5.2-3-2.766Zm13.969,35.2L20.016-5.016H39.984V-24.984l-1.969,1.969V-6.984H21.984Zm9-21L32.2-26.812,45.984-40.594v3.609H48V-45Zm15-1.031H48V-33H45.984Zm0,30H4.781l12.8-12.8-1.359-1.406L0,3H48V-24.984H45.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
</span>
</div>
<div class="contents relative z-2">
<h3 class="mb-15 text-18 text-white">UI/UX Design & Development</h3>
<p>My focus of UI/UX design and development services is on creating intuitive, engaging experiences that prioritize user needs.
From wireframing to final design, I craft visually appealing and highly functional interfaces that enhance usability, increase user satisfaction, and drive business success.</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
<div class="iconbox-icon-wrap">
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="46.781" viewbox="0 0 48 46.781"><path d="M13.406.188l1.172,1.594L24-3.8l9.422,5.578L34.594.188,24-6.187Zm2.578-17.2V-33H8.016v15.984Zm-6-13.969h4.031v12H9.984Zm18,13.969v-12H20.016v12Zm-6-9.984h4.031v8.016H21.984Zm18,9.984V-36.984H32.016v19.969Zm-6-18h4.031v16.031H33.984Zm12,22.031a1.933,1.933,0,0,1-.539,1.43,1.933,1.933,0,0,1-1.43.539H3.984a1.933,1.933,0,0,1-1.43-.539,1.933,1.933,0,0,1-.539-1.43V-41.016a1.933,1.933,0,0,1,.539-1.43,1.933,1.933,0,0,1,1.43-.539H44.016a1.933,1.933,0,0,1,1.43.539,1.933,1.933,0,0,1,.539,1.43H48a3.836,3.836,0,0,0-1.172-2.812A3.836,3.836,0,0,0,44.016-45H3.984a3.836,3.836,0,0,0-2.812,1.172A3.836,3.836,0,0,0,0-41.016v28.031a3.836,3.836,0,0,0,1.172,2.813A3.836,3.836,0,0,0,3.984-9H44.016a3.836,3.836,0,0,0,2.813-1.172A3.836,3.836,0,0,0,48-12.984V-29.016H45.984Zm0-20.016H48v-3.984H45.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
</span>
</div>
<div class="contents relative z-2">
<h3 class="mb-15 text-18 text-white">SEO & Social Media Marketing</h3>
<p>Build SEO to drive Revenue. Turn organic search into a reliable engine for qualified leads. My SEO services help your brand reach the right audience across Google, AI-powered search, and emerging discovery platforms with a strategy tailored to your business goals.</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
<div class="iconbox-icon-wrap">
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M32.016-21a7.711,7.711,0,0,0-2.367-5.648A7.711,7.711,0,0,0,24-29.016a7.711,7.711,0,0,0-5.648,2.367A7.711,7.711,0,0,0,15.984-21a7.711,7.711,0,0,0,2.367,5.648A7.711,7.711,0,0,0,24-12.984a7.711,7.711,0,0,0,5.648-2.367A7.711,7.711,0,0,0,32.016-21ZM24-15a5.8,5.8,0,0,1-4.266-1.734A5.8,5.8,0,0,1,18-21a5.8,5.8,0,0,1,1.734-4.266A5.8,5.8,0,0,1,24-27a5.8,5.8,0,0,1,4.266,1.734A5.8,5.8,0,0,1,30-21a5.8,5.8,0,0,1-1.734,4.266A5.8,5.8,0,0,1,24-15ZM27.984,3H30V-.984H27.984ZM42-21a12.082,12.082,0,0,0-.094-1.5,12.082,12.082,0,0,1-.094-1.5L48-27.422,42.188-38.016,36-34.406a21.548,21.548,0,0,0-2.859-2.086A18.2,18.2,0,0,0,30-38.016V-45H18v6.984a18.2,18.2,0,0,0-3.141,1.523A21.548,21.548,0,0,0,12-34.406L5.813-37.781,0-27.422,6.188-24a12.082,12.082,0,0,1-.094,1.5A12.082,12.082,0,0,0,6-21a12.082,12.082,0,0,0,.094,1.5A12.082,12.082,0,0,1,6.188-18L0-14.578,5.813-3.984,12-7.594a21.548,21.548,0,0,0,2.859,2.086A18.2,18.2,0,0,0,18-3.984V3h6V.984H20.016V-5.391a20.953,20.953,0,0,1-4.1-1.852,17.848,17.848,0,0,1-3.492-2.742L6.8-6.8,3-13.781l5.391-3.234q-.141-1.031-.258-1.992A16.452,16.452,0,0,1,8.016-21a16.452,16.452,0,0,1,.117-1.992q.117-.961.258-1.992L2.813-28.219l3.8-6.984q1.359.75,2.789,1.523t2.789,1.664a29.991,29.991,0,0,1,3.68-2.6,34.03,34.03,0,0,1,3.914-1.992v-6.375H27.8v6.375q1.359.469,2.672,1.055A21.712,21.712,0,0,1,33-34.219a15.956,15.956,0,0,0,1.289,1.2,6.315,6.315,0,0,0,1.289,1.008q1.359-.75,2.813-1.523T41.2-35.2L45-28.219q-.469.188-3.117,1.547t-2.461,1.688q.141,1.031.258,1.992A16.452,16.452,0,0,1,39.8-21a16.452,16.452,0,0,1-.117,1.992q-.117.961-.258,1.992L45-13.781,41.2-6.8,38.391-8.391,35.578-9.984a15.843,15.843,0,0,1-2.625,2.109A31.111,31.111,0,0,1,30-6.187v2.2a18.2,18.2,0,0,0,3.141-1.523A21.548,21.548,0,0,0,36-7.594l6.188,3.375L48-14.812l-6.187-3.375a10.5,10.5,0,0,1,.094-1.336A11.527,11.527,0,0,0,42-21Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
</span>
</div>
<div class="contents relative z-2">
<h3 class="mb-15 text-18 text-white">Web & Mobile App Development</h3>
<p>I specialize in web and mobile app development, creating custom solutions that align with your business needs.
From responsive websites to easy-to-use mobile apps, I create seamless experiences that engage users and help your business grow..</p>
</div>
</div>
</div>
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
<div class="iconbox-icon-wrap">
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M27.984-18.984a7.687,7.687,0,0,0,5.672-2.367A7.749,7.749,0,0,0,36-27V-40.781l5.391,4.594L42.8-37.781,35.2-44.391l-7.594,6.609,1.406,1.594,4.969-4.594V-27a5.839,5.839,0,0,1-1.711,4.266A5.777,5.777,0,0,1,27.984-21H18a5.609,5.609,0,0,0-3.094.938,9.831,9.831,0,0,0-2.555,2.414,12.4,12.4,0,0,0-1.734,3.234,10.011,10.011,0,0,0-.633,3.4v6H12v-6a9.784,9.784,0,0,1,1.734-5.25A5.017,5.017,0,0,1,18-18.984Zm-24-24h24V-45h-24a3.836,3.836,0,0,0-2.812,1.172A3.836,3.836,0,0,0,0-41.016V-.984A3.836,3.836,0,0,0,1.172,1.828,3.836,3.836,0,0,0,3.984,3V.984A1.933,1.933,0,0,1,2.555.445a1.933,1.933,0,0,1-.539-1.43V-41.016a1.933,1.933,0,0,1,.539-1.43A1.933,1.933,0,0,1,3.984-42.984ZM9.984,3H12V-.984H9.984Zm.8-31.219,3.234-3.375L17.2-28.219,18.8-29.812,15.422-33,18.8-36.187,17.2-37.781l-3.187,3.375-3.234-3.375L9.188-36.187,12.609-33,9.188-29.812ZM39.188-13.781,36-10.406l-3.187-3.375-1.594,1.594L34.594-9,31.219-5.812l1.594,1.594L36-7.594l3.188,3.375,1.594-1.594L37.406-9l3.375-3.187Zm6.8-27.234H48a3.836,3.836,0,0,0-1.172-2.812A3.836,3.836,0,0,0,44.016-45H42v2.016h2.016a1.933,1.933,0,0,1,1.43.539A1.933,1.933,0,0,1,45.984-41.016Zm0,40.031a1.933,1.933,0,0,1-.539,1.43,1.933,1.933,0,0,1-1.43.539H18V3H44.016a3.836,3.836,0,0,0,2.813-1.172A3.836,3.836,0,0,0,48-.984V-29.016H45.984Zm0-32.016H48v-3.984H45.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
</span>
</div>
<div class="contents relative z-2">
<h3 class="mb-15 text-18 text-white">Cloud & DevOps</h3>
<p>Streamline your infrastructure and deployment processes, enabling faster development and seamless scalability.
From cloud migration to CI/CD pipelines, we help optimize operations, enhance reliability, and ensure your systems are ready for future growth
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Services -->
<!-- Start Clients -->
<section class="lqd-section clients pt-50 pb-220 md:pt-0" id="clients" data-section-luminosity="dark">
<div class="container">
<div class="row">
<div class="col col-lg-3 col-12 module-col">
<h5 class="ld-fh-element relative mb-1em"> Clients</h5>
</div>
<div class="col col-lg-9 col-12 self-center">
<div class="carousel-container carousel-nav-left carousel-nav-mobile-center carousel-nav-md carousel-dots-mobile-center carousel-dots-style1 carousel-dots-mobile-outside">
<div class="carousel-items -mr-50 -ml-50" data-lqd-flickity='{ "wrapAround" : true, "equalHeightCells" : true, "middleAlignContent" : true, "cellAlign" : "center", "draggable" : true }' data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : ".carousel-items figure" , "duration" :700, "delay" :100, "ease" : "power4.out" , "initValues" : {"opacity" :0}, "animations" : {"opacity" :1} }'>
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
<div class="carousel-item-inner w-full relative">
<div class="carousel-item-content w-full relative">
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
<img width="82" height="19" src="./assets/images/demo/start-hub-8/Taborg.jpg" alt="Taborg">
</figure>
</div>
</div>
</div>
</div>
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
<div class="carousel-item-inner w-full relative">
<div class="carousel-item-content w-full relative">
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
<img width="83" height="25" src="./assets/images/demo/start-hub-8/Coregrade logo.png" alt="client">
</figure>
</div>
</div>
</div>
</div>
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
<div class="carousel-item-inner w-full relative">
<div class="carousel-item-content w-full relative">
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
<img width="61" height="22" src="./assets/images/demo/start-hub-8/chiefsoft-lg.png" alt="client">
</figure>
</div>
</div>
</div>
</div>
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
<div class="carousel-item-inner w-full relative">
<div class="carousel-item-content w-full relative">
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
<img width="61" height="15" src="./assets/images/demo/start-hub-8/float-travel-app-logo.svg" alt="client">
</figure>
</div>
</div>
</div>
</div>
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
<div class="carousel-item-inner w-full relative">
<div class="carousel-item-content w-full relative">
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
<img width="61" height="16" src="./assets/images/demo/start-hub-8/automedsys.ai logo.png" alt="client">
</figure>
</div>
</div>
</div>
</div>
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
<div class="carousel-item-inner w-full relative">
<div class="carousel-item-content w-full relative">
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
<img width="77" height="20" src="./assets/images/demo/start-hub-8/WrenchBoard.webp" alt="WrenchBoard">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Clients -->
<!-- Contact -->
<section class="lqd-section contact" id="contact"></section>
<!-- Contact -->
</div>
</main>
<footer class="main-footer" style="background-color: #F4A2AE; color: #1a1a1a;" data-sticky-footer="true" data-sticky-footer-options='{ "shadow" : "3" }'>
<section class="lqd-section pt-120 pb-90 footer-content">
<div class="container">
<div class="row justify-between items-center">
<div class="col col-xl-5 col-lg-6 col-12 mb-35">
<h2 class="ld-fh-element relative mb-1em text-30 leading-1/6em" style="color: #1a1a1a;">
Lets connect and build systems that are secure, scalable, and built for impact.
<a style="color: #1a1a1a; text-decoration: underline;" href="#">
<span>tokslawdev@gmail.com</span>
</a>
</h2>
<a href="#contact" class="btn btn-solid uppercase btn-xlg border-thin btn-hover-swp btn-has-label font-family-inherit bg-black text-11 uppercase font-bold text-white hover:bg-white hover:text-black" data-localscroll="true">
<span class="btn-txt" data-text="Send a message">Send a message</span>
<span class="btn-icon">
<i class="lqd-icn-ess icon-lqd-pen"></i>
</span>
<span class="btn-icon">
<i class="lqd-icn-ess icon-lqd-pen"></i>
</span>
</a>
</div>
<div class="col col-xl-5 col-lg-6 col-12">
<div class="lqd-fancy-menu lqd-menu-td-none mb-35">
<ul class="reset-ul inline-nav flex items-center justify-end -mx-20 md:justify-start">
<li class="w-auto inline-flex justify-end mx-20">
<a style="color: #1a1a1a;" href="https://www.facebook.com/tokunbo.lawal.1485" target="_blank"> Facebook</a>
</li>
<li class="w-auto inline-flex justify-end mx-20">
<a style="color: #1a1a1a;" href="https://blog.tokslaw.com/" target="_blank"> Blog</a>
</li>
<li class="w-auto inline-flex justify-end mx-20">
<a style="color: #1a1a1a;" href="https://x.com/Tokslaw1" target="_blank"> Twitter</a>
</li>
<li class="w-auto inline-flex justify-end mx-20">
<a style="color: #1a1a1a;" href="https://www.instagram.com/tokslawdev/" target="_blank"> Instagram</a>
</li>
<li class="w-auto inline-flex justify-end mx-20">
<a style="color: #1a1a1a;" href="https://www.youtube.com/@tokslawdev" target="_blank"> Youtube</a>
</li>
<li class="w-auto inline-flex justify-end mx-20">
<a style="color: #1a1a1a;" href="https://www.linkedin.com/in/toks-lawal/" target="_blank"> LinkedIn</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</footer>
</div>
<script src="./assets/vendors/jquery.min.js"></script>
<script src="./assets/vendors/jquery-ui/jquery-ui.min.js"></script>
<script src="./assets/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="./assets/vendors/fastdom/fastdom.min.js"></script>
<script src="./assets/vendors/gsap/utils/SplitText.min.js"></script>
<script src="./assets/vendors/flickity/flickity.pkgd.min.js"></script>
<script src="./assets/vendors/flickity/flickity-fade.min.js"></script>
<script src="./assets/vendors/isotope/isotope.pkgd.min.js"></script>
<script src="./assets/vendors/isotope/packery-mode.pkgd.min.js"></script>
<script src="./assets/vendors/gsap/minified/gsap.min.js"></script>
<script src="./assets/vendors/gsap/minified/ScrollTrigger.min.js"></script>
<script src="./assets/vendors/fontfaceobserver.js"></script>
<script src="./assets/vendors/tinycolor-min.js"></script>
<script src="./assets/vendors/fresco/js/fresco.js"></script>
<script src="./assets/js/theme.min.js"></script>
<script src="./assets/js/liquid-ajax-contact-form.min.js"></script>
<!-- Start custom cursor -->
<div class="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
<div class="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
<div class="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
<div class="lqd-cc-solid-txt flex justify-center text-center relative">
<div class="lqd-cc-solid-txt-inner">Explide</div>
</div>
</div>
<div class="lqd-cc--el lqd-cc-solid lqd-cc-drag flex items-center justify-center rounded-full fixed pointer-events-none">
<div class="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
<div class="lqd-cc-solid-ext lqd-cc-solid-ext-left inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
<path fill="currentColor" d="M19.943 6.07L9.837 14.73a1.486 1.486 0 0 0 0 2.25l10.106 8.661c.96.826 2.457.145 2.447-1.125V7.195c0-1.27-1.487-1.951-2.447-1.125z"></path>
</svg>
</div>
<div class="lqd-cc-solid-txt flex justify-center text-center relative">
<div class="lqd-cc-solid-txt-inner">Drag</div>
</div>
<div class="lqd-cc-solid-ext lqd-cc-solid-ext-right inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
<path fill="currentColor" d="M11.768 25.641l10.106-8.66a1.486 1.486 0 0 0 0-2.25L11.768 6.07c-.96-.826-2.457-.145-2.447 1.125v17.321c0 1.27 1.487 1.951 2.447 1.125z"></path>
</svg>
</div>
</div>
<div class="lqd-cc--el lqd-cc-arrow inline-flex items-center fixed top-0 left-0 pointer-events-none">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M60.4993 0V4.77005H8.87285L80 75.9207L75.7886 79.1419L4.98796 8.35478V60.4993H0V0H60.4993Z" />
</svg>
</div>
<div class="lqd-cc--el lqd-cc-custom-icon rounded-full fixed pointer-events-none">
<div class="lqd-cc-ci inline-flex items-center justify-center rounded-full relative">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M16.03 6a1 1 0 0 1 1 1v8.02h8.02a1 1 0 1 1 0 2.01h-8.02v8.02a1 1 0 1 1-2.01 0v-8.02h-8.02a1 1 0 1 1 0-2.01h8.02v-8.01a1 1 0 0 1 1.01-1.01z"></path>
</svg>
</div>
</div>
<div class="lqd-cc lqd-cc--outer fixed top-0 left-0 pointer-events-none"></div>
<!-- End custom cursor -->
<template id="lqd-temp-snickersbar">
<div class="lqd-snickersbar flex flex-wrap lqd-snickersbar-in" data-item-id>
<div class="lqd-snickersbar-inner flex flex-wrap items-center">
<div class="lqd-snickersbar-detail">
<p class="hidden lqd-snickersbar-addding-temp my-0">Adding {{itemName}} to cart</p>
<p class="hidden lqd-snickersbar-added-temp my-0">Added {{itemName}} to cart</p>
<p class="my-0 lqd-snickersbar-msg flex items-center my-0"></p>
<p class="my-0 lqd-snickersbar-msg-done flex items-center my-0"></p>
</div>
<div class="lqd-snickersbar-ext ml-4"></div>
</div>
</div>
</template>
<template id="lqd-temp-sticky-header-sentinel">
<div class="lqd-sticky-sentinel invisible absolute pointer-events-none"></div>
</template>
<template id="lqd-snickersbar">
<div class="lqd-snickersbar flex flex-wrap lqd-snickersbar-in" data-item-id>
<div class="lqd-snickersbar-inner flex flex-wrap items-center">
<div class="lqd-snickersbar-detail">
<p class="hidden lqd-snickersbar-addding-temp my-0">Adding {{itemName}} to cart</p>
<p class="hidden lqd-snickersbar-added-temp my-0">Added {{itemName}} to cart</p>
<p class="lqd-snickersbar-msg flex items-center my-0"></p>
<p class="lqd-snickersbar-msg-done flex items-center my-0"></p>
</div>
<div class="lqd-snickersbar-ext ml-4"></div>
</div>
</div>
</template>
<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1" data-modal-type="default" style="display: none;">
<div class="lity-backdrop"></div>
<div class="lity-wrap" data-lity-close role="document">
<div class="lity-loader" aria-hidden="true">Loading...</div>
<div class="lity-container">
<div class="lity-content"></div>
</div>
<button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button>
</div>
</div>
</body>
</html>