added reworks on gradient

index.html

@@ -69,7 +69,6 @@
             <h2>Contact</h2>
             <div>
                 For all your projects, questions or ideas, feel free to email me at <a href="mailto:arne@cptarn.com">arne@cptarn.com</a>
-
             </div>
         </div>
     </div>

src/app/app.component.html

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

src/app/app.component.scss

@@ -1,5 +1,5 @@
 .wrapper {
-  max-width: 40rem;
+  max-width: 50rem;
   padding: 0 1rem;
   margin: 0 auto;
 }

src/app/footer/footer.component.html

@@ -1,11 +1,15 @@
-<div>
-  <h2>Contact me</h2>
-  <p>If you’re ready to bring your ideas to life, feel free to reach out. I’m here to help make your vision a reality with practical, innovative solutions—let’s connect and get started!</p>
+<div class="contact">
+  <div>
+    <h2>Contact me</h2>
+    <p>If you’re ready to bring your ideas to life, feel free to reach out. I’m here to help make your vision a reality with practical, innovative solutions—let’s connect and get started!</p>
+  </div>
+
+  <div>
+    <p>Arne Vlaeminck</p>
+    <a href="mailto:arne@cptarn.com">arne&#64;cptarn.com</a>
+    <a href="cptarn.com/">cptarn.com</a>
+    <p>BE 0800 396 191</p>
+  </div>
 </div>
 
-<div>
-  <p>Arne Vlaeminck</p>
-  <a href="mailto:arne@cptarn.com">arne&#64;cptarn.com</a>
-  <a href="cptarn.com">cptarn.com</a>
-  <p>BE 0800 396 191</p>
-</div>
+<span class="copyright">{{currentYear}} copyright CptArn</span>

src/app/footer/footer.component.scss

@@ -1,7 +1,35 @@
 :host {
-  color: #696969;
+  color: #ffffff;
   font-style: italic;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  padding-bottom: 5rem;
+
+  .contact {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15%;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.copyright {
+  width: 100%;
+  display: inline-block;
+  text-align: center;
+  margin-top: 10rem;
+  color: #696969;
+}
+
+a {
+  color: #ffffff;
+  text-decoration: none;;
 }

src/app/header/header.component.html

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

src/app/hero/hero.component.html

@@ -1 +1 @@
-<span class="hero-text">NO LIMITS, JUST {{subSlogan}}</span>
+<p class="hero-text">NO LIMITS, JUST <span class="subSlogan">{{subSlogan}}</span></p>

src/app/hero/hero.component.scss

@@ -1,16 +1,21 @@
 :host {
   width: 100%;
-  height: 75%;
+  height: 50rem;
   display: inline-block;
-  background-color: #e94d1a;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .hero-text {
   text-transform: uppercase;
   font-size: 4rem;
-  position: relative;
-  left: calc(30% - 5rem);
-  top: 40%;
   font-weight: bold;
   color: white;
+  position: relative;
+}
+
+.subSlogan {
+  display: inline-block;
+  text-align: start;
 }

src/app/hero/hero.component.ts

@@ -9,4 +9,16 @@ import { Component } from '@angular/core';
 })
 export class HeroComponent {
  public subSlogan: string = 'results';
+ public slogans: string[] = [
+  'deliverables',
+  'performance',
+  'results',
+  'efficiency',
+  'achievements',
+  'optimizations',
+  'success',
+ ]
+
+ constructor() {}
+
 }

src/app/services/services.component.html

@@ -1,7 +1,8 @@
 <div class="left">
   <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 impactfu</p>
+    <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>
   </div>
   <img src="assets/service-1.svg" />
 </div>

src/app/services/services.component.scss

@@ -34,3 +34,11 @@ h2 {
     margin-top: 2rem;
   }
 }
+
+a {
+  color: #fff;
+  text-decoration: none;
+  background-color: var(--accent-color);
+  border-radius: 4rem;
+  padding: 0.5rem 1rem;
+}

src/styles.scss

@@ -10,7 +10,9 @@ body {
   font-optical-sizing: auto;
   font-weight: normal;
   font-style: normal;
-  background: linear-gradient(180deg, #E94E1B 0%, #2B2B2B 24.67%, #2B2B2B 63.56%, #000000 96.31%, #000000 100%);
+  background: linear-gradient(180deg, #E94E1B 0%, #E94E1B 10%, #2B2B2B 45%, #2B2B2B 63.56%, #000000 90%, #000000 100%);
+
+  --accent-color: #E94E1B;
 }
 
 html {