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;
 }
@@ -599,6 +609,18 @@ video {
   display: none;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
+.w-full {
+  width: 100%;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -665,8 +687,8 @@ video {
   border-radius: 0.25rem;
 }
 
-.border {
-  border-width: 1px;
+.rounded-full {
+  border-radius: 9999px;
 }
 
 .border-b {
@@ -682,11 +704,21 @@ 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));
 }
 
+.bg-sky-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -696,9 +728,8 @@ video {
   padding: 0.5rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.p-1 {
+  padding: 0.25rem;
 }
 
 .px-6 {
@@ -711,12 +742,18 @@ video {
   padding-bottom: 6rem;
 }
 
-.pt-10 {
-  padding-top: 2.5rem;
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
-.pt-2 {
+.py-2 {
   padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
 }
 
 .text-2xl {
@@ -729,11 +766,29 @@ video {
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -742,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));
@@ -757,6 +817,11 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.drop-shadow {
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .first\:border-none:first-child {
   border-style: none;
 }

rauhala.info/profile.html

@@ -0,0 +1,42 @@
+<div class="flex">
+  <div class="w-1/3 bg-sky-200">
+    <img class="rounded-full drop-shadow" src="./images/profile.jpg"/>
+    <div>
+      <div class="">
+        <h2 class="text-xl font-bold">Mats Rauhala</h2>
+        <h3 class="text-sm">Lead Software Developer</h3>
+      </div>
+    </div>
+  </div>
+  <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 -->
+      <!-- I'm thinking of something like closeable boxes for more information? -->
+    </div>
+  </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>
+
+</div>

rauhala.info/templates/default.html

@@ -9,8 +9,9 @@
     <link rel="stylesheet" href="/css/index.css">
   </head>
   <body>
+    <div class="h-screen">
       <header>
-          <nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg border width-full align-center justify-between">
+        <nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg width-full align-center justify-between">
           <ul class="flex gap-2 p-2">
             <li class="hover:text-gray-400"><a href="/">Home</a></li>
             <li class="hover:text-gray-400"><a href="/posts.html">Posts</a></li>
@@ -21,7 +22,7 @@
               <!-- Hide the dropdown by default, but make it visible on the parent hover
                    see the 'group' on the toplevel
                 -->
-                <ul class="hidden bg-gray-800 text-gray-300 border rounded p-2 group-hover:block absolute">
+              <ul class="hidden bg-gray-800 text-gray-300 rounded p-2 group-hover:block absolute">
                 <li class="hover:text-gray-400"><a href="https://git.rauhala.info/MasseR">Gitea</a></li>
                 <li class="hover:text-gray-400"><a href="https://github.com/MasseR">GitHub</a></li>
               </ul>
@@ -31,15 +32,19 @@
         </nav>
       </header>
 
-        <main role="main" class="px-2">
+      <main role="main" class="">
         <div>
           $body$
         </div>
       </main>
 
-        <footer class="pt-2 border-t px-2">
-            Site proudly generated by
-            <a href="http://jaspervdj.be/hakyll">Hakyll</a>
+      <footer class="">
+        <div class="flex justify-center">
+          <div>
+            Site proudly generated by <a href="http://jaspervdj.be/hakyll">Hakyll</a>
+          </div>
+        </div>
       </footer>
+    </div>
   </body>
 </html>

site/app/site.hs

@@ -50,7 +50,12 @@ main = hakyllWith defaultConfiguration{ignoreFile = ignore} $ do
       >>= relativizeUrls
 
 
-  match (fromList ["index.markdown", "contact.markdown"]) $ do
+  match "profile.html" $ do
+    route $ constRoute "index.html"
+    compile $ getResourceBody
+      >>= loadAndApplyTemplate "templates/default.html" defaultContext
+      >>= relativizeUrls
+  match (fromList ["contact.markdown"]) $ do
     route   $ setExtension "html"
     compile $ pandocCompiler
       >>= loadAndApplyTemplate "templates/default.html" defaultContext