feat: init hero

apps/front/components.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

apps/front/public/manifest.json

@@ -0,0 +1,25 @@
+{
+    "short_name": "Portfolio Max",
+    "name": "Portfolio Maxime Leriche",
+    "icons": [
+      {
+        "src": "favicon.ico",
+        "sizes": "64x64 32x32 24x24 16x16",
+        "type": "image/x-icon"
+      },
+      {
+        "src": "logo192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      },
+      {
+        "src": "logo512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+  }

apps/front/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

apps/front/src/component/Hero/Hero.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useIndexStore } from '../../stores';
+import TextRotate from './TextRotate.vue';
+import HeroLink from './HeroLink.vue'
+const indexStore = useIndexStore();
+
+</script>
+
+<template>
+    <div v-if="indexStore.inited" id="cover" class="coverPage">
+        <div class="coverPageContent">
+            <h1 class="coverPageTitle">{{ indexStore.homeContent.name }}</h1>
+            <TextRotate :texts="indexStore.homeContent.coverTitle" />
+            <div class="coverPageWrapperMedia">
+                <HeroLink v-for="link in indexStore.homeContent.url" :key="link.name" :icon="link.imgUrl"
+                    :link="link.url" className="ico-cover" />
+            </div>
+        </div>
+        <div>
+            GO DOWN
+        </div>
+    </div>
+    <div v-else>
+        <h1>Loading...</h1>
+    </div>
+</template>
+
+<style lang="scss">
+.coverPage {
+    height: 100vh;
+    background-color: #1b203a;
+    color: #f2f4f3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.coverPageTitle {
+    text-align: center;
+    font-size: 3.75em;
+    font-weight: inherit;
+    line-height: 1;
+    margin: 0;
+}
+
+.coverPageContent>.txt-rotate-wrapper {
+    display: flex;
+}
+
+.coverPageWrapperMedia {
+    display: flex;
+    justify-content: center;
+    place-items: center;
+}
+
+.ico-cover {
+    font-size: 38px;
+    color: #f2f4f3;
+    border-radius: 50%;
+    border: 1px solid #f2f4f3;
+    padding: 5px;
+    margin: 5px;
+}
+
+.ico-next-content {
+    position: absolute;
+    bottom: 10%;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    width: 30px;
+    font-size: 30px;
+}
+</style>

apps/front/src/component/Hero/HeroLink.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import IcoOrMedia from '../helper/IcoOrMedia.vue';
+defineProps({
+    icon: {
+        type: String,
+        required: true,
+    },
+    className: {
+        type: String,
+        default: '',
+    },
+    link: {
+        type: String,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <a :href="link.includes('/') ? link : `#${link}`" :target="link.includes('/') ? '_blank' : '_self'"
+        rel="noreferrer">
+        <IcoOrMedia :media="icon" :className="className" />
+    </a>
+</template>

apps/front/src/component/Hero/TextRotate.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps<{
+    texts: Array<string>;
+}>();
+
+const textsInDiv = ref("");
+const timeoutId = ref<number | null>(0);
+
+const tick = (textIncomming: string, deleting: boolean, loopNum: number) => {
+    let fullText = props.texts[loopNum % props.texts.length];
+    let futurText = fullText.substring(0, textIncomming.length + (deleting ? -1 : 1));
+    textsInDiv.value = futurText;
+    let delta = 200 - Math.random() * 100;
+    if (deleting) { delta /= 2; }
+    if (!deleting && futurText === fullText) {
+        delta = 2000;
+        deleting = true;
+    } else if (deleting && futurText === '') {
+        deleting = false;
+        loopNum++;
+        delta = 400;
+    }
+    var id = setTimeout(() => tick(futurText, deleting, loopNum), delta);
+    timeoutId.value = id;
+}
+
+onMounted(() => {
+    tick(textsInDiv.value, false, 0);
+    return () => {
+        if (timeoutId.value) {
+            clearTimeout(timeoutId.value);
+        }
+    };
+});
+</script>
+
+<template>
+    <div class="txt-rotate-wrapper">
+        <span class="txt-rotate">
+            <span class="wrap">{{ textsInDiv }}</span>
+        </span>
+    </div>
+</template>
+
+<style scoped>
+.txt-rotate-wrapper {
+    justify-content: center;
+    place-items: center;
+    margin: 1rem;
+    display: flex;
+}
+
+.txt-rotate>.wrap {
+    border-right: 0.08em solid #666;
+}
+</style>

apps/front/src/component/helper/IcoMoonSVG.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps({
+    icon: {
+        type: String,
+        required: true,
+    },
+    className: {
+        type: String,
+        default: '',
+    },
+});
+let superClassName = `ico ico-${props.icon} ${props.className}`;
+</script>
+
+<template>
+    <svg class="ico-cover" :class="superClassName" focusable="false">
+        <use :href="`/icon/symbol-defs.svg#ico-${icon}`"></use>
+    </svg>
+</template>

apps/front/src/component/helper/IcoOrMedia.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import IcoMoonSVG from './IcoMoonSVG.vue';
+defineProps({
+    media: {
+        type: String,
+        required: true,
+    },
+    className: {
+        type: String,
+        default: '',
+    },
+});
+
+</script>
+
+<template>
+    <IcoMoonSVG v-if="media.includes('ico#')" :icon="media.replace('ico#', '')" :class="className" />
+    <p v-else>{{ media }}</p>
+</template>

apps/front/src/main.ts

@@ -1,8 +1,44 @@
+import { createApp, markRaw } from 'vue';
+import { createPinia } from 'pinia';
+import type { Router } from 'vue-router';
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+
+import App from './views/App.vue';
+import router from './router';
+import { client } from '@portfolio/api-client';
 import './styles.scss';
 
-import { createApp } from 'vue';
-import App from './app/App.vue';
+client.setConfig({
+  baseURL: import.meta.env.VITE_API_URL as string,
+});
 
 const app = createApp(App);
 
+const pinia = createPinia();
+
+declare const RawSymbol: unique symbol;
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    // by using a setter we can allow both strings and refs
+    router: Router & { [RawSymbol]?: true | undefined };
+    language: string;
+  }
+}
+pinia.use(({ store }) => {
+  store.router = markRaw(router);
+});
+
+app.use(pinia);
+app.use(router);
+
+app.use(PrimeVue, {
+  theme: {
+    preset: Aura,
+    options: {
+      darkModeSelector: '.dark-mode',
+    },
+  },
+});
+
 app.mount('#root');

apps/front/src/router/index.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+  ],
+});
+
+export default router;

apps/front/src/stores/index.ts

@@ -0,0 +1,37 @@
+import { defineStore } from 'pinia';
+import { getHome, HomeContent } from '@portfolio/api-client';
+export interface IndexState {
+  inited: boolean;
+  homeLoading: boolean;
+  loadingError?: string;
+  homeContent?: HomeContent;
+}
+
+export const useIndexStore = defineStore({
+  id: 'index',
+  state: (): IndexState => ({
+    inited: false,
+    homeLoading: false,
+  }),
+  actions: {
+    init() {
+      if (this.inited) return;
+      this.homeLoading = true;
+      getHome()
+        .then((body) => {
+          if (body.status === 200) {
+            this.homeContent = body.data;
+          }
+          console.log(body);
+        })
+        .catch((err) => {
+          console.error(err);
+          this.loadingError = 'Failed to load home content';
+        })
+        .finally(() => {
+          this.homeLoading = false;
+          this.inited = true;
+        });
+    },
+  },
+});