MasseR/rauhala.info
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: MasseR:06f95f0aa61aeb948fddb432165e8c6f647bfe90
Branches Tags
MasseR:master
MasseR:tailwind
MasseR:design-docs
MasseR:ipfs
MasseR:books
MasseR:configuring
...
compare: MasseR:48948ca62351cf62a7a7164386a3f80aca8e8280
Branches Tags
MasseR:tailwind
MasseR:design-docs
MasseR:master
MasseR:ipfs
MasseR:books
MasseR:configuring

2 Commits
06f95f0aa6 ... 48948ca623

Author SHA1 Message Date
Mats Rauhala
48948ca623 Trial the skills 2023-04-27 22:03:38 +03:00
Mats Rauhala
bb00c393a4 Start replacing the profile 2023-04-27 21:53:31 +03:00
4 changed files with 165 additions and 48 deletions
Show Stats Expand all files Collapse all files

81
rauhala.info/css/index.css
View File

@ -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;
}

42
rauhala.info/profile.html Normal file
View File

@ -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>

83
rauhala.info/templates/default.html
View File

@ -1,45 +1,50 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rauhala.info - $title$</title>
<link rel="stylesheet" href="/css/highlight.css">
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header>
<nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg border 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>
<li class="hover:text-gray-400"><a href="/projects.html">Projects</a></li>
</ul>
<ul class="flex gap-2 p-2">
<li class="group">Git
<!-- 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">
<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>
</li>
<li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</header>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rauhala.info - $title$</title>
<link rel="stylesheet" href="/css/highlight.css">
<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 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>
<li class="hover:text-gray-400"><a href="/projects.html">Projects</a></li>
</ul>
<ul class="flex gap-2 p-2">
<li class="group">Git
<!-- 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 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>
</li>
<li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main role="main" class="px-2">
<main role="main" class="">
<div>
$body$
</div>
</main>
<footer class="">
<div class="flex justify-center">
<div>
$body$
Site proudly generated by <a href="http://jaspervdj.be/hakyll">Hakyll</a>
</div>
</main>
<footer class="pt-2 border-t px-2">
Site proudly generated by
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
</footer>
</body>
</div>
</footer>
</div>
</body>
</html>

7
site/app/site.hs
View File

@ -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