feat: add about component

apps/portfolio/src/app/app.routes.ts

@@ -12,6 +12,11 @@ export const appRoutes: Route[] = [
     children: [
       {
         path: '',
+        loadComponent: () =>
+          import('@valerymelou/pages/home').then((c) => c.HomeComponent),
+      },
+      {
+        path: 'about',
         loadComponent: () =>
           import('@valerymelou/pages/about').then((c) => c.AboutComponent),
       },

libs/pages/about/src/lib/about.component.html

@@ -1,17 +1,95 @@
-<div class="flex flex-col flex-1 justify-center">
-  <div class="container max-w-3xl space-y-10">
+<div class="grid grid-cols-12 my-20 gap-10">
+  <div
+    class="flex flex-col space-y-4 md:col-span-7 col-span-12 flex-wrap whitespace-normal"
+  >
     <h1
-      class="md:text-6xl text-5xl leading-[3rem] font-bold dark:text-white text-black"
+      class="md:text-4xl text-2xl leading-[3rem] font-bold dark:text-white text-black mb-5"
     >
-      Hey, I'm Valery Melou
+      Hi again! I'm Valery Melou, a web developer from Yaounde, Cameroon.
     </h1>
-    <h2 class="text-2xl leading-10">
-      I'm a web developer from Yaounde, Cameroon.<br />
-      I build beautiful, interactive and accessible experiences for the web and
-      the mobile.
-    </h2>
-    <div>
-      <a href="/work" ui-flat-button color="accent" large>Check my work</a>
+    <p>
+      It all started in 2012-2013 with a book from
+      <a
+        href="https://openclassrooms.com/"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >OpenClassroom</a
+      >
+      (then called, <strong class="italic">Le Site du Zéro</strong>). The
+      assignment was simple: build a website. But for me, it sparked a
+      fascination with the possibilities of the web. I spent countless hours
+      tinkering, learning code like a secret language, and reveling in the
+      satisfaction of seeing my creations come to life.
+    </p>
+    <p>
+      Fast forward to today, and that early spark has ignited a full-fledged
+      career. I've worn many hats - a freelancer tackling diverse projects, a
+      team leader guiding developers, and most recently, a Director of
+      Operations at
+      <a
+        href="https://mboadigital.tech"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >MBOA DIGITAL</a
+      >, ensuring we deliver our projects in time and within budget.
+    </p>
+    <p>
+      I specialized in web developments. Building RESTfull APIs with
+      <a
+        href="https://www.djangoproject.com/"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >Django</a
+      >
+      and
+      <a
+        href="https://www.python.org/"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >Python</a
+      >
+      then, consuming those APIs with
+      <a
+        href="https://angular.dev/"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >Angular</a
+      >
+      and
+      <a
+        href="https://www.typescriptlang.org/"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >Typescript</a
+      >. I also put an accent on
+      <a
+        href="https://www.w3.org/WAI/fundamentals/accessibility-intro/"
+        target="_blank"
+        rel="noopener"
+        class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        >accessibility</a
+      >
+      when building web components because I believe the web should be
+      accessible to everyone, even the impaired.
+    </p>
+  </div>
+  <div class="md:col-span-5 order-first md:order-last col-span-12">
+    <div
+      class="relative md:after:block after:w-full after:h-4 after:rounded-full dark:after:bg-white after:bg-dark after:top-20 after:relative"
+    >
+      <img
+        src="/assets/images/valerymelou.jpg"
+        alt="Valery Melou"
+        class="rounded-lg"
+        height="390"
+        width="390"
+      />
     </div>
   </div>
 </div>

libs/pages/about/src/lib/about.component.ts

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ButtonComponent } from '@valerymelou/shared/ui';
 
 @Component({
   selector: 'app-about',
   standalone: true,
-  imports: [CommonModule, ButtonComponent],
+  imports: [CommonModule],
   templateUrl: './about.component.html',
-  styles: ':host {display: flex; flex-direction: column; flex: 1;}',
 })
 export class AboutComponent {}

libs/pages/home/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/pages/home/README.md

@@ -0,0 +1,7 @@
+# home
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test home` to execute the unit tests.

libs/pages/home/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'home',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/pages/home',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

libs/pages/home/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "home",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/pages/home/src",
+  "prefix": "app",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/pages/home/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

libs/pages/home/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/home.component';

libs/pages/home/src/lib/home.component.html

@@ -0,0 +1,17 @@
+<div class="flex flex-col flex-1 justify-center">
+  <div class="container max-w-3xl space-y-10">
+    <h1
+      class="md:text-6xl text-5xl leading-[3rem] font-bold dark:text-white text-black"
+    >
+      Hey, I'm Valery Melou
+    </h1>
+    <h2 class="text-2xl leading-10">
+      I'm a web developer from Yaounde, Cameroon.<br />
+      I build beautiful, interactive and accessible experiences for the web and
+      the mobile.
+    </h2>
+    <div>
+      <a href="/work" ui-flat-button color="accent" large>Check my work</a>
+    </div>
+  </div>
+</div>

libs/pages/home/src/lib/home.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('AboutComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomeComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/pages/home/src/lib/home.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from '@valerymelou/shared/ui';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  templateUrl: './home.component.html',
+  styles: ':host {display: flex; flex-direction: column; flex: 1;}',
+})
+export class HomeComponent {}

libs/pages/home/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

libs/pages/home/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/pages/home/tsconfig.lib.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}

libs/pages/home/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

libs/shared/layout/src/lib/footer/footer.component.html

@@ -6,30 +6,30 @@
           Coded in
           <a
             href="https://code.visualstudio.com/"
-            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out text-accent-light font-normal"
+            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-normal"
             target="_blank"
             rel="noopener"
             >Visual Studio Code</a
           >
           by yours truly. Built with
           <a
             href="https://angular.dev"
-            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out text-accent-light font-normal"
+            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-normal"
             target="_blank"
             rel="noopener"
             >Angular</a
           >
           and
           <a
             href="https://tailwindcss.com/"
-            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out text-accent-light font-normal"
+            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-normal"
             target="_blank"
             rel="noopener"
             >Tailwind CSS</a
           >, deployed by
           <a
             href="https://hostme.space/"
-            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out text-accent-light font-normal"
+            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-normal"
             target="_blank"
             rel="noopener"
             >Hostme</a
@@ -41,7 +41,7 @@
           You can edit this website on
           <a
             href="https://github.com/valerymelou/valerymelou.com"
-            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out text-accent-light font-normal"
+            class="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-normal"
             target="_blank"
             rel="noopener"
             >GitHub</a