fix: improved responsiveness

TheSpaceNoodle · Mar 7, 2024 · dbfb796 · dbfb796
1 parent c9d43f7
commit dbfb796
Show file tree

Hide file tree

Showing 9 changed files with 9,008 additions and 4,265 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^17.2.2",
     "eslint": "^8.57.0",
     "rxjs": "~7.5.0",
+    "semantic-release": "^23.0.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.4"
   },

diff --git a/src/app/components/about/about.component.css b/src/app/components/about/about.component.css
@@ -3,8 +3,7 @@
 }
 
 #about-content {
-  display: -ms-grid;
-  display: grid;
+  display: flex;
   -ms-grid-columns: 700px 500px;
   grid-template-columns: 700px 500px;
   max-width: 1200px;
@@ -44,7 +43,8 @@
 }
 
 #about-me {
-  width: 665px;
+  max-width: 700px;
+  width: 100%;
   font-size: 25px;
   margin: 50px 0 50px 40px;
 }
@@ -96,4 +96,23 @@
   transform: scaleX(-1);
   opacity: 0.3;
   margin-top: 30px;
+  width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  #about-img {
+    display: none;
+  }
+
+  #about-me {
+    margin: 0;
+    padding: 16px;
+  }
+
+  /* #tech-list {
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: auto;
+    grid-template-columns: auto;
+  } */
 }
diff --git a/src/app/components/contacts/contacts.component.css b/src/app/components/contacts/contacts.component.css
@@ -32,7 +32,8 @@
 }
 
 .contact-me {
-  width: 800px;
+  max-width: 800px;
+  width: 100%;
   margin: 0 auto 200px;
 }
 

diff --git a/src/app/components/experience/experience.component.css b/src/app/components/experience/experience.component.css
@@ -31,20 +31,19 @@
 }
 
 #experience-cards {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: auto auto auto;
-  grid-template-columns: auto auto auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
   max-width: 1200px;
   margin: 50px auto 0;
 }
 
 .card {
   padding: 21px;
-  margin: 0 auto 25px;
   background-color: #3b454e;
-  width: 390px;
-  height: 230px;
+  /* width: 390px; */
+  width: calc(100% / 3 - 10px);
+  height: auto;
   border-radius: 13px;
   -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -97,6 +96,27 @@
   color: rgba(255, 255, 255, 0.8);
 }
 
-img[alt='GitHub'] {
-  margin-left: 20px;
+.card-links {
+  display: flex;
+  gap: 20px;
+}
+
+@media screen and (max-width: 1200px) {
+  .card-heading {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .card {
+    width: calc(100% / 2 - 5px);
+  }
+}
+
+@media screen and (max-width: 426px) {
+  .card {
+    width: 90%;
+    margin: auto;
+  }
 }
diff --git a/src/app/components/footer/footer.component.css b/src/app/components/footer/footer.component.css
@@ -4,7 +4,8 @@ footer {
 }
 
 #attribution {
-  width: 820px;
+  max-width: 820px;
+  width: 100%;
   margin: 0 auto;
   font-size: 32px;
   margin-bottom: 60px;

diff --git a/src/app/components/home/home.component.css b/src/app/components/home/home.component.css
@@ -31,6 +31,7 @@
 
 .header-welcome {
   max-width: 39.375rem;
+  padding: 0 0 0 20px;
   height: auto;
 }
 
@@ -80,3 +81,17 @@ p {
 .lets-go:hover {
   background-color: rgba(255, 240, 181, 0.2);
 }
+
+@media screen and (max-width: 768px) {
+  .home-bg-image {
+    display: none;
+  }
+
+  .header-welcome {
+    padding: 16px;
+  }
+
+  .big-heading {
+    font-size: 48px;
+  }
+}
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -1,11 +1,11 @@
 <header class="home">
   <div class="home-bg-image"></div>
   <div class="header-welcome">
-    <h1 class="small-heading" appHighlight appAOS="500" [aosDelay]="400">Hi, my name is</h1>
+    <h1 class="small-heading" appHighlight appAOS="500" [aosDelay]="400">Hello, my name is</h1>
     <h1 class="big-heading" appAOS="600" [aosDelay]="500">Volodymyr Shcherbyna.</h1>
     <div appAOS="700" [aosDelay]="600">
       <h2>I am a <span appHighlight>frontend developer</span>.</h2>
-      <p>Before you decide anything, let me introduce myself first.</p>
+      <p>Welcome to my portfolio.</p>
       <a href="#about" class="lets-go" appHighlight appAOS="1000" [aosDelay]="800">Let's go!</a>
     </div>
   </div>

diff --git a/src/app/shared/directives/AnimateOnScroll/animateOnScroll.directive.ts b/src/app/shared/directives/AnimateOnScroll/animateOnScroll.directive.ts
@@ -26,6 +26,11 @@ export class AnimateOnScrollDirective implements OnInit {
   }
 
   ngOnInit(): void {
+    if (window.innerWidth <= 426) {
+      this.nativeElement.style.opacity = '1';
+      return;
+    }
+
     this.nativeElement.style.transition = `all ${this.appAOS}ms`;
     this.nativeElement.style.translate = this.translate[this.aosDirection];