/gmzcodes

πŸ‘¨β€πŸ’» Dani Gamez's personal website PWA built using JavaScript, SCSS and HTML5.

Primary LanguageJavaScript

GMZcodes

πŸ‘¨β€πŸ’» Dani Gamez's personal website PWA built using vanilla JavaScript, SCSS and HTML5.

πŸš€ Check it out at https://gmzcodes.com!



Running It (Development)

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 http://localhost:8080/.


Reporting a problem

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.


TODOs & Bug

Bugs


JS Paint Features

  • Move cursor position to a corner.

  • Multiple types and sizes of brushes (square, circle).

  • Consider a non-pixel-art version of the app where you can use a regular "pen" brush.

  • Custom colors.

  • Undo/redo.

  • Resize and keep canvas.

  • Multitouch on mobile.

  • Block trajectory in X/Y or diagonal axis.

  • Fill tool.

  • Upload / scale panel and controls.


Other Features

  • Rebuild nav so that actions are just icons at the bottom of the screen and move settings to their own page.

  • Add an anchor to quickly launch / access the focus mode.

  • Add gimmicky sounds to some clicks: paint splash sound (color), recycle bin sound to clear...

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

  • Show artist picture.

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

  • Toggle cursor type (native (default + pen), custom, both). Consider using 2 settings, one for regular interaction and the other one for drawing.

  • Consider removing vibration toggle (it can be done from the phone).


Tech Debt

  • Update dependencies.

  • Use a <template> for .content__warningHeader.

  • Review aria tags and code organization.


Some other sites I've built

  • 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!

  • Stars.js

    ✨ Generate a rotating galaxy in a canvas.

  • 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!


Author

Dani GΓ‘mez Franco

Dani GΓ‘mez Franco

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

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