New Website (#6)

Reviewed-on: #6
2025-02-03 20:23:28 +01:00
parent 62598bb63e
commit e14714ff39
59 changed files with 16328 additions and 69 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.gitea/workflows/deploy-dev.yaml
+++ b/.gitea/workflows/deploy-dev.yaml
@@ -17,6 +17,14 @@ jobs:
          apt-get update
          apt-get install -y smbclient

+      - name: install dependencies
+        run: |
+          npm ci
+
+      - name: build application
+        run: |
+          npm run dev:deploy
+
      - name: Copy
        run: |
-          smbclient //192.168.129.245/arne/letsencrypt/config/www/dev -U "${{ secrets.SAMBA_USER }}" "${{ secrets.SAMBA_PASSWORD }}" -c "lcd \".\"; recurse; mput *"
+          smbclient //192.168.129.245/arne -U "${{ secrets.SAMBA_USER }}" "${{ secrets.SAMBA_PASSWORD }}" -c 'prompt OFF; recurse ON; cd letsencrypt/config/www/cptarn/dev/; lcd dist/cpt-arn/browser/; mput *'
--- a/.gitea/workflows/deploy.yaml
+++ b/.gitea/workflows/deploy.yaml
@@ -17,7 +17,14 @@ jobs:
          apt-get update
          apt-get install -y smbclient

+      - name: install dependencies
+        run: |
+          npm ci
+
+      - name: build application
+        run: |
+          npm run prod:deploy
+
      - name: Copy
        run: |
-          smbclient //192.168.129.245/arne -U "${{ secrets.SAMBA_USER }}" "${{ secrets.SAMBA_PASSWORD }}" -c "cd \"letsencrypt/config/www\"; lcd \".\"; prompt; recurse; mput *"
-
+          smbclient //192.168.129.245/arne -U "${{ secrets.SAMBA_USER }}" "${{ secrets.SAMBA_PASSWORD }}" -c 'prompt OFF; recurse ON; cd letsencrypt/config/www/cptarn/; lcd dist/cpt-arn/browser/; mput *'
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -1,3 +1,27 @@
-# CptArn-Website
+# CptArn

-Website for cptarn.com
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.4.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
--- a/angular.json
+++ b/angular.json
@@ -0,0 +1,102 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "CptArn": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:application",
+          "options": {
+            "outputPath": "dist/cpt-arn",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "CptArn:build:production"
+            },
+            "development": {
+              "buildTarget": "CptArn:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}
--- a/index.html
+++ b/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,11 @@
        <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 +80,4 @@
 <script>
    document.getElementById("footer-text").innerHTML = 'CptArn - ' + (new Date()).getFullYear();
 </script>
-</html>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "cpt-arn",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "dev:deploy": "ng build --configuration=production --base-href /dev/ --deploy-url /dev/ && npx gzipper compress ./dist",
+    "prod:deploy": "ng build --configuration=production --base-href / --deploy-url / && npx gzipper compress ./dist"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^18.1.0",
+    "@angular/common": "^18.1.0",
+    "@angular/compiler": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/forms": "^18.1.0",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/platform-browser-dynamic": "^18.1.0",
+    "@angular/router": "^18.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^18.1.4",
+    "@angular/cli": "^18.1.4",
+    "@angular/compiler-cli": "^18.1.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "gzipper": "^7.2.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.5.2"
+  }
+}
--- a/public/assets/CPTARN_logo-figure_White.svg
+++ b/public/assets/CPTARN_logo-figure_White.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 529.14 305.26">
+  <defs>
+    <style>
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-2" d="M213.92,271.49h-59.1c-14.55,0-26.39-11.84-26.39-26.39v-17.35c0-14.55,11.84-26.39,26.39-26.39h59.1c14.55,0,26.39,11.84,26.39,26.39v17.35c0,14.55-11.84,26.39-26.39,26.39ZM154.82,214.37c-7.38,0-13.38,6-13.38,13.38v17.35c0,7.38,6,13.38,13.38,13.38h59.1c7.38,0,13.38-6,13.38-13.38v-17.35c0-7.38-6-13.38-13.38-13.38h-59.1Z"/>
+  <path class="cls-2" d="M338.61,271.49h-59.91c-14.61,0-26.49-11.89-26.49-26.49v-17.14c0-14.61,11.89-26.49,26.49-26.49h59.91c14.61,0,26.49,11.89,26.49,26.49v17.14c0,14.61-11.89,26.49-26.49,26.49ZM278.7,214.37c-7.43,0-13.49,6.05-13.49,13.49v17.14c0,7.43,6.05,13.49,13.49,13.49h59.91c7.43,0,13.49-6.05,13.49-13.49v-17.14c0-7.43-6.05-13.49-13.49-13.49h-59.91Z"/>
+  <path class="cls-2" d="M58.38,228.43c-.09,0-.18,0-.27,0-3.31-.15-5.99-2.62-6.22-5.92-8.09-116.77,45-136.98,95.4-146.76,16.3-3.16,22.56-9.42,29.82-16.66,10.21-10.19,21.77-21.74,59.17-24.76,40.5-3.26,64.44,8.31,83.69,17.61,11.25,5.44,20.97,10.14,32.02,11.19,31.36,3.02,117.68-10.76,118.55-10.9,2.23-.36,4.49.47,5.97,2.19s1.95,4.08,1.26,6.23c-.37,1.14-9.24,28.35-34.9,76.06-26.45,49.18-73.54,48.52-199.38,46.7l-16.79-.24c-153.58-2.2-161.79,39.22-161.86,39.64-.5,3.18-3.26,5.62-6.45,5.62ZM250.03,46.78c-4.02,0-8.25.17-12.71.53-32.63,2.64-41.56,11.55-51.02,20.99-8.03,8.02-16.33,16.31-36.54,20.23-34.76,6.74-86.21,16.72-85.66,113.4,17.47-15.17,59.88-33.06,162.77-31.76l16.8.24c120.11,1.71,165.03,2.36,187.74-39.86,16.13-30,25.55-51.92,30.22-63.78-24.77,3.68-84.5,11.85-110.89,9.33-13.37-1.29-24.58-6.7-36.44-12.43-16.5-7.98-34.93-16.88-64.28-16.88Z"/>
+</svg>
--- a/public/assets/CPTARN_logo-name_White.svg
+++ b/public/assets/CPTARN_logo-name_White.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1235.74 581.51">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f15a29;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M512.51,172.65c-1.33-1.55-8.08-.26-10.07.08-.28.04-28.06,4.49-56.36,7.48-.5.05-.94.27-1.39.44,13.78,22.56,23.09,48.13,26.82,75.47,4.67-6.53,9.56-13.96,10.13-15.05,19.97-38.22,28.31-57.23,28.6-58.13.63-1.95,3.59-8.75,2.26-10.29Z"/>
+  <path class="cls-2" d="M263.31,379.47h-59.1c-14.55,0-26.39-11.84-26.39-26.39v-17.35c0-14.55,11.84-26.39,26.39-26.39h59.1c14.55,0,26.39,11.84,26.39,26.39v17.35c0,14.55-11.84,26.39-26.39,26.39ZM204.22,322.35c-7.38,0-13.38,6-13.38,13.38v17.35c0,7.38,6,13.38,13.38,13.38h59.1c7.38,0,13.38-6,13.38-13.38v-17.35c0-7.38-6-13.38-13.38-13.38h-59.1Z"/>
+  <path class="cls-2" d="M388.01,379.47h-59.91c-14.61,0-26.49-11.89-26.49-26.49v-17.14c0-14.61,11.89-26.49,26.49-26.49h59.91c14.61,0,26.49,11.89,26.49,26.49v17.14c0,14.61-11.89,26.49-26.49,26.49ZM328.09,322.35c-7.43,0-13.49,6.05-13.49,13.49v17.14c0,7.43,6.05,13.49,13.49,13.49h59.91c7.43,0,13.49-6.05,13.49-13.49v-17.14c0-7.43-6.05-13.49-13.49-13.49h-59.91Z"/>
+  <path class="cls-2" d="M107.78,336.42c-.09,0-.18,0-.27,0-3.31-.15-5.99-2.62-6.22-5.92-8.09-116.77,45-136.98,95.4-146.76,16.3-3.16,22.56-9.42,29.82-16.66,10.21-10.19,21.77-21.74,59.17-24.76,40.5-3.26,64.44,8.31,83.69,17.61,11.25,5.44,20.97,10.14,32.02,11.19,31.36,3.02,117.68-10.76,118.55-10.9,2.23-.36,4.49.47,5.97,2.19s1.95,4.08,1.26,6.23c-.37,1.14-9.24,28.35-34.9,76.06-26.45,49.18-73.54,48.52-199.38,46.7l-16.79-.24c-153.58-2.2-161.79,39.22-161.86,39.64-.5,3.18-3.26,5.62-6.45,5.62ZM299.42,154.76c-4.02,0-8.25.17-12.71.53-32.63,2.64-41.56,11.55-51.02,20.99-8.03,8.02-16.33,16.31-36.54,20.23-34.76,6.74-86.21,16.72-85.66,113.4,17.47-15.17,59.88-33.06,162.77-31.76l16.8.24c120.11,1.71,165.03,2.36,187.74-39.86,16.13-30,25.55-51.92,30.22-63.78-24.77,3.68-84.5,11.85-110.89,9.33-13.37-1.29-24.58-6.7-36.44-12.43-16.5-7.98-34.93-16.88-64.28-16.88Z"/>
+  <g>
+    <path class="cls-2" d="M632.39,239.31c-6.43-2.56-14.11-3.8-22.79-3.66-9.72,0-19,1.88-27.57,5.58-8.51,3.68-16.27,8.75-23.05,15.07-6.77,6.32-12.46,13.77-16.9,22.14-4.45,8.39-7.42,17.47-8.84,27.02-1.29,9.04-1.06,17.86.69,26.22,1.76,8.41,5,16.01,9.64,22.6,4.67,6.65,10.77,11.98,18.13,15.85,7.36,3.88,15.94,5.85,25.48,5.85s17.48-1.35,24.71-4.02c7.17-2.65,14.01-6.41,20.34-11.19.52-.39.87-.98.96-1.62l2.07-13.76c.16-1.04-.36-2.07-1.28-2.57-.93-.5-2.07-.37-2.85.33-5.7,5.09-12.18,9.29-19.25,12.5-6.98,3.16-14.93,4.7-23.75,4.58-7.08,0-13.37-1.48-18.68-4.4-5.33-2.93-9.73-6.97-13.07-12.01-3.38-5.1-5.73-10.95-6.98-17.38-1.26-6.47-1.35-13.28-.27-20.24,1.2-7.59,3.62-14.78,7.18-21.35,3.56-6.59,8.07-12.5,13.38-17.57,5.29-5.05,11.29-9.04,17.83-11.86,6.51-2.8,13.56-4.23,21.01-4.23,7.71-.11,14.72,1.29,20.74,4.18,6,2.88,11.07,7.15,15.08,12.69.59.82,1.61,1.2,2.6.97.98-.23,1.73-1.03,1.89-2.03l2.26-13.76c.13-.82-.14-1.65-.74-2.22-5.49-5.22-11.53-9.17-17.95-11.73Z"/>
+    <path class="cls-2" d="M744.59,287.53c-5.83-4.54-13.13-6.84-21.7-6.84-6.28,0-12.11,1.36-17.35,4.05-4.94,2.53-9.33,5.93-13.05,10.09l1.58-9.33c.12-.73-.08-1.47-.56-2.03-.47-.56-1.17-.89-1.91-.89h-9.42c-1.22,0-2.25.87-2.46,2.07l-22.24,128.17c-.13.73.08,1.49.57,2.05.48.55,1.17.87,1.9.87.02,0,.03,0,.05,0l9.99-.19c1.2-.02,2.22-.9,2.42-2.08l9.12-53.84c.11.22.22.44.33.65,2.45,4.77,5.91,8.64,10.28,11.5,4.42,2.9,9.82,4.37,16.07,4.37,8.46,0,16.4-2.15,23.6-6.38,7.15-4.2,13.19-9.97,17.97-17.17,4.78-7.19,7.79-15.22,8.97-23.84,1.18-8.39.57-16.28-1.8-23.47-2.41-7.29-6.56-13.27-12.34-17.78ZM709.16,297.61c3.73-1.78,7.64-2.68,11.65-2.68,5.79,0,10.59,1.5,14.27,4.44,3.73,3,6.41,7.03,7.94,11.99h0c1.57,5.07,1.89,10.68.95,16.74-.82,6.23-3.03,11.99-6.55,17.1-3.54,5.14-7.94,9.26-13.06,12.27-5.04,2.95-10.59,4.39-16.48,4.28-3.92-.11-7.34-1.06-10.15-2.82-2.85-1.79-5.24-4.27-7.1-7.37-1.9-3.17-3.19-6.74-3.82-10.62-.63-3.84-.67-7.82-.14-11.8l.29-1.74c.77-3.97,2.12-7.78,4.01-11.36,2.15-4.05,4.8-7.73,7.88-10.93,3.04-3.16,6.51-5.68,10.3-7.49Z"/>
+    <path class="cls-2" d="M822.41,294.77l1.7-9.24c.13-.73-.06-1.48-.54-2.05s-1.18-.9-1.92-.9h-11.1l4.7-27.23c.12-.73-.08-1.47-.55-2.04-.47-.56-1.17-.89-1.91-.89h-9.8c-1.22,0-2.26.88-2.46,2.08l-4.75,28.08h-11.25c-1.21,0-2.24.86-2.46,2.05l-1.7,9.24c-.13.73.06,1.48.54,2.05s1.18.9,1.92.9h10.54l-12.62,74.55c-.12.73.08,1.47.56,2.03.47.56,1.17.89,1.91.89h9.42c1.22,0,2.26-.88,2.46-2.07l13.01-75.39h11.86c1.21,0,2.24-.86,2.46-2.05Z"/>
+    <path class="cls-2" d="M903.81,233.98c-.24-.99-1.06-1.74-2.07-1.89-1-.15-2.01.33-2.52,1.21l-80.29,137.22c-.45.77-.46,1.73-.01,2.51.45.78,1.27,1.26,2.17,1.26h11.69c.9,0,1.72-.48,2.17-1.26l24.62-43.04h51.54l9.71,42.35c.26,1.14,1.27,1.94,2.44,1.94h11.12c.77,0,1.49-.35,1.96-.95.47-.6.65-1.39.47-2.13l-32.99-137.22ZM896.59,265.51l11.3,49.68h-39.67l28.37-49.68Z"/>
+    <path class="cls-2" d="M1014.23,282.31c-2.5-1.07-5.27-1.62-8.18-1.62h0c-5.88-.12-11.2,1.81-15.75,5.8-.43.37-.84.76-1.26,1.15l.37-2.14c.13-.73-.07-1.47-.55-2.04-.47-.56-1.17-.89-1.91-.89h-9.8c-1.22,0-2.25.87-2.46,2.07l-15.08,86.7c-.13.73.07,1.47.55,2.04.47.56,1.17.89,1.91.89h9.8c1.22,0,2.25-.87,2.46-2.07l9.71-55.83c.79-3.09,1.81-6.15,3.05-9.13,1.54-3.72,3.67-6.81,6.33-9.18,2.48-2.22,5.54-3.23,9.36-3.13,1.63,0,3.12.3,4.42.9,1.47.68,2.9,1.54,4.26,2.56,1.06.79,2.55.63,3.4-.38l6.6-7.73c.89-1.04.78-2.6-.26-3.5-2.2-1.92-4.54-3.43-6.97-4.47Z"/>
+    <path class="cls-2" d="M1108.11,298.58c-1.38-5.25-4.03-9.58-7.86-12.86-3.91-3.34-9.31-5.03-16.04-5.03-7.15,0-13.5,1.89-18.86,5.63-2.28,1.59-4.38,3.42-6.29,5.48l1.04-6.32c.12-.72-.09-1.46-.56-2.02-.48-.56-1.17-.88-1.91-.88h-9.8c-1.22,0-2.25.87-2.46,2.07l-15.08,86.7c-.13.73.07,1.47.55,2.04.47.56,1.17.89,1.91.89h9.8c1.21,0,2.25-.87,2.46-2.06l9.62-53.96c.69-4.37,2.29-8.36,4.76-11.86,2.47-3.5,5.64-6.32,9.43-8.39,3.76-2.05,7.92-3.09,12.37-3.09,3.98,0,6.96.89,8.86,2.64,2,1.85,3.27,4.24,3.86,7.31.63,3.29.72,6.91.26,10.76l-9.6,55.73c-.12.73.08,1.47.55,2.04.48.56,1.17.89,1.91.89h9.42c1.21,0,2.25-.87,2.46-2.07l9.99-56.92s.01-.07.02-.1c.79-5.95.52-11.54-.81-16.61Z"/>
+  </g>
+</svg>
--- a/public/assets/CptArn_black.jpg
+++ b/public/assets/CptArn_black.jpg
--- a/public/assets/CptArn_black.pdf
+++ b/public/assets/CptArn_black.pdf
--- a/public/assets/CptArn_black.png
+++ b/public/assets/CptArn_black.png
--- a/public/assets/CptArn_inverted.jpg
+++ b/public/assets/CptArn_inverted.jpg
--- a/public/assets/CptArn_inverted.pdf
+++ b/public/assets/CptArn_inverted.pdf
--- a/public/assets/CptArn_inverted.png
+++ b/public/assets/CptArn_inverted.png
--- a/public/assets/CptArn_inverted_400x200.svg
+++ b/public/assets/CptArn_inverted_400x200.svg
--- a/public/assets/Website_Arne.svg
+++ b/public/assets/Website_Arne.svg
--- a/public/assets/Website_Desk.svg
+++ b/public/assets/Website_Desk.svg
--- a/public/assets/Website_Topview_Collab.svg
+++ b/public/assets/Website_Topview_Collab.svg
--- a/public/assets/service-1.svg
+++ b/public/assets/service-1.svg
--- a/public/assets/service-2.svg
+++ b/public/assets/service-2.svg
--- a/public/assets/service-3.svg
+++ b/public/assets/service-3.svg
--- a/public/assets/white-header-logo.svg
+++ b/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
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/sinia2/Sinia
+++ b/sinia2/Sinia
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -0,0 +1,6 @@
+<div class="wrapper">
+  <app-hero></app-hero>
+  <app-header></app-header>
+  <app-services id="about"></app-services>
+  <app-footer id="contact"></app-footer>
+</div>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -0,0 +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 3rem;
+  }
+}
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'CptArn' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('CptArn');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, CptArn');
+  });
+});
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+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: [HeroComponent, HeaderComponent, FooterComponent, ServicesComponent],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss'
+})
+export class AppComponent {
+  title = 'CptArn';
+}
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -0,0 +1,8 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+};
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+];
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -0,0 +1,15 @@
+<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="https://cptarn.com/">cptarn.com</a>
+    <p>BE 0800 396 191</p>
+  </div>
+</div>
+
+<span class="copyright">2023 - {{currentYear}} copyright CptArn BV</span>
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -0,0 +1,57 @@
+@use "../../variables.scss" as variables;
+
+:host {
+  font-weight: 400;
+  color: #ffffff;
+  padding-bottom: 5rem;
+  position: relative;
+  top: 2rem;
+}
+
+h2 {
+  font-family: "Jost";
+  font-style: italic;
+  font-weight: 500;
+}
+
+.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;;
+}
+
+@media screen and (max-width: variables.$breakpoint) {
+  .contact {
+    flex-direction: column;
+    gap: 2rem;
+    align-items: start;
+  }
+
+  .copyright {
+    margin-top: 5rem;
+  }
+}
--- a/src/app/footer/footer.component.spec.ts
+++ b/src/app/footer/footer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/footer/footer.component.ts
+++ b/src/app/footer/footer.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+  public currentYear: number = new Date().getUTCFullYear();
+}
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -0,0 +1,5 @@
+<img src="assets/CPTARN_logo-name_White.svg" />
+<div class="menu">
+  <a href="#about">about</a>
+  <a href="#contact">contact</a>
+</div>
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -0,0 +1,44 @@
+@use "../../variables.scss";
+
+:host {
+  border-bottom: 2px 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;
+    font-family: "Jost";
+    font-size: 2rem;
+  }
+}
+
+
+@media screen and (max-width: variables.$breakpoint) {
+  img {
+    display: none;
+  }
+
+  :host {
+    border-top: 2px solid #fff;
+  }
+
+  .menu {
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 1rem;
+  }
+}
--- a/src/app/header/header.component.spec.ts
+++ b/src/app/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss'
+})
+export class HeaderComponent {
+
+}
--- a/src/app/hero/hero.component.html
+++ b/src/app/hero/hero.component.html
@@ -0,0 +1,4 @@
+<div class="mobile">
+  <img src="assets/CPTARN_logo-figure_White.svg"/>
+</div>
+<p class="hero-text">NO LIMITS, JUST <span class="subSlogan">{{subSlogan}}</span></p>
--- a/src/app/hero/hero.component.scss
+++ b/src/app/hero/hero.component.scss
@@ -0,0 +1,50 @@
+@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: 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;
+  }
+
+  div {
+    display: flex;
+    width: 100%;
+    border-bottom: 2px solid #fff;
+    padding: 1rem 0;
+    justify-content: center;
+  }
+
+  img {
+    max-width: 50%;
+    margin: 0 auto;
+    padding: 1rem 0;
+  }
+}
--- a/src/app/hero/hero.component.spec.ts
+++ b/src/app/hero/hero.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroComponent } from './hero.component';
+
+describe('HeroComponent', () => {
+  let component: HeroComponent;
+  let fixture: ComponentFixture<HeroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeroComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/hero/hero.component.ts
+++ b/src/app/hero/hero.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [],
+  templateUrl: './hero.component.html',
+  styleUrl: './hero.component.scss'
+})
+export class HeroComponent {
+ public subSlogan: string = 'results';
+ public slogans: string[] = [
+  'deliverables',
+  'performance',
+  'results',
+  'efficiency',
+  'achievements',
+  'optimizations',
+  'success',
+ ]
+
+ constructor() {}
+
+}
--- a/src/app/services/services.component.html
+++ b/src/app/services/services.component.html
@@ -0,0 +1,35 @@
+<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 impactful.</p>
+    <a href="mailto:contact@cptarn.com" class="web">Contact</a>
+  </div>
+  <img class="arne" src="assets/Website_Arne.svg" />
+  <a href="mailto:contact@cptarn.com" class="mobile">Contact</a>
+</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/Website_Topview_Collab.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/Website_Desk.svg" />
+</div>
--- a/src/app/services/services.component.scss
+++ b/src/app/services/services.component.scss
@@ -0,0 +1,105 @@
+@use "../../variables.scss" as variables;
+
+$margin: 8rem;
+
+:host {
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  > div {
+    margin-top: $margin;
+  }
+}
+
+h2 {
+  font-weight: 500;
+  font-style: italic;
+  font-family: "Jost";
+}
+
+.left, .right {
+  display: flex;
+  justify-content: center;
+  gap: 5%;
+
+  &:first-child {
+    margin-bottom: -8rem;
+    img {
+      position: relative;
+      top: -7rem;
+    }
+  }
+
+  .text {
+    max-width: 50%;
+  }
+
+  img {
+    max-width: 50%;
+  }
+}
+
+.right {
+  flex-direction: row-reverse;
+  text-align: end;
+}
+
+.full {
+  img {
+    max-width: 100%;
+    margin-top: 2rem;
+  }
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+  background-color: var(--accent-color);
+  border-radius: 4rem;
+  padding: 0.5rem 1rem;
+  margin-top: 2rem;
+  position: relative;
+  top: 1rem;
+  text-transform: uppercase;
+  width: fit-content;
+}
+
+@media screen and (max-width: variables.$breakpoint) {
+  .left, .right {
+    flex-direction: column;
+    &:first-child {
+      margin-bottom: 3rem;
+      img {
+        position: relative;
+        top: 0rem;
+      }
+      }
+    .text, img {
+      max-width: 100%;
+    }
+
+    .arne {
+      max-width: 70%;
+      margin: 0 auto;
+    }
+
+    img {
+      margin-top: 2rem;
+    }
+  }
+
+  .right {
+    text-align: start;
+  }
+  :host {
+    > div {
+      margin-top: 0;
+    }
+  }
+
+  .mobile {
+    margin: 0 auto;
+    font-size: 1.4rem;
+  }
+}
--- a/src/app/services/services.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/services/services.component.ts
+++ b/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 {
+
+}
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CptArn</title>
+  <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=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <script data-goatcounter="https://cptarn.goatcounter.com/count"
+  async src="//gc.zgo.at/count.js"></script>
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -0,0 +1,41 @@
+@use "./variables.scss" as variables;
+
+/* You can add global styles to this file, and also import other style files */
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: "Figtree", serif;
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
+  background: linear-gradient(180deg, #E94E1B 0%, #E94E1B 10%, #2B2B2B 45%, #2B2B2B 63.56%, #000000 90%, #000000 100%);
+
+  --accent-color: #E94E1B;
+}
+
+html {
+  background-color: #000000;
+}
+
+.mobile {
+  display: none;
+}
+
+.web {
+  display: inherit;
+}
+
+@media screen and (max-width: variables.$breakpoint) {
+  .web {
+    display: none;
+  }
+
+  .mobile {
+    display: inherit;
+  }
+}
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -0,0 +1 @@
+$breakpoint: 820px;
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,32 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}