diff --git a/index.html b/index.html index 0c1d4f7..4921e25 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,8 @@ + CptArn - - - - - - - - - - - - - - - - - - + - + - - - + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..325e4be 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,5 @@ +.wrapper { + max-width: 40rem; + padding: 0 1rem; + margin: 0 auto; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a4dd359..ab6511b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; import { HeroComponent } from "./hero/hero.component"; import { HeaderComponent } from "./header/header.component"; import { FooterComponent } from "./footer/footer.component"; +import { ServicesComponent } from "./services/services.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, HeroComponent, HeaderComponent, FooterComponent], + imports: [HeroComponent, HeaderComponent, FooterComponent, ServicesComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html index 28c0d7d..b0f0814 100644 --- a/src/app/footer/footer.component.html +++ b/src/app/footer/footer.component.html @@ -1 +1,11 @@ -

footer works!

+
+

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

+
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss index e69de29..9f70685 100644 --- a/src/app/footer/footer.component.scss +++ b/src/app/footer/footer.component.scss @@ -0,0 +1,7 @@ +:host { + color: #696969; + font-style: italic; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts index 515bda6..f585b05 100644 --- a/src/app/footer/footer.component.ts +++ b/src/app/footer/footer.component.ts @@ -8,5 +8,5 @@ import { Component } from '@angular/core'; styleUrl: './footer.component.scss' }) export class FooterComponent { - + public currentYear: number = new Date().getUTCFullYear(); } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 4f5a95d..35ca426 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1 +1,5 @@ -

header works!

+ +
+ About + Contact +
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index e69de29..65454c7 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -0,0 +1,23 @@ +:host { + border-bottom: 1px solid #fff; + width: 100%; + display: flex; + justify-content: space-between; + padding: 1rem 0; +} + +img { + max-height: 5rem; +} + +.menu { + font-style: italic; + display: flex; + gap: 3rem; + + a { + color: #fff; + text-decoration: none; + align-content: center; + } +} diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss index f1e2b18..6f1356b 100644 --- a/src/app/hero/hero.component.scss +++ b/src/app/hero/hero.component.scss @@ -2,6 +2,7 @@ width: 100%; height: 75%; display: inline-block; + background-color: #e94d1a; } .hero-text { @@ -10,4 +11,6 @@ position: relative; left: calc(30% - 5rem); top: 40%; + font-weight: bold; + color: white; } diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html new file mode 100644 index 0000000..266f4c1 --- /dev/null +++ b/src/app/services/services.component.html @@ -0,0 +1,33 @@ +
+
+

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 impactfu

+
+ +
+
+
+

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..17a4943 --- /dev/null +++ b/src/app/services/services.component.scss @@ -0,0 +1,36 @@ +:host { + color: #fff; + display: flex; + flex-direction: column; + gap: 2rem; +} + +h2 { + font-weight: 500; + font-style: italic; +} + +.left, .right { + display: flex; + justify-content: center; + + .text { + max-width: 50%; + } + + img { + max-width: 50%; + } +} + +.right { + flex-direction: row-reverse; + text-align: end; +} + +.full { + img { + max-width: 100%; + margin-top: 2rem; + } +} 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 index dccd8a7..183efce 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,9 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index af919f8..eb22fab 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,6 +1,18 @@ /* You can add global styles to this file, and also import other style files */ body { width: 100vw; - height: 100vh; + height: 100%; margin: 0; } + +body { + font-family: "Inter", sans-serif; + font-optical-sizing: auto; + font-weight: normal; + font-style: normal; + background: linear-gradient(180deg, #E94E1B 0%, #2B2B2B 24.67%, #2B2B2B 63.56%, #000000 96.31%, #000000 100%); +} + +html { + background-color: #000000; +}