https://github.com/hqcasanova/hqcasanova.github.io

Vue 3 portfolio website of a UX-aware frontend engineer with an academic background in scientific Java and over 5 years making single-page web applications.
https://github.com/hqcasanova/hqcasanova.github.io

3d-animations flexbox javascript mobile-first single-page-app vue3 vuex

Last synced: about 9 hours ago
JSON representation

Vue 3 portfolio website of a UX-aware frontend engineer with an academic background in scientific Java and over 5 years making single-page web applications.

• Host: GitHub
• URL: https://github.com/hqcasanova/hqcasanova.github.io
• Owner: hqcasanova
• Created: 2021-04-03T10:23:19.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-18T14:03:29.000Z (over 1 year ago)
• Last Synced: 2023-08-13T22:51:26.410Z (over 1 year ago)
• Topics: 3d-animations, flexbox, javascript, mobile-first, single-page-app, vue3, vuex
• Language: Vue
• Homepage: https://hqcasanova.github.io/
• Size: 6.55 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# HQCasanova - Portfolio

Vue 3 mobile-first app using pure-CSS parallax to provide a brochure-like experience within the routing constraints of GitHub's environment. A learning experiment of sorts, the emphasis is on optimal rendering path, animation performance (Chrome is the baseline) and usability.

For example, routed views are all pre-emptively rendered and stacked so that reflows/repaints are minimised. This in turn means disabling interactions through the relatively new `inert` attribute for all views, except the "current" one.

All without using any component or CSS library. The only plugins used are for adding swipe, intersection observer, inert and clipboard support. Not even for internationalisation, for which I made my own rudimentary JSON-based system: [`en.json`](/docs/en.json) and [`es.json`](/docs/es.json).

Among many others, the most significant limitation of the approach taken is the removal of body scrolling. Further research is required ;D