Trial the skills

rauhala.info/css/index.css

@@ -566,11 +566,21 @@ video {
   inset: 0px;
 }
 
+.mx-3 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .mb-10 {
   margin-bottom: 2.5rem;
 }
@@ -631,18 +641,10 @@ video {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .flex-col {
   flex-direction: column;
 }
 
-.place-items-stretch {
-  place-items: stretch;
-}
-
 .items-start {
   align-items: flex-start;
 }
@@ -702,6 +704,11 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -712,11 +719,6 @@ video {
   background-color: rgb(186 230 253 / var(--tw-bg-opacity));
 }
 
-.bg-teal-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -726,6 +728,10 @@ video {
   padding: 0.5rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -736,6 +742,16 @@ video {
   padding-bottom: 6rem;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
 .pt-10 {
   padding-top: 2.5rem;
 }
@@ -769,6 +785,10 @@ video {
   font-weight: 700;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -777,6 +797,11 @@ video {
   line-height: 1.5rem;
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));

rauhala.info/profile.html

@@ -8,10 +8,24 @@
       </div>
     </div>
   </div>
-  <div class="w-full bg-teal-400">
+  <div class="w-full">
     <div>
+      <h2 class="text-xl">Working on</h2>
       <!-- Skills -->
       <!-- Take ideas from https://www.mockplus.com/blog/post/profile-page-design -->
+      <!-- XXX: Convert to alpine.js to remove some repetition? -->
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Haskell</button>
+      </div>
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Functional programming</button>
+      </div>
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Databases</button>
+      </div>
+      <div class="p-1">
+        <button class="bg-gray-500 text-gray-200 rounded-full px-3 py-2 ">Kubernetes</button>
+      </div>
     </div>
     <div>
       <!-- Past experience -->
@@ -20,6 +34,7 @@
   </div>
   <div class="bg-sky-200 w-1/3">
     <h2 class="text-lg font-medium">Biography</h2>
+    <p>A software developer from southern Finland<p>
     <h2 class="text-lg font-medium">Location</h2>
     Espoo, Finland
   </div>