From 75acd26f843534f3e3687d82f3934e11fb55057f Mon Sep 17 00:00:00 2001
From: Miley Chandonnet <email@miley.codes>
Date: Thu, 12 Feb 2026 01:24:06 -0500
Subject: [PATCH] Polish portfolio redesign: fix layout and improve visuals

- Fixed Featured Experiences header visibility by adjusting toolbar spacing
- Converted summary paragraphs to bullet-list items with custom blue checkmark icons
- Tightened bullet point spacing for better visual hierarchy
- Increased horizontal page margins from 2vw to 3vw for better breathing room

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/commonMain/resources/index.css            | 38 ++++++++++++++++---
 .../miley/frontend/widget/ExperienceCell.kt   | 10 ++++-
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/commonMain/resources/index.css b/src/commonMain/resources/index.css
index 35fa2f2..da0a08b 100644
--- a/src/commonMain/resources/index.css
+++ b/src/commonMain/resources/index.css
@@ -143,11 +143,15 @@ button {
 }
 
 .experience-section {
-    padding-top: 132px;
+    padding-top: 24px;
     display: inline-flex;
     flex-direction: column;
 }
 
+.categories + .experience-section {
+    padding-top: 132px;
+}
+
 .experience-list {
     padding-top: 24px;
     display: inline-flex;
@@ -237,9 +241,33 @@ button {
 }
 
 .experience-info {
-    padding-left: 20px;
-    padding-top: 24px;
-    padding-right: 20px;
+    list-style: none;
+    padding: 16px 20px 0 20px;
+    margin: 0;
+}
+
+.experience-bullet {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 3px 0;
+}
+
+.experience-bullet p {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.45;
+}
+
+.bullet-icon {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    margin-top: 3px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3C7.5 3.2 4.2 6.1 3.1 10.5C2.3 13.8 3.5 17.2 6 19.5C8.8 22 12.8 22.5 16 21C19.5 19.3 21.5 15.8 21 12C20.4 7.5 16.8 3.5 12 3Z' fill='%2324A6DF' stroke='%231B8FC2' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.5 12.5L11 15L16 9' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
 }
 
 .date-range {
@@ -290,7 +318,7 @@ button {
 }
 
 .content {
-    padding: 0 2vw;
+    padding: 0 3vw;
     display: flex;
     flex-direction: column;
 }
diff --git a/src/jsMain/kotlin/codes/miley/frontend/widget/ExperienceCell.kt b/src/jsMain/kotlin/codes/miley/frontend/widget/ExperienceCell.kt
index 00f184b..fc39e7a 100644
--- a/src/jsMain/kotlin/codes/miley/frontend/widget/ExperienceCell.kt
+++ b/src/jsMain/kotlin/codes/miley/frontend/widget/ExperienceCell.kt
@@ -4,6 +4,7 @@ import codes.miley.model.Experience
 import dev.fritz2.core.RenderContext
 import dev.fritz2.core.src
 
+
 private val Experience.dateRanges: List<String>
     get() = timespans.map { (startYear, endYear) ->
         when {
@@ -56,7 +57,14 @@ fun RenderContext.experienceCell(
                     experienceGallery(media)
                 }
 
-                p("experience-info") { +summary }
+                ul("experience-info") {
+                    summary.split(". ").filter { it.isNotBlank() }.forEach { point ->
+                        li("experience-bullet") {
+                            span("bullet-icon") { }
+                            p { +point.trimEnd('.') }
+                        }
+                    }
+                }
             }
         }
     }