✨ feat: use the github api to fetch repositories + fixes in the main page's card

also added dedicated about page 😛

Author: retrozinndev

src/components/Navigation.tsx

@@ -28,7 +28,7 @@ const pages: Array<Page> = [
     },
     {
         name: "about",
-        href: "/#about",
+        href: "/about",
         hasI18n: true
     },
     {

src/components/ProjectCard.astro

@@ -1,40 +1,40 @@
 ---
 import { Image } from "astro:assets";
+import { FaRegStar } from "react-icons/fa6";
 
-export interface Project {
-    icon?: string;
-    developer: string;
-    title: string;
+interface Props {
+    icon: string;
     description: string;
+    title: string;
+    developer: string;
     href: string;
+    stars: number;
 }
 
-const { icon, developer, title, description, href } = Astro.props;
+const { icon, developer, title, description, href, stars } = Astro.props;
 ---
 
-<div class="project-card" id="projectCard" data-href={ href }>
+<div class="project-card" id="projectCard" onclick={`window.open("${href}", "_blank")`}>
     <div class="developer">
-        <Image class="icon" src={ icon ?? 
-                `https://github.com/${developer}.png?size=72`
-            }  alt="dev profile picture" width={32} height={32} loading={"lazy"}
-             />
+        <Image class="icon" src={
+              icon ?? `https://github.com/${developer}.png?size=72`
+          } alt="dev profile picture" width={32} height={32} loading={"lazy"}
+        />
 
         <span class="developer-name">{ developer }</span>
+        <div class="stars" style={`display: ${stars > 0 ? "inline-flex" : "none"}`}>
+            {stars}
+            <FaRegStar width={16} size={14} style={{
+                marginLeft: 2
+            }} />
+        </div>
     </div>
     <h1>{ title }</h1>
     <p>
         { description }
     </p>
 </div>
 
-<script>
-    const projectCard = document.getElementById("projectCard") as HTMLDivElement;
-
-    if(projectCard != undefined) {
-        projectCard.onclick = () => 
-            window.open(projectCard.getAttribute("data-href")!, "_blank");
-    }
-</script>
 
 <style lang="scss">
 
@@ -82,16 +82,38 @@ const { icon, developer, title, description, href } = Astro.props;
         margin-top: 6px;
     }
 
+    .stars {
+        display: inline-flex;
+        width: 100%;
+        font-size: 12px;
+        font-weight: 400;
+        color: lightgray;
+    }
+
+    body.light .stars {
+        color: color.adjust($color: gray, $lightness: -20%);
+    }
+
     .developer {
-        display: flex;
+        display: inline-flex;
+        width: 100%;
+        align-items: center;
 
         & .developer-name {
             font-size: 12px;
+            display: inline-flex;
             color: color.adjust($color: white, $lightness: -20%);
             font-weight: 600;
-            margin-block: auto;
+            width: 100%;
             margin-left: 6px;
         }
+
+        & .stars {
+            display: inline-flex;
+            width: max-content;
+            align-items: center;
+            font-size: 12px;
+        }
     }
 
     body.light .developer-name {

src/components/ProjectsComponent.astro

@@ -1,19 +1,26 @@
 ---
-import ProjectCard, { type Project } from "./ProjectCard.astro";
+import type { Repository } from "../scripts/repos";
+import ProjectCard from "./ProjectCard.astro";
 
 interface Props {
-    projects: Array<Project>;
+    projects: Array<Repository>;
 }
 
 const { projects } = Astro.props;
 ---
 
 <div class="projects"> {
-    projects.map(project => (
+    projects.sort((pja, pjb) => pjb.stargazers_count - pja.stargazers_count).map(project => 
         <div class="item">
-            <ProjectCard {...project} />
+            <ProjectCard title={project.name} 
+              description={project.description}
+              href={project.html_url}
+              developer={project.owner.login}
+              icon={project.owner.avatar_url}
+              stars={project.stargazers_count}
+            />
         </div>
-    ))
+    )
 } </div>
 
 <style lang="scss">

src/components/SocialLinks.astro

@@ -4,13 +4,17 @@ import { FaGithub, FaGitlab, FaXTwitter, FaReddit, FaDiscord } from "react-icons
 import { FiMail } from "react-icons/fi";
 import LinkButton from "./LinkButton.astro";
 
+interface Props {
+    style?: string;
+}
+
 type SocialLink = {
     name: string;
     href: string;
     icon: IconType
 };
 
-const socials: Array<SocialLink> = [
+export const socials: Array<SocialLink> = [
     {
         name: "GitHub",
         href: "https://github.com/retrozinndev",
@@ -42,19 +46,11 @@ const socials: Array<SocialLink> = [
         icon: FiMail
     }
 ];
----
 
-<!-- Discord User Widget by vendicated (https://vendicated.dev/) -->
-<iframe id="discordEmbed"
-    title="Discord"
-    width={340}
-    height={120}
-    sandbox="allow-scripts"
-    style="display: none"
-    onclick=`window.open("${socials[2].href}", "_blank")`
- />
+const { style } = Astro.props;
+---
 
-<ul class="social-links"> {
+<ul class="social-links" style={style}> {
     socials.map(social => 
         <li class="social-link">
             <LinkButton href={social.href} external={true} 
@@ -89,7 +85,14 @@ const socials: Array<SocialLink> = [
     .social-links {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         list-style: none;
         padding: 0;
     }
+
+    @media screen and (max-width: 800px) {
+        .social-links {
+            justify-content: center;
+        }
+    }
 </style>

src/pages/[lang]/about.astro

@@ -0,0 +1,62 @@
+---
+import { getStaticPaths } from "../../i18n/route";
+import LinkButton from "../../components/LinkButton.astro";
+import PageLayout from "../../layouts/PageLayout.astro";
+
+export { getStaticPaths };
+---
+
+<PageLayout title="About">
+    <div class="block">
+        <h1>About</h1>
+        <p>
+        I'm a high school student from Brazil.
+        I absolutely love open-source and programming stuff!
+        </p>
+
+        <h2>Journey</h1>
+        <p>
+        I've been learning a lot stuff about programming and GNU/Linux since 2022.
+        </p>
+        <p>
+            I've been using GNU/Linux as my primary operating system since last year, with 
+            <LinkButton href="https://fedoraproject.org/workstation" spacing={false} external>
+                Fedora Workstation
+            </LinkButton> and 
+            then in the start of this year, moving to 
+            <LinkButton href="https://archlinux.org" external spacing={false}>
+                Arch Linux
+            </LinkButton>.
+        </p>
+
+        <h2>Interests</h2>
+        <p>
+            Besides tech, I really like watching Anime! I am a guy that really likes slice of life, 
+            romance, comedy and drama 😜, my favorite shows are 
+            <a href="https://pt.wikipedia.org/wiki/Oshi_no_Ko">Oshi no Ko</a>, 
+            <a href="https://pt.wikipedia.org/wiki/Bocchi_the_Rock!">Bocchi The Rock!</a> and 
+            <a href="https://pt.wikipedia.org/wiki/Kaoru_Hana_wa_Rin_to_Saku">The Fragrant Flower Blooms with Dignity</a>.
+        </p>
+        <LinkButton external href="https://myanimelist.net/profile/retrozinndev">
+            My Anime List
+        </LinkButton>
+
+        <h2>Recent Projects</h2>
+        <p>
+            I started working on a Desktop Environment recently, called 
+            <a href="https://github.com/retrozinndev/colorshell">colorshell</a>.
+            It's made to be used with the 
+            <LinkButton href="https://hypr.land" external spacing={false}>
+                Hyprland Wayland Compositor
+            </LinkButton>,
+            making usage of amazing technologies like GnomeJS, TypeScript, GTK 4, AGS and the Astal Libraries to create a nice environment for your desktop.
+        </p>
+        <p>
+            There's also a music player I've been working on, but it's a little bit abandoned for now. 
+            Still, I have a lot of ideas for it, so I won't be completely abandoning the app!!
+            <br>
+            The Music Player is called <a href="https://github.com/retrozinndev/Vibe">Vibe</a>,
+            it's expected to use GnomeJS, GTK, Gnim and GStreamer to make things work.
+        </p>
+    </div>
+</PageLayout>

src/pages/[lang]/index.astro

@@ -6,18 +6,24 @@ import PageLayout from '../../layouts/PageLayout.astro';
 import SocialLinks from "../../components/SocialLinks.astro";
 import LinkButton from "../../components/LinkButton.astro";
 import ProjectsComponent from "../../components/ProjectsComponent.astro";
-import { projects } from "./projects.astro";
+import { getMyRepos } from "../../scripts/repos";
 
 export { getStaticPaths };
 const tr = useTranslations(Astro.params.lang as never);
+
+const highlightProjects = (await getMyRepos()).sort((rp1, rp2) =>
+    rp1.stargazers_count - rp2.stargazers_count
+).toSpliced(0, 6); // show the 6 most-starred repos
 ---
 
-<PageLayout title={ "retrozinndev - Home" } navSpacing="4em" sideSpacing="4px" flex={true} sideSpacing="8px">
+<PageLayout title={ "retrozinndev - Home" } navSpacing="4em" sideSpacing="4px" flex={true} 
+  sideSpacing="8px" pfpOnNavigation={false}>
+
     <div class="block">
         <div class="flex">
             <div class="card">
                 <div class="image-container">
-                    <Image src={"https://1.gravatar.com/avatar/093b64d2016ab8acce8a2fe73cb719f527790d4ecec7f5837db8d46519b38bf8?size=1920"} 
+                    <Image src={"https://1.gravatar.com/avatar/093b64d2016ab8acce8a2fe73cb719f527790d4ecec7f5837db8d46519b38bf8?size=900"} 
                     width={512} format="webp" height={512} alt={"Profile Picture"} class={"image"} loading={"lazy"} />
                 </div>
 
@@ -29,6 +35,14 @@ const tr = useTranslations(Astro.params.lang as never);
 
                     <h2 class="socials">{tr("about.socials_title")}</h2>
                     <div class="socials">
+                        <iframe
+                          title="Discord user embed"
+                          width="340"
+                          height="120"
+                          frameborder="0"
+                          sandbox="allow-scripts"
+                          src="https://widgets.vendicated.dev/user?id=568589231954591749&theme=dark&banner=true&full-banner=false&rounded-corners=true&discord-icon=false&badges=false&guess-nitro=false&"
+                        />
                         <SocialLinks />
                     </div>
                 </div>
@@ -42,7 +56,7 @@ const tr = useTranslations(Astro.params.lang as never);
                 <LinkButton href="https://github.com/retrozinndev?tab=repositories" external={true} spacing={false}>GitHub</LinkButton>
             </p>
             <div class="projects">
-                <ProjectsComponent {projects} />
+                <ProjectsComponent projects={highlightProjects} />
             </div>
         </div>
     </div>
@@ -97,6 +111,7 @@ const tr = useTranslations(Astro.params.lang as never);
             background-color: colors.$bg-navbar-color-light;
         }
 
+        /* medium */
         @media (max-width: 1100px) {
             .card .image-container {
                 display: flex;
@@ -111,6 +126,7 @@ const tr = useTranslations(Astro.params.lang as never);
             }
         }
 
+        /* small (generally phones) */
         @media (max-width: 800px) {
             .card {
                 display: block;
@@ -129,13 +145,9 @@ const tr = useTranslations(Astro.params.lang as never);
                     text-align: center;
                 }
 
-                & div.socials {
-                    display: flex;
-                    margin-inline: auto;
-
-                    &:last-child {
-                        display: block;
-                    }
+                & .socials {
+                    display: block;
+                    text-align: center;
                 }
             }
         }