feat: Small whitespace updates

Author: senicko

public/fonts/Exo-VariableFont_wght.ttf

@@ -6,6 +6,6 @@ const { name, description } = Astro.props;
     <div class="p-2 grow flex flex-col h-full gap-6">
         <h3 class="text-xl font-medium">{name}</h3>
 
-        {description && <p>{description}</p>}
+        {description && <p class="font-sans-snd">{description}</p>}
     </div>
 </div>

src/components/BitSection.astro

@@ -37,7 +37,7 @@
         0.1,
         1000,
     );
-    camera.position.z = 2;
+    camera.position.z = 1.7;
     camera.position.y = 40;
 
     const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
@@ -61,12 +61,17 @@
     );
 
     window.addEventListener("resize", () => {
-        const width = container.clientWidth;
-        const height = container.clientHeight;
+        const ratio = window.devicePixelRatio;
+
+        const width = container.clientWidth * ratio;
+        const height = container.clientHeight * ratio;
 
         renderer.setSize(width, height);
         camera.aspect = width / height;
         camera.updateProjectionMatrix();
+
+        canvas.style.width = `${container.clientWidth}px`;
+        canvas.style.height = `${container.clientHeight}px`;
     });
 
     const targetRotationY = 0.4;
@@ -82,20 +87,10 @@
     });
 
     const swayIntensity = 0.2;
-    const maxWidth = 800;
 
     function animate() {
         requestAnimationFrame(animate);
 
-        const cameraZoomProportion =
-            maxWidth / Math.min(container.clientWidth, maxWidth);
-
-        camera.position.z = THREE.MathUtils.lerp(
-            camera.position.z,
-            cameraZoomProportion * 1.5,
-            lerpFactor,
-        );
-
         // Lerp the camera position toward the target based on mouse
         camera.position.x = THREE.MathUtils.lerp(
             camera.position.x,

src/components/BitTreeScene.astro

@@ -188,11 +188,11 @@ const navLinks = [
             >
                 Studencka przestrzeń do wymiany wiedzy i testowania pomysłów.
             </h1>
-            <div class="h-128 w-full" id="bit-scene-canvas-container">
+            <div class="h-64 md:h-128 w-full" id="bit-scene-canvas-container">
                 <BitTreeScene />
             </div>
             <div class="flex items-center justify-center h-12 gap-12">
-                <div class="w-2/5 flex justify-end">
+                <div class="w-1/3 flex justify-end">
                     <a href="/">
                         <img
                             class="w-14"
@@ -201,7 +201,7 @@ const navLinks = [
                         />
                     </a>
                 </div>
-                <div class="w-1/5 flex justify-center">
+                <div class="w-1/3 flex justify-center">
                     <a
                         href="https://www.informatyka.agh.edu.pl/pl/"
                         target="_blank"
@@ -213,7 +213,7 @@ const navLinks = [
                         />
                     </a>
                 </div>
-                <div class="w-2/5 flex justify-start">
+                <div class="w-1/3 flex justify-start">
                     <a href="https://www.agh.edu.pl/" target="_blank">
                         <img class="w-8" alt="Logo AGH" src={aghLogo.src} />
                     </a>
@@ -223,9 +223,9 @@ const navLinks = [
     </main>
     <Section class="bg-stone-100" id="about">
         <Container class="grid gap-8 relative">
-            <div class="flex flex-col gap-8">
+            <div class="flex flex-col gap-4">
                 <h2 class="text-2xl font-medium">O nas</h2>
-                <p class="text-xl max-w-200">
+                <p class="text-xl max-w-200 font-sans-snd">
                     W Kole Naukowym BIT studenci AGH wspólnie rozwijają i dzielą
                     się swoimi pasjami. Skupiamy osoby zafascynowane nowoczesnym
                     tworzeniem oprogramowania, technologiami webowymi,
@@ -274,9 +274,9 @@ const navLinks = [
         </Container>
     </Section>
     <Section id="groups">
-        <Container class="flex flex-col gap-8">
+        <Container class="flex flex-col gap-4">
             <h2 class="text-2xl font-medium">Sekcje</h2>
-            <p class="text-xl max-w-200">
+            <p class="text-xl max-w-200 font-sans-snd">
                 Poza realizacją własnych zainteresowań wspieramy się w nauce.
                 Organizujemy zajęcia z matematyki i informatyki dla
                 początkujących, aby wspólnie wymieniać się doświadczeniami i
@@ -364,7 +364,10 @@ const navLinks = [
     const gallery = document.querySelectorAll("#gallery > *");
 
     gsap.from(gallery, {
-        scrollTrigger: "#gallery",
+        scrollTrigger: {
+            trigger: "#gallery",
+            start: "top 70%",
+        },
         opacity: 0,
         y: 50,
         duration: 0.5,
@@ -378,7 +381,7 @@ const navLinks = [
     gsap.from(sections, {
         scrollTrigger: {
             trigger: "#sections",
-            start: "top 95%",
+            start: "top 70%",
         },
         opacity: 0,
         duration: 1,
@@ -393,7 +396,7 @@ const navLinks = [
     gsap.from(pills, {
         scrollTrigger: {
             trigger: ".board-scroll-trigger",
-            start: "top 95%",
+            start: "top 85%",
         },
         opacity: 0,
         duration: 1,

src/pages/index.astro

@@ -16,6 +16,17 @@ html {
     font-display: swap;
 }
 
+@font-face {
+    font-family: "Exo";
+    src: url("/fonts/Exo-VariableFont_wght.ttf") format("truetype");
+
+    font-weight: 100 900;
+    font-stretch: 50% 200%;
+    font-style: normal;
+    font-display: swap;
+}
+
 @theme {
-    --font-sans: "Geist";
+    --font-sans: "Exo", sans-serif;
+    --font-sans-snd: "Geist", sans-serif;
 }