chore: generic maintenance (#456)

* chore: initial changes

Signed-off-by: mateonunez <mateonunez95@gmail.com>

* chore: general improvements

Signed-off-by: mateonunez <mateonunez95@gmail.com>

* perf: more changes

Signed-off-by: mateonunez <mateonunez95@gmail.com>

---------

Signed-off-by: mateonunez <mateonunez95@gmail.com>

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 
 # Synk
 .dccache
+.yarn
+.pnp.cjs
+.pnp.loader.mjs

.nvmrc

@@ -1 +1 @@
-v20
+v22

app/api/spotify/currently-listening/route.js

@@ -6,6 +6,7 @@ export async function GET() {
   const response = await getCurrentlyListening();
 
   if (!response) {
+    console.log(response);
     return NextResponse.json({ error: 'Spotify not available' }, { status: 503 });
   }
 

components/about/about.jsx

@@ -12,9 +12,9 @@ import cn from 'classnames';
 
 const goals = [
   { title: 'First Node.js contribution', progress: 100 },
-  { title: 'Work fully remote', progress: 90 },
+  { title: 'Work fully remote', progress: 100 },
+  { title: 'Make my first public talk', progress: 50 },
   { title: 'Learn Rust as I know JavaScript', progress: 40 },
-  { title: 'Make my first public talk', progress: 30 },
 ];
 
 const About = ({ ...props }) => {
@@ -42,7 +42,7 @@ const About = ({ ...props }) => {
               {/* Intro  */}
               <Fade direction="left" distance={150} delay={0.5} trigger={introRef}>
                 <div className={s.introInner} ref={introRef}>
-                  <span>I&apos;m a Senior Developer based in Milan 🤌</span>
+                  <span>I&apos;m a Software Engineer based in Milan 🤌</span>
                 </div>
               </Fade>
               {/* Profile */}
@@ -61,7 +61,7 @@ const About = ({ ...props }) => {
                       <div className={cn(s.profileQuote, 'text-right')}>”</div>
                     </div>
                     <div className="w-full">
-                      <p className="text-center font-bold text-amber-500 text-md">@mateonunez</p>
+                      <p className="font-bold text-center text-amber-500 text-md">@mateonunez</p>
                     </div>
                   </div>
                 </Fade>
@@ -106,7 +106,7 @@ const About = ({ ...props }) => {
                           <Link href="https://hlpy.co" passHref alt="hlpy" target="_blank" rel="noreferrer">
                             hlpy
                           </Link>{' '}
-                          as a Senior Developer.
+                          as a Software Engineer.
                         </span>
                       </div>
                       <div className={s.bio}>

components/about/about.module.css

@@ -1,9 +1,5 @@
 .root {
-  margin: auto 0 4rem;
-  display: flex;
-  flex-direction: column;
   font-size: 14px;
-  min-height: calc(100vh);
 }
 
 .title {
@@ -14,7 +10,7 @@
 }
 
 .intro {
-  margin: 2rem auto 0 auto;
+  /* margin: 2rem auto 0 auto; */
   width: 100%;
 }
 
@@ -32,9 +28,9 @@
 }
 
 .profileContainer {
-  width: 80%;
-  margin: 1rem auto 1rem auto;
+  /* margin: 1rem auto 1rem auto; */
   @apply rounded-lg shadow-lg;
+  padding: 2rem 0 2rem 0;
 }
 
 .profileInner {
@@ -48,8 +44,7 @@
 }
 
 .profileImage {
-  margin: 0 auto 1rem auto;
-  padding: 1rem 0 3rem 0;
+  margin: auto;
   overflow: hidden;
   @apply w-20 h-20 rounded-full shadow-lg;
 }

components/hero/hero.jsx

@@ -45,7 +45,7 @@ export default function Hero({ article, ...props }) {
           {/* Last Article */}
           <div className={s.lastArticle}>
             <Fade>
-              <h2 className="subtitle text-center">
+              <h2 className="text-center subtitle">
                 <Link href="/blog" title="Blog" aria-label="Blog" rel="canonical">
                   From the Blog
                 </Link>

components/hero/hero.module.css

@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: column;
   font-size: 14px;
-  min-height: calc(100vh);
+  /* min-height: calc(100vh); */
 }
 
 .container {

components/spotify/player/player.jsx

@@ -21,7 +21,14 @@ const Player = () => {
 
   const url = listening?.isPlaying ? listening.url : `${config.baseUrl}/spotify`;
 
-  const progress = useMemo(() => listening && (listening.progress / listening.duration) * 100, [listening]);
+  const progress = useMemo(() => {
+    if (listening?.isPlaying) {
+      const duration = listening.duration;
+      const progress = listening.progress;
+      return (progress / duration) * 100;
+    }
+    return 0;
+  }, [listening]);
 
   return (
     <>
@@ -36,12 +43,12 @@ const Player = () => {
             href={url}
           >
             {listening?.isPlaying ? (
-              <div className="h-auto w-auto">
+              <div className="w-auto h-auto">
                 {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img width="40" height="40" src={listening?.thumbnail} alt={listening?.album} />
               </div>
             ) : (
-              <Spotify className="h-10 w-10" color={'#1ED760'} />
+              <Spotify className="w-10 h-10" color={'#1ED760'} />
             )}
           </Link>
 
@@ -60,7 +67,7 @@ const Player = () => {
                   rel="noopener noreferer noreferrer"
                   title="Mateo Nunez on Spotify"
                 >
-                  <ChevronUp className="h-4 w-4 rotate-90" />
+                  <ChevronUp className="w-4 h-4 rotate-90" />
                 </Link>
               </div>
             </div>

lib/spotify.js

@@ -32,6 +32,7 @@ const getAccessToken = async () => {
 export const getCurrentlyListening = async () => {
   const { access_token: accessToken } = await getAccessToken();
   if (!accessToken) {
+    console.log('accessToken', accessToken);
     return;
   }
 

package.json

@@ -9,7 +9,7 @@
     "format": "biome format ./ --write"
   },
   "dependencies": {
-    "next": "^14.2.3",
+    "next": "^15.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -18,7 +18,7 @@
     "@elgorditosalsero/react-gtm-hook": "^2.7.2",
     "@mdx-js/loader": "^3.0.1",
     "@octokit/graphql": "^8.1.1",
-    "@tailwindcss/typography": "^0.5.13",
+    "@tailwindcss/typography": "^0.5.15",
     "@vercel/analytics": "^1.2.2",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.5.1",
@@ -36,6 +36,6 @@
     "swr": "^2.2.5",
     "tailwindcss": "^3.4.1"
   },
-  "packageManager": "yarn@4.2.2",
+  "packageManager": "yarn@4.5.3",
   "author": "mateonunez"
 }

public/site.webmanifest

@@ -6,7 +6,7 @@
   "start_url": "/",
   "name": "Mateo Nunez | ",
   "short_name": "Mateo Nunez",
-  "description": "Mateo Nunez | Senior Developer",
+  "description": "Mateo Nunez | Software Engineer",
   "icons": [
     {
       "src": "/icon-192x192.png",