refactor: refactor the layout

.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

@@ -14,11 +14,21 @@ export const appRoutes: Route[] = [
         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,26 +1,26 @@
-<div class="grid grid-cols-12 my-20 gap-10">
+<div class="my-20 grid grid-cols-12 md:gap-10">
   <div
-    class="flex flex-col space-y-4 md:col-span-7 col-span-12 flex-wrap whitespace-normal"
+    class="col-span-12 flex flex-col flex-wrap space-y-4 whitespace-normal md:col-span-7"
   >
     <h1
-      class="md:text-4xl text-2xl leading-[3rem] font-bold dark:text-white text-black mb-5"
+      class="mb-5 text-2xl font-bold leading-[3rem] text-black md:text-4xl dark:text-white"
     >
-      Hi again! I'm Valery Melou, a web developer from Yaounde, Cameroon.
+      Hi again! It's Valery!
     </h1>
     <p>
-      It all started in 2012-2013 with a book from
+      My developer journey 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"
+        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. 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.
+      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
@@ -31,62 +31,60 @@
         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"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
         >MBOA DIGITAL</a
-      >, ensuring we deliver our projects in time and within budget.
+      >, ensuring the delivery of software projects in time and within budget.
     </p>
     <p>
-      I specialized in web developments. Building RESTfull APIs with
+      I'm now specialized into web development. 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"
+        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="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        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="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        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="dark:text-white hover:text-accent-base transition-all duration-300 ease-in-out font-medium"
+        class="hover:text-accent-base font-medium transition-all duration-300 ease-in-out dark:text-white"
         >Typescript</a
-      >. I also put an accent on
+      >. I also have a strong focus 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"
+        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="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"
-    >
+  <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="rounded-lg"
+        class="mb-5 -rotate-3 rounded-lg"
         height="390"
         width="390"
       />

libs/pages/home/project.json

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

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

@@ -1,14 +1,12 @@
-<div class="flex flex-col flex-1 justify-center">
+<div class="flex flex-1 flex-col 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 class="text-3xl font-bold text-black md:text-6xl dark:text-white">
+      Hey, I'm Valery Melou!
     </h1>
-    <h2 class="text-2xl leading-10">
+    <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 the web and
-      the mobile.
+      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>

libs/pages/projects/.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/projects/README.md

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

libs/pages/projects/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'projects',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/libs/pages/projects',
+  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/projects/project.json

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

libs/pages/projects/src/index.ts

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

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

@@ -0,0 +1 @@
+<p>projects works!</p>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-projects',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './projects.component.html',
+})
+export class ProjectsComponent {}

libs/pages/projects/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/projects/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/projects/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/projects/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/index.ts

@@ -1 +1,5 @@
 export * from './lib/base-layout/base-layout.component';
+
+export * from './lib/social-bar/social-bar.component';
+
+export * from './lib/social-links/social-links.component';