diff --git a/public/assets/Phosphate/Phosphate-Solid-02.ttf b/public/assets/Phosphate/Phosphate-Solid-02.ttf new file mode 100644 index 0000000..b6ee2a2 Binary files /dev/null and b/public/assets/Phosphate/Phosphate-Solid-02.ttf differ diff --git a/public/assets/Phosphate/Phosphate-Solid-02.woff2 b/public/assets/Phosphate/Phosphate-Solid-02.woff2 new file mode 100644 index 0000000..15961da Binary files /dev/null and b/public/assets/Phosphate/Phosphate-Solid-02.woff2 differ diff --git a/public/assets/Phosphate/Phosphate.ttc b/public/assets/Phosphate/Phosphate.ttc new file mode 100644 index 0000000..4e55d19 Binary files /dev/null and b/public/assets/Phosphate/Phosphate.ttc differ diff --git a/public/assets/logo.svg b/public/assets/logo-dark.svg similarity index 100% rename from public/assets/logo.svg rename to public/assets/logo-dark.svg diff --git a/public/assets/toggle/Artboard 1 copy 2.svg b/public/assets/toggle/Artboard 1 copy 2.svg new file mode 100644 index 0000000..6867a89 --- /dev/null +++ b/public/assets/toggle/Artboard 1 copy 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 10.svg b/public/assets/toggle/Artboard 10.svg new file mode 100644 index 0000000..5515a8c --- /dev/null +++ b/public/assets/toggle/Artboard 10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 11.svg b/public/assets/toggle/Artboard 11.svg new file mode 100644 index 0000000..401b3ef --- /dev/null +++ b/public/assets/toggle/Artboard 11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 23.svg b/public/assets/toggle/Artboard 23.svg new file mode 100644 index 0000000..0049179 --- /dev/null +++ b/public/assets/toggle/Artboard 23.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 24.svg b/public/assets/toggle/Artboard 24.svg new file mode 100644 index 0000000..89c3675 --- /dev/null +++ b/public/assets/toggle/Artboard 24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 6.svg b/public/assets/toggle/Artboard 6.svg new file mode 100644 index 0000000..192b0c8 --- /dev/null +++ b/public/assets/toggle/Artboard 6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 7.svg b/public/assets/toggle/Artboard 7.svg new file mode 100644 index 0000000..37633aa --- /dev/null +++ b/public/assets/toggle/Artboard 7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 8.svg b/public/assets/toggle/Artboard 8.svg new file mode 100644 index 0000000..8101cfb --- /dev/null +++ b/public/assets/toggle/Artboard 8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/toggle/Artboard 9.svg b/public/assets/toggle/Artboard 9.svg new file mode 100644 index 0000000..72dd65b --- /dev/null +++ b/public/assets/toggle/Artboard 9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index c7bdeeb..59ca75f 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -1,13 +1,30 @@
-

Ingrediënten voor 10 jaar ervaring

+
+

IngrediëntenProjecten

+ +
+
+

IngrediëntenProjecten

+
+
+ +
+

Bereiding voor een grafisch vormgever

+
    +
  1. Begin met een scheutje experimenteren met het Adobe-pakket. Laat dit langzaam sudderen tot het begint te borrelen van inspiratie.
    2. +
  2. Voeg vervolgens een flinke portie passie toe. Roer goed door, zodat het niet meer loslaat.
    3. +
  3. Laat het geheel een decennium rijpen. Hierdoor ontwikkelt het zich tot een volle, rijke vormgevingservaring.
    4. +
  4. Serveer met trots en geniet van de smaakvolle creaties die volgen!
    5. +
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index ad0208a..c931145 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -2,10 +2,19 @@ padding: 2rem 0; display: flex; justify-content: space-between; + flex-wrap: wrap; } -.contents { +.contents, .recipe { width: 100%; + display: flex; + gap: 3rem; + justify-content: space-between; + + + div { + width: calc(50% - 2.5rem); + } p { background-color: var(--text-color); @@ -14,27 +23,22 @@ height: 3rem; display: flex; align-items: center; - padding: 0 2rem; + padding: 0 1rem; margin: 0; } - ul { - columns: 2; + ul, ol { list-style: none; padding: 0; margin: 0; column-gap: 5rem; li { - height: 3rem; - padding: 0 1rem; + min-height: 1.5rem; + padding: 0.5rem 1rem; border-bottom: 0.1rem solid var(--text-color); display: flex; align-items: center; - - span { - margin-left: auto; - } } .indent:before { @@ -43,4 +47,31 @@ } } + + span { + margin-left: auto; + } +} + +.recipe { + margin-top: 2rem; + display: inline; + + ol { + list-style: none; + counter-reset: item; + } + + li { + counter-increment: item; + } + + li:before { + margin-right: 2rem; + content: counter(item); + width: 1.2em; + text-align: center; + display: inline-block; + } + } diff --git a/src/app/app.component.html b/src/app/app.component.html index a5ac254..15a4220 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,5 @@
+ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ac7e4ff..047c40f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -6,11 +6,12 @@ import { ServicesComponent } from "./services/services.component"; import { FooterComponent } from "./footer/footer.component"; import { PortfolioComponent } from "./portfolio/portfolio.component"; import { AboutComponent } from "./about/about.component"; +import { ToggleComponent } from "./toggle/toggle.component"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent], + imports: [RouterOutlet, HeroComponent, HeaderComponent, ServicesComponent, FooterComponent, PortfolioComponent, AboutComponent, ToggleComponent], templateUrl: './app.component.html', styleUrl: './app.component.scss' }) diff --git a/src/app/hero/hero.component.html b/src/app/hero/hero.component.html index 55e85c7..5ff7e12 100644 --- a/src/app/hero/hero.component.html +++ b/src/app/hero/hero.component.html @@ -1,3 +1,4 @@ -logo +Logo dark +Logo light

Ontvlambaar

Jullie het vuur, wij de branding diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss index 7b7b20a..3869020 100644 --- a/src/app/hero/hero.component.scss +++ b/src/app/hero/hero.component.scss @@ -5,10 +5,26 @@ padding: 3rem 0; } +@font-face { + font-family: Phospate; + src: url("../../../public/assets/Phosphate/Phosphate-Solid-02.woff2"); +} + +h1 { + font-family: Phospate; + font-weight: 300; + font-size: 4rem; + margin: 0; + letter-spacing: .1rem; + + color: var(--logo-color); +} + .slogan { font-size: 3.5rem; } img { - height: 8rem; + height: 5rem; + margin-bottom: 0.5rem; } diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index 40cf613..7f9be57 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,21 +1,21 @@

Zetwerk van boeken

-

Educatieve uitgaven, waar het allemaal begonnen is. Via VrijdagGrafis de nodige ervaring opgedaanom educatieve uitgaven vorm tegeven en het zetwerk te verzorgen.

+

Voor educatieve uitgaven, catalogi en proefschriften zorg ik voor een helder en toegankelijk ontwerp dat de inhoud optimaal tot zijn recht laat komen. Educatieve boeken voor leerlingen vragen om een overzichtelijke indeling die het leren stimuleert, terwijl catalogi de producten gestructureerd en visueel aantrekkelijk moeten presenteren. Proefschriften vereisen dan weer een professionele en verzorgde uitstraling die past bij academisch werk. Met aandacht voor detail en leesbaarheid zet ik jouw project om in een professioneel en aantrekkelijk eindresultaat, van eerste pagina tot laatste bladzijde.

Zetwerk voorbeeld

Logo’s, huisstijlen & verpakkingen

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,

+

Een sterke huisstijl en een herkenbaar logo vormen het hart van elk merk. Ik ontwerp de visuele kant van je merkverhaal en zorg voor een blijvende indruk. Van het logo tot de banners, ik creëer een unieke uitstraling die jouw merk laat opvallen en de juiste boodschap overbrengt.

Zetwerk voorbeeld

UX/UI

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,

+

Een goede vormgeving gaat verder dan alleen mooi zijn; het moet ook gebruiksvriendelijk zijn. Met een sterk ontwerp voor jouw website zorg ik ervoor dat gebruikers moeiteloos hun weg vinden. Door een combinatie van esthetiek en functionaliteit creëer ik een intuïtieve ervaring die aansluit bij de behoeften van de gebruiker en het doel van jouw project.

Zetwerk voorbeeld
diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html index 404c7e5..28d6db0 100644 --- a/src/app/services/services.component.html +++ b/src/app/services/services.component.html @@ -11,7 +11,7 @@
Logos Logos -

logo's en huisstijlen

+

Logo's en huisstijlen

UX/UI diff --git a/src/app/toggle/toggle.component.html b/src/app/toggle/toggle.component.html new file mode 100644 index 0000000..2c409b6 --- /dev/null +++ b/src/app/toggle/toggle.component.html @@ -0,0 +1,9 @@ +
+ +
+ + + + + + diff --git a/src/app/toggle/toggle.component.scss b/src/app/toggle/toggle.component.scss new file mode 100644 index 0000000..a281d55 --- /dev/null +++ b/src/app/toggle/toggle.component.scss @@ -0,0 +1,38 @@ +:host { + height: 4rem; + width: 8rem; + position: relative; +} + +.background { + width: 8rem; + height: 2rem; + + .cls-1{fill:#ee7262;} +} + +.elements { + width: 10rem; + height: 2rem; + + svg { + position: absolute; + width: 2rem; + height: 2rem; + left: 1rem; + // left: 5rem; + top: 0.75rem; + } + + .cls-1 { + fill: #2e142c; + } + + .cls-2 { + fill: #e94541; + } + + .cls-3 { + fill: #a3203d; + } +} diff --git a/src/app/toggle/toggle.component.spec.ts b/src/app/toggle/toggle.component.spec.ts new file mode 100644 index 0000000..73913e3 --- /dev/null +++ b/src/app/toggle/toggle.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToggleComponent } from './toggle.component'; + +describe('ToggleComponent', () => { + let component: ToggleComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ToggleComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ToggleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/toggle/toggle.component.ts b/src/app/toggle/toggle.component.ts new file mode 100644 index 0000000..475eb09 --- /dev/null +++ b/src/app/toggle/toggle.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-toggle', + standalone: true, + imports: [], + templateUrl: './toggle.component.html', + styleUrl: './toggle.component.scss' +}) +export class ToggleComponent { + +} diff --git a/src/styles.scss b/src/styles.scss index 46840ea..2ba7787 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,7 +7,8 @@ body { @media (prefers-color-scheme: dark) { --text-color: rgb(222, 112, 108); --background-color: rgb(41, 23, 44); - --accent-color: rgb(222, 112, 108); + --accent-color: #E94541; + --logo-color: #a11f40; .only-on-dark { display: inline-block; @@ -23,6 +24,7 @@ body { --text-color: rgb(29, 29, 29); --background-color: rgb(255, 255, 255); --accent-color: rgb(211, 55, 38); + --logo-color: var(--text-color); font-family: Fredoka; font-weight: 300;