Added mobile site and tweaked web version

src/app/app.component.html

@@ -1,5 +1,5 @@
-<app-hero></app-hero>
 <div class="wrapper">
+  <app-hero></app-hero>
   <app-header></app-header>
   <app-services id="about"></app-services>
   <app-footer id="contact"></app-footer>

src/app/app.component.scss

@@ -1,5 +1,14 @@
+@use "../variables.scss" as variables;
+
 .wrapper {
   max-width: 50rem;
   padding: 0 1rem;
   margin: 0 auto;
+  box-sizing: content-box;
+}
+
+@media screen and (max-width: variables.$breakpoint) {
+  .wrapper {
+    padding: 0 2rem;
+  }
 }

src/app/footer/footer.component.html

@@ -12,4 +12,4 @@
   </div>
 </div>
 
-<span class="copyright">{{currentYear}} copyright CptArn</span>
+<span class="copyright">2023 - {{currentYear}} copyright CptArn BV</span>

src/app/footer/footer.component.scss

@@ -1,22 +1,26 @@
+@use "../../variables.scss" as variables;
+
 :host {
   color: #ffffff;
   font-style: italic;
   padding-bottom: 5rem;
+  position: relative;
+  top: 5rem;
+}
 
-  .contact {
+.contact {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15%;
+
+  > div {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 15%;
+    flex-direction: column;
+    gap: 0.75rem;
 
-    > div {
-      display: flex;
-      flex-direction: column;
-      gap: 0.75rem;
-
-      p {
-        margin: 0;
-      }
+    p {
+      margin: 0;
     }
   }
 }
@@ -33,3 +37,15 @@ a {
   color: #ffffff;
   text-decoration: none;;
 }
+
+@media screen and (max-width: variables.$breakpoint) {
+  .contact {
+    flex-direction: column;
+    gap: 2rem;
+    align-items: start;
+  }
+
+  .copyright {
+    margin-top: 5rem;
+  }
+}

src/app/header/header.component.html

@@ -1,5 +1,5 @@
 <img src="assets/white-header-logo.svg" />
 <div class="menu">
-  <a href="#about">About</a>
-  <a href="#contact">Contact</a>
+  <a href="#about">about</a>
+  <a href="#contact">contact</a>
 </div>

src/app/header/header.component.scss

@@ -1,3 +1,5 @@
+@use "../../variables.scss";
+
 :host {
   border-bottom: 1px solid #fff;
   width: 100%;
@@ -21,3 +23,20 @@ img {
     align-content: center;
   }
 }
+
+
+@media screen and (max-width: variables.$breakpoint) {
+  img {
+    display: none;
+  }
+
+  :host {
+    border-top: 1px solid #fff;
+  }
+
+  .menu {
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 1rem;
+  }
+}

src/app/hero/hero.component.html

@@ -1 +1,2 @@
+<img class="mobile" src="assets/CptArn_black.png"/>
 <p class="hero-text">NO LIMITS, JUST <span class="subSlogan">{{subSlogan}}</span></p>

src/app/hero/hero.component.scss

@@ -1,21 +1,42 @@
+@use "../../variables.scss" as variables;
+
 :host {
   width: 100%;
   height: 50rem;
   display: inline-block;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 .hero-text {
   text-transform: uppercase;
-  font-size: 4rem;
+  font-size: 3.8rem;
   font-weight: bold;
   color: white;
   position: relative;
+  text-align: center;
 }
 
 .subSlogan {
   display: inline-block;
   text-align: start;
 }
+
+@media screen and (max-width: variables.$breakpoint) {
+  :host {
+    height: fit-content;
+  }
+
+  .hero-text {
+    font-size: 2rem;
+    font-weight: 600;
+  }
+
+  img {
+    max-width: 100%;
+    border-bottom: 1px solid #fff;
+    padding: 1rem 0;
+  }
+}

src/app/services/services.component.html

@@ -2,9 +2,10 @@
   <div class="text">
     <h2>Creative thinker with a solution focus.</h2>
     <p>Welcome to my creative workspace! I’m a solution-driven freelancer with a passion for blending innovative thinking with technical know-how to bring unique ideas to life. Whether you’re looking to build a prototype, develop custom code, or create a tailored automation system, I’m here to help turn your vision into a reality. My approach combines hands-on experience with a fresh perspective, ensuring that every project isn’t just functional, but forwardthinking and impactful.</p>
-    <a href="mailto:contact@cptarn.com">Contact</a>
+    <a href="mailto:contact@cptarn.com" class="web">Contact</a>
   </div>
   <img src="assets/service-1.svg" />
+  <a href="mailto:contact@cptarn.com" class="mobile">Contact</a>
 </div>
 <div class="right">
   <div class="text">

src/app/services/services.component.scss

@@ -1,8 +1,15 @@
+@use "../../variables.scss" as variables;
+
+$margin: 8rem;
+
 :host {
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  > div {
+    margin-top: $margin;
+  }
 }
 
 h2 {
@@ -41,4 +48,36 @@ a {
   background-color: var(--accent-color);
   border-radius: 4rem;
   padding: 0.5rem 1rem;
+  margin-top: 2rem;
+  position: relative;
+  top: 1rem;
+  text-transform: uppercase;
+}
+
+@media screen and (max-width: variables.$breakpoint) {
+  .left, .right {
+    flex-direction: column;
+    .text, img {
+      max-width: 100%;
+    }
+
+    img {
+      margin-top: 2rem;
+    }
+  }
+
+  .right {
+    text-align: start;
+  }
+  :host {
+    > div {
+      margin-top: 3rem;
+    }
+  }
+
+  .mobile {
+    width: fit-content;
+    margin: 0 auto;
+    font-size: 1.4rem;
+  }
 }

src/styles.scss

@@ -1,8 +1,11 @@
+@use "./variables.scss" as variables;
+
 /* You can add global styles to this file, and also import other style files */
 body {
-  width: 100vw;
+  width: 100%;
   height: 100%;
   margin: 0;
+  overflow-x: hidden;
 }
 
 body {
@@ -18,3 +21,21 @@ body {
 html {
   background-color: #000000;
 }
+
+.mobile {
+  display: none;
+}
+
+.web {
+  display: inherit;
+}
+
+@media screen and (max-width: variables.$breakpoint) {
+  .web {
+    display: none;
+  }
+
+  .mobile {
+    display: inherit;
+  }
+}

src/variables.scss

@@ -0,0 +1 @@
+$breakpoint: 820px;