style: properly install prettier and format all

Author: tmlmt

.prettierignore

@@ -0,0 +1,7 @@
+# Ignore artifacts
+.nuxt
+.output
+node_modules
+pnpm-lock.yaml
+pnpm-workspace.yaml
+playwright-report

.prettierrc

@@ -0,0 +1 @@
+{}

CHANGELOG.md

@@ -70,7 +70,7 @@
 - Color contrast ([#6](https://github.com/tmlmt/homepage/pull/6))
 - **HeaderBar:** Link accessibility ([#7](https://github.com/tmlmt/homepage/pull/7))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -84,7 +84,7 @@
 - Create ci-cd Github Action ([4e07ea1](https://github.com/tmlmt/homepage/commit/4e07ea1))
 - Update source dir ([6f222bb](https://github.com/tmlmt/homepage/commit/6f222bb))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -99,9 +99,9 @@
 
 ### 🩹 Fixes
 
- - **orsted:** Better icons ([59e3dca](https://github.com/tmlmt/homepage/commit/59e3dca))
+- **orsted:** Better icons ([59e3dca](https://github.com/tmlmt/homepage/commit/59e3dca))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -113,7 +113,7 @@
 
 - **index:** Title top margin ([4ff6a1c](https://github.com/tmlmt/homepage/commit/4ff6a1c))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -139,7 +139,7 @@
 - Decrease margins on mobile ([a971c42](https://github.com/tmlmt/homepage/commit/a971c42))
 - **index:** Improve text ([8893da0](https://github.com/tmlmt/homepage/commit/8893da0))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -152,7 +152,7 @@
 - Remove business cards from sitemap and robots.txt ([2c9878e](https://github.com/tmlmt/homepage/commit/2c9878e))
 - Changelog ([c606f50](https://github.com/tmlmt/homepage/commit/c606f50))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -175,7 +175,7 @@
 
 - Rename CardItem to LinkItem and cards to links ([c53fcf8](https://github.com/tmlmt/homepage/commit/c53fcf8))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -187,7 +187,7 @@
 
 - **index:** Main content width ([9bd834b](https://github.com/tmlmt/homepage/commit/9bd834b))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
 
@@ -217,7 +217,6 @@
 
 - Update README and LICENSEs ([c38dbab](https://github.com/tmlmt/homepage/commit/c38dbab))
 
-### ❤️  Contributors
+### ❤️ Contributors
 
 - Thomas Lamant ([@tmlmt](http://github.com/tmlmt))
-

README.md

@@ -8,7 +8,8 @@ Source code of [my homepage](https://www.tmlmt.com), made with [Nuxt](https://nu
 
 ## Fork
 
-If you want to work and reuse the code: 
+If you want to work and reuse the code:
+
 - Install pnpm (see [docs](https://pnpm.io/installation))
 - Clone the git repo
 - Install the dependencies: `pnpm install`

app/assets/main.css

@@ -1,28 +1,40 @@
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
 }
 
-a, a:visited {
+a,
+a:visited {
   color: #424242;
   text-decoration: none;
 }
 
 a:hover {
-  color: #979797
+  color: #979797;
 }
 
 .text-gradient {
   display: inline-block;
-  background: linear-gradient(to right,#458bfd 0%, #eb7ca7 100%);
+  background: linear-gradient(to right, #458bfd 0%, #eb7ca7 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 .text-gradient-blue {
   display: inline-block;
-  background: linear-gradient(to right,#0b69ff 0%, #0045b4 100%);
+  background: linear-gradient(to right, #0b69ff 0%, #0045b4 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

app/components/FooterBar.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="flex justify-content-center footer mt-6 mx-3 pb-6 text-sm text-700">
-    🇨🇵🇯🇵❤️ - 2023 ~ Present  &#169; Thomas Lamant - 🏠🇩🇰
+  <div
+    class="flex justify-content-center footer mt-6 mx-3 pb-6 text-sm text-700"
+  >
+    🇨🇵🇯🇵❤️ - 2023 ~ Present &#169; Thomas Lamant - 🏠🇩🇰
   </div>
 </template>
 

app/components/HeaderBar.vue

@@ -1,18 +1,42 @@
 <script setup lang="ts">
-import logoSrc from '~/assets/logo.svg'
+import logoSrc from "~/assets/logo.svg";
 </script>
 
 <template>
   <div class="grid justify-content-between align-content-center m-3">
     <div class="col-4 flex align-items-center">
-      <NuxtLink to="/"><img :src="logoSrc" width="40" alt="Logo"></NuxtLink>
+      <NuxtLink to="/"><img :src="logoSrc" width="40" alt="Logo" /></NuxtLink>
     </div>
     <div class="col-4 flex justify-content-end align-items-center">
       <NuxtLink to="/links" class="mx-2">Links</NuxtLink>
-      <a v-umami="'LinkedIn profile'" href="https://www.linkedin.com/in/thomas-lamant-9a28423b/" aria-label="LinkedIn profile" target="_blank"><i class="pi pi-linkedin mx-2" /></a>
-      <a v-umami="'Instagram profile'" href="https://instagram.com/tmlmt" aria-label="Instagram profile" target="_blank"><i class="pi pi-instagram mx-2" /></a>
-      <a v-umami="'Github profile'" href="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/tmlmt" aria-label="GitHub profile" target="_blank"><i class="pi pi-github mx-2" /></a>
-      <a v-umami="'Contact link'" href="https://blog.tmlmt.com/contact" aria-label="Send me a message" target="_blank"><i class="pi pi-envelope mx-2" /></a>
+      <a
+        v-umami="'LinkedIn profile'"
+        href="https://www.linkedin.com/in/thomas-lamant-9a28423b/"
+        aria-label="LinkedIn profile"
+        target="_blank"
+        ><i class="pi pi-linkedin mx-2"
+      /></a>
+      <a
+        v-umami="'Instagram profile'"
+        href="https://instagram.com/tmlmt"
+        aria-label="Instagram profile"
+        target="_blank"
+        ><i class="pi pi-instagram mx-2"
+      /></a>
+      <a
+        v-umami="'Github profile'"
+        href="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/tmlmt"
+        aria-label="GitHub profile"
+        target="_blank"
+        ><i class="pi pi-github mx-2"
+      /></a>
+      <a
+        v-umami="'Contact link'"
+        href="https://blog.tmlmt.com/contact"
+        aria-label="Send me a message"
+        target="_blank"
+        ><i class="pi pi-envelope mx-2"
+      /></a>
     </div>
   </div>
 </template>

app/components/LinkItem.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
-  id: string,
-  alt: string,
-  title: string,
-  size: number,
-  link: string,
-  linkText?: string,
-  column?: 'left' | 'right',
-  row: 'top' | 'bottom' }>(), { column: 'right', linkText: '' })
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    alt: string;
+    title: string;
+    size: number;
+    link: string;
+    linkText?: string;
+    column?: "left" | "right";
+    row: "top" | "bottom";
+  }>(),
+  { column: "right", linkText: "" },
+);
 
 // Managing card overlay opacity
 // - Laptops:
@@ -18,42 +22,55 @@ const props = withDefaults(defineProps<{
 //       (on Chrome: click = mouseenter + click; on Firefox: click = click)
 //     onLeave resets opacity (to 0) and forced mode (to disabled) so that we can hover again
 
-const isOpaque = ref(false)
-const isClick = ref()
-const isEnter = ref()
+const isOpaque = ref(false);
+const isClick = ref();
+const isEnter = ref();
 const onClick = () => {
-  isClick.value = true
+  isClick.value = true;
   if (isEnter.value) {
-    isOpaque.value = true
+    isOpaque.value = true;
   } else {
-    isOpaque.value = !isOpaque.value
+    isOpaque.value = !isOpaque.value;
   }
-  isEnter.value = false
-}
+  isEnter.value = false;
+};
 const onLeave = () => {
-  isClick.value = false
-  isOpaque.value = false
-}
+  isClick.value = false;
+  isOpaque.value = false;
+};
 const onEnter = () => {
-  isEnter.value = true
-  isOpaque.value = true
-}
+  isEnter.value = true;
+  isOpaque.value = true;
+};
 </script>
 
 <template>
   <div
     :class="[
       'col-12 md:col-6 flex p-0 card',
       props.column === 'left' ? 'md:justify-content-end' : '',
-      props.row === 'top' ? 'md:align-items-end' : 'md:align-items-start']"
+      props.row === 'top' ? 'md:align-items-end' : 'md:align-items-start',
+    ]"
   >
-    <div class="card-inner md:mx-2 md:mb-2" @click="onClick" @mouseenter="onEnter" @mouseleave="onLeave">
+    <div
+      class="card-inner md:mx-2 md:mb-2"
+      @click="onClick"
+      @mouseenter="onEnter"
+      @mouseleave="onLeave"
+    >
       <div>
-        <nuxt-img :src="`/links/${props.id}.png`" sizes="sm:100vw md:360px lg:400px" :alt="props.alt" />
+        <nuxt-img
+          :src="`/links/${props.id}.png`"
+          sizes="sm:100vw md:360px lg:400px"
+          :alt="props.alt"
+        />
       </div>
       <div
         class="card-overlay text-white surface-900 px-4 py-2 absolute top-0 left-0 transition-ease-in-out transition-duration-500"
-        :class="{'card-opaque' : isOpaque && isClick, 'card-transparent': !isOpaque && isClick}"
+        :class="{
+          'card-opaque': isOpaque && isClick,
+          'card-transparent': !isOpaque && isClick,
+        }"
       >
         <div class="flex h-full flex-column justify-content-between">
           <div>
@@ -62,7 +79,10 @@ const onEnter = () => {
           </div>
           <div>
             <p>
-              <a :href="props.link" class="explicit-link" target="_blank"><i class="pi pi-external-link mr-1" /> Go to {{ props.linkText ? props.linkText : props.link }}</a>
+              <a :href="props.link" class="explicit-link" target="_blank"
+                ><i class="pi pi-external-link mr-1" /> Go to
+                {{ props.linkText ? props.linkText : props.link }}</a
+              >
             </p>
           </div>
         </div>
@@ -72,7 +92,6 @@ const onEnter = () => {
 </template>
 
 <style lang="postcss">
-
 .card {
   @media (max-width: 768px) {
     justify-content: center;
@@ -115,18 +134,18 @@ const onEnter = () => {
         }
 
         &:hover {
-          color: #ffffff
+          color: #ffffff;
         }
       }
     }
   }
 }
 
 .card-opaque {
-  opacity: 1 !important
+  opacity: 1 !important;
 }
 
 .card-transparent {
-  opacity: 0 !important
+  opacity: 0 !important;
 }
 </style>

app/layouts/cards.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-const route = useRoute()
+const route = useRoute();
 
 useSeoMeta({
-  author: 'Thomas Lamant',
-  title: route.title as string || 'Thomas Lamant',
-  ogTitle: route.title as string || 'Thomas Lamant',
-  description: route.description as string || "Thomas Lamant's homepage",
-  ogDescription: route.description as string || "Thomas Lamant's homepage"
-})
+  author: "Thomas Lamant",
+  title: (route.title as string) || "Thomas Lamant",
+  ogTitle: (route.title as string) || "Thomas Lamant",
+  description: (route.description as string) || "Thomas Lamant's homepage",
+  ogDescription: (route.description as string) || "Thomas Lamant's homepage",
+});
 </script>
 
 <template>
-  <div class="flex flex-column h-full w-full md:justify-content-center align-items-center">
+  <div
+    class="flex flex-column h-full w-full md:justify-content-center align-items-center"
+  >
     <main>
       <slot />
     </main>