Merge pull request #18 from leon-luna-ray/dev

fix project links
leon-luna-ray · Feb 13, 2024 · d55892c · d55892c
2 parents f3dd8a6 + 7b936bb
commit d55892c
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -10,27 +10,29 @@
 </head>
 
 <body>
-  <div id="top">
-    <header>
-      <div class="container inner">
-        <a href="/" id="logo" class="flex-col-03">
-          <span class="name font-reenie text-neon-pink">Ray Luna</span>
-          <span class="job-title text-primary">Frontend Web Developer</span>
-        </a>
-        <nav>
-          <button id="dark-mode-btn" class="zoom-in-out">I/0</button>
-        </nav>
+  <div id="app" class="hidden">
+    <div id="top">
+      <header>
+        <div class="container inner">
+          <a href="/" id="logo" class="flex-col-03">
+            <span class="name font-reenie text-neon-pink">Ray Luna</span>
+            <span class="job-title text-primary">Frontend Web Developer</span>
+          </a>
+          <nav>
+            <button id="dark-mode-btn" class="zoom-in-out">I/0</button>
+          </nav>
+        </div>
+      </header>
+      <main id="main-page">
+        <!-- router view -->
+      </main>
+    </div>
+    <footer>
+      <div class="container inner py-2">
+        <div>© Ray Luna <span class="copyright"></span></div>
       </div>
-    </header>
-    <main id="main-page">
-      <!-- router view -->
-    </main>
+    </footer>
   </div>
-  <footer>
-    <div class="container inner py-2">
-      <div>© Ray Luna <span class="copyright"></span></div>
-    </div>
-  </footer>
 </body>
 
 </html>
diff --git a/src/assets/styles/utilities.css b/src/assets/styles/utilities.css
@@ -86,7 +86,18 @@
   transform: scale(1.02);
 }
 
+.hidden {
+  display: none;
+}
 
+.fade-in {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.fade-in.visible {
+  opacity: 1;
+}
 
 @media screen and (max-width: 768px) {
   .container {

diff --git a/src/js/content.js b/src/js/content.js
@@ -7,6 +7,16 @@ import {
 import { projectCard, skillsCard } from '@/js/templates';
 import '@/assets/styles/main.css';
 
+function fadeInContent() {
+  const appElement = document.getElementById('app');
+  appElement.classList.remove('hidden');
+  appElement.classList.add('fade-in');
+
+  setTimeout(() => {
+    appElement.classList.add('visible');
+  }, 100);
+}
+
 document.addEventListener('DOMContentLoaded', async () => {
   const data = await fetchHomePage();
   const pageURL = window.location.href;
@@ -19,6 +29,12 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   document.querySelector('.copyright').appendChild(copyrightText);
 
+  // SEO
+  if (data) {
+    fadeInContent();
+    addSEOTags(data.global.title, data.page.seoDescription, pageURL, getImageUrl(data.page.seoImage));
+  }
+
   if (data?.page?.aboutSection?.title) {
     document.querySelector('#about-info .section-title').textContent = data.page.aboutSection.title;
   }
@@ -109,9 +125,6 @@ document.addEventListener('DOMContentLoaded', async () => {
     document.querySelector('#contact-section .section-body').innerHTML = portableTextToHTML(data.page.contactSection.body);
   }
 
-  // SEO
-  if (data) {
-    addSEOTags(data.global.title, data.page.seoDescription, pageURL, getImageUrl(data.page.seoImage))
-  }
+
 })
 
diff --git a/src/js/sanity.js b/src/js/sanity.js
@@ -60,6 +60,8 @@ const queryProjectGroup = (slug) => {
         status, 
         title, 
         technologies[]->{_id, title, slug,},
+        url,
+        repository,
       },
     }[0]`;
 }

diff --git a/src/js/templates.js b/src/js/templates.js
@@ -26,7 +26,7 @@ function renderSkillsList(items) {
 
 export function projectCard(project) {
   return `
-    <div class="project card">
+    <li class="project card">
       <div class="inner flex-col-1">
         <div class="img-wrap">
           <img src="${getImageUrl(project.mainImage).size(400,400)}" alt="${project.mainImage.altText || 'App screenshot'}" class="card">
@@ -37,7 +37,7 @@ export function projectCard(project) {
         </div>
         <div class="card-action links">${getLinks(project)}</div>
       </div>
-    </div>`;
+    </li>`;
 }
 
 export function skillsCard(list) {

diff --git a/src/pages/home.html b/src/pages/home.html
@@ -42,9 +42,9 @@ <h2 class="section-title font-reenie text-neon-pink">
         <div class="container flex-col-4">
             <h2 class="section-title font-reenie text-neon-pink"></h2>
             <div class="section-body text-center"></div>
-            <div id="card-grid" class="grid-cols-3">
+            <ul id="card-grid" class="grid-cols-3">
                 <!-- Inject project cards here -->
-            </div>
+            </ul>
         </div>
     </section>