Resolve performance issues

AE517 · Nov 12, 2024 · 1aac1aa · 1aac1aa
1 parent 4021085
commit 1aac1aa
Show file tree

Hide file tree

Showing 6 changed files with 1,132 additions and 1,213 deletions.
diff --git a/app.vue b/app.vue
@@ -3,7 +3,7 @@
     <!-- <div v-if="loading" class="fixed flex justify-center align-center items-center left-0 top-0 h-full w-full bg-dsotm"> -->
     <!--   <img src="/static/G.svg" alt="G.svg" class="size-1/4" /> -->
     <!-- </div> -->
-      
+
     <NuxtLayout>
       <NuxtPage class="size-full p-2" />
     </NuxtLayout>
@@ -24,7 +24,8 @@ useSeoMeta({
   twitterTitle: 'Guilherme Araujo',
   twitterDescription: 'Guilherme Araujo - Web Developer',
   twitterImage: '/G.svg',
-  twitterCard: 'Guilherme Araujo\'s Homepage',
+  twitterCard: "Guilherme Araujo's Homepage",
+  ogUrl: 'guilherme-homepage.pages.dev',
 });
 
 // const nuxtApp = useNuxtApp();
@@ -36,5 +37,4 @@ useSeoMeta({
 // nuxtApp.hook("page:finish", () => {
 //   loading.value = false;
 // })
-
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -3,7 +3,13 @@ import { defineNuxtConfig } from 'nuxt/config';
 
 export default defineNuxtConfig({
   ssr: false,
-  devtools: { enabled: true },
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
+  },
   modules: ['@nuxtjs/tailwindcss', 'nuxt-icon', '@nuxtjs/mdc', '@nuxt/image'],
 
   image: {
@@ -35,4 +41,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-10-17',
-});
+});
diff --git a/pages/about.vue b/pages/about.vue
@@ -35,11 +35,14 @@
       <section class="whoami col-span-1 md:col-span-2">
         <div class="flex flex-col justify-center gap-y-10">
           <section id="about-me" class="flex animate-fade-left flex-col justify-center gap-y-5 animate-delay-500">
-              <h1
-              class="border-b-2 border-sundress text-center font-oxanium text-5xl font-semibold uppercase md:w-[300px] lg:text-left lg:capitalize"
+            <h1
+              class="flex flex-row justify-between border-b-2 border-sundress text-center font-oxanium text-5xl font-semibold uppercase md:w-[350px] lg:text-left lg:capitalize"
             >
-            Who am I? <a href="/files/curr.pdf" target="_blank" download="guilherme-araujo.pdf"><Icon name="mdi:file-download" color="#EBCA89" size="50" class="mb-2"/></a>
-                  </h1>
+              Who am I?
+              <a href="/files/curr.pdf" target="_blank" download="guilherme-araujo.pdf"
+                ><Icon name="mdi:file-download" color="#EBCA89" size="50" class="mb-2"
+              /></a>
+            </h1>
             <p class="text-justify text-lg lg:text-xl">
               I&apos;m a <strong class="text-sundress"> Web Developer</strong> and
               <strong class="text-sundress">Pixel Artist</strong> based in Brazil. With a passion for arts, games and

diff --git a/pages/projects.vue b/pages/projects.vue
@@ -4,12 +4,8 @@
       <section class="project-view">
         <div class="projects-container">
           <header class="my-8 text-center font-oxanium text-6xl font-bold tracking-wider lg:text-7xl">PROJECTS</header>
-          <div class="grid size-full grid-cols-1 justify-center gap-3 lg:grid-cols-2">
-            <GithubCard
-              v-for="(repo, index) in repositories"
-              :repo="repo"
-              class="animate-fade-up animate-delay-1000"
-            />
+          <div v-fi="loaded" class="grid size-full grid-cols-1 justify-center gap-3 lg:grid-cols-2">
+            <GithubCard v-for="(repo, index) in repositories" :repo="repo" class="animate-fade-up animate-delay-1000" />
           </div>
         </div>
       </section>
@@ -18,13 +14,22 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import githubApi, { Repo } from '../utils/githubApi';
+
 definePageMeta({
   layout: 'content',
 });
 
-const githubResponse: Array<object> = await githubApi();
-const repositories: Array<object> = githubResponse.filter((item: any) => {
-  if (item.name !== 'Guilherme-HJA') return item; // Github Config ignore
+const loaded = ref(false);
+const repositories = ref();
+const githubRes: Array<object> = await githubApi();
+
+onMounted(async () => {
+  repositories.value = githubRes.filter((item: any) => {
+    if (item.name !== 'Guilherme-HJA') return item;
+  });
+  loaded.value = !loaded.value;
 });
 </script>
 

diff --git a/utils/githubApi.ts b/utils/githubApi.ts
@@ -2,14 +2,14 @@ import { Octokit } from 'octokit';
 
 const octokit = new Octokit({});
 //Github API returns a large quantity of data, this aims to use only the necessary for the 'projects' page,
-interface Repo {
+export type Repo = {
   name: string;
   url: string;
   description: string;
   homepage?: string; //Optional | On empty returns ''
   language: string;
   topics: Array<object>;
-}
+};
 
 export default async function () {
   const response = await octokit.request('GET /users/{username}/repos', {