From e6e5fcb76c1e1114b50894ab81ffa0fcc97cb83c Mon Sep 17 00:00:00 2001
From: Niels Maes <nielsm2005@pm.me>
Date: Wed, 8 Oct 2025 17:17:24 +0200
Subject: [PATCH] fixed scrolling issues

---
 portfolio/src/style.css       |   8 +-
 portfolio/src/views/About.vue | 122 ++++++++++++++++++--
 portfolio/src/views/Home.vue  | 207 +++++++++++++++++++++++++++++++---
 3 files changed, 313 insertions(+), 24 deletions(-)

diff --git a/portfolio/src/style.css b/portfolio/src/style.css
index ffa169c..509a874 100644
--- a/portfolio/src/style.css
+++ b/portfolio/src/style.css
@@ -16,19 +16,21 @@
 }
 
 html {
-  height: 100%;
   width: 100%;
   scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%; /* Prevent iOS Safari text size adjustment */
 }
 
 body {
   margin: 0;
   padding: 0;
-  height: 100%;
   width: 100%;
   min-height: 100vh;
   overflow-x: hidden;
+  overflow-y: auto; /* Ensure vertical scrolling */
+  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  position: relative; /* Ensure proper stacking context */
 }
 
 #app {
@@ -36,6 +38,8 @@ body {
   min-height: 100vh;
   margin: 0;
   padding: 0;
+  overflow-x: hidden;
+  position: relative;
 }
 
 a {
diff --git a/portfolio/src/views/About.vue b/portfolio/src/views/About.vue
index 6fc4ed7..2e16fac 100644
--- a/portfolio/src/views/About.vue
+++ b/portfolio/src/views/About.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="about">
+    <!-- Animated Background Elements -->
+    <div class="background-elements">
+      <div class="floating-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+        <div class="shape shape-4"></div>
+        <div class="shape shape-5"></div>
+      </div>
+      <div class="grid-overlay"></div>
+    </div>
+
     <!-- Hero Section -->
     <section class="about-hero">
-      <div class="hero-background">
-        <div class="floating-elements">
-          <div class="element element-1"></div>
-          <div class="element element-2"></div>
-          <div class="element element-3"></div>
-        </div>
-      </div>
       <div class="container">
         <div class="hero-content">
           <div class="profile-section">
@@ -322,6 +327,87 @@ onMounted(() => {
   background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f0f 100%);
   color: #ffffff;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Background Elements */
+.background-elements {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.grid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    linear-gradient(rgba(100, 181, 246, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(100, 181, 246, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+}
+
+.floating-shapes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.shape {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+  animation: float 6s ease-in-out infinite;
+}
+
+.shape-1 {
+  width: 100px;
+  height: 100px;
+  top: 20%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.shape-2 {
+  width: 60px;
+  height: 60px;
+  top: 60%;
+  right: 15%;
+  animation-delay: 2s;
+}
+
+.shape-3 {
+  width: 80px;
+  height: 80px;
+  bottom: 30%;
+  left: 20%;
+  animation-delay: 4s;
+}
+
+.shape-4 {
+  width: 120px;
+  height: 120px;
+  top: 40%;
+  right: 25%;
+  animation-delay: 1s;
+}
+
+.shape-5 {
+  width: 70px;
+  height: 70px;
+  top: 10%;
+  right: 30%;
+  animation-delay: 3s;
 }
 
 /* Hero Section */
@@ -332,6 +418,7 @@ onMounted(() => {
   position: relative;
   padding: 6rem 0 4rem;
   overflow: hidden;
+  z-index: 2;
 }
 
 .hero-background {
@@ -471,6 +558,8 @@ onMounted(() => {
 /* About Content */
 .about-content {
   padding: 4rem 0;
+  position: relative;
+  z-index: 2;
 }
 
 .section-title {
@@ -924,4 +1013,23 @@ onMounted(() => {
     font-size: 3rem;
   }
 }
+
+/* Animations */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/portfolio/src/views/Home.vue b/portfolio/src/views/Home.vue
index 4904d08..ff4b85a 100644
--- a/portfolio/src/views/Home.vue
+++ b/portfolio/src/views/Home.vue
@@ -88,16 +88,18 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 
 const typingText = ref(null)
 
 onMounted(() => {
+  // Prevent body scrolling when on home page
+  document.body.style.overflow = 'hidden'
+  
   const texts = [
     'Cybersecurity Student',
     'Co-Founder Stellarnode VOF', 
-    'Security Enthusiast',
-    'Aviation Enthusiast'
+    'Security Enthusiast'
   ]
   
   let textIndex = 0
@@ -131,16 +133,24 @@ onMounted(() => {
   
   typeEffect()
 })
+
+onUnmounted(() => {
+  // Restore body scrolling when leaving home page
+  document.body.style.overflow = 'auto'
+})
 </script>
 
 <style scoped>
 .home {
-  min-height: 100vh;
   background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 30%, #16213e 70%, #0f0f0f 100%);
   color: #ffffff;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   position: relative;
   overflow-x: hidden;
+  overflow-y: hidden; /* Prevent any unwanted scrolling */
+  height: 100vh;
+  min-height: 100vh;
+  max-height: 100vh;
 }
 
 /* Background Elements */
@@ -224,7 +234,7 @@ onMounted(() => {
 
 /* Hero Section */
 .hero {
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -244,6 +254,8 @@ onMounted(() => {
   gap: 4rem;
   align-items: center;
   animation: fadeInUp 1s ease-out;
+  max-height: calc(100vh - 4rem); /* Ensure content fits within viewport */
+  overflow: hidden;
 }
 
 /* Enhanced Avatar */
@@ -287,12 +299,14 @@ onMounted(() => {
 
 .avatar-ring {
   position: absolute;
-  width: 170px;
-  height: 170px;
+  width: calc(100% + 20px); /* Always 20px larger than the avatar */
+  height: calc(100% + 20px);
   border: 2px solid rgba(100, 181, 246, 0.5);
   border-radius: 50%;
   animation: rotate 10s linear infinite;
   border-top-color: #64b5f6;
+  top: -10px; /* Center the ring around the avatar */
+  left: -10px;
 }
 
 /* Text Content */
@@ -564,44 +578,207 @@ onMounted(() => {
   .hero-title {
     font-size: 3rem;
   }
+}
+
+/* Desktop optimizations */
+@media (min-width: 1025px) {
+  .home {
+    height: 100vh;
+    overflow: hidden;
+  }
   
-  .preview-stats {
-    grid-template-columns: 1fr;
-    max-width: 400px;
+  .hero {
+    height: 100vh;
+    align-items: center;
+    padding: 2rem;
   }
 }
 
 @media (max-width: 768px) {
+  .home {
+    height: 100vh;
+    height: 100svh; /* Small viewport height for mobile */
+    overflow: hidden;
+  }
+  
+  .hero {
+    height: 100vh;
+    height: 100svh;
+    padding: 1rem;
+    padding-top: 8rem; /* More padding to account for mobile navbar */
+    padding-bottom: 1rem;
+  }
+  
+  .hero-container {
+    max-width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+  }
+  
+  .hero-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 2.5rem; /* More space between avatar and text */
+    max-height: calc(100vh - 12rem); /* Increased to account for extra avatar margin */
+    overflow-y: auto;
+    padding: 1rem 0.5rem; /* More padding to prevent cutoff */
+    width: 100%;
+  }
+  
+  .avatar-container {
+    margin-bottom: 1rem; /* Extra space below avatar */
+    margin-top: 2rem; /* Extra space above avatar to prevent ring cutoff */
+  }
+  
+  .text-content {
+    text-align: center;
+    margin-top: 1rem; /* Extra space above text */
+  }
+  
   .hero-title {
-    font-size: 2.5rem;
+    font-size: 2.2rem;
+    line-height: 1.2;
+    margin-bottom: 1rem;
   }
   
   .hero-subtitle {
-    font-size: 1.4rem;
+    font-size: 1.3rem;
+    margin-bottom: 1rem;
+  }
+  
+  .hero-description {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin: 1rem 0;
   }
   
   .stats-container {
     justify-content: center;
     flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .stat-item {
+    flex: 0 0 auto;
+  }
+  
+  .stat-number {
+    font-size: 1.5rem;
   }
   
   .hero-buttons {
     justify-content: center;
     flex-direction: column;
     align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
   }
   
   .btn {
     width: 250px;
+    max-width: 90vw;
+    padding: 0.8rem 2rem;
   }
   
   .avatar {
-    width: 120px;
-    height: 120px;
+    width: 100px;
+    height: 100px;
   }
   
   .avatar-text {
-    font-size: 2.5rem;
+    font-size: 2rem;
+  }
+  
+  .avatar-glow {
+    width: 140px;
+    height: 140px;
+  }
+  
+  .avatar-ring {
+    border-width: 1.5px; /* Slightly thinner border on mobile */
+  }
+  
+  .tech-stack {
+    margin-top: 1rem;
+  }
+  
+  .tech-icons {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  
+  .tech-icon {
+    font-size: 0.75rem;
+    padding: 0.3rem 0.7rem;
+  }
+}
+
+/* Extra small mobile devices */
+@media (max-width: 480px) {
+  .hero {
+    padding-top: 9rem; /* Even more padding for smaller screens */
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  
+  .hero-content {
+    gap: 2rem;
+    max-height: calc(100vh - 13rem); /* Account for extra spacing */
+    padding: 1rem 0.5rem;
+  }
+  
+  .avatar-container {
+    margin-bottom: 1.5rem;
+    margin-top: 2.5rem; /* More space on smaller screens */
+  }
+  
+  .text-content {
+    margin-top: 1.5rem;
+  }
+  
+  .hero-title {
+    font-size: 2rem;
+  }
+  
+  .hero-subtitle {
+    font-size: 1.2rem;
+  }
+  
+  .hero-description {
+    font-size: 0.9rem;
+    padding: 0 1rem;
+  }
+  
+  .avatar {
+    width: 90px;
+    height: 90px;
+  }
+  
+  .avatar-text {
+    font-size: 1.8rem;
+  }
+  
+  .avatar-glow {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+/* iOS Safari specific fixes */
+@supports (-webkit-touch-callout: none) {
+  .home {
+    height: 100vh;
+    height: 100svh;
+    overflow: hidden;
+  }
+  
+  .hero {
+    height: 100vh;
+    height: 100svh;
   }
 }
 </style>
\ No newline at end of file