update website

src/app/contact/page.js

@@ -12,7 +12,7 @@ export default function ContactPage() {
                 <div className="contact-row"><span>Name</span><strong>Frederik Spirgi</strong></div>
                 <div className="contact-row"><span>Based in</span><strong>Switzerland</strong></div>
                 <div className="contact-row"><span>Email</span><a href="mailto:fretux@fretux.ch">fretux@fretux.ch</a></div>
-                <div className="contact-row"><span>Elsewhere</span><a href="https://github.com/IM23a-spirgif" target="_blank" rel="noopener noreferrer">GitHub ↗</a></div>
+                <div className="contact-row"><span>Elsewhere</span><a href="https://github.com/Fretuks" target="_blank" rel="noopener noreferrer">GitHub ↗</a></div>
             </aside>
         </div>
     );

src/app/globals.css

@@ -228,21 +228,45 @@ button {
 .marquee {
     overflow: hidden;
     border-block: 1px solid var(--line);
-    padding: 18px 0;
+    padding: 0;
     font: 600 .75rem var(--font-geist-mono), monospace;
     letter-spacing: .1em;
     text-transform: uppercase;
     white-space: nowrap;
 }
 
-.marquee span, .marquee b {
-    margin-right: 34px;
+.marquee-track {
+    display: flex;
+    width: max-content;
+    animation: marquee-scroll 32s linear infinite;
 }
 
-.marquee b {
+.marquee-group {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    min-width: max-content;
+    padding: 18px 0;
+}
+
+.marquee-group span {
+    padding-left: 34px;
+}
+
+.marquee-group b {
+    padding-left: 34px;
+}
+
+.marquee-group b {
     color: var(--accent);
 }
 
+@keyframes marquee-scroll {
+    to {
+        transform: translateX(-50%);
+    }
+}
+
 .featured {
     padding: 110px 0;
 }
@@ -630,4 +654,19 @@ button {
         animation-duration: .01ms !important;
         transition-duration: .01ms !important;
     }
+
+    .marquee-track {
+        width: 100%;
+        animation: none;
+        transform: none;
+    }
+
+    .marquee-group {
+        justify-content: center;
+        width: 100%;
+    }
+
+    .marquee-group + .marquee-group {
+        display: none;
+    }
 }

src/app/page.js

@@ -19,8 +19,18 @@ export default function Home() {
                 </section>
             </div>
             <div className="marquee" aria-hidden="true">
-                <span>JavaScript</span><b>✦</b><span>Python</span><b>✦</b><span>Java</span><b>✦</b>
-                <span>Creative development</span><b>✦</b><span>Web experiences</span><b>✦</b><span>SQL</span>
+                <div className="marquee-track">
+                    {[0, 1].map(group => (
+                        <div className="marquee-group" key={group}>
+                            <span>JavaScript</span><b>✦</b>
+                            <span>Python</span><b>✦</b>
+                            <span>Java</span><b>✦</b>
+                            <span>Creative development</span><b>✦</b>
+                            <span>Web experiences</span><b>✦</b>
+                            <span>SQL</span><b>✦</b>
+                        </div>
+                    ))}
+                </div>
             </div>
             <FadeInSection>
                 <section className="shell featured">