👨‍💻 Dani Gamez's personal website PWA built using vanilla JavaScript, SCSS and HTML5.

🚀 Check it out at https://gmzcodes.com!

💩 No IE or (old) Edge. Get the f**k off my property!

Take a look at package.json, the scripts are self-explanatory, but otherwise npm install and npm start work in 90% of teh cases :D

The project will be accessible at https://localhost:8080/.

Don't hesitate to report any issue you find in this website/project by opening a new issue in this repository, but please make sure that problem hasn't been reported before by another user.

• The canvas looks blurry on screens with decimal DPI values. See https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas.

• Configure GitHub actions.

• Update dependencies.

• Add an option to send drawings to me (to Supabase, maybe).

• Show artist picture?

• Add "Hiring?" and attribution inside the menu too.

• Use a <template> for .content__warningHeader

• Add a placeholder for the page logo in case it doesn't load.

• Review aria tags and code organization.

• Adjust side paddings to be included in the header links and button.

• Improve performance on large high-res screens. See:

  • https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
  • https://github.com/karellodewijk/canvas-webgl
  • https://github.com/jagenjo/Canvas2DtoWebGL
  • https://www.reddit.com/r/webgl/comments/sc4024/is_webgl_fast_than_canvas_api_for_drawing_a_bunch/

• Screenshot mode with multiple sizes.
• Multitouch on mobile.
• Undo/redo.
• Resize and keep canvas.
• Block trajectory in X/Y or diagonal axis.
• Image upload. See https://medium.com/@agbales/how-to-make-8-bit-art-with-javascript-eea808a70ba2
• Fill tool.
• Multiple sizes (or shapes) of brushes.
• Close menu when enabling focus mode.
• Toggle cursor type.
• Animate attribution tag.

• Stylophone.js

  🎹 The classic Stylophone, now in your phone and computer.

• Key.js

  ⌨ Press any key to get the JavaScript keyboard event event key, code, which, keyCode and more properties!

• Slot.js

  🎰 Circular slot machine mobile-first SPA built with JavaScript, CSS variables and Emojis!

• Job.js

  💼 Sharable image summaries for your open positions: Share your jobs as an image on LinkedIn and Instagram to get a visibility boost and more applicants!

Dani Gámez Franco

LinkedIn: https://www.linkedin.com/in/danigamezfranco/

Stack Overflow: https://stackoverflow.com/users/3723993/danziger