borntofrappe / borntofrappe

My personal website! Built with SvelteKit, deployed through Netlify. Hopefully soon.

Hi there

Name's Gabriele Corti. I write delightful code, and I might be good at it.

borntofrappe's Issues

smil helper components

Following #13 created component(s) to apply the gradient and stroke to a custom element

evaluate color palette

The dark theme recently introduced by github is a source of inspiration. Consider for instance the labels with a colorful border and a semi-transparent fill, as in the screen capture which follows.

create icons.js at build time

currently, the icons are included with the object like syntax created with a node script in the Utils folder. It is better to have the icons in the src folder, and have a script populate icons.js before running 11ty

smil components

Considering the lessons introducing Wario Ware D.I.Y. design three interactions/games with SVG+SMIL:

• #17
• #18
• #19

chrome doesn't respect the end attribute

The SMIL demo isolated in FightTheEnemy doesn't work on Chrome, at least. Even if you defeat the enemy the animation continues with the attack from the opposing side.

It seems webkit browsers have an issue with the end attribute on the delayed set element — starts at 122

<set
id="fightTheEnemyHpDrop{i - 1}"
begin="fightTheEnemyShow{hpEnemy - 1}.begin + {hpDropDelay}s"
end="fightTheEnemyHpHit0.begin" />

find the butterflies

From Wario Ware D.I.Y.'s tutorial games you are tasked to tap numerous objects — butterflies.

In terms of SMIL the interaction is similar to #17 and #18 but you need to declare a victory when all targets are tapped. The objects should also stand still and move only when clicked.

poke the ladybug

From Wario Ware D.I.Y.'s tutorial games you are tasked to tap a critter on the screen.

In terms of SMIL the interaction is simple enough to rely on the begin attribute set to click.

pop the balloon

From Wario Ware D.I.Y.'s tutorial games you are tasked to tap a floating object.

In terms of SMIL the interaction is similar to #17 but the object should move away from the center of the screen.

design smil.svg

follow the example of the icons in the /static folder to create a custom icon for the /smil route

keep client-side hydration disabled in /smil route

SvelteKit updated how to disable client side hydration. The version of the kit used to develop the /smil route relies on the older, deprecated version.

export const hydrate = false;

Once you update the kit update the line as well.

export const csr = false;

[docs] fix typos

found a typo on line 160 of src/lib/components/rainbow-sixteen/Puzzle.svelte

-Play a new round of rainbox sixteen
+Play a new round of rainbow sixteen

Instead of fixing the issue immediately I take the opportunity to list errors as I review the codebase in the next couple of days

Looking for contact!

Hi! I wanted to discuss a project with you based on your plinko work on codepen but couldn't find any contact info on your personal site. Can you please give me an email that I can contact you at, thanks!

[feature] syntax highlighting

This is something I wanted from the very beginning. Since the website is set to include articles discussing web development/code in general, it is highly request to highlight code feces according to the chosen language

review current state

The project is rather dormant, as I found myself devoted to other repositories (code, game-development). That being said, I consider it one of the milestones for the github profile, and one of the most important project for the foreseeable future.

redesign intro.svg

Consider an update to the .svg file included in the README.md as an introduction. The style currently clashes with outro.svg, pixelated in style and animated with sprites.