New Website (#6)

Reviewed-on: #6

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>

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;
+  }
+}

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');
+  });
+});

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';
+}

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)]
+};

src/app/app.routes.ts

@@ -0,0 +1,4 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+];

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>

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;
+  }
+}

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();
+  });
+});

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();
+}

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>

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;
+  }
+}

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();
+  });
+});

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 {
+
+}

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>

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;
+  }
+}

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();
+  });
+});

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() {}
+
+}

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>

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;
+  }
+}

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

@@ -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>

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));

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;
+  }
+}

src/variables.scss

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