Add smartli experience

Also change some sizes of the top menu on mobile

src/index.html

@@ -66,6 +66,34 @@
         </div>
         <div class="section">
           <h2>Work Experience</h2>
+          <div class="experience">
+            <div class="smartli-wrapper">
+              <div>
+                <img src="./pictures/smartli.png" alt="smartli logo">
+              </div>
+            </div>
+            <div class="experience-text">
+              <div class="experience-header">
+                <h2>SmartLi Inc. | Analytics Developer</h2>
+                <p>05/2024 - Present</p>
+              </div>
+              <p>Toronto, ON.</p>
+              <ul>
+                <li>
+                  Configured and maintained analytics tracking on client's websites through Google Tag Manager
+                  for Google Analytics, Facebook Pixel, StackAdapt, Microsoft Clarity, and more
+                </li>
+                <li>
+                  Implemented custom tracking solutions on a per-client basis to track specific user interactions
+                  on custom web applications, resulting in a 20% increase in data accuracy
+                </li>
+                <li>
+                  Developed a full-stack web application to automate lead generation with automatic reporting and
+                  email notifications, resulting in a 50% increase in team efficiency for lead generation
+                </li>
+              </ul>
+            </div>
+          </div>
           <div class="experience">
             <div class="advertience-wrapper">
               <div>
@@ -81,13 +109,11 @@
               <ul>
                 <li>
                   Implemented analytics tracking via Google Tag Manager and gtag.js on client's websites, resulting in a
-                  30%
+                  30% improvement in data accuracy, empowering clients to execute data-driven marketing strategies
-                  improvement in data accuracy, empowering clients to execute data-driven marketing strategies
                 </li>
                 <li>
                   Developed a unique attribution system to differentiate my agency from the competition, which led to
-                  the
+                  the agency taking on several new clients, beating last year's profit records by 10%
-                  agency taking on several new clients, beating last year's profit records by 10%
                 </li>
                 <li>
                   Created a full-stack CRM web application to help our nonprofit clients leverage their geographical

src/style.css

@@ -180,6 +180,27 @@ li li {
     font-size: 90%;
 }
 
+div.smartli-wrapper {
+    width: 20%;
+    max-width: 10rem;
+}
+
+div.smartli-wrapper>div {
+    position: relative;
+    width: 100%;
+    padding-bottom: 25%;
+}
+
+div.smartli-wrapper>div>img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+}
+
 div.advertience-wrapper {
     width: 20%;
     padding: 1rem;
@@ -306,7 +327,7 @@ div.experience-header {
     }
 
     div.profile-name h1 {
-        font-size: 1.1rem;
+        font-size: 1.2rem;
     }
 
     div.social-media {
@@ -314,14 +335,8 @@ div.experience-header {
     }
 
     div.social-media a img {
-        width: 1.5rem;
+        width: 1.75rem;
-        height: 1.5rem;
+        height: 1.75rem;
-    }
-
-    div.social-media a img[src="./Pictures/gmail.png"] {
-        width: 2.5rem;
-        height: 2rem;
-        border-radius: 0.2rem;
     }
 
     div.experience {
@@ -338,7 +353,8 @@ div.experience-header {
 
     div.rectangular-wrapper,
     div.square-wrapper,
-    div.advertience-wrapper {
+    div.advertience-wrapper,
+    div.smartli-wrapper {
         width: 100%;
         min-width: 0;
     }