Added new layout

index.html

@@ -5,6 +5,8 @@
     <meta name="description" content="CptArn Freelance dreative thinker with a solution focus. For all projects involving prototyping, coding or automation in a wide array of situations (IT projects, factory/home automation, new products).">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script data-goatcounter="https://cptarn.goatcounter.com/count"
+        async src="//gc.zgo.at/count.js"></script>
     <title>CptArn</title>
     <style>
         * {
@@ -62,12 +64,12 @@
         <div>
             Creative thinker with a solution focus. For all projects involving prototyping, coding or automation in a wide array of situations (IT projects, factory/home automation, new products).
         </div>
-    
+
         <div class="contact-details">
             <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>
@@ -79,4 +81,4 @@
 <script>
     document.getElementById("footer-text").innerHTML = 'CptArn - ' + (new Date()).getFullYear();
 </script>
-</html>
+</html>

public/assets/white-header-logo.svg

@@ -6,68 +6,13 @@
 	.st0{fill:#E94E1B;}
 	.st1{fill:#FFFFFF;}
 </style>
-<g>
-	<g>
-		<path class="st0" d="M158.2,325.9c-0.7,0-1.4-0.3-1.9-0.8c-1.1-1.1-1.2-2.8-0.1-3.9c1.4-1.4,2.6-3.1,3.7-5.1
-			c5.2-9.5,8.4-16.6,10.1-20.8c-5.3,0.8-14.2,2-22.3,2.7c-1.5,0.1-2.9-1-3-2.5c-0.1-1.5,1-2.9,2.6-3c12.4-1.1,26.6-3.3,26.7-3.3
-			c1-0.2,1.9,0.2,2.6,0.9c0.6,0.7,0.8,1.7,0.5,2.7c-0.1,0.4-3.2,9.7-12.1,26c-1.3,2.4-2.8,4.5-4.5,6.3
-			C159.7,325.6,158.9,325.9,158.2,325.9z"/>
-	</g>
-	<g>
-		<path d="M210,321.7c-2.3-0.8-4.9-1.2-7.6-1.2c-3.6,0-6.8,0.5-9.6,1.6c-2.7,1-5.1,2.5-7,4.2c-1.9,1.7-3.5,3.7-4.7,5.9
-			c-1.2,2.2-2,4.4-2.6,6.7c-0.5,2.2-0.8,4.5-0.8,6.6c0,3.3,0.6,6.2,1.8,8.9c1.2,2.6,2.8,4.9,4.8,6.7c2,1.8,4.4,3.3,7.1,4.2
-			c2.6,1,5.5,1.5,8.4,1.5c1.5,0,3-0.1,4.4-0.4c1.4-0.3,2.7-0.6,3.9-1.1c1.2-0.4,2.2-0.9,3.2-1.3c0.7-0.3,1-1.1,0.7-1.8l-1.1-2.6
-			c-0.1-0.4-0.4-0.6-0.8-0.8c-0.4-0.1-0.8-0.1-1.1,0c-0.8,0.4-1.7,0.8-2.7,1.1c-0.9,0.3-1.9,0.6-3,0.9c-1.1,0.2-2.2,0.3-3.4,0.3
-			c-2.3,0-4.5-0.4-6.4-1.2c-2-0.8-3.7-1.9-5.2-3.3c-1.5-1.4-2.6-3.1-3.4-5c-0.8-1.9-1.2-4.1-1.2-6.5c0-2.3,0.4-4.6,1.1-6.9
-			c0.7-2.3,1.8-4.4,3.4-6.2c1.5-1.8,3.4-3.3,5.8-4.4c2.4-1.1,5.3-1.7,8.7-1.6c2,0,3.9,0.4,5.6,1c1.8,0.6,3.3,1.5,4.6,2.4
-			c0.3,0.2,0.7,0.3,1.1,0.3c0.4-0.1,0.7-0.3,0.9-0.6l1.6-2.6c0.4-0.6,0.2-1.4-0.4-1.8C214.4,323.5,212.3,322.5,210,321.7z"/>
-		<path d="M246.3,340.6c-3.9-2.2-9.2-2.1-13.8,0.4c-0.7,0.4-1.3,0.8-1.9,1.2l0.1-1.1c0-0.4-0.1-0.8-0.4-1.1c-0.3-0.3-0.6-0.5-1-0.5
-			h-2.6c-0.7,0-1.3,0.5-1.4,1.2l-4.3,34.9c0,0.4,0.1,0.8,0.3,1.1c0.3,0.3,0.6,0.5,1.1,0.5h2.9c0.7,0,1.3-0.5,1.4-1.2l1.4-12.7
-			c0.4,0.4,0.9,0.7,1.4,1.1c2.1,1.4,4.5,2.1,7.1,2.1c2.9,0,5.6-0.7,8-2.1c2.3-1.4,4.2-3.3,5.6-5.6c1.4-2.3,2.1-4.9,2.1-7.7
-			c0-2.3-0.5-4.4-1.6-6.2C249.7,343.1,248.2,341.6,246.3,340.6z M236.7,361.2c-1.5,0-2.7-0.2-3.6-0.7c-0.9-0.5-1.7-1.1-2.2-1.9
-			c-0.6-0.8-1-1.6-1.2-2.4c-0.2-0.8-0.3-1.6-0.4-2l0.3-2.5c0.3-1.5,0.9-2.8,1.8-4c0.9-1.1,2-2,3.4-2.7c1.3-0.7,2.7-1,4.3-1
-			c1.5,0,2.7,0.3,3.9,1c1.1,0.6,2,1.5,2.6,2.6c0.6,1.1,1,2.4,1,3.8c0,1.7-0.4,3.3-1.3,4.8c-0.9,1.5-2.1,2.7-3.6,3.6
-			C240.2,360.8,238.5,361.2,236.7,361.2z"/>
-		<path d="M277.1,340.1h-5.8l1.1-9.1c0.1-0.4-0.1-0.8-0.3-1.1c-0.3-0.3-0.7-0.5-1.1-0.5H268c-0.7,0-1.3,0.5-1.4,1.2l-1.1,9.4h-3.9
-			c-0.7,0-1.3,0.5-1.4,1.2l-0.3,2.3c-0.1,0.4,0.1,0.8,0.3,1.1c0.3,0.3,0.7,0.5,1.1,0.5h3.5l-2.4,19.3c0,0.4,0.1,0.8,0.3,1.1
-			c0.3,0.3,0.6,0.5,1.1,0.5h2.9c0.7,0,1.3-0.5,1.4-1.2l2.4-19.6h6.2c0.7,0,1.3-0.5,1.4-1.2l0.3-2.3c0.1-0.4-0.1-0.8-0.3-1.1
-			C277.8,340.2,277.5,340.1,277.1,340.1z"/>
-		<path d="M308,319.8c-0.2-0.6-0.7-1-1.4-1h-0.2c-0.5,0-1,0.3-1.2,0.7l-23.8,44.5c-0.2,0.4-0.2,0.9,0,1.4c0.3,0.4,0.7,0.7,1.2,0.7h3
-			c0.5,0,1-0.3,1.2-0.7l7.1-13.4H311l3.7,13.1c0.2,0.6,0.7,1,1.4,1h3.4c0.4,0,0.9-0.2,1.1-0.5c0.3-0.3,0.4-0.8,0.2-1.2L308,319.8z
-			 M309.4,346.4h-12.6l8.2-15.4L309.4,346.4z"/>
-		<path d="M347.3,339.1c-1.6,0-3.1,0.3-4.7,0.9c-1.6,0.6-3,1.5-4.3,2.6c0,0,0,0,0,0c0,0,0,0-0.1,0l0.1-1.4c0-0.4-0.1-0.8-0.4-1.1
-			c-0.3-0.3-0.6-0.5-1-0.5h-2.5c-0.7,0-1.3,0.5-1.4,1.2l-2.9,23.5c-0.1,0.4,0.1,0.8,0.3,1.1c0.3,0.3,0.6,0.5,1.1,0.5h2.9
-			c0.7,0,1.3-0.5,1.4-1.2l1.6-12.4c0.2-1.4,0.7-2.7,1.6-3.9c0.9-1.2,2-2.1,3.5-2.8c1.4-0.7,2.9-1,4.5-1c0.7,0,1.3-0.5,1.4-1.2
-			l0.4-2.8c0.1-0.4-0.1-0.8-0.3-1.1C348.1,339.3,347.7,339.1,347.3,339.1z"/>
-		<path d="M378,341.4c-1.5-1.6-3.7-2.3-6.5-2.3c-2.7,0-5.1,0.6-7.2,1.9c-0.5,0.3-1,0.6-1.5,1l0-0.8c0-0.4-0.1-0.7-0.4-1
-			c-0.3-0.3-0.6-0.4-1-0.4H359c-0.7,0-1.3,0.5-1.4,1.2l-2.9,23.5c-0.1,0.4,0.1,0.8,0.3,1.1c0.3,0.3,0.6,0.5,1.1,0.5h2.9
-			c0.7,0,1.3-0.5,1.4-1.2l1.6-12.6c0.2-1.5,0.7-2.9,1.5-4.1c0.8-1.2,1.8-2.1,3.1-2.8c1.2-0.7,2.5-1,4-1c1.4,0,2.4,0.3,3,1
-			c0.6,0.7,0.9,1.5,0.7,2.6l-2,16.4c0,0.4,0.1,0.8,0.3,1.1c0.3,0.3,0.6,0.5,1.1,0.5h2.9c0.7,0,1.3-0.5,1.4-1.2l2.1-17.1
-			C380.2,345.1,379.6,343,378,341.4z"/>
-	</g>
-	<g>
-		<path d="M149.6,293.7L149.6,293.7c-13.7-20.3-36.6-32.5-61.3-32.5c-40.5,0-73.5,32.5-73.5,72.3c0,39.9,33,72.4,73.5,72.4
-			s73.5-32.5,73.5-72.4C161.8,319.3,157.6,305.5,149.6,293.7z M145.8,298.1c4.7,7.4,7.9,15.5,9.3,24.1c-8.9,8-25.3,7.7-59.8,7.2
-			l-5.8-0.1c-34-0.5-49.1,5.2-55.8,10.3c0.2-31.5,17.5-34.8,29.2-37c7.2-1.4,10.2-4.4,12.9-7c3.2-3.1,6.2-6.1,17.3-7
-			c12.7-1,19.9,2.5,26.4,5.5c4.2,2,8.1,3.8,12.8,4.3C135.3,298.7,139.9,298.6,145.8,298.1z M88.3,400.4c-37.4,0-67.9-30-67.9-66.8
-			c0-36.8,30.4-66.8,67.9-66.8c21.2,0,40.9,9.7,53.8,26.1c-4,0.2-7.1,0.2-9.2,0c-3.7-0.4-7-1.9-10.9-3.8c-6.7-3.2-15.1-7.2-29.3-6.1
-			c-13.2,1-17.2,5.1-20.8,8.6c-2.5,2.5-4.6,4.5-10,5.5c-12.8,2.4-36.6,7-33.5,50.6c0.1,1.4,1.3,2.6,2.8,2.6c0,0,0,0,0,0
-			c1.5,0,2.7-1.1,2.8-2.6c0-0.1,3.5-13.6,55.5-12.9l5.8,0.1c32.8,0.5,50,0.7,60.7-6.4c0.1,1.6,0.2,3.3,0.2,5
-			C156.2,370.4,125.7,400.4,88.3,400.4z"/>
-		<path d="M85,341.2H64.5c-5.3,0-9.7,4.4-9.7,9.7v6c0,5.3,4.4,9.7,9.7,9.7H85c5.3,0,9.7-4.4,9.7-9.7v-6
-			C94.7,345.6,90.4,341.2,85,341.2z M89.1,356.9c0,2.2-1.8,4.1-4.1,4.1H64.5c-2.2,0-4.1-1.8-4.1-4.1v-6c0-2.2,1.8-4.1,4.1-4.1H85
-			c2.2,0,4.1,1.8,4.1,4.1V356.9z"/>
-		<path d="M128.2,341.2h-20.7c-5.4,0-9.7,4.4-9.7,9.7v5.9c0,5.4,4.4,9.7,9.7,9.7h20.7c5.4,0,9.7-4.4,9.7-9.7V351
-			C137.9,345.6,133.5,341.2,128.2,341.2z M132.3,356.9c0,2.3-1.8,4.1-4.1,4.1h-20.7c-2.3,0-4.1-1.8-4.1-4.1V351
-			c0-2.3,1.8-4.1,4.1-4.1h20.7c2.3,0,4.1,1.8,4.1,4.1V356.9z"/>
-	</g>
-</g>
+
 <g>
 	<g>
 		<path class="st0" d="M166.8,55.3c-0.5-0.5-1.2-0.8-1.9-0.7c-0.1,0-9.7,1.6-19.5,2.6c-0.2,0-0.3,0.1-0.5,0.2
 			c4.8,7.8,8,16.7,9.3,26.1c1.6-2.3,3.3-4.8,3.5-5.2c6.9-13.2,9.4-20.7,9.5-21C167.4,56.6,167.3,55.9,166.8,55.3z"/>
 	</g>
-	<g>
+	<g class="st1">
 		<path d="M207.5,82.1c-2.5-0.9-5.3-1.4-8.5-1.4c-3.5,0-6.6,0.5-9.3,1.5c-2.7,1-5.1,2.4-7,4.1c-1.9,1.7-3.5,3.8-4.7,6
 			c-1.2,2.2-2.1,4.6-2.7,7c-0.6,2.4-0.9,4.9-0.9,7.3c0,3.7,0.7,7,2,9.8c1.3,2.8,3.1,5.1,5.3,6.9c2.2,1.8,4.6,3.1,7.3,3.9
 			c2.6,0.8,5.3,1.3,8,1.3c1.8,0,3.6-0.2,5.2-0.5c1.6-0.3,3-0.8,4.3-1.3c1.3-0.5,2.2-1,3-1.4c0.6-0.3,0.9-1.1,0.6-1.7l-1.9-5.4
@@ -99,9 +44,6 @@
 			c0.5,0.5,0.6,1.3,0.5,2.2l-2,16.7c0,0.4,0.1,0.8,0.3,1.1c0.3,0.3,0.7,0.5,1.1,0.5h5.7c0.7,0,1.3-0.5,1.4-1.2l2.3-18.7
 			C386.1,105.2,385.3,103,383.7,101.3z"/>
 	</g>
-	<g>
-		<circle cx="85.5" cy="94.9" r="70.7"/>
-	</g>
 	<g>
 		<path class="st1" d="M82.2,126.2H61.7c-5,0-9.1-4.1-9.1-9.1v-6c0-5,4.1-9.1,9.1-9.1h20.5c5,0,9.1,4.1,9.1,9.1v6
 			C91.3,122.1,87.2,126.2,82.2,126.2z M61.7,106.5c-2.6,0-4.6,2.1-4.6,4.6v6c0,2.6,2.1,4.6,4.6,4.6h20.5c2.6,0,4.6-2.1,4.6-4.6v-6

src/app/app.component.html

@@ -1,4 +1,6 @@
-<app-hero></app-hero>
-<app-header></app-header>
-<router-outlet></router-outlet>
-<app-footer></app-footer>
+<!-- <app-hero></app-hero> -->
+<div class="wrapper">
+  <app-header></app-header>
+  <app-services></app-services>
+  <app-footer></app-footer>
+</div>

src/app/app.component.scss

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

src/app/app.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 import { HeroComponent } from "./hero/hero.component";
 import { HeaderComponent } from "./header/header.component";
 import { FooterComponent } from "./footer/footer.component";
+import { ServicesComponent } from "./services/services.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeroComponent, HeaderComponent, FooterComponent],
+  imports: [HeroComponent, HeaderComponent, FooterComponent, ServicesComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })

src/app/footer/footer.component.html

@@ -1 +1,11 @@
-<p>footer works!</p>
+<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>

src/app/footer/footer.component.scss

@@ -0,0 +1,7 @@
+:host {
+  color: #696969;
+  font-style: italic;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/app/footer/footer.component.ts

@@ -8,5 +8,5 @@ import { Component } from '@angular/core';
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {
-
+  public currentYear: number = new Date().getUTCFullYear();
 }

src/app/header/header.component.html

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

src/app/header/header.component.scss

@@ -0,0 +1,23 @@
+:host {
+  border-bottom: 1px solid #fff;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+img {
+  max-height: 5rem;
+}
+
+.menu {
+  font-style: italic;
+  display: flex;
+  gap: 3rem;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    align-content: center;
+  }
+}

src/app/hero/hero.component.scss

@@ -2,6 +2,7 @@
   width: 100%;
   height: 75%;
   display: inline-block;
+  background-color: #e94d1a;
 }
 
 .hero-text {
@@ -10,4 +11,6 @@
   position: relative;
   left: calc(30% - 5rem);
   top: 40%;
+  font-weight: bold;
+  color: white;
 }

src/app/services/services.component.html

@@ -0,0 +1,33 @@
+<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>
+  </div>
+  <img src="assets/service-1.svg" />
+</div>
+<div class="right">
+  <div class="text">
+      <h2>Collaboration is at the heart of my work.</h2>
+      <p>I strive to understand not only the technical requirements but also the goals and
+        challenges unique to each project. By working closely with my clients, I ensure
+        that each solution is designed with both practicality and creativity in mind. No
+        matter the scope or complexity, I’m committed to providing efficient, reliable
+        solutions that help you innovate, save time, and stay ahead. Let's work together
+        to make your next project a success!</p>
+  </div>
+  <img src="assets/service-2.svg" />
+</div>
+<div class="full">
+  <div class="text">
+    <h2>For all projects involving prototyping, coding or automation</h2>
+    <p>With a background in IT, engineering, and automation, I offer a versatile skill set to
+      tackle projects across different industries. From streamlining factory processes to
+      designing smart home systems and creating user-friendly software solutions, I tailor
+      my work to meet the specific needs of each client. My technical expertise spans
+      from prototyping to coding and complex automation, allowing me to support
+      projects from the concept phase right through to completion. I believe that the
+      right technology can enhance productivity and improve daily workflows, whether in
+      a corporate environment or your own home.</p>
+  </div>
+  <img src="assets/service-3.svg" />
+</div>

src/app/services/services.component.scss

@@ -0,0 +1,36 @@
+:host {
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+h2 {
+  font-weight: 500;
+  font-style: italic;
+}
+
+.left, .right {
+  display: flex;
+  justify-content: center;
+
+  .text {
+    max-width: 50%;
+  }
+
+  img {
+    max-width: 50%;
+  }
+}
+
+.right {
+  flex-direction: row-reverse;
+  text-align: end;
+}
+
+.full {
+  img {
+    max-width: 100%;
+    margin-top: 2rem;
+  }
+}

src/app/services/services.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+  let component: ServicesComponent;
+  let fixture: ComponentFixture<ServicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ServicesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/services/services.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-services',
+  standalone: true,
+  imports: [],
+  templateUrl: './services.component.html',
+  styleUrl: './services.component.scss'
+})
+export class ServicesComponent {
+
+}

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,6 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 body {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   margin: 0;
 }
+
+body {
+  font-family: "Inter", sans-serif;
+  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%);
+}
+
+html {
+  background-color: #000000;
+}