Start replacing the profile
This commit is contained in:
parent
06f95f0aa6
commit
bb00c393a4
@ -599,6 +599,18 @@ video {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-screen {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-1\/3 {
|
||||||
|
width: 33.333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-2xl {
|
.max-w-2xl {
|
||||||
max-width: 42rem;
|
max-width: 42rem;
|
||||||
}
|
}
|
||||||
@ -619,10 +631,18 @@ video {
|
|||||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-cols-3 {
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
.flex-col {
|
.flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.place-items-stretch {
|
||||||
|
place-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
.items-start {
|
.items-start {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
@ -665,8 +685,8 @@ video {
|
|||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border {
|
.rounded-full {
|
||||||
border-width: 1px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
@ -687,6 +707,16 @@ video {
|
|||||||
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
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-teal-400 {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(45 212 191 / var(--tw-bg-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.bg-white {
|
.bg-white {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||||
@ -696,11 +726,6 @@ video {
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-2 {
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-6 {
|
.px-6 {
|
||||||
padding-left: 1.5rem;
|
padding-left: 1.5rem;
|
||||||
padding-right: 1.5rem;
|
padding-right: 1.5rem;
|
||||||
@ -715,10 +740,6 @@ video {
|
|||||||
padding-top: 2.5rem;
|
padding-top: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-2 {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-2xl {
|
.text-2xl {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
@ -729,11 +750,25 @@ video {
|
|||||||
line-height: 1.75rem;
|
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 {
|
.text-xs {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-bold {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.font-semibold {
|
.font-semibold {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@ -757,6 +792,11 @@ video {
|
|||||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
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 {
|
.first\:border-none:first-child {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
|
|||||||
27
rauhala.info/profile.html
Normal file
27
rauhala.info/profile.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<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 bg-teal-400">
|
||||||
|
<div>
|
||||||
|
<!-- Skills -->
|
||||||
|
<!-- Take ideas from https://www.mockplus.com/blog/post/profile-page-design -->
|
||||||
|
</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>
|
||||||
|
<h2 class="text-lg font-medium">Location</h2>
|
||||||
|
Espoo, Finland
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
@ -1,45 +1,50 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>rauhala.info - $title$</title>
|
<title>rauhala.info - $title$</title>
|
||||||
<link rel="stylesheet" href="/css/highlight.css">
|
<link rel="stylesheet" href="/css/highlight.css">
|
||||||
<link rel="stylesheet" href="/css/index.css">
|
<link rel="stylesheet" href="/css/index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<div class="h-screen">
|
||||||
<nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg border width-full align-center justify-between">
|
<header>
|
||||||
<ul class="flex gap-2 p-2">
|
<nav class="flex bg-gray-800 text-gray-300 items-stretch text-lg width-full align-center justify-between">
|
||||||
<li class="hover:text-gray-400"><a href="/">Home</a></li>
|
<ul class="flex gap-2 p-2">
|
||||||
<li class="hover:text-gray-400"><a href="/posts.html">Posts</a></li>
|
<li class="hover:text-gray-400"><a href="/">Home</a></li>
|
||||||
<li class="hover:text-gray-400"><a href="/projects.html">Projects</a></li>
|
<li class="hover:text-gray-400"><a href="/posts.html">Posts</a></li>
|
||||||
</ul>
|
<li class="hover:text-gray-400"><a href="/projects.html">Projects</a></li>
|
||||||
<ul class="flex gap-2 p-2">
|
</ul>
|
||||||
<li class="group">Git
|
<ul class="flex gap-2 p-2">
|
||||||
<!-- Hide the dropdown by default, but make it visible on the parent hover
|
<li class="group">Git
|
||||||
see the 'group' on the toplevel
|
<!-- 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>
|
<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://github.com/MasseR">GitHub</a></li>
|
<li class="hover:text-gray-400"><a href="https://git.rauhala.info/MasseR">Gitea</a></li>
|
||||||
</ul>
|
<li class="hover:text-gray-400"><a href="https://github.com/MasseR">GitHub</a></li>
|
||||||
</li>
|
</ul>
|
||||||
<li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
|
</li>
|
||||||
</ul>
|
<li class="hover:text-gray-400"><a href="/contact.html">Contact</a></li>
|
||||||
</nav>
|
</ul>
|
||||||
</header>
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main role="main" class="px-2">
|
<main role="main" class="">
|
||||||
|
<div>
|
||||||
|
$body$
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="">
|
||||||
|
<div class="flex justify-center">
|
||||||
<div>
|
<div>
|
||||||
$body$
|
Site proudly generated by <a href="http://jaspervdj.be/hakyll">Hakyll</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
</footer>
|
||||||
<footer class="pt-2 border-t px-2">
|
</div>
|
||||||
Site proudly generated by
|
</body>
|
||||||
<a href="http://jaspervdj.be/hakyll">Hakyll</a>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -50,7 +50,12 @@ main = hakyllWith defaultConfiguration{ignoreFile = ignore} $ do
|
|||||||
>>= relativizeUrls
|
>>= 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"
|
route $ setExtension "html"
|
||||||
compile $ pandocCompiler
|
compile $ pandocCompiler
|
||||||
>>= loadAndApplyTemplate "templates/default.html" defaultContext
|
>>= loadAndApplyTemplate "templates/default.html" defaultContext
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user