Merge pull request #3 from cammarb/dev

New Feature: Add GitHub API + "Linktree" page for music project(s)
cammarb · Apr 1, 2023 · eb8c1a9 · eb8c1a9
2 parents 9fe1b6c + 5bd3f66
commit eb8c1a9
Show file tree

Hide file tree

Showing 8 changed files with 599 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@fontsource/roboto-mono": "^4.5.10",
     "astro": "^2.1.3",
     "astro-icon": "^0.8.0",
+    "octokit": "^2.0.14",
     "tailwindcss": "^3.0.24"
   },
   "engines": {

diff --git a/public/artist-icon.jpg b/public/artist-icon.jpg
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,29 +1,32 @@
 ---
-import HeaderLink from "./HeaderLink.astro";
-import { SITE_TITLE } from "../consts";
-import { Icon } from "astro-icon";
+import HeaderLink from './HeaderLink.astro';
+import { SITE_TITLE } from '../consts';
+import { Icon } from 'astro-icon';
 ---
 
-<header class="flex items-center justify-center flex-wrap mt-1 sm:mt-0">
-    <h3>
-        <HeaderLink href="/">{SITE_TITLE}</HeaderLink>
-    </h3>
-    <nav class="flex items-center gap-x-10 mt-4 sm:mt-0 sm:grow sm:justify-end">
-        <HeaderLink href="/projects">Projects</HeaderLink>
-        <HeaderLink href="/about">About</HeaderLink>
-        <HeaderLink href="https://github.com/cammarb" target="_blank">
-            <Icon name="ri:github-fill" width="25" />
-        </HeaderLink>
-        <HeaderLink href="https://www.linkedin.com/in/cammarb" target="_blank">
-            <Icon name="mdi:linkedin" width="25" />
-        </HeaderLink>
-    </nav>
+<header
+  class='grid items-center justify-center mt-1 sm:mt-0 sm:grid-flow-col sm:justify-between'
+>
+  <h3 class='text-center'>
+    <HeaderLink href='/'>{SITE_TITLE}</HeaderLink>
+  </h3>
+  <nav class='flex items-center gap-x-10 mt-4 sm:mt-0 sm:grow sm:justify-end'>
+    <HeaderLink href='/music'>
+      <Icon name='mdi:music-note-eighth' width='25' />
+    </HeaderLink>
+    <HeaderLink href='https://github.com/cammarb' target='_blank'>
+      <Icon name='ri:github-fill' width='25' />
+    </HeaderLink>
+    <HeaderLink href='https://www.linkedin.com/in/cammarb' target='_blank'>
+      <Icon name='mdi:linkedin' width='25' />
+    </HeaderLink>
+  </nav>
 </header>
 <style>
-    header {
-        margin: 0em 0 2em;
-    }
-    h2 {
-        margin: 0.5em 0;
-    }
+  header {
+    margin: 0em 0 2em;
+  }
+  h2 {
+    margin: 0.5em 0;
+  }
 </style>
diff --git a/src/components/TechStack.astro b/src/components/TechStack.astro
@@ -1,17 +1,17 @@
 ---
-import type { HTMLAttributes } from "astro/types";
+import type { HTMLAttributes } from 'astro/types';
 
-type Props = HTMLAttributes<"button">;
+type Props = HTMLAttributes<'button'>;
 
 const { class: className, ...props } = Astro.props;
 ---
 
 <a
-    class:list={[
-        className,
-        "px-3 py-2 rounded flex justify-center bg-emerald-100 hover:bg-emerald-200",
-    ]}
-    {...props}
+  class:list={[
+    className,
+    'px-3 py-2 rounded flex justify-center items-center bg-emerald-100 hover:bg-emerald-200',
+  ]}
+  {...props}
 >
-    <slot />
+  <slot />
 </a>
diff --git a/src/consts.ts b/src/consts.ts
@@ -1,5 +1,5 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = "Camila Martinez";
-export const SITE_DESCRIPTION = "Welcome to my website!";
+export const SITE_TITLE = 'cammarb';
+export const SITE_DESCRIPTION = 'Welcome to my website!';
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,57 +1,102 @@
 ---
-import BaseHead from "../components/BaseHead.astro";
-import Header from "../components/Header.astro";
-import Footer from "../components/Footer.astro";
-import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
-import HomeLinks from "../components/HomeLinks.astro";
-import { Icon } from "astro-icon";
-import TechStack from "../components/TechStack.astro";
+import BaseHead from '../components/BaseHead.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import HomeLinks from '../components/HomeLinks.astro';
+import { Icon } from 'astro-icon';
+import TechStack from '../components/TechStack.astro';
+import Button from '../components/Button.astro';
+import { Octokit } from 'octokit';
+
+const octokit = new Octokit({
+  auth: process.env.GITHUB_TOKEN,
+});
+
+const result = await octokit.request('GET /users/cammarb/repos', {
+  user: 'cammarb',
+  sort: 'updated',
+  per_page: 6,
+});
+
+// const repo = {
+//   name: 'amena',
+//   description: 'this is the desciprtion',
+//   updated_at: '2023-03-26T15:17:32Z',
+//   html_url: 'http://website.com',
+// };
 ---
 
 <!DOCTYPE html>
-<html lang="en">
-    <head>
-        <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-    </head>
-    <body class="min-h-screen flex flex-col">
-        <Header title={SITE_TITLE} />
-        <main
-            class="h-full flex flex-grow place-content-center place-items-center"
+<html lang='en'>
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+  </head>
+  <body class='min-h-screen flex flex-col'>
+    <Header title={SITE_TITLE} />
+    <main
+      class='h-full flex flex-grow flex-col place-content-center place-items-center gap-16 mt-10'
+    >
+      <!-- <div class="w-screen min-h-screen fixed top-0 right-0 left-0 -z-10 bg-slate-200 animate-pulse"></div> -->
+
+      <div>
+        <h1 class='font-black'>Hey, I'm Camila 👋</h1>
+        <h2 class='font-black'>and I'm a Web Developer.</h2>
+        <div
+          class='tech-stack grid grid-rows-3 grid-cols-2 gap-2 mt-4 justify-items-stretch sm:grid-rows-2 sm:grid-cols-4'
         >
-            <!-- <div class="w-screen min-h-screen fixed top-0 right-0 left-0 -z-10 bg-slate-200 animate-pulse"></div> -->
-            <div>
-                <h1 class="font-black">Hey, I'm Camila 👋</h1>
-                <h2 class="font-black">and I'm a Web Developer.</h2>
-                <div
-                    class="tech-stack grid grid-rows-3 grid-cols-2 gap-2 mt-4 justify-items-stretch sm:grid-rows-2 sm:grid-cols-4"
-                >
-                    <p class="self-end mb-1 col-span-2 sm:col-span-4">
-                        Technologies and programming languages:
-                    </p>
-                    <TechStack>ReactJS</TechStack>
-                    <TechStack>Javascript</TechStack>
-                    <TechStack>Flask</TechStack>
-                    <TechStack>Python</TechStack>
-                </div>
-                <div class="music-links grid grid-flow-row gap-2 mt-8">
-                    <p>Check out my music:</p>
-                    <HomeLinks
-                        href={"https://open.spotify.com/track/7rXGDVMlkU27WjlWgcZbnc?si=a14bba72851b4552"}
-                    >
-                        <Icon name="mdi:spotify" width="20" class="mr-3" />
-                        Listen to "no time"
-                    </HomeLinks>
-                    <HomeLinks href={"https://youtu.be/VyVytZmtNmA"}>
-                        <Icon name="mdi:youtube" width="20" class="mr-3" />
-                        "no time" Official Music Video
-                    </HomeLinks>
-                    <HomeLinks href={"https://soundcloud.com/camcanta"}>
-                        <Icon name="mdi:soundcloud" width="20" class="mr-3" />
-                        Demos and Covers
-                    </HomeLinks>
+          <p class='self-end mb-1 col-span-2 sm:col-span-4'>
+            Technologies and programming languages:
+          </p>
+          <TechStack>ReactJS</TechStack>
+          <TechStack>Javascript</TechStack>
+          <TechStack>Flask</TechStack>
+          <TechStack>Python</TechStack>
+        </div>
+        <div class='mt-10 flex justify-center'>
+          <a
+            href='https://drive.google.com/file/d/1l6bkdP3v26GdQYF_We_MlgCdsFLKje38/view?usp=share_link'
+            target='_blank'
+          >
+            <Button class={'animate-bounce flex'}>
+              <Icon name='ph:file-pdf' width='25' class='pr-2' />
+              My resume
+            </Button>
+          </a>
+        </div>
+      </div>
+
+      <div>
+        <h2 class='font-black mb-5'>Projects I'm currently working on</h2>
+        <div class='grid gap-5 grid-cols-1 sm:grid-cols-3'>
+          {
+            result.data.map((repo) => {
+              return (
+                <div class='bg-slate-100 rounded justify-center items-center p-4'>
+                  <p class='font-bold text-lg mb-1'>{repo.name}</p>
+                  <p class='mb-1'>{repo.description}</p>
+                  <a
+                    href={repo.html_url}
+                    class='flex gap-1 text-emerald-400 font-bold mt-1 hover:text-emerald-500'
+                  >
+                    <Icon name='ri:github-fill' width='20' />
+                    GitHub
+                  </a>
+                  <p class='mt-4'>
+                    Last modified on{' '}
+                    {new Date(repo.updated_at).toLocaleString('de-DE', {
+                      day: 'numeric', // numeric, 2-digit
+                      year: 'numeric', // numeric, 2-digit
+                      month: 'long', // numeric, 2-digit, long, short, narro
+                    })}
+                  </p>
                 </div>
-            </div>
-        </main>
-        <Footer />
-    </body>
+              );
+            })
+          }
+        </div>
+      </div>
+    </main>
+    <Footer />
+  </body>
 </html>
diff --git a/src/pages/music.astro b/src/pages/music.astro
@@ -0,0 +1,58 @@
+---
+import { Icon } from "astro-icon";
+import BaseHead from "../components/BaseHead.astro";
+import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
+import HeaderLink from "../components/HeaderLink.astro";
+import HomeLinks from "../components/HomeLinks.astro";
+
+const { title, description, image = "/artist-icon.jpg" } = Astro.props;
+---
+
+<html lang="en">
+    <head>
+        <BaseHead title={title} description={description} />
+    </head>
+
+    <body class="min-h-screen flex flex-col">
+        <!-- <Header /> -->
+        <main
+            class="h-full flex flex-col flex-grow place-content-center place-items-center"
+        >
+            <div class="flex align-middle justify-center">
+                <img src={image} alt="" class="rounded-full max-w-[30%]" />
+            </div>
+            <div
+                class="music-links grid grid-flow-row gap-2 my-8 max-w-[80%] sm:max-w-[60%] mx-auto"
+            >
+                <HomeLinks
+                    href={"https://open.spotify.com/track/7rXGDVMlkU27WjlWgcZbnc?si=a14bba72851b4552"}
+                >
+                    <Icon name="mdi:spotify" width="20" class="mr-3" />
+                    "no time" in Spotify
+                </HomeLinks>
+                <HomeLinks
+                    href={"https://music.apple.com/us/album/no-time/1557673169?i=1557673170"}
+                >
+                    <Icon name="mdi:apple" width="20" class="mr-3" />
+                    "no time" in Apple Music
+                </HomeLinks>
+                <HomeLinks href={"https://youtu.be/VyVytZmtNmA"}>
+                    <Icon name="mdi:youtube" width="20" class="mr-3" />
+                    "no time" Official Music Video
+                </HomeLinks>
+                <HomeLinks href={"https://soundcloud.com/camcanta"}>
+                    <Icon name="mdi:soundcloud" width="20" class="mr-3" />
+                    Demos and Covers
+                </HomeLinks>
+            </div>
+            <div class="mt-7">
+                Check out my web development
+                <HeaderLink href={"/"} class={"text-emerald-500 font-bold"}>
+                    portfolio
+                </HeaderLink>
+            </div>
+        </main>
+        <Footer />
+    </body>
+</html>