Merge pull request #36 from MrScriptX/update

routine update

Author: MrScriptX

_layouts/default.html

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

_layouts/home.html

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

_sass/minima/custom-styles.scss

@@ -151,6 +151,7 @@ section {
         height: 200px;
         margin-right: 1rem;
         border-radius: 10rem;
+        rotate: 50deg;
     }
 }
 
@@ -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;
+    }
+}