th3s4mur41 / mh-photography.com Goto Github PK

Define a performance budget and make sure it is matched by running performance test in CI

Chrome:

Safari:

My name is Manuel Hamel, born and raised in a small region of Belgium between Germany and the Netherlands. Growing up in this environment has pushed me to always give my best to address people in the language they feel most comfortable with. I’m fluent in German, French, Spanish and English and have a solid basis in Dutch.

I have always been passionate about photography and traveling. I never miss a chance to take my camera on a trip to immortalize great moments and locations.
In 2012 I studied photography. Just about a year later, I received my diploma with the note “excellent”!

Since then, I’ve been working on a variety of projects, however both my specialty and passion is People and Lifestyle photography in all its aspects. The portfolio on this page includes several snapshots of my work. From artistic to commercial pictures.

I hope you enjoyed my work…

With height set to 100%, the mobile viewport never switches to full screen (hiding controls).

Add created by with link to https://th3s4mur41.me in the footer

Check whether the following quote could be added (maybe to the albums section).

"I really believe there are things nobody would see if I didn't photograph them" - Diane Arbus

• Add share option to the footer
• Add share option to photos

https://web.dev/web-share/

Needs #526

favicon.ico cannot be gzipped

https://webpagetest.org/performance_optimization.php?test=211005_AiDc4Y_c756b6ffa1a24718d1238e3040f912ea&run=2#compress_text

Prefer using SVG or JPG/PNG

• preload fonts
• fetch above-the-fold images in album with high priority
• Lazy load secondary hero images
• Replace Titillium through Variable font Cairo
• Inline critical css and lazy load the rest: https://github.com/nystudio107/rollup-plugin-critical

https://web.dev/content-visibility/

• Improve robot settings

• Consider reencoding with squoosh
• Serve optimized hero image based on height

Needs #330

https://www.npmjs.com/package/@squoosh/cli

• Add a better filename and title
• Set more exif data like date taken

• Add keywords: 'mh', 'manuel', 'hamel'
  

• Add Schema markup

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
    "description": "A short description about your business.",
  "url" : "https://www.yourdomain.com",
  "address":
    {
      "@type": "PostalAddress",
      "streetAddress": "123 Street Name",
      "addressLocality": "City",
      "addressRegion": "State",
      "postalCode": "12345",
      "addressCountry": "USA"
    },
  "sameAs":[
  "https://www.facebook.com/yourbusiness/",
  "https://www.linkedin.com/company/your-business/",
  "https://twitter.com/yourbusiness/"
  ]
}
</script>

Only a click outside the image should.
Potentially also add an explicit close button

Add a video section after the photo section
https://www.youtube.com/@manuhamel/videos

https://docs.astro.build/en/recipes/i18n/

• Use didot font family or similar for headlines
• Use titillium web font family or similar for content

Space and Enter should open focused album while Esc should close it

https://webpagetest.org/performance_optimization.php?test=211005_AiDc4Y_c756b6ffa1a24718d1238e3040f912ea&run=2#compress_text

• Optimize SVG
• Consider exporting SVG into a sprite

Add call and email button to header and footer
Needs #191

• Update subtitle
• Update hero pics (waiting on new pics)
• Improve animation (smooth instead of linear)

• Add the logo to the footer

• Add favicon
  https://webpagetest.org/performance_optimization.php?test=211005_AiDc4Y_c756b6ffa1a24718d1238e3040f912ea&run=2#compress_text

  Prefer using SVG or JPG/PNG to support gzip

• Add app/manifest icons

Replace ESlint and Prettier through Rome for JS and TS files

Add intersection observer to highlight the correct navigation menu item

https://www.youtube.com/watch?v=G_h2pGZcOzc

• #275
• #276
• #277
• #278
• #279

• Update the photo
• Update the layout
• Update the text (to come)
• add mailto button

• update address (from facebook)
• update mobile phone
• update instagram (replace both through private)

• Reorder to give more importance to wedding and people album
• reduce vertical space and fit into viewport (incl. sticky header)
• move title onto the image using the new headline font family

Enhance navigation to have a collapsed version on narrow screens

Lazy loading is already setup for carousel images, but not for the 'hero' images on the main page.
Those background images should be replaced through pictures to leverage lazy loading

Check out https://github.com/WICG/inert to achieve this

Adapt LICENSE to MIT with exception of the assets

The header curently uses a single hero image.
It should be replaced through a sliding carousel