Merge branch 'feature/projects' into develop

apps/portfolio/tailwind.config.js

@@ -14,6 +14,10 @@ module.exports = {
       colors: {
         ...colors,
         dark: colors.slate[900],
+        secondary: {
+          dark: '#112240',
+          base: '#1e3a8a',
+        },
         accent: {
           base: '#068477',
         },

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

@@ -1,11 +1,11 @@
-<div class="my-20 grid grid-cols-12 md:gap-10">
+<div class="my-10 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="mb-5 text-2xl font-bold leading-[3rem] text-black md:text-4xl dark:text-white"
     >
-      Hi again! It's Valery!
+      A little about me
     </h1>
     <p>
       My developer journey started in 2012-2013 with a book from

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

@@ -1 +1,55 @@
-<p>projects works!</p>
+<div class="my-10">
+  <h1
+    class="mb-10 text-2xl font-bold leading-[3rem] text-black md:text-4xl dark:text-white"
+  >
+    Some things I've built
+  </h1>
+
+  <ul>
+    <li class="visible relative grid grid-cols-12 gap-2">
+      <div class="relative z-[1] col-[1_/-1] row-[1_/-1] lg:col-[7_/_-1]">
+        <div class="flex flex-col p-10 text-right lg:p-0">
+          <h2
+            class="mb-5 self-end text-2xl font-medium text-black lg:max-w-[70%] dark:text-white"
+          >
+            <a
+              href="https://cartodd.francophonie.org/"
+              target="_blank"
+              rel="noopener"
+              >Mapping of organizations working on the SDGs</a
+            >
+          </h2>
+          <div class="dark:bg-secondary-dark rounded-md bg-white p-6">
+            <p>
+              I built the frontend of the of this platform listing the
+              organizations working on Sustainable Development Goals as
+              identified by the Francophonie.
+            </p>
+          </div>
+          <div class="my-5 flex justify-end space-x-4 text-sm">
+            <strong class="font-normal">Angular</strong>
+            <strong class="font-normal">Open Layers</strong>
+            <strong class="font-normal">Tailwind CSS</strong>
+          </div>
+        </div>
+      </div>
+      <div class="relative col-[1_/-1] row-[1_/-1] lg:col-[1_/_8]">
+        <a
+          href="https://cartodd.francophonie.org/"
+          target="_blank"
+          rel="noopener"
+          class="group relative flex overflow-hidden rounded-md"
+        >
+          <img
+            src="/assets/images/screenshots/ifdd.png"
+            alt="Mapping of organizations working on the SDGs"
+          />
+          <div
+            aria-hidden="true"
+            class="dark:bg-dark absolute bottom-0 left-0 right-0 top-0 bg-white bg-opacity-70 filter transition-all duration-300 ease-in-out group-hover:-translate-y-full dark:bg-opacity-90 lg:dark:bg-opacity-50"
+          ></div>
+        </a>
+      </div>
+    </li>
+  </ul>
+</div>