Merge pull request #2 from AndreAnimator/portfolio

Portfolio

Author: AndreAnimator

public/images/bluesky.png

@@ -25,6 +25,7 @@ const t = useTranslations(lang);
         <li><a href={`/${lang}/`} class="text-teal-900 font-bold">{t('nav.home')}</a></li>
         <li><a href={`/${lang}/about`} class="text-teal-900 font-bold">{t('nav.about')}</a></li>
         <li><a href={`/${lang}/blog`} class="text-teal-900 font-bold">Blog</a></li>
+        <li><a href={`/${lang}/portfolio`} class="text-teal-900 font-bold">{t('nav.portfolio')}</a></li>
         <li><ThemeDropdown name="theme"></ThemeDropdown></li>
         <LanguagePicker></LanguagePicker>
     </ul>

public/images/desktop_screenshot.png

@@ -4,43 +4,44 @@ import { getLangFromUrl } from '../i18n/utils';
 import blog  from "../data/blog.json";
 
 function getIndex(aux: string, lang: string){
+  var index = 0;
   var filteredObj = blog.find(function(item, i){
     if(lang == 'en'){
       if(item.en === aux){
+        index = i
         return i;
       }
     }
     else{
       if(item.ptbr === aux){
+        index = i
         return i;
       }
     }
   });
-  return 0;
+  if(!filteredObj){
+    return index;
+  }else{
+    return index;
+  }
 }
 
 function getPath(lang_org: string){
   let lang = getLangFromUrl(Astro.url);
   var url = Astro.url.pathname.split( '/' );
   var title = '';
-  console.log(url)
-  console.log(blog[0].en)
   if(url.length > 3 && (url[2] == 'blog' || url[2] == 'portfolio')){
     var aux = url[3];
     if(lang_org == 'en'){
       var i = getIndex(aux, lang);
-      title = blog[i].en
+      title = blog[i].en;
     }else{
       var i = getIndex(aux, lang);
-      title = blog[i].ptbr
+      title = blog[i].ptbr;
     }
-    console.log("oiii");
     var string = Astro.url.pathname;
-    console.log(string);
     string = string.replace(`/${lang}/`, '');
-    console.log(string);
     string = string.replace(`/${url[3]}`, `/${title}`);
-    console.log(string);
     return string;
   }
   return Astro.url.pathname.replace(`/${lang}/`, '');

public/images/mobile_screenshot.png

@@ -8,8 +8,6 @@ type Props = {
 };
 
 const { post } = Astro.props;
-console.log(post.data.image)
-console.log(post.id)
 const [lang, ...slug] = post.id.split('/');
 ---
 

public/images/stoicats_banner.png

@@ -0,0 +1,43 @@
+---
+import { type CollectionEntry } from "astro:content";
+import { Image } from "astro:assets";
+import { getLangFromUrl } from "../i18n/utils";
+
+type Props = {
+    project: CollectionEntry<'projects'>;
+};
+
+const { project } = Astro.props;
+const [lang, ...slug] = project.id.split('/');
+---
+
+<article>
+    <a href={`/${lang}/portfolio/${slug}`}>
+        <Image
+            src={project.data.image}
+            width={600}
+            height={600 / 1.5}
+            alt={project.data.title}
+            class="rounded-2xl shadow-xl mb-4 aspect-thumbnail object-cover"
+        />
+    </a>
+    <a
+        href={`/${lang}/portfolio/${slug}`}
+        class="text-4xl text-zinc-900 font-semibold inline-block"
+    >
+        <h2>{project.data.title}</h2>
+    </a>
+    <div class="tags grid grid-cols-6">
+        {project.data.categories.map((tag: string) => (
+        <p class="tag"><a href={`/${lang}/project-tags/${tag}`}>{tag}</a></p>
+        ))}
+    </div>
+    <div class="urls grid grid-cols-3">
+        <a class="text-4xl text-zinc-900 font-semibold inline-block" href={`${project.data.docs}`}> DOCS </a>
+        <a class="text-4xl text-zinc-900 font-semibold inline-block" href={`${project.data.url}`}> URL </a>
+        <a class="text-4xl text-zinc-900 font-semibold inline-block" href={`${project.data.github}`}> GITHUB </a>
+    </div>
+    <p class="text-zinc-500 text-2xl line-clamp-2">
+        {project.body}
+    </p>
+</article>

public/images/stoicats_icon.png

@@ -0,0 +1,15 @@
+---
+import type { CollectionEntry } from "astro:content";
+import Project from './Project.astro';
+type Props = {
+    projects: CollectionEntry<'projects'>[];
+};
+
+const { projects } = Astro.props;
+---
+
+<div
+    class="grid grid-cols-2 gap-x-16 gap-y-14 max-md:grid-cols-1 mb-24"
+>
+    {projects.map((project) => <Project project={project} />)}
+</div>