20.5: connected bullets in work experience

Author: miermontoto

package.json

@@ -3,14 +3,14 @@ name: okticket
 role: software engineer
 period: 2023, 2024-
 icons: [ruby, laravel, docker, php]
-class: okticket
+class: okticket work
 ---
 *okticket* is a fintech SaaS that digitizes and manages employee tickets.
 
 ---
 
-- **2024: current**
-- **2023: internship, software developer**
+- **2024: developer**
+- **2023: internship, developer**
   - back-end system migration (laravel 10, PHP 8.2, composer 2).
   - local deploy automation with Docker and Ruby.
   - load and stress tests with [Locust](https://locust.io/).

src/content/collections/experience/okticket.md

@@ -10,7 +10,7 @@
 			"li"
 		],
 		"a": "",
-		"s": ["https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem"],
+		"s": ["https://codepen.io/anon/pen/gJpLrR", "https://dev.to/peterc/how-to-create-joined-bulletpoint-lists-with-css-bbc-news-style-1eem"],
 		"d": "2023-12-20"
 	}
 ]

src/content/data/questions.json

@@ -83,11 +83,54 @@ ul
     font-style: italic !important
     font: 500 1.5em 'Ndot-55', sans-serif
 
-.experience-logo
-    width: 1.5em
-    margin-right: 0.5em
-    border-radius: 5%
-    user-select: none
+#experience-container
+    .work .card-description > ul
+        margin-left: -2em
+        list-style-type: none
+
+        & > li:before
+            content: ''
+            position: absolute
+            background-color: colors.$white
+            top: 0
+            bottom: 0
+            left: 5px
+            width: 2px
+
+        & > li
+            position: relative
+            margin: 0
+            padding-bottom: 1em
+            padding-left: 20px
+
+            ul
+                display: block
+
+                li
+                    margin-left: -1em
+
+        & > li:after
+            content: ''
+            position: absolute
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='white' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E")
+            background-repeat: no-repeat
+            background-size: contain
+            left: 0
+            top: 2px
+            width: 12px
+            height: 12px
+
+        & > li:last-child:before
+            height: 6px
+
+        & > li:first-child:before
+            top: 10px
+
+    .experience-logo
+        width: 1.5em
+        margin-right: 0.5em
+        border-radius: 5%
+        user-select: none
 
 video#background
     position: fixed