diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0ebf392..151e226 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -32,7 +32,7 @@ <h1>ShylandDev;</h1>
   <footer>
     <div class="footer-wrapper" id="logo_email">
       <div id="logoDiv">
-        <img src="assets/imgs/PNGs/shyland.png" alt="logo" />
+        <img (click)="redirectTo('', title)" src="assets/imgs/PNGs/shyland.png" alt="logo" />
       </div>
 
       <div id="emailDiv">
@@ -49,27 +49,42 @@ <h1>ShylandDev;</h1>
     <div class="footer-wrapper" id="page_social">
       <div id="pageDiv">
         <ul *ngIf="allPages != []">
-          <li *ngFor="let page of allPages | keyvalue : defaultOrder" [attr.isActive]="currentPage == page.value['path']" (click)="redirectTo(page.value['path'], title)">
-            <a>
+          <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
               {{page.value['path']}}
             </a>
           </li>
-        </ul>
 
-        <ul *ngIf="allPages != []">
-          <li *ngFor="let page of allPages | keyvalue : defaultOrder" [attr.isActive]="currentPage == page.value['path']" (click)="redirectTo(page.value['path'], title)">
-            <a>
+          <!-- <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
               {{page.value['path']}}
             </a>
           </li>
-        </ul>
-
-        <ul *ngIf="allPages != []">
-          <li *ngFor="let page of allPages | keyvalue : defaultOrder" [attr.isActive]="currentPage == page.value['path']" (click)="redirectTo(page.value['path'], title)">
-            <a>
+          <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
+              {{page.value['path']}}
+            </a>
+          </li>
+          <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
               {{page.value['path']}}
             </a>
           </li>
+          <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
+              {{page.value['path']}}
+            </a>
+          </li>
+          <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
+              {{page.value['path']}}
+            </a>
+          </li>
+          <li *ngFor="let page of allPages | keyvalue : defaultOrder" (click)="redirectTo(page.value['path'], title)">
+            <a [attr.isActive]="currentPage == page.value['path']">
+              {{page.value['path']}}
+            </a>
+          </li> -->
         </ul>
       </div>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 2ceafa1..bbf87e8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,6 +3,7 @@
 :host {
   position: relative;
   width: 100%;
+  scroll-behavior: smooth;
 }
 
 #rainbowCanvas {
@@ -38,15 +39,13 @@ header {
   top: 0;
   left: 0;
   width: 100%;
-  min-height: calc(var(--responsiveUnit) * 5);
-  max-height: calc(var(--responsiveUnit) * 5);
-  height: calc(var(--responsiveUnit) * 5);
+  @include fixedHeight(var(--headerHeight));
   display: flex;
   align-items: stretch;
   justify-content: space-around;
-  background: transparentize($color: $void, $amount: 0.8);
+  background: transparentize($color: $dark, $amount: 0.8);
   backdrop-filter: blur(5px);
-  border-bottom: 1px solid $medium;
+  border-bottom: calc(var(--responsiveUnit) * 0.1) solid $medium;
   z-index: 2;
   &[hasScrollbar="true"] {
     width: calc(100% - var(--scrollbarWidth));
@@ -70,14 +69,12 @@ header {
 
     img {
       border-radius: 50%;
-      min-height: calc(var(--responsiveUnit) * 3);
-      max-height: calc(var(--responsiveUnit) * 3);
-      height: calc(var(--responsiveUnit) * 3);
+      @include fixedHeight(calc(var(--responsiveUnit) * 2.5));
     }
 
     h1 {
       padding-right: 5%;
-      font-size: calc(var(--responsiveUnit) * 1.5);
+      font-size: calc(var(--responsiveUnit) * 1);
     }
   }
 
@@ -87,7 +84,7 @@ header {
     justify-content: center;
 
     a {
-      font-size: calc(var(--responsiveUnit) * 0.92);
+      font-size: calc(var(--responsiveUnit) * 0.7);
       margin: 1%;
       padding: 3%;
       width: 100%;
@@ -109,7 +106,8 @@ header {
 
 footer {
   width: 100%;
-  border-top: 1px solid $medium;
+  padding-bottom: 2%;
+  border-top: calc(var(--responsiveUnit) * 0.1) solid $medium;
   background: transparentize($color: $void, $amount: 0.8);
   backdrop-filter: blur(5px);
   color: $light;
@@ -127,12 +125,13 @@ footer {
       width: 33.3%;
 
       img {
-        min-width: calc(var(--responsiveUnit) * 10);
-        max-width: calc(var(--responsiveUnit) * 10);
-        width: calc(var(--responsiveUnit) * 10);
+        @include fixedWidth(calc(var(--responsiveUnit) * 10));
         height: auto;
         margin: 0;
         padding: 0;
+        &:hover {
+          cursor: pointer;
+        }
       }
     }
 
@@ -144,7 +143,7 @@ footer {
       width: 66.6%;
 
       p {
-        font-size: calc(var(--responsiveUnit) * 1);
+        font-size: calc(var(--responsiveUnit) * 0.8);
         margin: 0;
         margin-block: 1%;
         height: 30%;
@@ -161,16 +160,14 @@ footer {
           background: $light;
           color: $dark;
           box-sizing: border-box;
-          min-width: 60%;
-          max-width: 60%;
-          width: 60%;
+          @include fixedWidth(60%);
           height: 100%;
           border-top-left-radius: 10px;
           border-bottom-left-radius: 10px;
           border: 1px solid $void;
           padding: 1%;
           transition: 0.3s all;
-          font-size: calc(var(--responsiveUnit) * 1.1);
+          font-size: calc(var(--responsiveUnit) * 0.8);
           &:focus {
             border: 1px solid $light;
           }
@@ -180,16 +177,14 @@ footer {
           display: flex;
           align-items: center;
           justify-content: center;
-          min-width: 20%;
-          max-width: 20%;
-          width: 20%;
+          @include fixedWidth(20%);
           border-top-right-radius: 10px;
           border-bottom-right-radius: 10px;
           border: 1px solid $medium;
           border-left: 2px solid $medium;
           padding: 1%;
           transition: 0.3s all;
-          font-size: calc(var(--responsiveUnit) * 1.1);
+          font-size: calc(var(--responsiveUnit) * 0.9);
           background: transparentize($color: $light, $amount: 0.8);
           backdrop-filter: blur(5px);
           color: $light;
@@ -206,23 +201,52 @@ footer {
 
   #page_social {
     justify-content: space-around;
-    // justify-content: space-evenly;
 
     #pageDiv {
       display: flex;
       justify-content: space-evenly;
       align-items: center;
+      flex-direction: column;
+      width: 40%;
+      height: calc(var(--responsiveUnit) * 5);
 
-      a {
-        font-size: calc(var(--responsiveUnit) * 0.85);
+      ul {
         display: flex;
-        color: $medium;
-        border-radius: 5px;
-        white-space: nowrap;
-        transition: 0.3s all;
-        &:hover {
-          background: transparentize($color: $medium, $amount: 0.8);
-          cursor: pointer;
+        flex-direction: column;
+        align-items: stretch;
+        flex-wrap: wrap;
+        height: 100%;
+        width: 80%;
+        overflow: hidden;
+        padding: 0;
+        padding-inline: 5%;
+
+        li {
+          margin-right: 15%;
+
+          &::marker {
+            font-size: calc(var(--responsiveUnit) * 0.7);
+            padding: 0;
+            margin: 0;
+          }
+
+          a {
+            font-size: calc(var(--responsiveUnit) * 0.7);
+            display: flex;
+            color: $medium;
+            border-radius: 5px;
+            white-space: nowrap;
+            transition: 0.3s all;
+            padding-inline: 3%;
+            width: fit-content;
+            &:hover {
+              background: transparentize($color: $medium, $amount: 0.8);
+              cursor: pointer;
+            }
+            &[isActive="true"] {
+              color: $light;
+            }
+          }
         }
       }
     }
@@ -232,7 +256,7 @@ footer {
       align-items: center;
       justify-content: space-around;
       flex-wrap: wrap;
-      width: 50%;
+      width: 60%;
 
       a {
         margin: 1%;
@@ -250,11 +274,9 @@ footer {
         }
 
         img {
-          min-width: calc(var(--responsiveUnit) * 2);
-          max-width: calc(var(--responsiveUnit) * 2);
-          width: calc(var(--responsiveUnit) * 2);
-          height: auto;
           filter: invert(1);
+          width: auto;
+          @include fixedHeight(calc(var(--responsiveUnit) * 1.5));
         }
       }
     }
@@ -268,11 +290,11 @@ footer {
       align-items: center;
 
       p {
-        font-size: calc(var(--responsiveUnit) * 0.7);
+        font-size: calc(var(--responsiveUnit) * 0.5);
       }
 
       a {
-        font-size: calc(var(--responsiveUnit) * 0.93);
+        font-size: calc(var(--responsiveUnit) * 0.7);
         text-decoration: underline;
         color: $medium;
         white-space: nowrap;
@@ -288,64 +310,67 @@ footer {
 
 @media (orientation: portrait) {
   #menuDiv {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    transform: translateX(100%);
     &.hide {
-      animation: 0.5s slideOutRight;
+      animation: 0.5s slideOutRight forwards;
+      animation-timing-function: ease-in-out;
     }
     &.show {
-      display: flex;
-      animation: 0.5s slideInRight;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
+      animation: 0.5s slideInRight forwards;
+      animation-timing-function: ease-in-out;
+    }
+
+    #closeMenuTriggerDiv {
+      width: 40vw;
       height: 100vh;
-      z-index: 999;
+    }
 
-      #closeMenuTriggerDiv {
-        width: 40vw;
-        height: 100vh;
-      }
+    #menu-wrapper {
+      width: 60vw;
+      height: 100vh;
+      border-left: 1px solid $medium;
+      background: transparentize($color: $void, $amount: 0.6);
+      backdrop-filter: blur(10px);
 
-      #menu-wrapper {
-        width: 60vw;
-        height: 100vh;
-        border-left: 1px solid $medium;
-        background: transparentize($color: $void, $amount: 0.6);
-        backdrop-filter: blur(10px);
+      h1 {
+        background: transparentize($color: $light, $amount: 0.8);
+        font-size: calc(var(--responsiveUnit) * 2.5);
+        margin: 0;
+        padding: 3%;
+        color: $light;
+      }
 
-        h1 {
-          background: transparentize($color: $light, $amount: 0.8);
-          font-size: calc(var(--responsiveUnit) * 2.5);
-          margin: 0;
-          padding: 3%;
-          color: $light;
-        }
+      hr {
+        margin: 0;
+        border-bottom: 1px solid $medium;
+      }
 
-        hr {
-          margin: 0;
-          border-bottom: 1px solid $medium;
-        }
+      nav {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
 
-        nav {
+        a {
+          font-size: calc(var(--responsiveUnit) * 2.2);
+          padding: 3%;
+          width: 100%;
           display: flex;
-          flex-direction: column;
-          align-items: flex-start;
-
-          a {
-            font-size: calc(var(--responsiveUnit) * 2.2);
-            padding: 3%;
-            width: 100%;
-            display: flex;
-            color: $medium;
-            white-space: nowrap;
-            transition: 0.3s all;
-            &:hover {
-              background: transparentize($color: $medium, $amount: 0.8);
-              cursor: pointer;
-            }
-            &[isActive="true"] {
-              color: $light;
-            }
+          color: $medium;
+          white-space: nowrap;
+          transition: 0.3s all;
+          &:hover {
+            background: transparentize($color: $medium, $amount: 0.8);
+            cursor: pointer;
+          }
+          &[isActive="true"] {
+            color: $light;
           }
         }
       }
@@ -356,10 +381,10 @@ footer {
     nav {
       border-radius: 10px;
       background-image: url("../assets/imgs/SVGs/menu.svg");
-      background-position: left top;
+      background-position: center;
       background-repeat: no-repeat;
-      background-size: calc(var(--responsiveUnit) * 5);
-      width: calc(var(--responsiveUnit) * 5);
+      background-size: calc(var(--responsiveUnit) * 3);
+      width: calc(var(--responsiveUnit) * 3);
       filter: invert(1);
       transition: all 0.8s ease-in-out;
       &:hover {
@@ -388,9 +413,7 @@ footer {
         width: 100%;
 
         img {
-          min-width: calc(var(--responsiveUnit) * 15);
-          max-width: calc(var(--responsiveUnit) * 15);
-          width: calc(var(--responsiveUnit) * 15);
+          @include fixedWidth(calc(var(--responsiveUnit) * 15));
           height: auto;
           margin: 0;
           padding: 0;
@@ -415,7 +438,6 @@ footer {
           width: 100%;
 
           input {
-            // height: 100%;
             font-size: calc(var(--responsiveUnit) * 1.5);
           }
 
@@ -434,21 +456,16 @@ footer {
         width: 100%;
 
         ul {
-          // min-width: calc(100% / 3);
-          // max-width: calc(100% / 3);
-          // width: calc(100% / 3);
-          padding: 0;
-          padding-inline: 5%;
-
           li {
+            margin-right: 12.5%;
             &::marker {
               font-size: calc(var(--responsiveUnit) * 1.2);
             }
-          }
-        }
 
-        a {
-          font-size: calc(var(--responsiveUnit) * 1.2);
+            a {
+              font-size: calc(var(--responsiveUnit) * 1.2);
+            }
+          }
         }
       }
 
@@ -457,9 +474,7 @@ footer {
 
         a {
           img {
-            min-width: calc(var(--responsiveUnit) * 3);
-            max-width: calc(var(--responsiveUnit) * 3);
-            width: calc(var(--responsiveUnit) * 3);
+            @include fixedHeight(calc(var(--responsiveUnit) * 3));
           }
         }
       }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f57cb20..a3236ea 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -61,6 +61,10 @@ export class AppComponent {
     window.onload = () => {
       console.log(`[${this.title}#window.onload]`);
 
+      this.loadLastScrollPosition();
+
+      this.stopLoading();
+
       this.currentPage = this.router.url.split('/')[1];
       if (this.currentPage == '' || this.currentPage == 'home') window.history.pushState({}, '', '/');
 
@@ -68,6 +72,12 @@ export class AppComponent {
 
       this.detectScrollbar();
     };
+
+    window.onbeforeunload = () => {
+      console.log(`[${this.title}#window.onbeforeunload]`);
+
+      this.saveLastScrollPosition();
+    };
   }
 
   updateView(from: string) {
@@ -89,6 +99,11 @@ export class AppComponent {
 
     this.detectScrollbar();
 
+    const appRoot = document.querySelector('app-root');
+    console.log(`[${this.title}#redirectTo] appRoot`, appRoot);
+
+    appRoot.scrollTop = 0;
+
     this.updateView(this.title);
   }
 
@@ -169,6 +184,23 @@ export class AppComponent {
     console.log(`[${this.title}#setupRainbowCanvas] rainInterval`, this.rainInterval);
   }
 
+  stopLoading() {
+    console.log(`[${this.title}#stopLoading]`);
+
+    const loader = document.getElementById('loader');
+    console.log(`[${this.title}#stopLoading] loader`, loader);
+
+    const spinnerWrapper = document.getElementById('spinner-wrapper');
+    console.log(`[${this.title}#stopLoading] spinnerWrapper`, spinnerWrapper);
+
+    // loader.className = 'hide';
+    spinnerWrapper.className = 'hide';
+
+    setTimeout(() => {
+      loader.style.display = 'none';
+    }, 1500);
+  }
+
   detectScrollbar() {
     const appRoot = document.querySelector('app-root');
     console.log(`[${this.title}#detectScrollbar] appRoot`, appRoot);
@@ -176,4 +208,32 @@ export class AppComponent {
     this.hasScrollbar = appRoot.scrollHeight > appRoot.clientHeight;
     console.log(`[${this.title}#detectScrollbar] hasScrollbar`, this.hasScrollbar);
   }
+
+  openLink(url) {
+    window.open(url, '_blank');
+  }
+
+  saveLastScrollPosition() {
+    console.log(`[${this.title}#saveLastScrollPosition]`);
+
+    const appRoot = document.querySelector('app-root');
+    console.log(`[${this.title}#saveLastScrollPosition] appRoot`, appRoot);
+
+    this.db.set('lastScrollPosition', appRoot.scrollTop);
+    console.log(`[${this.title}#saveLastScrollPosition] lastScrollPosition`, this.db.get('lastScrollPosition'));
+  }
+
+  loadLastScrollPosition() {
+    console.log(`[${this.title}#loadLastScrollPosition]`);
+
+    const appRoot = document.querySelector('app-root');
+    console.log(`[${this.title}#loadLastScrollPosition] appRoot`, appRoot);
+
+    const lastScrollPosition = this.db.get('lastScrollPosition');
+    console.log(`[${this.title}#loadLastScrollPosition] lastScrollPosition`, lastScrollPosition);
+
+    if (lastScrollPosition) {
+      appRoot.scrollTop = lastScrollPosition;
+    }
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c30d5b7..606f31f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,6 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+
 import { HomeComponent } from './pages/home/home.component';
 import { TestComponent } from './pages/test/test.component';
 import { NotFoundComponent } from './pages/not-found/not-found.component';
@@ -13,6 +14,7 @@ import { ProjectsComponent } from './pages/projects/projects.component';
 @NgModule({
   declarations: [
     AppComponent,
+
     HomeComponent,
     TestComponent,
     NotFoundComponent,
diff --git a/src/app/pages/about/about.component.html b/src/app/pages/about/about.component.html
index c6f84cd..1d624cc 100644
--- a/src/app/pages/about/about.component.html
+++ b/src/app/pages/about/about.component.html
@@ -1,42 +1,93 @@
-<div id="quemSomos">
+<div id="content">
+  <div id="quemSomos">
     <p>QUEM SOMOS?</p>
-</div>
-        
-<div class="classCenter">
+  </div>
+
+  <div class="classCenter">
     <hr>
+
     <h2 id="title">TUDO SOBRE NÓS</h2>
-    <p>Bem-vindo ao nosso universo de inovação e tecnologia!</p>
-    <p>Nossa jornada começou em 2021, quando dois amigos apaixonados por programação, C# e
-         JavaScript, uniram forças para criar algo único e transformador. Movidos por uma visão compartilhada de soluções inteligentes, embarcamos em uma emocionante aventura empreendedora.</p>
-    <p>Ao longo dos anos, aprofundamos nossa expertise em linguagens de programação como 
-        C#, JavaScript e Angular, construindo pontes entre a criatividade e a funcionalidade. Essa sinergia nos permitiu desenvolver soluções personalizadas que atendem às necessidades específicas de cada cliente, 
-        levando a experiência do usuário a um novo patamar.</p>
-    <p>Não paramos por aí. Reconhecendo a importância da mobilidade no mundo moderno, também dominamos a linguagem mobile, 
-        com destaque para a poderosa plataforma Ionic. Essa habilidade nos coloca na vanguarda das aplicações móveis, permitindo-nos criar experiências interativas e intuitivas que se adaptam perfeitamente a qualquer dispositivo.</p>
-        
-    <p>Nossa jornada é marcada pela busca incessante da excelência, pela paixão por desafios complexos e pela vontade de transformar ideias inovadoras em realidade. 
-        Estamos ansiosos para fazer parte da sua história, trazendo nossa expertise e dedicação para impulsionar o seu sucesso por meio de soluções de programação inteligentes e visionárias.</p> 
-    <p>Seja bem-vindo ao futuro, seja bem-vindo à nossa empresa.</p>
+
+    <p>
+      Bem-vindo ao nosso universo de inovação e tecnologia!
+    </p>
+
+    <p>
+      Nossa jornada começou em 2021, quando dois amigos apaixonados por programação, C# e
+      JavaScript, uniram forças para criar algo único e transformador. Movidos por uma visão compartilhada de soluções inteligentes, embarcamos em uma emocionante aventura empreendedora.
+    </p>
+
+    <p>
+      Ao longo dos anos, aprofundamos nossa expertise em linguagens de programação como
+      C#, JavaScript e Angular, construindo pontes entre a criatividade e a funcionalidade. Essa sinergia nos permitiu desenvolver soluções personalizadas que atendem às necessidades específicas de cada cliente,
+      levando a experiência do usuário a um novo patamar.
+    </p>
+
+    <p>
+      Não paramos por aí. Reconhecendo a importância da mobilidade no mundo moderno, também dominamos a linguagem mobile,
+      com destaque para a poderosa plataforma Ionic. Essa habilidade nos coloca na vanguarda das aplicações móveis, permitindo-nos criar experiências interativas e intuitivas que se adaptam perfeitamente a qualquer dispositivo.
+    </p>
+
+    <p>
+      Nossa jornada é marcada pela busca incessante da excelência, pela paixão por desafios complexos e pela vontade de transformar ideias inovadoras em realidade.
+      Estamos ansiosos para fazer parte da sua história, trazendo nossa expertise e dedicação para impulsionar o seu sucesso por meio de soluções de programação inteligentes e visionárias.
+    </p>
+
+    <p>
+      Seja bem-vindo ao futuro, seja bem-vindo à nossa empresa.
+    </p>
+
     <hr>
-</div>
+  </div>
 
-<div class="cards">
-    <div class="card">
-      <img class="cardAvatar" alt="card-avatar" src="assets/imgs/PNGs/natzun.png">
-  
-      <div class="cardInfo-wrapper">
-        <h2 class="cardName">Natan "Natzun" Zunfrilli</h2>
-  
-        <hr>
-  
-        <h2 class="cardRole">Co-founder</h2>
-  
-        <p class="cardDesc">
-          teste
-          teste
-        </p>
+  <div class="cards">
+    <div class="card" *ngFor="let card of cardArray | keyvalue : defaultOrder" id="card{{card.key}}" [attr.expanded]="expandedCardIndex != '-1' ? expandedCardIndex == card.key : 'none'">
+      <div class="cardOpen" (click)="expandCard(card.key)"></div>
+
+      <div class="cardPreview">
+        <div class=cardAvatar>
+          <img alt="avatar" src="{{card.value['img']}}">
+        </div>
+
+        <div class="cardTitle">
+          <h1>{{card.value['mainRole']}}</h1>
+        </div>
+      </div>
+
+      <div class="cardContent">
+        <div class="cardName">
+          <h2>{{card.value['name']}}</h2>
+        </div>
+
+        <div class="cardDescription">
+          <p>
+            <span *ngFor="let role of card.value['roles'] | keyvalue : defaultOrder" class="roleSpan" [attr.isOdd]="(+role.key) % 2">
+              {{role.value}}
+              <span *ngIf="role.key != card.value['roles'].length - 1" class="separatorSpan"> | </span>
+            </span>
+
+            {{card.value['description']}}
+          </p>
+        </div>
+
+        <div class="cardSocial">
+          <a *ngFor="let network of card.value['social'] | keyvalue : defaultOrder" href="{{network.value['url']}}" title="{{network.value['network']}}" target="_blank">
+            <img alt="{{network.value['network']}}" src="{{network.value['icon']}}">
+          </a>
+        </div>
+
+        <div class="cardFormation">
+          <ul>
+            <li *ngFor="let formation of card.value['formation'] | keyvalue : defaultOrder">
+              <span>{{formation.value}}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="cardClose">
+        <img alt="close" src="assets/imgs/SVGs/close.svg" (click)="collapseCard()">
       </div>
     </div>
   </div>
-
-  <p>Este é um <span style="color: red;">texto em destaque</span>.</p>
\ No newline at end of file
+</div>
diff --git a/src/app/pages/about/about.component.scss b/src/app/pages/about/about.component.scss
index b2e1b79..7942d0a 100644
--- a/src/app/pages/about/about.component.scss
+++ b/src/app/pages/about/about.component.scss
@@ -1,66 +1,528 @@
 @import "/src/styles.scss";
 
+@mixin cardExpand($fromWidth: 0%, $toWidth: 100%, $fromHeight: 0%, $toHeight: 100%) {
+  @keyframes cardExpand {
+    from {
+      width: $fromWidth;
+      height: $fromHeight;
+    }
+    to {
+      width: $toWidth;
+      height: $toHeight;
+    }
+  }
+}
+
+@mixin cardExpandReverse($fromWidth: 0%, $toWidth: 100%, $fromHeight: 0%, $toHeight: 100%) {
+  @keyframes cardExpandReverse {
+    from {
+      width: $fromWidth;
+      height: $fromHeight;
+    }
+    to {
+      width: $toWidth;
+      height: $toHeight;
+    }
+  }
+}
+
+@mixin cardContract($fromWidth: 100%, $toWidth: 0%, $fromHeight: 0%, $toHeight: 100%) {
+  @keyframes cardContract {
+    from {
+      width: $fromWidth;
+      height: $fromHeight;
+      opacity: 1;
+    }
+    to {
+      width: $toWidth;
+      height: $toHeight;
+      opacity: 0;
+    }
+  }
+}
+
+@mixin cardContractReverse($fromWidth: 100%, $toWidth: 0%, $fromHeight: 0%, $toHeight: 100%) {
+  @keyframes cardContractReverse {
+    from {
+      width: $fromWidth;
+      height: $fromHeight;
+      opacity: 0;
+    }
+    to {
+      width: $toWidth;
+      height: $toHeight;
+      opacity: 1;
+    }
+  }
+}
+
+@keyframes cardPreviewExpand {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 30%;
+  }
+}
+
+@keyframes cardPreviewContract {
+  from {
+    width: 30%;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes cardContentExpand {
+  from {
+    height: 0;
+    width: 0;
+  }
+  to {
+    height: 100%;
+    width: 66%;
+  }
+}
+
+@keyframes cardContentContract {
+  from {
+    height: 100%;
+    width: 66%;
+  }
+  to {
+    height: 0;
+    width: 0;
+  }
+}
+
+@keyframes cardCloseExpand {
+  from {
+    height: 0;
+    width: 0;
+    opacity: 0;
+  }
+  to {
+    // height: calc(var(--responsiveUnit) * 3);
+    // width: calc(var(--responsiveUnit) * 3);
+    // @include fixedHeight(calc(var(--responsiveUnit) * 3));
+    // @include fixedWidth(calc(var(--responsiveUnit) * 3));
+    height: 10%;
+    width: 5%;
+    opacity: 1;
+  }
+}
+
+@keyframes cardCloseContract {
+  from {
+    // height: calc(var(--responsiveUnit) * 3);
+    // width: calc(var(--responsiveUnit) * 3);
+    // @include fixedHeight(calc(var(--responsiveUnit) * 3));
+    // @include fixedWidth(calc(var(--responsiveUnit) * 3));
+    height: 10%;
+    width: 5%;
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    width: 0;
+    opacity: 0;
+  }
+}
+
 :host {
+  display: flex;
+  justify-content: center;
   height: max-content;
   width: 100%;
-  margin-top: calc(var(--responsiveUnit) * 5);
-  padding-block: 1%;
+  margin-top: var(--headerHeight);
   color: $light;
 }
 
 #content {
   height: 100%;
+  padding-block: 1%;
   width: 100%;
-  font-size: calc(var(--responsiveUnit) * 1.5);
+  max-width: 1200px;
+  font-size: calc(var(--responsiveUnit) * 0.8);
+  backdrop-filter: blur(10px);
 }
 
-#quemSomos{
-    //allign page
-    margin-top: 1.5%;
-    margin-left: 40%;
-    margin-right: 40%;
-    margin-bottom: 2%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 20vh;
-
-    //background
-    background: transparentize($color: $void, $amount: 0.6);
-    backdrop-filter: blur(10px);
+#quemSomos {
+  //allign page
+  margin-top: 1.5%;
+  margin-left: 40%;
+  margin-right: 40%;
+  margin-bottom: 2%;
+  min-height: 20vh;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  display: flex;
+  flex-direction: column;
 
-    //border
-    border: 1px solid $light;
-    border-radius: 35%;
+  //border
+  border: calc(var(--responsiveUnit) * 0.3) solid transparentize($color: $dark, $amount: 0.5);
+  border-radius: 315px;
 
-    // font
-    font-size: calc(var(--responsiveUnit) * 3.5);
+  // font
+  font-size: calc(var(--responsiveUnit) * 1.5);
+  overflow: hidden;
+  &:hover {
+    border: calc(var(--responsiveUnit) * 0.3) solid $light;
+    transition: 350ms;
+    transform: scale(1.05);
+    cursor: pointer;
+  }
 }
 
-#title{
+#title {
   display: flex;
   justify-content: center;
   align-items: center;
   // height: 10vh;
 }
 
-.classCenter{
+.classCenter {
   text-align: center;
-  background: transparentize($color: $void, $amount: 0.6);
-  backdrop-filter: blur(10px)
 }
 
-.card{
+.cards {
+  @include fixedWidth(100%);
   display: flex;
-}
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  --cardHeight: calc(var(--responsiveUnit) * 10);
+  --cardWidth: calc(var(--responsiveUnit) * 8);
+
+  .card {
+    position: relative;
+    // @include fixedHeight(var(--cardHeight));
+    // @include fixedWidth(var(--cardWidth));
+    height: var(--cardHeight);
+    width: var(--cardWidth);
+    display: flex;
+    border-radius: 10px;
+    padding: 1%;
+    margin: 1%;
+    overflow: hidden;
+    border: calc(var(--responsiveUnit) * 0.2) solid $medium;
+    transition: all 250ms ease-in-out;
+    &:hover {
+      transform: scale(1.05);
+      cursor: pointer;
+      border: calc(var(--responsiveUnit) * 0.2) solid $light;
+
+      .cardPreview {
+        .cardAvatar {
+          img {
+            background: $light;
+            filter: grayscale(0);
+          }
+        }
+
+        .cardTitle {
+          h1 {
+            color: $light;
+          }
+        }
+      }
+    }
+    &:active {
+      transform: scale(0.95);
+    }
+
+    .cardOpen {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+    }
+
+    .cardPreview {
+      // @include fixedHeight(100%);
+      // @include fixedWidth(100%);
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+
+      .cardAvatar {
+        @include fixedHeight(70%);
+        @include fixedWidth(100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+          @include fixedWidth(85%);
+          aspect-ratio: 1;
+          border-radius: 50%;
+          background: $medium;
+          transition: all 250ms ease-in-out;
+          filter: grayscale(0.5);
+        }
+      }
+
+      .cardTitle {
+        @include fixedHeight(30%);
+        @include fixedWidth(100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        h1 {
+          text-align: center;
+          margin: 0;
+          padding: 0;
+          font-size: calc(var(--responsiveUnit) * 1.3);
+          font-family: sans-serif;
+          color: $medium;
+          transition: all 250ms ease-in-out;
+        }
+      }
+    }
+
+    .cardContent,
+    .cardClose {
+      height: 0;
+      width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .card[expanded="true"] {
+    @include cardExpand(--cardWidth, 90%, --cardHeight, calc(var(--cardHeight) * 2.5));
+    animation: cardExpand;
+    animation-timing-function: ease-in-out;
+    animation-duration: 1.5s;
+    animation-fill-mode: forwards;
+    border: calc(var(--responsiveUnit) * 0.2) solid $light;
+    &:hover {
+      transform: scale(1);
+      cursor: default;
+    }
+    &:active {
+      transform: scale(1);
+    }
+    &.reverse {
+      @include cardExpandReverse(90%, --cardWidth, calc(var(--cardHeight) * 2.5), --cardHeight);
+      animation: cardExpandReverse;
+      animation-timing-function: ease-in-out;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+
+      .cardPreview {
+        animation: cardPreviewContract;
+        animation-timing-function: ease-in-out;
+        animation-duration: 1.5s;
+        animation-fill-mode: forwards;
+      }
+
+      .cardContent {
+        animation: cardContentContract;
+        animation-timing-function: ease-in-out;
+        animation-duration: 1.5s;
+        animation-fill-mode: forwards;
+      }
+
+      .cardClose {
+        animation: cardCloseContract;
+        animation-timing-function: ease-in-out;
+        animation-duration: 1.5s;
+        animation-fill-mode: forwards;
+      }
+    }
+
+    .cardOpen {
+      display: none;
+    }
+
+    .cardPreview {
+      width: 30%;
+      animation: cardPreviewExpand;
+      animation-timing-function: ease-in-out;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+
+      .cardAvatar {
+        img {
+          background: $light;
+          filter: grayscale(0);
+        }
+      }
+
+      .cardTitle {
+        h1 {
+          color: $light;
+        }
+      }
+    }
+
+    .cardContent {
+      height: 100%;
+      width: 64%;
+      animation: cardContentExpand;
+      animation-timing-function: ease-in-out;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+      padding-inline: 2%;
+      padding-right: 4%;
+
+      .cardName {
+        height: 10%;
+        padding-bottom: 0.5%;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        border-bottom: calc(var(--responsiveUnit) * 0.1) solid $light;
+
+        h2 {
+          font-size: calc(var(--responsiveUnit) * 1.1);
+          margin: 0;
+
+          @media (orientation: portrait) {
+            font-size: calc(var(--responsiveUnit) * 1);
+          }
+        }
+      }
+
+      .cardDescription {
+        height: 38.5%;
+        padding-block: 1%;
+        // box-sizing: border-box;
+
+        p {
+          font-size: calc(var(--responsiveUnit) * 0.85);
+          margin: 0;
+
+          @media (orientation: portrait) {
+            font-size: calc(var(--responsiveUnit) * 0.8);
+          }
+        }
+
+        .roleSpan {
+          font-weight: bolder;
+          &[isOdd="0"] {
+            color: #79a7d3;
+          }
+          &[isOdd="1"] {
+            color: #6883bc;
+          }
+
+          .separatorSpan {
+            color: $light;
+          }
+        }
+      }
+
+      .cardSocial {
+        height: 12.5%;
+        padding-block: 1%;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+        box-sizing: border-box;
+        border-top: calc(var(--responsiveUnit) * 0.1) solid $light;
+        border-bottom: calc(var(--responsiveUnit) * 0.1) solid $light;
+
+        a {
+          border: calc(var(--responsiveUnit) * 0.1) solid $medium;
+          height: 100%;
+          width: 8%;
+          margin-inline: 1%;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          &:hover {
+            border: calc(var(--responsiveUnit) * 0.1) solid $light;
+            transition: all 250ms ease-in-out;
+            transform: scale(1.05);
+            cursor: pointer;
+          }
+
+          img {
+            height: 75%;
+            filter: invert(1);
+          }
+
+          @media (orientation: portrait) {
+            width: 10%;
+
+            img {
+              height: 60%;
+            }
+          }
+        }
+      }
+
+      .cardFormation {
+        height: 35.5%;
+
+        ul {
+          margin: 0;
+          padding: 0;
+
+          li {
+            list-style: inside;
+            padding-block: 1%;
+            // box-sizing: border-box;
+            font-size: calc(var(--responsiveUnit) * 0.6);
+
+            @media (orientation: portrait) {
+              font-size: calc(var(--responsiveUnit) * 0.8);
+            }
+          }
+        }
+      }
+    }
+
+    .cardClose {
+      position: absolute;
+      top: 1%;
+      right: 0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // @include fixedHeight(calc(var(--responsiveUnit) * 3));
+      // @include fixedWidth(calc(var(--responsiveUnit) * 3));
+      height: 10%;
+      width: 5%;
+      animation: cardCloseExpand;
+      animation-timing-function: ease-in-out;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+
+      img {
+        aspect-ratio: 1;
+        width: 100%;
+        filter: invert(1);
+        transition: all 200ms ease-in-out;
+        &:hover {
+          cursor: pointer;
+          filter: invert(41%) sepia(54%) saturate(3889%) hue-rotate(327deg) brightness(95%) contrast(94%);
+        }
+      }
+    }
+  }
 
-.cardAvatar{
-  border-radius: 70%;
-  margin-right: 2%;
-  margin-left: 2%;
-  margin-top: 1%;
-  box-shadow:
-        -2px 2px 2px 2px yellow,
-        -2px -6px 2px 2px orange,
-        2px 4px 2px 2px cyan;
+  .card[expanded="false"] {
+    @include cardContract(--cardWidth, 0, --cardHeight, 0);
+    animation: cardContract;
+    animation-timing-function: ease-in-out;
+    animation-duration: 1.5s;
+    animation-fill-mode: forwards;
+    padding: 0;
+    margin: 0;
+    &.reverse {
+      @include cardContractReverse(0, --cardWidth, 0, --cardHeight);
+      animation: cardContractReverse;
+      animation-timing-function: ease-in-out;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+    }
+  }
 }
diff --git a/src/app/pages/about/about.component.ts b/src/app/pages/about/about.component.ts
index 8d43b91..d2d7a23 100644
--- a/src/app/pages/about/about.component.ts
+++ b/src/app/pages/about/about.component.ts
@@ -1,7 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { AppComponent } from '../../app.component';
 
-
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
@@ -10,6 +10,53 @@ import { AppComponent } from '../../app.component';
 export class AboutComponent implements OnInit {
   title = 'AboutComponent';
 
+  expandedCardIndex = '-1';
+  cardArray = [
+    {
+      img: 'assets/imgs/PNGs/dudushy.png',
+      name: 'Eduardo "dudushy" Talarico',
+      mainRole: 'Founder',
+      roles: [
+        'Fundador',
+        'Co-idealizador'
+      ],
+      description: 'da ShylandDev, possui vasta experiência no ramo de criação de aplicativos, sites, dentre outras smart solutions para empresas pequeno e médio porte.',
+      social: [
+        {
+          network: 'GitHub',
+          url: 'https://github.com/dudushy',
+          icon: 'assets/imgs/SVGs/logo-github.svg'
+        }
+      ],
+      formation: [
+        'Graduação Superior em Ciências da Computação pela Universidade Paulista',
+        'Web Developer (Ionic and Angular)'
+      ]
+    },
+    {
+      img: 'assets/imgs/PNGs/natzun.png',
+      name: 'Natan "Natzun" Zunfrilli',
+      mainRole: 'Co-founder',
+      roles: [
+        'Co-fundador',
+        'Co-idealizador'
+      ],
+      description: 'da ShylandDev, possui 5 anos de experiência e atuação no ramo do direito imobiliário registral, com desenvolvimento smart solutions para cartórios de Registro de Imóveis. Atuando como Analista de implantação, suporte e desenvolvimento.',
+      social: [
+        {
+          network: 'GitHub',
+          url: 'https://github.com/Natzun',
+          icon: 'assets/imgs/SVGs/logo-github.svg'
+        }
+      ],
+      formation: [
+        'Graduação Superior em Direito pelo Centro Universitário Barão de Mauá',
+        'IT Security Specialist (database analysis and cyber attack)',
+        'C# Developer'
+      ]
+    }
+  ];
+
   constructor(
     private cdr: ChangeDetectorRef,
     public app: AppComponent
@@ -19,6 +66,9 @@ export class AboutComponent implements OnInit {
 
   ngOnInit(): void {
     console.log(`[${this.title}#ngOnInit]`);
+
+    console.log(`[${this.title}#ngOnInit] expandedCardIndex`, this.expandedCardIndex);
+    console.log(`[${this.title}#ngOnInit] cardArray`, this.cardArray);
   }
 
   updateView() {
@@ -34,5 +84,41 @@ export class AboutComponent implements OnInit {
     this.updateView();
   }
 
-  defaultOrder() { return 0;}
+  defaultOrder() { return 0; }
+
+  expandCard(index) {
+    console.log(`[${this.title}#expandCard] index`, index);
+
+    this.expandedCardIndex = index;
+
+    console.log(`[${this.title}#expandCard] expandedCardIndex`, this.expandedCardIndex);
+  }
+
+  collapseCard() {
+    console.log(`[${this.title}#collapseCard]`);
+
+    // this.expandedCardIndex = '-1';
+    // console.log(`[${this.title}#collapseCard] expandedCardIndex`, this.expandedCardIndex);
+
+    const cards = Array.from(document.getElementsByClassName('card'));
+    console.log(`[${this.title}#collapseCard] cards`, cards);
+
+    for (const card of cards) {
+      console.log(`[${this.title}#collapseCard] card`, card);
+
+      card.classList.add('reverse');
+    }
+
+    setTimeout(() => {
+      for (const card of cards) {
+        console.log(`[${this.title}#collapseCard] card`, card);
+
+        card.classList.remove('reverse');
+      }
+
+      this.expandedCardIndex = '-1';
+      console.log(`[${this.title}#collapseCard] expandedCardIndex`, this.expandedCardIndex);
+    }, 1500);
+
+  }
 }
diff --git a/src/app/pages/contact-us/contact-us.component.html b/src/app/pages/contact-us/contact-us.component.html
index 3297e44..a182862 100644
--- a/src/app/pages/contact-us/contact-us.component.html
+++ b/src/app/pages/contact-us/contact-us.component.html
@@ -1,8 +1,7 @@
 <div id="content">
-    {{title}} works!
-  
-    <button type="submit" class="shy-btn">
-      This is a test
-    </button>
-  </div>
-  
\ No newline at end of file
+  {{title}} works!
+
+  <button type="submit" class="shy-btn">
+    This is a test
+  </button>
+</div>
diff --git a/src/app/pages/contact-us/contact-us.component.scss b/src/app/pages/contact-us/contact-us.component.scss
index 9033a40..c7fdc83 100644
--- a/src/app/pages/contact-us/contact-us.component.scss
+++ b/src/app/pages/contact-us/contact-us.component.scss
@@ -1,15 +1,18 @@
 @import "/src/styles.scss";
 
 :host {
+  display: flex;
+  justify-content: center;
   height: max-content;
   width: 100%;
-  margin-top: calc(var(--responsiveUnit) * 5);
-  padding-block: 1%;
+  margin-top: var(--headerHeight);
   color: $light;
 }
 
 #content {
   height: 100%;
+  padding-block: 1%;
   width: 100%;
-  font-size: calc(var(--responsiveUnit) * 1.5);
+  max-width: 1200px;
+  font-size: calc(var(--responsiveUnit) * 0.8);
 }
diff --git a/src/app/pages/contact-us/contact-us.component.ts b/src/app/pages/contact-us/contact-us.component.ts
index 747148f..97990ba 100644
--- a/src/app/pages/contact-us/contact-us.component.ts
+++ b/src/app/pages/contact-us/contact-us.component.ts
@@ -2,7 +2,6 @@
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { AppComponent } from '../../app.component';
 
-
 @Component({
   selector: 'app-contact-us',
   templateUrl: './contact-us.component.html',
@@ -35,5 +34,5 @@ export class ContactUsComponent implements OnInit {
     this.updateView();
   }
 
-  defaultOrder() { return 0;}
-}
\ No newline at end of file
+  defaultOrder() { return 0; }
+}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index 9033a40..6091c77 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -1,15 +1,19 @@
 @import "/src/styles.scss";
 
 :host {
+  display: flex;
+  justify-content: center;
   height: max-content;
   width: 100%;
-  margin-top: calc(var(--responsiveUnit) * 5);
-  padding-block: 1%;
+  margin-top: var(--headerHeight);
   color: $light;
 }
 
 #content {
   height: 100%;
+  padding-block: 1%;
   width: 100%;
-  font-size: calc(var(--responsiveUnit) * 1.5);
+  max-width: 1200px;
+  font-size: calc(var(--responsiveUnit) * 0.8);
+  backdrop-filter: blur(10px);
 }
diff --git a/src/app/pages/not-found/not-found.component.scss b/src/app/pages/not-found/not-found.component.scss
index 76f0597..c7fdc83 100644
--- a/src/app/pages/not-found/not-found.component.scss
+++ b/src/app/pages/not-found/not-found.component.scss
@@ -1,16 +1,18 @@
 @import "/src/styles.scss";
 
 :host {
-  position: relative;
+  display: flex;
+  justify-content: center;
   height: max-content;
   width: 100%;
-  margin-top: calc(var(--responsiveUnit) * 5);
-  padding-block: 1%;
+  margin-top: var(--headerHeight);
   color: $light;
 }
 
 #content {
   height: 100%;
+  padding-block: 1%;
   width: 100%;
-  font-size: calc(var(--responsiveUnit) * 1.5);
+  max-width: 1200px;
+  font-size: calc(var(--responsiveUnit) * 0.8);
 }
diff --git a/src/app/pages/projects/projects.component.html b/src/app/pages/projects/projects.component.html
index 26f3b38..e63646e 100644
--- a/src/app/pages/projects/projects.component.html
+++ b/src/app/pages/projects/projects.component.html
@@ -1,11 +1,23 @@
 <div id="content">
   <div id="gallery">
-    <div id="iframe-wrapper" class="blur">
-      <iframe id="gallery-iframe" scrolling="no" class="blur" (load)="unblurIframe()"></iframe>
+    <div id="galleryImg-wrapper">
+      <img id="galleryImg" class="blur" (load)="unblurGallery()">
+
+      <div id="galleryImgInfo">
+        <h1 (click)="app.openLink(projectArray[galleryIndex]['src'])" title="Visit {{projectArray[galleryIndex]['title']}}">
+          {{projectArray[galleryIndex]['title']}}
+        </h1>
+
+        <hr>
+
+        <p (click)="app.openLink(projectArray[galleryIndex]['src'])" title="Visit {{projectArray[galleryIndex]['title']}}">
+          {{projectArray[galleryIndex]['description']}}
+        </p>
+      </div>
     </div>
 
-    <img class="gallery-button" id="prev" src="assets/imgs/SVGs/chevron-back.svg" alt="prev" (click)="prevGalleryItem()">
-    <img class="gallery-button" id="next" src="assets/imgs/SVGs/chevron-forward.svg" alt="next" (click)="nextGalleryItem()">
+    <img *ngIf="galleryIndex != 0" class="gallery-button" id="prev" src="assets/imgs/SVGs/chevron-back.svg" alt="prev" (click)="prevGalleryItem()">
+    <img *ngIf="galleryIndex != projectArray.length - 1" class="gallery-button" id="next" src="assets/imgs/SVGs/chevron-forward.svg" alt="next" (click)="nextGalleryItem()">
     <img class="gallery-button" id="close" src="assets/imgs/SVGs/close.svg" alt="close" (click)="closeGallery()">
   </div>
 
diff --git a/src/app/pages/projects/projects.component.scss b/src/app/pages/projects/projects.component.scss
index 833584a..a737b9b 100644
--- a/src/app/pages/projects/projects.component.scss
+++ b/src/app/pages/projects/projects.component.scss
@@ -1,17 +1,20 @@
 @import "/src/styles.scss";
 
 :host {
+  display: flex;
+  justify-content: center;
   height: max-content;
   width: 100%;
-  margin-top: calc(var(--responsiveUnit) * 5);
-  padding-block: 1%;
+  margin-top: var(--headerHeight);
   color: $light;
 }
 
 #content {
   height: 100%;
+  padding-block: 1%;
   width: 100%;
-  font-size: calc(var(--responsiveUnit) * 1.5);
+  max-width: 1200px;
+  font-size: calc(var(--responsiveUnit) * 0.8);
 }
 
 #gallery {
@@ -27,36 +30,79 @@
     display: flex !important;
   }
 
-  #iframe-wrapper {
+  #galleryImg-wrapper {
     position: relative;
     height: 90%;
     width: 85%;
-    background: $light;
+    border: calc(var(--responsiveUnit) * 0.1) solid $medium;
+    border-radius: 10px;
+    box-sizing: border-box;
     overflow: hidden;
-    &::before {
-      content: none;
-    }
-    &.blur {
-      background: $medium;
 
-      &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        animation: pulse 1s infinite;
-      }
-    }
-
-    iframe {
+    img {
       height: 100%;
       width: 100%;
-      border: none;
-      pointer-events: none;
+      object-fit: contain;
+      object-position: center;
       transition: all 250ms ease-in-out;
       &.blur {
         filter: blur(50px);
       }
     }
+
+    #galleryImgInfo {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 16%;
+      width: 100%;
+      padding-top: 1%;
+      text-align: center;
+      color: $light;
+      background: transparentize($color: $dark, $amount: 0.1);
+
+      h1 {
+        margin: 0;
+        padding: 0;
+        font-size: calc(var(--responsiveUnit) * 2);
+        font-weight: lighter;
+        font-family: "AlteHaasGrotesk";
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      hr {
+        margin: 0;
+        margin-inline: 2%;
+        margin-block: 0.2%;
+        border: calc(var(--responsiveUnit) * 0.15) solid $light;
+        border-radius: 10px;
+      }
+
+      p {
+        margin: 0;
+        margin-inline: 2%;
+        margin-top: 0.3%;
+        padding: 0;
+        font-size: calc(var(--responsiveUnit) * 1.1);
+        font-family: "Roboto";
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+      @media (orientation: portrait) {
+        height: 9%;
+
+        p {
+          font-size: calc(var(--responsiveUnit) * 1.3);
+        }
+      }
+    }
   }
 
   .gallery-button {
@@ -84,7 +130,27 @@
 
   #close {
     top: 2%;
-    right: 2%;
+    right: 1%;
+  }
+
+  @media (orientation: portrait) {
+    #galleryImg-wrapper {
+      height: 85%;
+      width: 75%;
+    }
+
+    #prev {
+      left: 2%;
+    }
+
+    #next {
+      right: 2%;
+    }
+
+    #close {
+      top: 2%;
+      right: 2%;
+    }
   }
 }
 
@@ -100,11 +166,11 @@
     height: calc(var(--responsiveUnit) * 18);
     width: calc(var(--responsiveUnit) * 12);
     margin: 1%;
-    border: 4px solid transparentize($color: $dark, $amount: 0.5);
+    border: calc(var(--responsiveUnit) * 0.2) solid transparentize($color: $dark, $amount: 0.5);
     border-radius: 15px;
     overflow: hidden;
     &:hover {
-      border: 4px solid $light;
+      border: calc(var(--responsiveUnit) * 0.2) solid $light;
       transition: 350ms;
       transform: scale(1.05);
       cursor: pointer;
@@ -114,16 +180,14 @@
       position: relative;
       height: 60%;
       width: 100%;
-      border-top-left-radius: 15px;
-      border-top-right-radius: 15px;
+      @include allVendors(border-top-left-radius, 15px);
+      @include allVendors(border-top-right-radius, 15px);
       background-size: cover;
       background-position: center;
       &::before {
         content: "";
         position: absolute;
         inset: 0;
-        // height: calc(var(--responsiveUnit) * 16);
-        // width: calc(var(--responsiveUnit) * 12);
         animation: pulse 2s infinite;
       }
       &.loaded {
@@ -172,7 +236,7 @@
       hr {
         margin: 0;
         margin-inline: 2%;
-        border: 2px solid $light;
+        border: calc(var(--responsiveUnit) * 0.15) solid $light;
         border-radius: 10px;
       }
 
diff --git a/src/app/pages/projects/projects.component.ts b/src/app/pages/projects/projects.component.ts
index 282e442..e447da3 100644
--- a/src/app/pages/projects/projects.component.ts
+++ b/src/app/pages/projects/projects.component.ts
@@ -134,20 +134,31 @@ export class ProjectsComponent implements OnInit {
 
     gallery.classList.add('open');
 
-    const iframe = document.getElementById('gallery-iframe') as HTMLIFrameElement;
-    console.log(`[${this.title}#openGallery] iframe`, iframe);
+    const galleryImg = document.getElementById('galleryImg') as HTMLImageElement;
+    console.log(`[${this.title}#openGallery] galleryImg`, galleryImg);
 
-    this.blurIframe();
-    iframe.setAttribute('src', this.projectArray[index].src);
+    galleryImg.src = this.projectArray[this.galleryIndex].image;
+  }
+
+  unblurGallery() {
+    const galleryImg = document.getElementById('galleryImg');
+    console.log(`[${this.title}#unblurGallery] galleryImg`, galleryImg);
+
+    galleryImg.classList.remove('blur');
   }
 
   closeGallery() {
     console.log(`[${this.title}#closeGallery]`);
 
     const gallery = document.getElementById('gallery');
-    console.log(`[${this.title}#openGallery] gallery`, gallery);
+    console.log(`[${this.title}#closeGallery] gallery`, gallery);
 
     gallery.classList.remove('open');
+
+    const galleryImg = document.getElementById('galleryImg') as HTMLImageElement;
+    console.log(`[${this.title}#closeGallery] galleryImg`, galleryImg);
+
+    galleryImg.classList.add('blur');
   }
 
   prevGalleryItem() {
@@ -159,11 +170,11 @@ export class ProjectsComponent implements OnInit {
 
     console.log(`[${this.title}#prevGalleryItem] (AFTER) galleryIndex`, this.galleryIndex);
 
-    const iframe = document.getElementById('gallery-iframe') as HTMLIFrameElement;
-    console.log(`[${this.title}#openGallery] iframe`, iframe);
+    const galleryImg = document.getElementById('galleryImg') as HTMLImageElement;
+    console.log(`[${this.title}#prevGalleryItem] galleryImg`, galleryImg);
 
-    this.blurIframe();
-    iframe.setAttribute('src', this.projectArray[this.galleryIndex].src);
+    galleryImg.classList.add('blur');
+    galleryImg.src = this.projectArray[this.galleryIndex].image;
   }
 
   nextGalleryItem() {
@@ -175,49 +186,10 @@ export class ProjectsComponent implements OnInit {
 
     console.log(`[${this.title}#nextGalleryItem] (AFTER) galleryIndex`, this.galleryIndex);
 
-    const iframe = document.getElementById('gallery-iframe') as HTMLIFrameElement;
-    console.log(`[${this.title}#openGallery] iframe`, iframe);
-
-    this.blurIframe();
-    iframe.setAttribute('src', this.projectArray[this.galleryIndex].src);
-  }
-
-  blurIframe() {
-    console.log(`[${this.title}#unblurIframe]`);
-
-    const iframeWrapper = document.getElementById('iframe-wrapper');
-    console.log(`[${this.title}#unblurIframe] iframeWrapper`, iframeWrapper);
+    const galleryImg = document.getElementById('galleryImg') as HTMLImageElement;
+    console.log(`[${this.title}#nextGalleryItem] galleryImg`, galleryImg);
 
-    const iframe = document.getElementById('gallery-iframe') as HTMLIFrameElement;
-    console.log(`[${this.title}#unblurIframe] iframe`, iframe);
-
-    iframeWrapper.classList.add('blur');
-    iframe.classList.add('blur');
-  }
-
-  unblurIframe() {
-    console.log(`[${this.title}#unblurIframe]`);
-
-    const iframeWrapper = document.getElementById('iframe-wrapper');
-    console.log(`[${this.title}#unblurIframe] iframeWrapper`, iframeWrapper);
-
-    const iframe = document.getElementById('gallery-iframe') as HTMLIFrameElement;
-    console.log(`[${this.title}#unblurIframe] iframe`, iframe);
-
-    try {
-      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-      console.log(`[${this.title}#unblurIframe] iframeDoc`, iframeDoc);
-
-      if (iframeDoc.readyState == 'complete') {
-        iframe.contentWindow.onload = function () {
-          iframe.classList.remove('blur');
-        };
-      } else {
-        window.setTimeout(this.unblurIframe, 100);
-      }
-    } catch (error) {
-      iframeWrapper.classList.remove('blur');
-      iframe.classList.remove('blur');
-    }
+    galleryImg.classList.add('blur');
+    galleryImg.src = this.projectArray[this.galleryIndex].image;
   }
 }
diff --git a/src/app/pages/test/test.component.html b/src/app/pages/test/test.component.html
index 6387590..dc387e0 100644
--- a/src/app/pages/test/test.component.html
+++ b/src/app/pages/test/test.component.html
@@ -1,5 +1,5 @@
 <div id="content">
-  <h1>Testing responsive stuff 2.0</h1>
+  <!-- <h1>Testing responsive stuff 2.0</h1>
 
   <p shy-test="true"></p>
 
@@ -13,4 +13,8 @@ <h1>Testing responsive stuff 2.0</h1>
 
   <p class="custom">custom</p>
   <img class="custom" src="assets/imgs/SVGs/shyland.svg" style="background: #ccc;">
+
+  <div class="vendor">Vendor test</div> -->
+
+  <div class="animationTest"></div>
 </div>
diff --git a/src/app/pages/test/test.component.scss b/src/app/pages/test/test.component.scss
index c90d2b4..64db702 100644
--- a/src/app/pages/test/test.component.scss
+++ b/src/app/pages/test/test.component.scss
@@ -1,17 +1,20 @@
 @import "/src/styles.scss";
 
 :host {
+  display: flex;
+  justify-content: center;
   height: max-content;
   width: 100%;
-  margin-top: calc(var(--responsiveUnit) * 5);
-  padding-block: 1%;
+  margin-top: var(--headerHeight);
   color: $light;
 }
 
 #content {
   height: 100%;
+  padding-block: 1%;
   width: 100%;
-  font-size: calc(var(--responsiveUnit) * 1.5);
+  max-width: 1200px;
+  font-size: calc(var(--responsiveUnit) * 0.8);
 }
 
 p.custom {
@@ -22,3 +25,17 @@ img.custom {
   width: calc(var(--responsiveUnit) * 40);
   height: calc(var(--responsiveUnit) * 4);
 }
+
+.vendor {
+  @include allVendors(transition, all 10s ease-in-out);
+  background: lime;
+  &:hover {
+    @include allVendors(transform, rotate(145deg));
+  }
+}
+
+.animationTest {
+  @include fixedHeight(100vmax);
+  @include fixedWidth(100vmax);
+  background: $light;
+}
diff --git a/src/assets/imgs/PNGs/dudushy.png b/src/assets/imgs/PNGs/dudushy.png
index c9d4e22..24c4975 100644
Binary files a/src/assets/imgs/PNGs/dudushy.png and b/src/assets/imgs/PNGs/dudushy.png differ
diff --git a/src/index.html b/src/index.html
index b7db4f1..ac7c556 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,9 +7,81 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <style>
+    #loader {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100vw;
+      height: 100vh;
+      position: fixed;
+      z-index: 9999;
+    }
+
+    #spinner-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      background-color: #000;
+      padding: 100vmax;
+      clip-path: circle(40% at center);
+    }
+
+    #spinner-wrapper.hide {
+      animation: 1.5s paddingOut forwards;
+      animation-timing-function: ease-in;
+    }
+
+    .spinner-container {
+      width: 150px;
+      height: 150px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .spinner {
+      position: absolute;
+      width: calc(100% - 9.9px);
+      height: calc(100% - 9.9px);
+      border: 5px solid transparent;
+      border-radius: 50%;
+      border-top-color: #fff;
+      animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.79) infinite;
+    }
+
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
 </head>
 
 <body>
+  <div id="loader">
+    <div id="spinner-wrapper">
+      <div class="spinner-container">
+        <div class="spinner">
+          <div class="spinner">
+            <div class="spinner">
+              <div class="spinner">
+                <div class="spinner">
+                  <div class="spinner"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <app-root></app-root>
 </body>
 
diff --git a/src/styles.scss b/src/styles.scss
index b94bffa..150e56a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,6 +12,7 @@ $light: #f4f5f8;
 :root {
   --responsiveUnit: calc(1vmin + 1vmax);
   --scrollbarWidth: 10px;
+  --headerHeight: calc(var(--responsiveUnit) * 4);
 }
 
 html,
@@ -29,7 +30,6 @@ app-root {
 
 * {
   font-family: monospace;
-  transition: 50ms all;
 }
 
 //* BUTTON [START]
@@ -105,6 +105,26 @@ app-root {
 }
 //* SHY-TEMPLATES [END]
 
+//* MIXIN [START]
+@mixin fixedHeight($height) {
+  height: $height;
+  min-height: $height;
+  max-height: $height;
+}
+
+@mixin fixedWidth($width) {
+  width: $width;
+  min-width: $width;
+  max-width: $width;
+}
+
+@mixin allVendors($property, $args) {
+  @each $prefix in ("-webkit-", "-moz-", "-ms-", "-o-", "") {
+    #{$prefix + $property}: $args;
+  }
+}
+//* MIXIN [END]
+
 //* SCROLLBAR [START]
 ::-webkit-scrollbar {
   width: var(--scrollbarWidth);
@@ -163,6 +183,11 @@ app-root {
   font-family: "CaviarDreams";
   src: url("assets/fonts/caviar_dreams/CaviarDreams.ttf");
 }
+
+@font-face {
+  font-family: "AlteHaasGrotesk";
+  src: url("assets/fonts/alte_haas_grotesk/AlteHaasGroteskRegular.ttf");
+}
 //* FONTS [END]
 
 //* ANIMATIONS [START]
@@ -202,6 +227,106 @@ app-root {
   }
 }
 
+@keyframes scaleIn {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0);
+  }
+}
+
+@keyframes rotateIn {
+  0% {
+    transform: scale(0) rotate(-360deg);
+  }
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+@keyframes rotateOut {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+    transform: scale(0) rotate(-360deg);
+  }
+}
+
+@keyframes paddingOut {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+  100% {
+    padding: 0%;
+    transform: scale(0) rotate(-360deg);
+  }
+}
+
+@keyframes puffIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+    filter: blur(20px);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    filter: blur(0px);
+  }
+}
+
+@keyframes puffOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    filter: blur(0px);
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+    filter: blur(20px);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes expand {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes contract {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+
 @keyframes rainbowColor {
   100%,
   0% {