Fix responsiveness

Author: alruiz-pro

src/components/About.module.css

@@ -194,7 +194,7 @@
 
 
 /* Responsive */
-@media (max-width: var(--breakpoint-large-tablet)) {
+@media (max-width: 1024px) {
   .container {
     padding: 0 24px;
   }
@@ -223,7 +223,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .container {
     padding: 0 16px;
   }
@@ -266,7 +266,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .profileImage {
     width: 220px;
     height: 280px;
@@ -312,7 +312,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-small-mobile)) {
+@media (max-width: 360px) {
   .profileImage {
     width: 180px;
     height: 240px;

src/components/Aptitudes.module.css

@@ -167,7 +167,7 @@
 }
 
 /* Responsive */
-@media (max-width: var(--breakpoint-large-tablet)) {
+@media (max-width: 1024px) {
   .aptitudesGrid {
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
@@ -205,7 +205,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .aptitudesGrid {
     grid-template-columns: 1fr;
     gap: 24px;
@@ -262,7 +262,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .aptitudesSection {
     padding: 60px 0;
   }
@@ -322,7 +322,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-small-mobile)) {
+@media (max-width: 360px) {
   .carouselTrack {
     gap: 12px;
     animation-duration: 20s;

src/components/ContactBar.module.css

@@ -63,7 +63,7 @@
   font-size: 0.75rem;
 }
 
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .contactBarContainer {
     justify-content: center;
     gap: 15px;
@@ -88,7 +88,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .contactBarContainer {
     gap: 10px;
   }

src/components/Experience.module.css

@@ -190,7 +190,7 @@
 }
 
 /* Responsive Design */
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .timeline {
     padding: 0 16px;
   }
@@ -230,7 +230,7 @@
 
 }
 
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .timelineItem {
     flex-direction: column;
     margin-bottom: 40px;

src/components/Hero.module.css

@@ -265,7 +265,7 @@
 }
 
 /* Responsive */
-@media (max-width: var(--breakpoint-large-desktop)) {
+@media (max-width: 1300px) {
   .heroContent {
     flex-direction: column;
     align-items: center;
@@ -323,13 +323,13 @@
   }
 
   .socials {
-    right: -60px;
+    right: 10px;
     top: 20px;
   }
 }
 
 /* Mobile responsive */
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
 
   .heroSection {
     margin-bottom: 2vh;
@@ -424,7 +424,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .name {
     font-size: 2rem;
   }
@@ -460,7 +460,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-small-mobile)) {
+@media (max-width: 360px) {
   .avatarWrapper {
     height: 180px;
     width: 130px;

src/components/Navbar.module.css

@@ -297,7 +297,7 @@
 }
 
 /* Tablet responsive */
-@media (max-width: var(--breakpoint-large-tablet)) {
+@media (max-width: 1024px) {
   .navbarContainer {
     grid-template-columns: 2fr 8fr 1fr;
     gap: 30px;
@@ -320,7 +320,7 @@
 }
 
 /* Small tablet responsive */
-@media (max-width: var(--breakpoint-small-tablet)) {
+@media (max-width: 900px) {
   .navbarContainer {
     grid-template-columns: 1fr auto;
     gap: 20px;
@@ -396,7 +396,7 @@
 }
 
 /* Mobile responsive */
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .navbarContainer {
     padding: 15px 20px;
     width: 100vw;
@@ -461,7 +461,7 @@
 }
 
 /* Small mobile responsive */
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .navbarContainer {
     padding: 12px 15px;
     gap: 15px;
@@ -514,7 +514,7 @@
 }
 
 /* Very small mobile responsive */
-@media (max-width: var(--breakpoint-small-mobile)) {
+@media (max-width: 360px) {
   .navbarContainer {
     padding: 10px 12px;
   }

src/data/globals.json

@@ -1,10 +1,9 @@
 {
     "logoLocation": "/albertoLogo.png",
     "socialLinks": [
-        { "icon": ["fab", "facebook-f"], "url": "https://facebook.com" },
-        { "icon": ["fab", "x-twitter"], "url": "https://twitter.com" },
-        { "icon": ["fab", "linkedin"], "url": "https://linkedin.com" },
-        { "icon": ["fab", "youtube"], "url": "https://youtube.com" }
+        { "icon": ["fab", "whatsapp"], "url": "https://wa.me/+50685625736" },
+        { "icon": ["fab", "linkedin"], "url": "https://www.linkedin.com/in/albertoruizperez/" },
+        { "icon": ["far", "envelope"], "url": "mailto:[email protected]" }
     ],
     "companies": [
         {

src/layouts/MainLayout.module.css

@@ -13,7 +13,7 @@
   padding-top: var(--header-navbar-only);
 }
 
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .mainContent.contactBarVisible {
     padding-top: var(--header-total-height-mobile);
   }
@@ -23,7 +23,7 @@
   }
 }
 
-@media (max-width: var(--breakpoint-mobile)) {
+@media (max-width: 480px) {
   .mainContent.contactBarVisible {
     padding-top: var(--header-total-height-small);
   }

src/pages/NotFound.module.css

@@ -78,7 +78,7 @@
 }
 
 /* Responsive */
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .errorCode {
     font-size: 6rem;
   }

src/styles/grain-background.css

@@ -47,7 +47,7 @@
 }
 
 /* Media queries for performance on mobile */
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .grain-background::before {
     background-size: 
       6px 6px,
@@ -123,7 +123,7 @@
 }
 
 /* Media queries for performance on mobile */
-@media (max-width: var(--breakpoint-tablet)) {
+@media (max-width: 768px) {
   .grain-background::before {
     background-size: 
       6px 6px,