👨💻 Dani Gamez's personal website PWA built using vanilla JavaScript, SCSS and HTML5.
🚀 Check it out at https://gmzcodes.com!
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: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.
-
Implement
JsPaint.drawImage()
function andDropZone
component. -
Fix
Nav
not showing the right cursor when the menu is opened. -
Fix custom cursor movement logic.
-
Fix cursor show/hide logic (hide cursor when it leaves the page and while resizing).
-
Close menu when enabling focus mode.
-
Ruler should be below Nav.
-
Add semi-transparent blurred backgrounds.
-
Fix accessibility sound.
-
Add custom metadata (
devicePixelRatio
,date
) to downloaded file. -
Check metadata to upload (
Use PNG metadata to know if an image was generated...
). -
Hide "Hiring?" label in focus mode.
-
Focus mode should ONLY show a hamburger icon in the footer.
-
Hide "Hiring", as I'm not looking anymore.
-
Change wand icon.
-
TODO: Consider updating the cursor position continuously if in interactive mode:
-
TODO: Replace the
this.lastDrawingIndex !== randomIndexwith AbortController and signals:
-
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/
- Consider breaking down the canvas into smaller ones (tiles).
- Consider adding other brush shapes, like any other standard drawing app (e.g https://www.youtube.com/watch?v=3GqUM4mEYKA)
-
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.
-
Make the canvas size multiple of
unit
, so that "partial pixels" are downloaded without cropping.
-
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.
-
Rebuild nav so that actions are just icons at the bottom of the screen and move settings to their own page.
-
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).
-
Update dependencies.
-
Use a
<template>
for.content__warningHeader
. -
Review aria tags and code organization.
-
🎹 The classic Stylophone, now in your phone and computer.
-
⌨ Press any key to get the JavaScript keyboard event event key, code, which, keyCode and more properties!
-
🎰 Circular slot machine mobile-first SPA built with JavaScript, CSS variables and Emojis!
-
✨ Generate a rotating galaxy in a canvas.
-
💼 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