diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ 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 diff --git a/.gitea/workflows/deploy-dev.yaml b/.gitea/workflows/deploy-dev.yaml index a2ed4f6..ccb6a5e 100644 --- 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 *" \ No newline at end of file + 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 *' diff --git a/.gitea/workflows/deploy.yaml b/.gitea/workflows/deploy.yaml index 51eb3b7..d6ea20a 100644 --- 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 *' diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cc7b141 --- /dev/null +++ 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 diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..77b3745 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,4 @@ +{ + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 + "recommendations": ["angular.ng-template"] +} diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..925af83 --- /dev/null +++ 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" + } + ] +} diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..a298b5b --- /dev/null +++ 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" + } + } + } + } + ] +} diff --git a/README.md b/README.md index 30da614..e760693 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,27 @@ -# CptArn-Website +# CptArn -Website for cptarn.com \ No newline at end of file +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. diff --git a/angular.json b/angular.json new file mode 100644 index 0000000..2312e4f --- /dev/null +++ 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": [] + } + } + } + } + } +} diff --git a/index.html b/index.html index 0c1d4f7..f8f2efc 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,8 @@ + CptArn + + + + + diff --git a/public/assets/CPTARN_logo-name_White.svg b/public/assets/CPTARN_logo-name_White.svg new file mode 100755 index 0000000..917389e --- /dev/null +++ b/public/assets/CPTARN_logo-name_White.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/CptArn_black.jpg b/public/assets/CptArn_black.jpg similarity index 100% rename from assets/CptArn_black.jpg rename to public/assets/CptArn_black.jpg diff --git a/assets/CptArn_black.pdf b/public/assets/CptArn_black.pdf similarity index 100% rename from assets/CptArn_black.pdf rename to public/assets/CptArn_black.pdf diff --git a/assets/CptArn_black.png b/public/assets/CptArn_black.png similarity index 100% rename from assets/CptArn_black.png rename to public/assets/CptArn_black.png diff --git a/assets/CptArn_inverted.jpg b/public/assets/CptArn_inverted.jpg similarity index 100% rename from assets/CptArn_inverted.jpg rename to public/assets/CptArn_inverted.jpg diff --git a/assets/CptArn_inverted.pdf b/public/assets/CptArn_inverted.pdf similarity index 100% rename from assets/CptArn_inverted.pdf rename to public/assets/CptArn_inverted.pdf diff --git a/assets/CptArn_inverted.png b/public/assets/CptArn_inverted.png similarity index 100% rename from assets/CptArn_inverted.png rename to public/assets/CptArn_inverted.png diff --git a/assets/CptArn_inverted_400x200.svg b/public/assets/CptArn_inverted_400x200.svg similarity index 100% rename from assets/CptArn_inverted_400x200.svg rename to public/assets/CptArn_inverted_400x200.svg diff --git a/public/assets/Website_Arne.svg b/public/assets/Website_Arne.svg new file mode 100755 index 0000000..9ecd16e --- /dev/null +++ b/public/assets/Website_Arne.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/Website_Desk.svg b/public/assets/Website_Desk.svg new file mode 100755 index 0000000..83d7cb0 --- /dev/null +++ b/public/assets/Website_Desk.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/Website_Topview_Collab.svg b/public/assets/Website_Topview_Collab.svg new file mode 100755 index 0000000..b28b87a --- /dev/null +++ b/public/assets/Website_Topview_Collab.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/service-1.svg b/public/assets/service-1.svg new file mode 100644 index 0000000..d831560 --- /dev/null +++ b/public/assets/service-1.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/service-2.svg b/public/assets/service-2.svg new file mode 100644 index 0000000..d197a03 --- /dev/null +++ b/public/assets/service-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/service-3.svg b/public/assets/service-3.svg new file mode 100644 index 0000000..868792e --- /dev/null +++ b/public/assets/service-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/CptArn_black_400x200.svg b/public/assets/white-header-logo.svg similarity index 50% rename from assets/CptArn_black_400x200.svg rename to public/assets/white-header-logo.svg index 2f4159a..aa61f4f 100644 --- a/assets/CptArn_black_400x200.svg +++ b/public/assets/white-header-logo.svg @@ -6,68 +6,13 @@ .st0{fill:#E94E1B;} .st1{fill:#FFFFFF;} - - - - - - - - - - - - - - - - - - + - + - - - + + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss new file mode 100644 index 0000000..b9525d1 --- /dev/null +++ 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; + } +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts new file mode 100644 index 0000000..40bc901 --- /dev/null +++ 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'); + }); +}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts new file mode 100644 index 0000000..ab6511b --- /dev/null +++ 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'; +} diff --git a/src/app/app.config.ts b/src/app/app.config.ts new file mode 100644 index 0000000..a1e7d6f --- /dev/null +++ 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)] +}; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts new file mode 100644 index 0000000..77a6385 --- /dev/null +++ b/src/app/app.routes.ts @@ -0,0 +1,4 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = [ +]; diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html new file mode 100644 index 0000000..cd1155d --- /dev/null +++ b/src/app/footer/footer.component.html @@ -0,0 +1,15 @@ +
+
+

Contact me

+

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!

+
+ +
+

Arne Vlaeminck

+ arne@cptarn.com + cptarn.com +

BE 0800 396 191

+
+
+ +2023 - {{currentYear}} copyright CptArn BV diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss new file mode 100644 index 0000000..f529b95 --- /dev/null +++ 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; + } +} diff --git a/src/app/footer/footer.component.spec.ts b/src/app/footer/footer.component.spec.ts new file mode 100644 index 0000000..3f93915 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FooterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts new file mode 100644 index 0000000..f585b05 --- /dev/null +++ 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(); +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html new file mode 100644 index 0000000..54facda --- /dev/null +++ b/src/app/header/header.component.html @@ -0,0 +1,5 @@ + +
+ about + contact +
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss new file mode 100644 index 0000000..8d87254 --- /dev/null +++ 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; + } +} diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts new file mode 100644 index 0000000..204ed6e --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeaderComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts new file mode 100644 index 0000000..c780cb4 --- /dev/null +++ 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 { + +} diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html new file mode 100644 index 0000000..92831cf --- /dev/null +++ b/src/app/hero/hero.component.html @@ -0,0 +1,4 @@ +
+ +
+

NO LIMITS, JUST {{subSlogan}}

diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss new file mode 100644 index 0000000..bb8765f --- /dev/null +++ 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; + } +} diff --git a/src/app/hero/hero.component.spec.ts b/src/app/hero/hero.component.spec.ts new file mode 100644 index 0000000..e18cd18 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeroComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeroComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/hero/hero.component.ts b/src/app/hero/hero.component.ts new file mode 100644 index 0000000..9531868 --- /dev/null +++ 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() {} + +} diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html new file mode 100644 index 0000000..b557de6 --- /dev/null +++ b/src/app/services/services.component.html @@ -0,0 +1,35 @@ +
+
+

Creative thinker with a solution focus.

+

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.

+ Contact +
+ + Contact +
+
+
+

Collaboration is at the heart of my work.

+

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!

+
+ +
+
+
+

For all projects involving prototyping, coding or automation

+

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.

+
+ +
diff --git a/src/app/services/services.component.scss b/src/app/services/services.component.scss new file mode 100644 index 0000000..78d2437 --- /dev/null +++ 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; + } +} diff --git a/src/app/services/services.component.spec.ts b/src/app/services/services.component.spec.ts new file mode 100644 index 0000000..e0eb720 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ServicesComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/services/services.component.ts b/src/app/services/services.component.ts new file mode 100644 index 0000000..b3dead3 --- /dev/null +++ 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 { + +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..3f11067 --- /dev/null +++ b/src/index.html @@ -0,0 +1,19 @@ + + + + + CptArn + + + + + + + + + + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..35b00f3 --- /dev/null +++ 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)); diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..dbd4147 --- /dev/null +++ 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; + } +} diff --git a/src/variables.scss b/src/variables.scss new file mode 100644 index 0000000..5e08c4a --- /dev/null +++ b/src/variables.scss @@ -0,0 +1 @@ +$breakpoint: 820px; diff --git a/tsconfig.app.json b/tsconfig.app.json new file mode 100644 index 0000000..3775b37 --- /dev/null +++ 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" + ] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a9ae8b0 --- /dev/null +++ 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 + } +} diff --git a/tsconfig.spec.json b/tsconfig.spec.json new file mode 100644 index 0000000..5fb748d --- /dev/null +++ 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" + ] +}