fixed stylesheet

Neocle · Neocle · commit 3e87f44111e4 · 2025-04-14T21:28:56.000+02:00
diff --git a/about.html b/about.html
@@ -17,10 +17,8 @@
 <body>
   <div class="wrapper">
     <main class="container">
-      <section class="about-section">
-        <img src="uploads/profile-picture.png" alt="Profile Picture" />
-        <h2>Hey, I'm Neocle</h2>
-      </section>
+      <img src="uploads/profile-picture.png" alt="Profile Picture" class="about-avatar"/>
+      <h2 class="title">Hey, I'm Neocle</h2>
 
       <div class="navbar animate-on-load">
         <a href="/"><i class="navbar-icons fa-solid fa-house"></i>Home</a>
@@ -32,13 +30,13 @@ <h2>Hey, I'm Neocle</h2>
 
       <section class="about-section">
         <p>
-          I'm a passionate developer with big dreams in game and software creation. I love bringing ideas to life with clean code and unique design. From pixel art and animations to interactive websites and indie games — I'm always exploring and learning something new.
+          I’m a 17 years old french student. I am passionated by video games and programming and I’ve always been curious about how things really work, from creating games to developing software. My goal is to learn new things and getting better at what I do. 💪💪
         </p>
         <p>
-          I started coding as a hobby, but now it's my vision. I'm currently focused on mastering full-stack development and building my own original projects. Whether it's a cool website or an indie game prototype — I'm all about creativity, quality, and learning fast.
+          I started programming at the age of 15, and since then, I have been working on various projects, including web development, game development, and software engineering. I am proficient in languages like JavaScript, Python, and Java. I also have experience with frameworks like React and Node.js. 💻
         </p>
         <p>
-          Outside of coding, I enjoy gaming, making content, and discovering music that matches the energy of what I build. 🚀
+          Outside that, I enjoy listening to music, spending time with friends and travelling. I also love to explore new technologies and stay updated with the latest trends in the tech world. 🎮🎧
         </p>
       </section>
     </main>
diff --git a/css/about.css b/css/about.css
@@ -2,12 +2,30 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  min-height: 100vh;
+  justify-content: flex-start;
+  min-height: auto;
+  padding-top: 2rem;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
+.title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  background: linear-gradient(90deg, var(--accent), var(--end));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 1.5rem;
+}
+
+.about-avatar {
+  width: clamp(120px, 30vw, 200px);
+  height: clamp(120px, 30vw, 200px);
+  border-radius: 50%;
+  box-shadow: 0 0 20px rgba(35, 138, 188, 0.4);
+  margin-top: 5rem;
+  margin-bottom: 1rem;
+}
 
 .about-section {
     max-width: 700px;
@@ -17,31 +35,13 @@
     animation: fadeIn 1s ease-in;
   }
 
-  .about-section h2 {
-    font-size: 2.5rem;
-    font-weight: 800;
-    margin-bottom: 1rem;
-    background: linear-gradient(90deg, var(--accent), var(--end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
   .about-section p {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.7;
     margin-bottom: 1.5rem;
   }
 
-  .about-section img {
-    width: clamp(120px, 30vw, 200px);
-    height: clamp(120px, 30vw, 200px);
-    border-radius: 50%;
-    box-shadow: 0 0 20px rgba(35, 138, 188, 0.4);
-    margin-top: 5rem;
-    margin-bottom: 1.5rem;
-  }  
-
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -69,10 +69,10 @@
       font-size: 1rem;
     }
   
-    .about-section img {
-      width: clamp(100px, 40vw, 150px);
-      height: clamp(100px, 40vw, 150px);
-      margin-top: 2rem;
+    .about-avatar {
+      width: 150px;
+      height: 150px;
+      margin-top: 35rem;
     }
   
     .navbar a {
diff --git a/css/contact.css b/css/contact.css
@@ -84,4 +84,21 @@ form {
 
   .contact-block i {
       font-size: 1.6rem;
+  }
+
+  
+  @media (max-width: 600px) {
+    .project-card {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .project-img {
+      width: 100%;
+      height: auto;
+    }
+
+    .main-title {
+      margin-top: 5rem;
+    }
   }
diff --git a/css/styles.css b/css/styles.css
@@ -77,6 +77,8 @@
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(10px);
     padding: 0.75rem 1.5rem;
+    padding-left: 5px;
+    padding-right: 5px;
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-sizing: border-box;
