Improve banner

src/assets/css/style.scss

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
 
 .icon {
   transform: translate(3px, -3px);

src/components/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="my-16 md:my-32 w-full flex items-center justify-center">
+  <section class="my-16 w-full flex items-center justify-center">
     <div class="text-center flex flex-col items-center">
       <h1 class="text-6xl font-bold text-gray-700 dark:text-gray-400">
         {{ $t('home.banner.hello') }} <span class="text-black dark:text-white">Arthur Danjou</span> 👋,
@@ -8,26 +8,66 @@
         <strong>{{ $t('home.banner.role') }}</strong>. <br />
         {{ $t('home.banner.student.main') }} <strong>{{ $t('home.banner.student.strong') }}</strong>.
       </h2>
-      <p class="mt-4 text-lg text-gray-800 mb-10 dark:text-gray-300">{{ $t('home.banner.contact.follow') }}
-        <a href="https://twitter.com/arthurdanj" target="_blank" rel="noreferrer noopener" class="link">Twitter</a>,
-        <a href="https://twitch.tv/arthurdanjou" target="_blank" rel="noreferrer noopener" class="link">Twitch</a>
-        {{ $t('home.banner.contact.and') }}
-        <a href="https://github.com/arthurdanjou" target="_blank" rel="noreferrer noopener" class="link">Github</a>
-        {{ $t('home.banner.contact.spacer') }}
-        <nuxt-link to="contact" class="link">{{ $t('home.banner.contact.contact') }}</nuxt-link> {{ $t('home.banner.contact.me') }}
-      </p>
+      <div class="select-none mt-4 text-5xl text-gray-800 mb-10 dark:text-gray-300">
+        <span id="develop" class="color blue">Develop.</span>
+        <span id="publish" class="color">Publish.</span>
+        <span id="improve" class="color">Improve.</span>
+      </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-export default {
-  name: "Banner"
+import {defineComponent, onMounted, onUnmounted} from "@nuxtjs/composition-api";
+
+interface Color {
+  name: string,
+  color: string
 }
+
+const COLORS: Color[] = [
+  { name: 'develop', color: 'blue' },
+  { name: 'publish', color: 'red' },
+  { name: 'improve', color: 'green' }
+]
+
+export default defineComponent({
+  name: "Banner",
+  setup() {
+    let task
+
+    onMounted(() => {
+      let CURRENT = 0
+      task = setInterval(() => {
+        const color = COLORS[CURRENT]
+        const new_color = COLORS[CURRENT === COLORS.length -1 ? 0 : CURRENT + 1]
+        document.getElementById(new_color.name)!.classList.toggle(new_color.color)
+        setTimeout(() => document.getElementById(color.name)!.classList.toggle(color.color), 0)
+        CURRENT === COLORS.length - 1 ? CURRENT = 0 : CURRENT++
+      }, 3000)
+    })
+
+    onUnmounted(() => clearInterval(task))
+  }
+})
 </script>
 
 <style scoped lang="scss">
 .link {
   @apply font-medium cursor-pointer border-b-2 border-gray-200 text-indigo-600 hover:border-indigo-600 duration-200 dark:(font-white border-gray-700) hover:dark:border-indigo-600
 }
+
+.color {
+  @apply duration-500 text-white dark:text-black font-color;
+
+  &.red {
+    @apply select-text bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-rose-300
+  }
+  &.blue {
+    @apply select-text bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-400
+  }
+  &.green {
+    @apply select-text bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-lime-500
+  }
+}
 </style>

src/layouts/default.vue

@@ -16,7 +16,7 @@
         >
           <Announcement />
           <Header />
-          <Nuxt class="z-10 pt-16 lg:pt-24 content"/>
+          <Nuxt class="z-10 pt-16 content"/>
           <Footer />
         </div>
       </div>

windi.config.ts

@@ -1,5 +1,4 @@
 import {defineConfig} from "windicss/helpers";
-
 const colors = require('windicss/colors')
 
 module.exports = defineConfig({
@@ -320,9 +319,9 @@ module.exports = defineConfig({
         '"Segoe UI Symbol"',
         '"Noto Color Emoji"',
       ],
-      serif: ['raleway', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
+      serif: ['Raleway', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
       mono: [
-        'raleway',
+        'Raleway',
         'ui-monospace',
         'SFMono-Regular',
         'Menlo',
@@ -332,6 +331,7 @@ module.exports = defineConfig({
         '"Courier New"',
         'monospace',
       ],
+      color: ['Roboto', 'serif']
     },
     fontSize: {
       xs: ['0.75rem', { lineHeight: '1rem' }],