Adding lcd screen element

layouts/about/single.html

@@ -2,9 +2,8 @@
 "main" }}
 <article class="about-page">
   <div class="about-content">
-    <div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
-
     <div class="content-screen">
+      <div class="about-header">{{ partial "elements/lavalamp.html" . }}</div>
       <div class="screen-display crt no-scroll">
         > about -v <br />
         <span>Name</span> / <span class="info">Dan (He/Him)</span><br />
@@ -18,6 +17,12 @@
       </div>
     </div>
 
+    <div class="info-badges random-rotation">
+      {{ $likes := slice "LovingWifex1" "CrazyKidsx3" "labradorsx2" "Linux_User"
+      "Developer" "PC_GAMING" "RETRO_TECH"}} {{ range $likes }} {{ partial
+      "elements/lcd-screen.html" (dict "text" .) }} {{ end }}
+    </div>
+
     <div class="wide-item manifesto-container">
       <div class="content-screen">
         <div class="screen-display crt">

layouts/partials/elements/lcd-screen.html

@@ -0,0 +1,10 @@
+{{ $text := .text | default "" }} {{ $placeholder := strings.Repeat (len $text)
+"8" }}
+
+<div class="lcd-container">
+  <div class="lcd-screen">
+    <span class="lcd-text" data-placeholder="{{ $placeholder }}"
+      >{{ $text }}</span
+    >
+  </div>
+</div>