Decoration

site/assets/chloe.css

@@ -32,6 +32,9 @@
     --background-color: #000000;
     --text-color: #FFFFFF;
     --text-color-dim: #C0C0C0;
+    --red: #C00000;
+    --green: #00C000;
+    --blue: #0000C0;
 }
 
 .mobile-only {
@@ -86,9 +89,30 @@ a {
     padding: 0.5em;
 }
 
+.body {
+    margin-top: 1em;
+}
+
 .section .descriptor {
     font-size: 1.5em;
     font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5em;
+}
+
+.section .descriptor > * {
+    flex-grow: 0;
+}
+
+.section .descriptor .decoration {
+    flex-grow: 1;
+    height: 0px;
+    border-top: 1px solid var(--text-color);
+    position: relative;
+    top: 1px;
 }
 
 .section .block {
@@ -213,4 +237,16 @@ ul.spaced li {
     .print-hide {
         display: none;
     }
+
+    .section .descriptor .decoration.red {
+        border-top: 2px solid var(--red);
+    }
+    
+    .section .descriptor .decoration.green {
+        border-top: 2px solid var(--green);
+    }
+    
+    .section .descriptor .decoration.blue {
+        border-top: 2px solid var(--blue);
+    }
 }

site/index.html

@@ -182,7 +182,10 @@
             <div class="body">
                 <div class="section professional-experience">
                     <div class="descriptor">
-                        Professional Experience
+                        <div>
+                            Professional Experience
+                        </div>
+                        <div class="decoration red"></div>
                     </div>
                     <div class="block experience">
                         <div class="content">
@@ -211,7 +214,10 @@
                 </div>
                 <div class="section proficiencies">
                     <div class="descriptor">
-                        Key Technologies
+                        <div>
+                            Key Technologies
+                        </div>
+                        <div class="decoration green"></div>
                     </div>
                     <div class="block languages">
                         <div class="item">
@@ -250,7 +256,10 @@
                 </div>
                 <div class="section work-history">
                     <div class="descriptor">
-                        Work & Education
+                        <div>
+                            Work & Education
+                        </div>
+                        <div class="decoration blue"></div>
                     </div>
                     <div class="block safelite sidebar">
                         <div class="title">
@@ -279,7 +288,10 @@
                 </div>
                 <div class="section projects print-hide">
                     <div class="descriptor">
-                        Personal Projects
+                        <div>
+                            Personal Projects
+                        </div>
+                        <div class="decoration"></div>
                     </div>
                     <div class="block intro">
                         <div class="content">