Merge pull request #81 from EmaSuriano/update-dependencies

.env.example

@@ -0,0 +1,2 @@
+NOTION_API_KEY=
+DATABASE_ID=

.github/workflows/pr-checker.yml

@@ -18,4 +18,4 @@ jobs:
       - run: yarn build
         env:
           NOTION_API_KEY: ${{secrets.NOTION_API_KEY}}
-          DATABASE_ID: ${{secrets.DATABASE_ID}}
+          DATABASE_ID: ${{secrets.DATABASE_ID}}

.prettierrc.mjs

@@ -0,0 +1,3 @@
+export default {
+  plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
+}

README.md

@@ -6,7 +6,7 @@
 
 > Art portfolio built with Astro and using Notion API.
 
-## [Demo ✨](https://art.emasuriano.com/)
+## [Demo ✨](https://astro-art-portfolio.netlify.app)
 
 ## Screenshots 📸
 
@@ -38,12 +38,9 @@
 
 * Duplicate the following [notion page](https://www.notion.so/emasuriano/dec82b99ec35407b830fa219863511be?v=54eba236190b4911b58cbdbb328244c1)
 * Replace the default values with your pictures and labels. The images are created based on: [label] [link].
-* Clone repository, and create an `.env` file at the root level and define the following variables:
-
-```plain
-NOTION_API_KEY=
-DATABASE_ID=
-```
+* Clone repository, 
+* Install dependencies by running: `yarn install`
+* Rename the file called `.env.example` to `.env` file and fill all the values.
 * You can find how to get these values for your page inside [the official documentation of Notion](https://developers.notion.com/docs/working-with-databases).
 
 ## Automate deploy of website 🚀 (Optional)

astro.config.mjs

@@ -1,9 +1,9 @@
 import { defineConfig } from 'astro/config';
 import { astroImageTools } from 'astro-imagetools';
-import tailwind from '@astrojs/tailwind';
-import compress from 'astro-compress';
+import Tailwind from '@astrojs/tailwind';
+import Compress from 'astro-compress';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [astroImageTools, tailwind(), compress()],
+  integrations: [astroImageTools, Tailwind(), Compress()],
 });

package.json

@@ -7,23 +7,26 @@
     "dev": "astro dev",
     "start": "astro dev",
     "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro"
+    "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/tailwind": "^2.1.3",
-    "@notionhq/client": "^2.2.6",
-    "@types/probe-image-size": "^7.2.0",
-    "astro": "^1.6.12",
+    "@astrojs/check": "^0.3.1",
+    "@astrojs/tailwind": "^5.0.2",
+    "@notionhq/client": "^2.2.13",
+    "@types/probe-image-size": "^7.2.4",
+    "astro-compress": "^2.2.3",
     "astro-icon": "^0.8.1",
-    "astro-imagetools": "^0.8.1",
-    "photoswipe": "^5.3.8",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.11.0",
+    "astro-imagetools": "^0.9.0",
+    "photoswipe": "^5.4.2",
+    "prettier": "^3.1.0",
+    "prettier-plugin-astro": "^0.12.2",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "probe-image-size": "^7.2.3",
-    "tailwindcss": "^3.3.3"
+    "svgo": "2.8.0",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.2"
   },
   "dependencies": {
-    "astro-compress": "^1.1.15"
+    "astro": "^3.5.5"
   }
 }

src/components/Footer.astro

@@ -1,20 +1,20 @@
 ---
-import { ROUTES, SOCIAL, PERSONAL_INFO } from '../consts';
-import { Icon } from 'astro-icon';
+import { ROUTES, SOCIAL, PERSONAL_INFO } from "../consts";
+import { Icon } from "astro-icon";
 
 const year = new Date().getFullYear();
 ---
 
 <footer>
-  <div class="flex flex-col items-center mt-12 gap-4 mb-4">
+  <div class="mb-4 mt-12 flex flex-col items-center gap-4">
     <div class="flex gap-4">
       {
         SOCIAL.map((social) => (
           <a href={social.href} target="_blank">
             <Icon
               name={social.icon}
               aria-label={social.label}
-              class="w-5 h-5"
+              class="h-5 w-5"
               fill="currentColor"
               width="24"
               height="24"
@@ -25,19 +25,19 @@ const year = new Date().getFullYear();
     </div>
 
     <nav
-      class="flex flex-wrap justify-center md:justify-start gap-x-4 gap-y-2 md:gap-6"
+      class="flex flex-wrap justify-center gap-x-4 gap-y-2 md:justify-start md:gap-6"
     >
       {ROUTES.map((route) => <a href={route.href}>{route.label}</a>)}
     </nav>
 
-    <div class="text-gray-500 text-sm text-center">
+    <div class="text-center text-sm text-gray-500">
       © {year} - {PERSONAL_INFO.name}
     </div>
   </div>
 </footer>
 
 <style>
   a {
-    @apply text-gray-500 hover:text-gray-600 active:text-gray-600 dark:hover:text-gray-400 dark:active:text-gray-400 transition-colors;
+    @apply text-gray-500 transition-colors hover:text-gray-600 active:text-gray-600 dark:hover:text-gray-400 dark:active:text-gray-400;
   }
 </style>

src/consts.ts

@@ -29,15 +29,15 @@ export const SOCIAL = [
 ] as const;
 
 export const PERSONAL_INFO = {
-  name: 'Ema Suriano',
-  title: "Ema Suriano's Art",
+  name: 'Astro Art',
+  title: "Astro Art",
   subtitle: 'A collection of my best work in one place',
   role: 'Digital Artist',
-  contact: 'mailto:emanuel.suriano@gmail.com',
+  contact: 'mailto:astro.example@gmail.com',
   avatar:
     'https://cdn.discordapp.com/attachments/1023544104698773564/1049350422290251847/Ema_portrait_of_a_young_man_with_background_of_snow_mountains_i_f1762cd5-f4f3-4107-839c-194dab4dffa7.png',
   about:
-    'During the day I am Software Engineer, but at night I switched into my Artistic side. Most of my creations are made with Mid Journey (AI generation), and later on improved using Adobe Photoshop.',
+    'Welcome to Astro Art, fusing art and tech with Astro.js for a seamless digital experience. Explore curated masterpieces effortlessly, welcoming the future of art appreciation.',
 } as const;
 
 export const SEO_INFO = [

src/layouts/Layout.astro

@@ -1,12 +1,12 @@
 ---
-import { SEO_INFO } from '../consts';
+import { SEO_INFO } from "../consts";
 
 type Props = { title: string };
 
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ const { title } = Astro.props;
   <body class="bg-slate-50 dark:bg-slate-800">
     <slot />
     <script>
-      import '../load-gallery.js';
+      import "../load-gallery.js";
     </script>
   </body>
 </html>

src/pages/about.astro

@@ -1,63 +1,57 @@
 ---
-import { Img } from 'astro-imagetools/components';
-import Layout from '../layouts/Layout.astro';
-import Footer from '../components/Footer.astro';
-import { PERSONAL_INFO } from '../consts';
+import { Img } from "astro-imagetools/components";
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import { PERSONAL_INFO } from "../consts";
 
 const { role, name, avatar, contact, about } = PERSONAL_INFO;
 
 const title = `${name} - About`;
 ---
 
 <Layout title={title}>
-  <div class="py-4 sm:py-6 lg:py-8 flex flex-col justify-between h-screen">
-    <main class="mb-auto align-middle flex flex-col items-center">
+  <div class="flex h-screen flex-col justify-between py-4 sm:py-6 lg:py-8">
+    <main class="mb-auto flex flex-col items-center align-middle">
       <div class="my-8 sm:my-12">
         <h2
-          class="text-gray-800 dark:text-white text-2xl lg:text-3xl text-center mb-4 md:mb-6 font-semibold"
+          class="mb-4 text-center text-2xl font-semibold text-gray-800 dark:text-white md:mb-6 lg:text-3xl"
         >
           About me
         </h2>
       </div>
 
       <div
-        class="bg-white dark:bg-slate-900 py-4 sm:py-8 w-fit mx-4 rounded-xl"
+        class="mx-4 w-fit rounded-xl bg-white py-4 dark:bg-slate-900 sm:py-8"
       >
         <div class="max-w-screen-lg px-4 md:px-8">
-          <div class="grid sm:grid-cols-2 gap-8 items-center">
+          <div class="grid items-center gap-8 sm:grid-cols-2">
             <div
-              class="flex flex-col justify-center items-center sm:items-start py-8 sm:py-24"
+              class="flex flex-col items-center justify-center py-8 sm:items-start sm:py-24"
             >
               <p
-                class="text-indigo-500 text-sm md:text-base font-semibold uppercase mb-4"
+                class="mb-4 text-sm font-semibold uppercase text-indigo-500 md:text-base"
               >
                 {role}
               </p>
               <h1
-                class="text-gray-800 dark:text-gray-200 text-2xl md:text-3xl font-bold text-center sm:text-left mb-4"
+                class="mb-4 text-center text-2xl font-bold text-gray-800 dark:text-gray-200 sm:text-left md:text-3xl"
               >
                 {name}
               </h1>
 
-              {
-                about
-                  .split('.')
-                  .map((text) => (
-                    <p class="text-gray-500 md:text-lg text-center sm:text-left mb-8">
-                      {text}
-                    </p>
-                  ))
-              }
+              <p class="mb-8 text-center text-gray-500 sm:text-left md:text-lg">
+                {about}
+              </p>
 
               <a
                 href={contact}
-                class="inline-block bg-gray-200 hover:bg-gray-300 focus-visible:ring ring-indigo-300 text-gray-500 active:text-gray-700 text-sm md:text-base font-semibold text-center rounded-lg outline-none transition duration-100 px-8 py-3"
+                class="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base"
                 >Contact</a
               >
             </div>
 
             <div
-              class="h-fit bg-gray-100 max-w-xs sm:max-w-md mx-auto overflow-hidden shadow-lg rounded-full relative object-cover object-center"
+              class="relative mx-auto h-fit max-w-xs overflow-hidden rounded-full bg-gray-100 object-cover object-center shadow-lg sm:max-w-md"
             >
               <Img src={avatar} alt="Portrait" width={600} format="webp" />
             </div>

src/pages/index.astro

@@ -1,18 +1,18 @@
 ---
-import { Img } from 'astro-imagetools/components';
-import probe from 'probe-image-size';
-import Layout from '../layouts/Layout.astro';
-import Footer from '../components/Footer.astro';
-import { PERSONAL_INFO } from '../consts';
-import { getNotionItems } from '../utils';
+import { Img } from "astro-imagetools/components";
+import probe from "probe-image-size";
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import { PERSONAL_INFO } from "../consts";
+import { getNotionItems } from "../utils";
 
 const notionItems = await getNotionItems({
   auth: import.meta.env.NOTION_API_KEY,
 });
 
 const images = await Promise.all(
   notionItems.map(async ({ plain_text }) => {
-    const index = plain_text.lastIndexOf(' ');
+    const index = plain_text.lastIndexOf(" ");
     const label = plain_text.substring(0, index);
     const href = plain_text.substring(index + 1);
     const size = await probe(href);
@@ -23,26 +23,26 @@ const images = await Promise.all(
 ---
 
 <Layout title={PERSONAL_INFO.title}>
-  <div class="py-4 sm:py-6 lg:py-8 flex flex-col justify-between h-screen">
+  <div class="flex h-screen flex-col justify-between py-4 sm:py-6 lg:py-8">
     <main class="mb-auto">
       <div class="my-8 sm:my-12">
         <h2
-          class="text-gray-800 dark:text-white text-2xl md:text-3xl lg:text-4xl text-center mb-4 md:mb-6 font-semibold"
+          class="mb-4 text-center text-2xl font-semibold text-gray-800 dark:text-white md:mb-6 md:text-3xl lg:text-4xl"
         >
           {PERSONAL_INFO.title}
         </h2>
 
         <p
-          class="max-w-screen-md dark:text-slate-400 text-gray-500 md:text-lg text-center mx-auto"
+          class="mx-auto max-w-screen-md text-center text-gray-500 dark:text-slate-400 md:text-lg"
         >
           {PERSONAL_INFO.subtitle}
         </p>
       </div>
 
-      <div class="max-w-screen-xl px-4 md:px-8 mx-auto">
+      <div class="mx-auto max-w-screen-xl px-4 md:px-8">
         <div
           id="my-gallery"
-          class="pswp-gallery grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 xl:gap-8 gallery"
+          class="pswp-gallery gallery grid grid-cols-2 gap-4 sm:grid-cols-3 md:gap-6 lg:grid-cols-4 xl:gap-8"
         >
           {
             images.map((image) => (
@@ -51,9 +51,9 @@ const images = await Promise.all(
                 data-cropped="true"
                 data-pswp-width={image.size.width}
                 data-pswp-height={image.size.height}
-                class="group h-72 md:h-96 flex justify-end items-end bg-gray-100 overflow-hidden rounded-xl shadow-lg relative gallery-item hover:shadow-xl"
+                class="gallery-item group relative flex h-72 items-end justify-end overflow-hidden rounded-xl bg-gray-100 shadow-lg hover:shadow-xl md:h-96"
               >
-                <div class="w-full h-full flex object-cover object-center absolute inset-0 group-hover:scale-110 transition duration-200 text-transparent">
+                <div class="absolute inset-0 flex h-full w-full object-cover object-center text-transparent transition duration-200 group-hover:scale-110">
                   <Img
                     src={image.href}
                     alt={image.label}
@@ -62,9 +62,9 @@ const images = await Promise.all(
                   />
                 </div>
 
-                <div class="bg-gradient-to-t from-black via-transparent to-transparent opacity-20 absolute inset-0 pointer-events-none group-hover:opacity-0 transition duration-200" />
+                <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-20 transition duration-200 group-hover:opacity-0" />
 
-                <span class="inline-block text-gray-200 text-xs md:text-sm border border-gray-500 rounded-lg backdrop-blur relative px-2 md:px-3 py-1 mr-3 mb-3 group-hover:opacity-0 transition duration-200">
+                <span class="relative mb-3 mr-3 inline-block rounded-lg border border-gray-500 px-2 py-1 text-xs text-gray-200 backdrop-blur transition duration-200 group-hover:opacity-0 md:px-3 md:text-sm">
                   {image.label}
                 </span>
               </a>