Skip to content

routine update #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MrScriptX merged 1 commit into from
Feb 6, 2026
Merged

routine update #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,34 @@

{%- include header.html -%}

<!-- Animated background with flowing lines -->
<div class="bg-container">
<svg class="flowing-lines" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice">
<path class="flow-path flow-path-1" d="M-200,100 Q100,60 400,110 Q700,160 1000,100 Q1300,50 1600,110"/>
<path class="flow-path flow-path-2" d="M-200,180 Q150,140 450,190 Q750,240 1050,180 Q1350,130 1650,190"/>
<path class="flow-path flow-path-3" d="M-200,260 Q200,220 500,270 Q800,320 1100,260 Q1400,210 1700,270"/>
<path class="flow-path flow-path-4" d="M-200,340 Q250,300 550,350 Q850,400 1150,340 Q1450,290 1750,350"/>
<path class="flow-path flow-path-5" d="M-200,420 Q300,380 600,430 Q900,480 1200,420 Q1500,370 1800,430"/>
<path class="flow-path flow-path-6" d="M-200,500 Q180,465 480,510 Q780,555 1080,500 Q1380,450 1680,510"/>
<path class="flow-path flow-path-7" d="M-200,580 Q220,540 520,590 Q820,640 1120,580 Q1420,530 1720,590"/>
<path class="flow-path flow-path-8" d="M-200,660 Q270,620 570,670 Q870,720 1170,660 Q1470,610 1770,670"/>
<path class="flow-path flow-path-9" d="M-200,740 Q320,700 620,750 Q920,800 1220,740 Q1520,690 1820,750"/>
<path class="flow-path flow-path-10" d="M-200,820 Q130,785 430,830 Q730,875 1030,820 Q1330,770 1630,830"/>
<path class="flow-path flow-path-11" d="M-200,140 Q280,105 580,150 Q880,195 1180,140 Q1480,90 1780,150"/>
<path class="flow-path flow-path-12" d="M-200,300 Q170,260 470,310 Q770,360 1070,300 Q1370,250 1670,310"/>
<path class="flow-path flow-path-13" d="M-200,540 Q240,505 540,550 Q840,595 1140,540 Q1440,490 1740,550"/>
<path class="flow-path flow-path-14" d="M-200,700 Q160,665 460,710 Q760,755 1060,700 Q1360,650 1660,710"/>
<path class="flow-path flow-path-15" d="M-200,380 Q290,345 590,390 Q890,435 1190,380 Q1490,330 1790,390"/>
</svg>
</div>

<main class="page-content" aria-label="Content">
{% if page.banner %}
<div class="banner" style="background-image: url('{{ page.banner }}');">
<h2 class="banner-label">{{ page.label }}</h2>
</div>
{% endif %}

<div class="wrapper">
{{ content }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h1 class="page-heading">{{ page.title }}</h1>
{%- if page.name == "about.markdown" -%}
<h2>{{ page.title }}</h2>
<div class="content">
<img class="pp" alt="photo" src="{{ site.url }}/assets/img/profil_pic.jpg" />
<img class="pp" alt="photo" src="{{ site.url }}/assets/img/profil-02.webp" />
<article>
{{ page.excerpt }}
<a href="{{ page.url | relative_url }}">Plus...</a>
Expand Down
340 changes: 340 additions & 0 deletions _sass/minima/custom-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ section {
height: 200px;
margin-right: 1rem;
border-radius: 10rem;
rotate: 50deg;
}
}

Expand Down Expand Up @@ -186,3 +187,342 @@ section {
grid-row-end: 4;
}
}

// BACKGROUND
/* Background container */
.bg-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
pointer-events: none;
}

/* SVG container */
.flowing-lines {
width: 100%;
height: 100%;
}

.flow-path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Color palette - nature inspired */
.flow-path-1 {
stroke: rgba(147, 197, 114, 0.12);
stroke-width: 2;
animation: flow1 45s ease-in-out infinite;
}

.flow-path-2 {
stroke: rgba(135, 206, 235, 0.10);
stroke-width: 1.8;
animation: flow2 50s ease-in-out infinite;
animation-delay: -10s;
}

.flow-path-3 {
stroke: rgba(210, 180, 140, 0.08);
stroke-width: 1.5;
animation: flow3 55s ease-in-out infinite;
animation-delay: -20s;
}

.flow-path-4 {
stroke: rgba(147, 197, 114, 0.09);
stroke-width: 1.3;
animation: flow4 60s ease-in-out infinite;
animation-delay: -30s;
}

.flow-path-5 {
stroke: rgba(135, 206, 235, 0.07);
stroke-width: 1;
animation: flow5 65s ease-in-out infinite;
animation-delay: -40s;
}

.flow-path-6 {
stroke: rgba(210, 180, 140, 0.11);
stroke-width: 1.6;
animation: flow6 48s ease-in-out infinite;
animation-delay: -5s;
}

.flow-path-7 {
stroke: rgba(147, 197, 114, 0.08);
stroke-width: 1.2;
animation: flow7 52s ease-in-out infinite;
animation-delay: -15s;
}

.flow-path-8 {
stroke: rgba(135, 206, 235, 0.09);
stroke-width: 1.4;
animation: flow8 58s ease-in-out infinite;
animation-delay: -25s;
}

.flow-path-9 {
stroke: rgba(210, 180, 140, 0.07);
stroke-width: 1.1;
animation: flow9 62s ease-in-out infinite;
animation-delay: -35s;
}

.flow-path-10 {
stroke: rgba(147, 197, 114, 0.10);
stroke-width: 1.7;
animation: flow10 47s ease-in-out infinite;
animation-delay: -8s;
}

.flow-path-11 {
stroke: rgba(135, 206, 235, 0.08);
stroke-width: 1.3;
animation: flow11 53s ease-in-out infinite;
animation-delay: -18s;
}

.flow-path-12 {
stroke: rgba(210, 180, 140, 0.09);
stroke-width: 1.5;
animation: flow12 57s ease-in-out infinite;
animation-delay: -28s;
}

.flow-path-13 {
stroke: rgba(147, 197, 114, 0.07);
stroke-width: 1;
animation: flow13 61s ease-in-out infinite;
animation-delay: -38s;
}

.flow-path-14 {
stroke: rgba(135, 206, 235, 0.11);
stroke-width: 1.9;
animation: flow14 49s ease-in-out infinite;
animation-delay: -12s;
}

.flow-path-15 {
stroke: rgba(210, 180, 140, 0.06);
stroke-width: 1.2;
animation: flow15 54s ease-in-out infinite;
animation-delay: -22s;
}

/* Flowing animations - organic morphing paths */
@keyframes flow1 {
0%, 100% {
d: path("M-200,100 Q100,60 400,110 Q700,160 1000,100 Q1300,50 1600,110");
}
33% {
d: path("M-200,130 Q100,90 400,140 Q700,190 1000,130 Q1300,80 1600,140");
}
66% {
d: path("M-200,115 Q100,75 400,125 Q700,175 1000,115 Q1300,65 1600,125");
}
}

@keyframes flow2 {
0%, 100% {
d: path("M-200,180 Q150,140 450,190 Q750,240 1050,180 Q1350,130 1650,190");
}
33% {
d: path("M-200,210 Q150,170 450,220 Q750,270 1050,210 Q1350,160 1650,220");
}
66% {
d: path("M-200,195 Q150,155 450,205 Q750,255 1050,195 Q1350,145 1650,205");
}
}

@keyframes flow3 {
0%, 100% {
d: path("M-200,260 Q200,220 500,270 Q800,320 1100,260 Q1400,210 1700,270");
}
33% {
d: path("M-200,290 Q200,250 500,300 Q800,350 1100,290 Q1400,240 1700,300");
}
66% {
d: path("M-200,275 Q200,235 500,285 Q800,335 1100,275 Q1400,225 1700,285");
}
}

@keyframes flow4 {
0%, 100% {
d: path("M-200,340 Q250,300 550,350 Q850,400 1150,340 Q1450,290 1750,350");
}
33% {
d: path("M-200,370 Q250,330 550,380 Q850,430 1150,370 Q1450,320 1750,380");
}
66% {
d: path("M-200,355 Q250,315 550,365 Q850,415 1150,355 Q1450,305 1750,365");
}
}

@keyframes flow5 {
0%, 100% {
d: path("M-200,420 Q300,380 600,430 Q900,480 1200,420 Q1500,370 1800,430");
}
33% {
d: path("M-200,450 Q300,410 600,460 Q900,510 1200,450 Q1500,400 1800,460");
}
66% {
d: path("M-200,435 Q300,395 600,445 Q900,495 1200,435 Q1500,385 1800,445");
}
}

@keyframes flow6 {
0%, 100% {
d: path("M-200,500 Q180,465 480,510 Q780,555 1080,500 Q1380,450 1680,510");
}
33% {
d: path("M-200,530 Q180,495 480,540 Q780,585 1080,530 Q1380,480 1680,540");
}
66% {
d: path("M-200,515 Q180,480 480,525 Q780,570 1080,515 Q1380,465 1680,525");
}
}

@keyframes flow7 {
0%, 100% {
d: path("M-200,580 Q220,540 520,590 Q820,640 1120,580 Q1420,530 1720,590");
}
33% {
d: path("M-200,610 Q220,570 520,620 Q820,670 1120,610 Q1420,560 1720,620");
}
66% {
d: path("M-200,595 Q220,555 520,605 Q820,655 1120,595 Q1420,545 1720,605");
}
}

@keyframes flow8 {
0%, 100% {
d: path("M-200,660 Q270,620 570,670 Q870,720 1170,660 Q1470,610 1770,670");
}
33% {
d: path("M-200,690 Q270,650 570,700 Q870,750 1170,690 Q1470,640 1770,700");
}
66% {
d: path("M-200,675 Q270,635 570,685 Q870,735 1170,675 Q1470,625 1770,685");
}
}

@keyframes flow9 {
0%, 100% {
d: path("M-200,740 Q320,700 620,750 Q920,800 1220,740 Q1520,690 1820,750");
}
33% {
d: path("M-200,770 Q320,730 620,780 Q920,830 1220,770 Q1520,720 1820,780");
}
66% {
d: path("M-200,755 Q320,715 620,765 Q920,815 1220,755 Q1520,705 1820,765");
}
}

@keyframes flow10 {
0%, 100% {
d: path("M-200,820 Q130,785 430,830 Q730,875 1030,820 Q1330,770 1630,830");
}
33% {
d: path("M-200,850 Q130,815 430,860 Q730,905 1030,850 Q1330,800 1630,860");
}
66% {
d: path("M-200,835 Q130,800 430,845 Q730,890 1030,835 Q1330,785 1630,845");
}
}

@keyframes flow11 {
0%, 100% {
d: path("M-200,140 Q280,105 580,150 Q880,195 1180,140 Q1480,90 1780,150");
}
33% {
d: path("M-200,170 Q280,135 580,180 Q880,225 1180,170 Q1480,120 1780,180");
}
66% {
d: path("M-200,155 Q280,120 580,165 Q880,210 1180,155 Q1480,105 1780,165");
}
}

@keyframes flow12 {
0%, 100% {
d: path("M-200,300 Q170,260 470,310 Q770,360 1070,300 Q1370,250 1670,310");
}
33% {
d: path("M-200,330 Q170,290 470,340 Q770,390 1070,330 Q1370,280 1670,340");
}
66% {
d: path("M-200,315 Q170,275 470,325 Q770,375 1070,315 Q1370,265 1670,325");
}
}

@keyframes flow13 {
0%, 100% {
d: path("M-200,540 Q240,505 540,550 Q840,595 1140,540 Q1440,490 1740,550");
}
33% {
d: path("M-200,570 Q240,535 540,580 Q840,625 1140,570 Q1440,520 1740,580");
}
66% {
d: path("M-200,555 Q240,520 540,565 Q840,610 1140,555 Q1440,505 1740,565");
}
}

@keyframes flow14 {
0%, 100% {
d: path("M-200,700 Q160,665 460,710 Q760,755 1060,700 Q1360,650 1660,710");
}
33% {
d: path("M-200,730 Q160,695 460,740 Q760,785 1060,730 Q1360,680 1660,740");
}
66% {
d: path("M-200,715 Q160,680 460,725 Q760,770 1060,715 Q1360,665 1660,725");
}
}

@keyframes flow15 {
0%, 100% {
d: path("M-200,380 Q290,345 590,390 Q890,435 1190,380 Q1490,330 1790,390");
}
33% {
d: path("M-200,410 Q290,375 590,420 Q890,465 1190,410 Q1490,360 1790,420");
}
66% {
d: path("M-200,395 Q290,360 590,405 Q890,450 1190,395 Q1490,345 1790,405");
}
}

/* Responsive */
@media (max-width: 768px) {
h1 {
font-size: 2em;
}

.content {
padding: 20px 15px;
}

/* Reduce some lines on mobile for performance */
.flow-path-11,
.flow-path-12,
.flow-path-13,
.flow-path-14,
.flow-path-15 {
display: none;
}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.flow-path {
animation: none;
opacity: 0.5;
}
}
Loading