animated logo in portfolio
This commit is contained in:
parent
a2fdec755b
commit
85e86b28bb
@ -38,6 +38,7 @@ 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)]
|
||||
|
||||
@ -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(),
|
||||
|
||||
8
static/resources/anime.min.js
vendored
Normal file
8
static/resources/anime.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -624,10 +624,6 @@ video {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.col-auto {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
@ -636,6 +632,10 @@ video {
|
||||
float: inline-start;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear-both {
|
||||
clear: both;
|
||||
}
|
||||
@ -656,8 +656,8 @@ video {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.m-3 {
|
||||
margin: 0.75rem;
|
||||
.m-10 {
|
||||
margin: 2.5rem;
|
||||
}
|
||||
|
||||
.mx-0\.5 {
|
||||
@ -695,6 +695,11 @@ video {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
@ -715,11 +720,6 @@ video {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.my-1 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@ -800,6 +800,14 @@ video {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.h-\[256px\] {
|
||||
height: 256px;
|
||||
}
|
||||
|
||||
.h-\[320px\] {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.max-h-\[236px\] {
|
||||
max-height: 236px;
|
||||
}
|
||||
@ -824,6 +832,18 @@ video {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.w-\[256px\] {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.w-\[320px\] {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.max-w-\[24rem\] {
|
||||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.max-w-\[32rem\] {
|
||||
max-width: 32rem;
|
||||
}
|
||||
@ -840,30 +860,6 @@ 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%;
|
||||
}
|
||||
@ -886,10 +882,22 @@ 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;
|
||||
}
|
||||
@ -902,10 +910,6 @@ video {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.place-content-center {
|
||||
place-content: center;
|
||||
}
|
||||
@ -938,14 +942,14 @@ video {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
@ -978,6 +982,11 @@ 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));
|
||||
@ -993,11 +1002,6 @@ 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));
|
||||
@ -1030,6 +1034,10 @@ video {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
@ -1038,10 +1046,6 @@ video {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
@ -1174,6 +1178,11 @@ 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));
|
||||
@ -1189,16 +1198,6 @@ 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;
|
||||
}
|
||||
@ -2069,6 +2068,10 @@ 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;
|
||||
}
|
||||
@ -2084,19 +2087,22 @@ 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\:mx-0 {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:mx-6 {
|
||||
margin-left: 1.5rem;
|
||||
margin-right: 1.5rem;
|
||||
.md\:grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.md\:h-16 {
|
||||
@ -2111,6 +2117,10 @@ 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;
|
||||
}
|
||||
@ -2143,6 +2153,11 @@ 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;
|
||||
@ -2163,11 +2178,6 @@ article a:visited {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.md\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.md\:leading-tight {
|
||||
line-height: 1.25;
|
||||
}
|
||||
@ -2261,19 +2271,10 @@ 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;
|
||||
}
|
||||
@ -2286,10 +2287,6 @@ 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));
|
||||
}
|
||||
@ -2307,11 +2304,6 @@ 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;
|
||||
@ -2322,11 +2314,6 @@ article a:visited {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.xl\:text-9xl {
|
||||
font-size: 8rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.xl\:font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
55
templates/icons/m-logo-animated.svg
Normal file
55
templates/icons/m-logo-animated.svg
Normal file
@ -0,0 +1,55 @@
|
||||
<?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" />
|
||||
<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="2.2753906"
|
||||
inkscape:cx="161.29099"
|
||||
inkscape:cy="375.10043"
|
||||
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="#d8f6ff"
|
||||
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="#d8f6ff"
|
||||
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" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -10,28 +10,86 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<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 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, 0],
|
||||
duration: 300,
|
||||
//loop: true
|
||||
});*/
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #border-start',
|
||||
strokeDashoffset: [anime.setDashoffset, -310],
|
||||
duration: 2000,
|
||||
easing: 'easeOutExpo'
|
||||
//loop: true
|
||||
}, 0);
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #border',
|
||||
strokeDashoffset: [anime.setDashoffset, 0],
|
||||
easing: 'easeInOutSine',
|
||||
duration: 2000,
|
||||
//direction: 'alternate',
|
||||
//loop: true
|
||||
}, 160)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #m-letter',
|
||||
strokeDashoffset: [anime.setDashoffset, 0],
|
||||
easing: 'easeInOutSine',
|
||||
duration: 2000,
|
||||
//direction: 'alternate',
|
||||
//loop: true
|
||||
}, 160)
|
||||
borderTimeline.add({
|
||||
targets: '#m-logo #m-letter',
|
||||
easing: 'easeInOutSine',
|
||||
duration: 1200,
|
||||
fill: "#32a8eb",
|
||||
strokeWidth: "0",
|
||||
//direction: 'alternate',
|
||||
//loop: true
|
||||
})
|
||||
// TODO Let's start from bottom right.
|
||||
</script>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
<section id="portfolio-body" class="article-body">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user