43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<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>
|