Refactor/layout

.github/workflows/ci.yml

@@ -39,12 +39,6 @@ jobs:
       - run: npx nx run-many --target=test --parallel=3 --code-coverage
       - run: yarn merge-lcov
 
-      - name: Code Coverage
-        uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./coverage/lcov.info
-
       - name: Code Coverage
         uses: paambaati/[email protected]
         env:

.prettierrc

@@ -1,3 +1,4 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

apps/portfolio/src/app/app.config.ts

@@ -1,7 +1,9 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
+
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(appRoutes)],
+  providers: [provideAnimations(), provideRouter(appRoutes)],
 };

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

@@ -12,8 +12,23 @@ export const appRoutes: Route[] = [
     children: [
       {
         path: '',
+        loadComponent: () =>
+          import('@valerymelou/pages/home').then((c) => c.HomeComponent),
+        data: { animation: 'HomePage' },
+      },
+      {
+        path: 'about',
         loadComponent: () =>
           import('@valerymelou/pages/about').then((c) => c.AboutComponent),
+        data: { animation: 'AboutPage' },
+      },
+      {
+        path: 'projects',
+        loadComponent: () =>
+          import('@valerymelou/pages/projects').then(
+            (c) => c.ProjectsComponent
+          ),
+        data: { animation: 'ProjectsPage' },
       },
     ],
   },

libs/pages/about/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "about",
+  "name": "pages-about",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/pages/about/src",
   "prefix": "app",

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

@@ -1,17 +1,93 @@
-<div class="flex flex-col flex-1 justify-center">
-  <div class="container max-w-3xl space-y-10">
+<div class="my-20 grid grid-cols-12 md:gap-10">
+  <div
+    class="col-span-12 flex flex-col flex-wrap space-y-4 whitespace-normal md:col-span-7"
+  >
     <h1
-      class="md:text-6xl text-5xl leading-[3rem] font-bold dark:text-white text-black"
+      class="mb-5 text-2xl font-bold leading-[3rem] text-black md:text-4xl dark:text-white"
     >
-      Hey, I'm Valery Melou
+      Hi again! It's Valery!
     </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>
+      My developer journey started in 2012-2013 with a book from
+      <a
+        href="https://openclassrooms.com/"
+        target="_blank"
+        rel="noopener"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >OpenClassroom</a
+      >
+      (then called, <strong class="italic">Le Site du Zéro</strong>). The
+      assignment was simple: build a website using PHP, HTML and CSS. 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="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >MBOA DIGITAL</a
+      >, ensuring the delivery of software projects in time and within budget.
+    </p>
+    <p>
+      I'm now specialized into web development. Building RESTfull APIs with
+      <a
+        href="https://www.djangoproject.com/"
+        target="_blank"
+        rel="noopener"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >Django</a
+      >
+      and
+      <a
+        href="https://www.python.org/"
+        target="_blank"
+        rel="noopener"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >Python</a
+      >
+      then, consuming those APIs with
+      <a
+        href="https://angular.dev/"
+        target="_blank"
+        rel="noopener"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >Angular</a
+      >
+      and
+      <a
+        href="https://www.typescriptlang.org/"
+        target="_blank"
+        rel="noopener"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >Typescript</a
+      >. I also have a strong focus on
+      <a
+        href="https://www.w3.org/WAI/fundamentals/accessibility-intro/"
+        target="_blank"
+        rel="noopener"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
+        >accessibility</a
+      >
+      when building web components because I believe the web should be
+      accessible to everyone, even the impaired.
+    </p>
+  </div>
+  <div class="order-first col-span-12 md:order-last md:col-span-5">
+    <div class="relative">
+      <img
+        src="/assets/images/valerymelou.jpg"
+        alt="Valery Melou"
+        class="mb-5 -rotate-3 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": "pages-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,15 @@
+<div class="flex flex-1 flex-col justify-center">
+  <div class="container max-w-3xl space-y-10">
+    <h1 class="text-3xl font-bold text-black md:text-6xl dark:text-white">
+      Hey, I'm Valery Melou!
+    </h1>
+    <h2 class="text-xl leading-10 md:text-2xl">
+      I'm a web developer from Yaounde, Cameroon.<br />
+      I build beautiful, interactive and accessible experiences for web and
+      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"
+  ]
+}