Diego Kfuri
software developer & curious
- lately using react, vue and svelte
- learning python & systems design
- in love with design & games
Dailymon
A website built to try out react-query and the new version of some cool libraries. This project brought challenges such as concurrent api calls and how to deal with loading/empty states. Was a challenge to improve the first image/pixel brought to the user as it loads. The colors are evaluated by the pokemon type and it generates all the palette.
Developed with React using Next.js. The styling and design was built while I coded with the help of Chakra UI. The animation was
built with framer motion. The color palette is being created with the pokemon type and chroma-js.Deployment was done using
Vercel. The data is obtained from a public API called pokeapi.
- React
- Next.js
- react-query
- SEO
- Deploy hooks
- Chakra UI
- Framer Motion
- Typescript
- Vercel
Pop Blog
A blog made for a friend who wanted to write his ideas about
anime, was a good opportunity to learn more about some new
technologies and try to
extract the best for SEO.
Developed with React using Gatsby. The whole
style was done using the tailwind classes. The animation was
built with framer motion. Many plug-ins,
settings and learning header tags to reach
four 100 scores at lighthouse. The website
can be installed using PWAs. Deployment was done using
Vercel. The data is being created in
Contentful and statically generates a new
build to achieve maximum performance.
- React
- Gatsby
- MDX
- SEO
- Offline-ready
- TailwindCSS
- Framer Motion
- Contentful
- Typescript
- Vercel
Covid no Brasil
A project designed to
deliver information about the spread of
COVID-19 in Brazilian states.
Developed with Svelte using
Sapper, a framework for building
high-performance web apps. All the styling was made using the
Svelte style scoped block, that is, pure CSS.
The data is obtained from an public API made by brazilians.
The deploy was done using Vercel.
- Svelte
- Sapper
- CSS
- Axios
- Vercel
- Javascript
Superheroes
A project built with the intention of learning more about
Next.js, TailwindCSS and
creating a good experience for users.
Developed with React using Next.js. The whole style was done
using the tailwind classes. The animation was built with
framer motion. The implantation was done
using Vercel. The data is obtained from an
API called superheroapi.
- React
- Next.js
- TailwindCSS
- Vercel
- Axios
- Framer Motion
- Javascript