feat: update avatar

Author: DerYeger

cypress/e2e/navigation.spec.ts

@@ -10,7 +10,12 @@ describe('Navigation', () => {
 
   it('has a link to the blog page', () => {
     cy.get('nav').within(() => cy.contains('Blog').click())
-    cy.location('pathname').should('eq', '/blog/')
+    cy.location('pathname').should('eq', '/blog')
+  })
+
+  it('has a link to the photography page', () => {
+    cy.get('nav').within(() => cy.contains('Photography').click())
+    cy.location('pathname').should('eq', '/photography')
   })
 })
 

src/assets/avatar.png

@@ -1,7 +1,7 @@
 ---
 import { Image } from 'astro:assets'
 
-import avatar from '~/assets/avatar.webp'
+import avatar from '~/assets/avatar.png'
 ---
 
 <Image
@@ -12,7 +12,5 @@ import avatar from '~/assets/avatar.webp'
   width={1000}
   sizes="1000px"
   loading="eager"
-  oncontextmenu="return false"
-  ondragstart="return false"
-  on-touchstart="return false"
+  style="pointer-events: none !important;"
 />

src/assets/avatar.webp

@@ -12,10 +12,14 @@ const isActive = href === Astro.url.pathname
     href={href}
     rel="prefetch"
     class:list={[
-      'inline-block transition-border no-underline px-3 py-1 rounded text-sm  border hover:text-black hover:dark:text-white hover:border-neutral-400',
+      'inline-block transition-border no-underline px-3 py-1 rounded text-sm border',
+      'hover:text-black hover:bg-neutral-50  hover:border-neutral-400', // light hover state
+      'hover:dark:text-white hover:dark:bg-transparent hover:dark:border-neutral-600', // dark hover state
+      'active:border-neutral-600 active:bg-neutral-100', // light active state
+      'active:border-neutral-400 active:bg-transparent', // dark active state
       {
-        'border-transparent ': !isActive,
-        'border-neutral-200': isActive,
+        'border-transparent': !isActive,
+        'border-neutral-200 dark:border-neutral-800': isActive,
       },
     ]}
     {...props}

src/components/Avatar.astro

@@ -1,5 +1,13 @@
+---
+interface Props {
+  id: string
+}
+
+const { id } = Astro.props
+---
+
 <div class="prose prose-xl flex flex-col">
-  <h2 class="text-center">
+  <h2 class="scroll-mt-20 text-center" id={id}>
     <slot name="title" />
   </h2>
   <ul class="prose">

src/components/HeaderLink.astro

@@ -21,8 +21,8 @@ const awards: Award[] = [
 ].sort((a, b) => b.date.localeCompare(a.date))
 ---
 
-<CVList>
-  <span slot="title" id="awards">Awards</span>
+<CVList id="awards">
+  <span slot="title">Awards</span>
   {
     awards.map((entry) => (
       <li>

src/components/cv/CVList.astro

@@ -28,8 +28,8 @@ const education: Education[] = [
 ].sort((a, b) => b.startDate.localeCompare(a.startDate))
 ---
 
-<CVList>
-  <span slot="title" id="education">Education</span>
+<CVList id="education">
+  <span slot="title">Education</span>
   {
     education.map((entry) => (
       <li>

src/components/cv/award/Awards.astro

@@ -48,8 +48,8 @@ const experience: Experience[] = [
 ].sort((a, b) => b.startDate.localeCompare(a.startDate))
 ---
 
-<CVList>
-  <span slot="title" id="experience">Experience</span>
+<CVList id="experience">
+  <span slot="title">Experience</span>
   {
     experience.map((entry) => (
       <li>

src/components/cv/education/Education.astro

@@ -1,4 +1,5 @@
 ---
+import Mark from '~/components/showcase/Mark.astro'
 import Showcase from '~/components/showcase/Showcase.astro'
 import ShowcaseDescription from '~/components/showcase/ShowcaseDescription.astro'
 import ShowcaseTitle from '~/components/showcase/ShowcaseTitle.astro'
@@ -10,7 +11,7 @@ const name = 'Experiments'
   <div class="prose dark:prose-invert">
     <ShowcaseTitle>{name} 🛠️</ShowcaseTitle>
     <ShowcaseDescription>
-      A space for ideas and doodles that don't fit the scope of a
+      A space for <Mark>ideas and doodles</Mark> that don't fit the scope of a
       dedicated project.
     </ShowcaseDescription>
   </div>