arne-accesibility (#7)

Reviewed-on: #7

.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 *'

package.json

@@ -7,7 +7,8 @@
     "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"
+    "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": {

src/app/app.component.scss

@@ -9,6 +9,6 @@
 
 @media screen and (max-width: variables.$breakpoint) {
   .wrapper {
-    padding: 0 2rem;
+    padding: 0 3rem;
   }
 }

src/app/footer/footer.component.scss

@@ -1,15 +1,17 @@
 @use "../../variables.scss" as variables;
 
 :host {
+  font-weight: 400;
   color: #ffffff;
-  font-style: italic;
   padding-bottom: 5rem;
   position: relative;
-  top: 5rem;
+  top: 2rem;
 }
 
 h2 {
   font-family: "Jost";
+  font-style: italic;
+  font-weight: 500;
 }
 
 .contact {

src/app/header/header.component.html

@@ -1,4 +1,4 @@
-<img src="assets/CPTARN_logo-name_White.svg" />
+<img alt="logo" src="assets/CPTARN_logo-name_White.svg" />
 <div class="menu">
   <a href="#about">about</a>
   <a href="#contact">contact</a>

src/app/header/header.component.scss

@@ -1,7 +1,7 @@
 @use "../../variables.scss";
 
 :host {
-  border-bottom: 1px solid #fff;
+  border-bottom: 2px solid #fff;
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -22,6 +22,7 @@ img {
     text-decoration: none;
     align-content: center;
     font-family: "Jost";
+    font-size: 2rem;
   }
 }
 
@@ -32,7 +33,7 @@ img {
   }
 
   :host {
-    border-top: 1px solid #fff;
+    border-top: 2px solid #fff;
   }
 
   .menu {

src/app/hero/hero.component.html

@@ -1,2 +1,4 @@
-<img class="mobile" src="assets/CPTARN_logo-figure_White.svg"/>
+<div class="mobile">
+  <img alt="logo" src="assets/CPTARN_logo-figure_White.svg"/>
+</div>
 <p class="hero-text">NO LIMITS, JUST <span class="subSlogan">{{subSlogan}}</span></p>

src/app/hero/hero.component.scss

@@ -34,9 +34,17 @@
     font-weight: 600;
   }
 
+  div {
+    display: flex;
+    width: 100%;
+    border-bottom: 2px solid #fff;
+    padding: 1rem 0;
+    justify-content: center;
+  }
+
   img {
-    max-width: 100%;
-    border-bottom: 1px solid #fff;
+    max-width: 50%;
+    margin: 0 auto;
     padding: 1rem 0;
   }
 }

src/app/services/services.component.html

@@ -4,7 +4,7 @@
     <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 src="assets/Website_Arne.svg" />
+  <img class="arne" alt="Drawing of Arne" src="assets/Website_Arne.svg" />
   <a href="mailto:contact@cptarn.com" class="mobile">Contact</a>
 </div>
 <div class="right">
@@ -17,7 +17,7 @@
         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" />
+  <img src="assets/Website_Topview_Collab.svg" alt="Drawing of collaboration" />
 </div>
 <div class="full">
   <div class="text">
@@ -31,5 +31,5 @@
       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" />
+  <img src="assets/Website_Desk.svg" alt="Drawing of a desk"/>
 </div>

src/app/services/services.component.scss

@@ -55,7 +55,7 @@ h2 {
 a {
   color: #fff;
   text-decoration: none;
-  background-color: var(--accent-color);
+  background-color: rgb(207, 66, 22);// var(--accent-color) not enough contrast
   border-radius: 4rem;
   padding: 0.5rem 1rem;
   margin-top: 2rem;
@@ -79,6 +79,11 @@ a {
       max-width: 100%;
     }
 
+    .arne {
+      max-width: 70%;
+      margin: 0 auto;
+    }
+
     img {
       margin-top: 2rem;
     }
@@ -89,7 +94,7 @@ a {
   }
   :host {
     > div {
-      margin-top: 3rem;
+      margin-top: 0;
     }
   }
 

src/index.html

@@ -5,6 +5,7 @@
   <title>CptArn</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="CptArn Freelance 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).">
   <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>