Compare commits

..

No commits in common. "8341320b2372bf4a0992ce9da3d06ad3730356d5" and "a2fdec755b499d708f2782b07dde50f906e1d78c" have entirely different histories.

6 changed files with 124 additions and 270 deletions

View File

@ -38,7 +38,6 @@ async fn main() {
.nest_service("/egg-fetcher", ServeDir::new("static/egg-fetcher"))
.nest_service("/svg", ServeDir::new("static/svg"))
.nest_service("/config.yml", ServeDir::new("static/resources/config.yml")) // Decap CMS config
.nest_service("/resources", ServeDir::new("static/resources"))
.nest_service("/robots.txt", ServeDir::new("robots.txt"));
#[cfg(debug_assertions)]

View File

@ -80,12 +80,12 @@ pub async fn render_portfolio() -> Result<PortfolioTemplate, StatusCode> {
title: "E-mail address".to_string(),
svg: "mail".to_string(),
},
// ContactLink {
// href: "tel:+421-905-372-947".to_string(),
// label: "+421 905 372 947".to_string(),
// title: "Phone".to_string(),
// svg: "phone".to_string(),
// },
ContactLink {
href: "tel:+421-905-372-947".to_string(),
label: "+421 905 372 947".to_string(),
title: "Phone".to_string(),
svg: "phone".to_string(),
},
ContactLink {
href: "https://github.com/michalvankodev".to_string(),
label: "GitHub".to_string(),

File diff suppressed because one or more lines are too long

View File

@ -624,6 +624,10 @@ video {
grid-column: span 2 / span 2;
}
.col-auto {
grid-column: auto;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
@ -632,10 +636,6 @@ video {
float: inline-start;
}
.float-right {
float: right;
}
.clear-both {
clear: both;
}
@ -656,8 +656,8 @@ video {
margin: 1.5rem;
}
.m-10 {
margin: 2.5rem;
.m-3 {
margin: 0.75rem;
}
.mx-0\.5 {
@ -695,11 +695,6 @@ video {
margin-right: auto;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
@ -720,6 +715,11 @@ video {
margin-bottom: 1.25rem;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -800,14 +800,6 @@ video {
height: auto;
}
.h-\[256px\] {
height: 256px;
}
.h-\[320px\] {
height: 320px;
}
.max-h-\[236px\] {
max-height: 236px;
}
@ -832,18 +824,6 @@ video {
width: 180px;
}
.w-\[256px\] {
width: 256px;
}
.w-\[320px\] {
width: 320px;
}
.max-w-\[24rem\] {
max-width: 24rem;
}
.max-w-\[32rem\] {
max-width: 32rem;
}
@ -860,6 +840,30 @@ video {
max-width: 64rem;
}
.max-w-20 {
max-width: 5rem;
}
.max-w-60 {
max-width: 15rem;
}
.max-w-\[16rem\] {
max-width: 16rem;
}
.max-w-\[20rem\] {
max-width: 20rem;
}
.max-w-\[24rem\] {
max-width: 24rem;
}
.max-w-\[36rem\] {
max-width: 36rem;
}
.flex-1 {
flex: 1 1 0%;
}
@ -882,22 +886,10 @@ video {
break-inside: avoid;
}
.auto-cols-auto {
grid-auto-columns: auto;
}
.grid-flow-row {
grid-auto-flow: row;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[1fr_auto\] {
grid-template-columns: 1fr auto;
}
.flex-row {
flex-direction: row;
}
@ -910,6 +902,10 @@ video {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.place-content-center {
place-content: center;
}
@ -942,14 +938,14 @@ video {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-4 {
gap: 1rem;
}
.self-start {
align-self: flex-start;
}
@ -982,11 +978,6 @@ video {
border-width: 2px;
}
.border-blue-300 {
--tw-border-opacity: 1;
border-color: rgb(130 195 247 / var(--tw-border-opacity));
}
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(23 137 224 / var(--tw-border-opacity));
@ -1002,6 +993,11 @@ video {
border-color: rgb(203 213 225 / var(--tw-border-opacity));
}
.border-blue-300 {
--tw-border-opacity: 1;
border-color: rgb(130 195 247 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@ -1034,10 +1030,6 @@ video {
padding: 0.125rem;
}
.p-2 {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
@ -1046,6 +1038,10 @@ video {
padding: 1rem;
}
.p-2 {
padding: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -1178,11 +1174,6 @@ video {
color: rgb(11 39 70 / var(--tw-text-opacity));
}
.text-pink-900 {
--tw-text-opacity: 1;
color: rgb(119 24 89 / var(--tw-text-opacity));
}
.text-pink-950 {
--tw-text-opacity: 1;
color: rgb(80 2 56 / var(--tw-text-opacity));
@ -1198,6 +1189,16 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-blue-800 {
--tw-text-opacity: 1;
color: rgb(12 73 128 / var(--tw-text-opacity));
}
.text-pink-900 {
--tw-text-opacity: 1;
color: rgb(119 24 89 / var(--tw-text-opacity));
}
.no-underline {
text-decoration-line: none;
}
@ -2068,10 +2069,6 @@ article a:visited {
grid-template-columns: max-content 1fr;
}
.sm\:grid-cols-\[1fr_auto\] {
grid-template-columns: 1fr auto;
}
.sm\:grid-rows-\[max-content_1fr_max-content\] {
grid-template-rows: max-content 1fr max-content;
}
@ -2087,22 +2084,19 @@ article a:visited {
}
@media (min-width: 768px) {
.md\:mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.md\:my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.md\:block {
display: block;
.md\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.md\:grid {
display: grid;
.md\:mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.md\:h-16 {
@ -2117,10 +2111,6 @@ article a:visited {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-\[1fr_auto\] {
grid-template-columns: 1fr auto;
}
.md\:grid-rows-\[masonry\] {
grid-template-rows: masonry;
}
@ -2153,11 +2143,6 @@ article a:visited {
line-height: 2.5rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
@ -2178,6 +2163,11 @@ article a:visited {
line-height: 1.75rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:leading-tight {
line-height: 1.25;
}
@ -2271,10 +2261,19 @@ article a:visited {
grid-row-start: auto;
}
.xl\:my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.xl\:mb-4 {
margin-bottom: 1rem;
}
.xl\:mt-6 {
margin-top: 1.5rem;
}
.xl\:mt-10 {
margin-top: 2.5rem;
}
@ -2287,6 +2286,10 @@ article a:visited {
display: grid;
}
.xl\:grid-flow-row {
grid-auto-flow: row;
}
.xl\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@ -2304,6 +2307,11 @@ article a:visited {
column-gap: 8rem;
}
.xl\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.xl\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
@ -2314,6 +2322,11 @@ article a:visited {
line-height: 1;
}
.xl\:text-9xl {
font-size: 8rem;
line-height: 1;
}
.xl\:font-medium {
font-weight: 500;
}

View File

@ -1,67 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
id="m-logo"
width="512"
height="512"
viewBox="0 0 512 512"
fill="none"
version="1.1"
sodipodi:docname="m-logo-animated.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<defs id="custom-defs">
<radialGradient id="bg-gradient" r="91%">
<stop id="bg-stop" offset="100%" stop-color="rgba(216, 246, 255, 0)" />
<stop offset="100%" stop-color="#32a8eb" />
</radialGradient>
</defs>
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="1.6089441"
inkscape:cx="28.590179"
inkscape:cy="341.52833"
inkscape:window-width="2560"
inkscape:window-height="1371"
inkscape:window-x="26"
inkscape:window-y="23"
inkscape:window-maximized="0"
inkscape:current-layer="m-logo" />
<path
id="border"
d="m 256,477 c -56.348,0 -98.269,-0.006 -129.636,-3.491 C 94.967,470.02 75.025,463.118 61.953,450.047 48.882,436.975 41.98,417.033 38.491,385.636 35.006,354.269 35,312.348 35,256 35,199.652 35.006,157.731 38.491,126.364 41.98,94.9671 48.882,75.0246 61.953,61.9534 75.025,48.8822 94.967,41.9797 126.364,38.4912 157.731,35.0059 199.652,35 256,35 c 56.348,0 98.269,0.006 129.636,3.4912 31.3969,3.4885 51.3394,10.391 64.4106,23.4622 13.0712,13.0712 19.9737,33.0137 23.4622,64.4106 C 476.9941,157.731 477,199.652 477,256 c 0,56.348 -0.006,98.269 -3.4912,129.636 -3.4885,31.397 -10.391,51.339 -23.4622,64.411 -13.0712,13.071 -33.0137,19.973 -64.4106,23.462 C 354.269,476.994 312.348,477 256,477 Z"
fill="rgba(216, 246, 255, 0)"
stroke="#32a8eb"
stroke-width="8"
stroke-linejoin="round" />
<path
d="M347.694 326.566H360V235.186C360 203.566 340.791 185 310.176 185C290.066 185 270.257 193.413 256.15 208.208C248.046 193.123 232.739 185 212.629 185C194.62 185 177.212 191.382 163.405 202.696L161.004 187.031H152V326.566H164.306V212.269C176.912 201.535 193.12 195.153 209.628 195.153C234.84 195.153 249.847 210.528 249.847 236.927V326.566H262.153V235.186C262.153 227.934 261.253 221.262 259.152 215.46C272.058 202.696 289.466 195.153 307.175 195.153C332.687 195.153 347.694 210.528 347.694 236.927V326.566Z"
stroke="#32a8eb"
fill="rgba(216, 246, 255, 0)"
stroke-width="2"
id="m-letter" />
<path
id="border-start"
d="m 509.27383,509.07982 c -13.78829,-18.55493 -32.05408,-24.58114 -81.31406,-26.9168 -101.10905,-4.7941 -48.5241,-5.4316 -220.91427,-5.25658"
stroke="#32a8eb"
stroke-width="8"
stroke-linejoin="round"
sodipodi:nodetypes="csc" />
<path
d="M 507.76664,507.59022 C 453.73997,452.69049 121.4145,522.45057 289.19959,354.47858 c 10.11721,-10.12848 19.63171,-17.88383 30.25282,-22.95349 6.77433,-3.23351 15.74106,-4.08485 28.19639,-5.03375"
id="m-letter-start"
stroke="#32a8eb"
stroke-width="2"
sodipodi:nodetypes="cssc" />
</svg>

Before

Width:  |  Height:  |  Size: 3.3 KiB

View File

@ -10,111 +10,28 @@
{% block content %}
<header class="max-w-read mx-auto md:grid md:grid-cols-[1fr_auto]">
<div>
<h1 class="px-4 my-2 text-4xl text-blue-950 font-extrabold md:text-6xl xl:text-7xl xl:mb-4 xl:mt-10">Michal Vanko</h1>
<h3 class="px-4 my-1 text-2xl text-blue-900 font-bold italic md:text-3xl xl:text-4xl">Software Architect by passion</h3>
<section id="contact" class="mt-4">
<ul class="max-w-[24rem] mx-auto md:mx-6">
{% for link in contact_links %}
<li class="my-2">
<a
class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
href="{{link.href}}"
title="{{link.title}}"
>
<svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
<use xlink:href="#{{link.svg}}" />
</svg>
<span class="text-lg font-semibold print:hidden">{{link.label}}</span>
<span class="hidden print:inline text-sm">{{link.href}}</span>
</a>
</li>
{% endfor %}
</ul>
</section>
</div>
<aside id="logo-container" class="hidden md:block h-[320px] w-[320px] m-10">
<style>
#logo-container svg {
height: 100%;
width: 100%;
}
</style>
{% include "icons/m-logo-animated.svg" %}
<script src="/resources/anime.min.js"></script>
<script>
var borderTimeline = anime.timeline({
duration: 2000,
easing: 'easeInOutSine',
})
borderTimeline.add({
targets: '#m-logo #border-start',
strokeDashoffset: [anime.setDashoffset, -310],
duration: 2000,
easing: 'easeOutExpo'
}, 0)
borderTimeline.add({
targets: '#m-logo #m-letter-start',
strokeDashoffset: [anime.setDashoffset, -447.4],
easing: 'easeOutExpo',
duration: 2000,
}, 0)
borderTimeline.add({
targets: '#m-logo #border',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 2000,
complete: (animation) => {
//debugger;
const target = animation.animatables[0].target
target.setAttribute("fill", "url('#bg-gradient')")
var bgAnimationTimeline = anime.timeline()
bgAnimationTimeline.add({
targets: '#m-logo #bg-gradient #bg-stop',
offset: "0%",
stopColor: "rgba(216, 246, 255, 1)",
easing: 'easeInQuint',
duration: 123,
})
bgAnimationTimeline.add({
targets: '#m-logo #bg-gradient #bg-stop',
offset: "100%",
easing: 'easeOutExpo',
duration: 333,
})
}
}, 160)
borderTimeline.add({
targets: '#m-logo #m-letter',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1800,
}, 160)
borderTimeline.add({
targets: '#m-logo #m-letter',
easing: 'easeInOutSine',
duration: 333,
fill: "#32a8eb",
strokeWidth: "0",
})
// background
/*borderTimeline.add({
targets: '#m-logo #border',
easing: 'easeInCirc',
fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
duration: 1500,
}, 160)
borderTimeline.add({
targets: '#m-logo #border',
easing: 'easeInCirc',
fill: ["rgba(216, 246, 255, 0)", "rgba(216, 246, 255, 1)"],
duration: 1500,
}, 160) */
</script>
</aside>
<header class="max-w-read mx-auto">
<h1 class="px-4 my-2 text-4xl text-blue-950 font-extrabold md:text-6xl xl:text-7xl xl:mb-4 xl:mt-10">Michal Vanko</h1>
<h3 class="px-4 my-1 text-2xl text-blue-900 font-bold italic md:text-3xl xl:text-4xl">Software Architect by passion</h3>
<section id="contact" class="mt-4">
<ul class="max-w-[24rem] mx-auto md:mx-6">
{% for link in contact_links %}
<li class="my-2">
<a
class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
href="{{link.href}}"
title="{{link.title}}"
>
<svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
<use xlink:href="#{{link.svg}}" />
</svg>
<span class="text-lg font-semibold print:hidden">{{link.label}}</span>
<span class="hidden print:inline text-sm">{{link.href}}</span>
</a>
</li>
{% endfor %}
</ul>
</section>
</header>
<section id="portfolio-body" class="article-body">