TEXT
DESIGNER
A real-time visual design tool for designing text by editing a font's various css properties via sliders and colour pickers. By toggling the code view, you can copy the styles in either jsx or css (sass), and paste directly in your own project!
Create drop shadows and gradients, which are generally a pain to write out and test incrementally.
Element Edge Designer
Design an element as ugly or as beautiful as you want! (The example image here went for the former)
Obviously the second thing to showcase is yet another tool on this site. This one is an element designer. It allows you to create a border around an element, and then copy the css code to use in your own project. Add drop shadows, customize element colours and border radius, and more.
I frequently use these tools in my own projects, and I find it much easier and faster to use a visual tool to create the styles, and then copy the code, rather than writing it out by hand and tweaking each property. Much like the text designer, this tool is built with React, Typescript, and TailwindCSS.
ReactJS
Typescript
TailwindCSS
Framer Motion
NextJS
Shutter Photography
Photography Portfolio. Modern. Minimal. Responsive. A single page application, with an image slider, and different coloured themes for each section. A lightbox to highlight the images.
Built first with Javascript, html, and sass. Using flask (python server), then ported to React, and once again to NextJS.
ReactJS
Typescript
Sass
Binge
A movie trailer single page application. Using ReactJS and The Movie Database, and Youtube API's. Built in a day, there is much more to be done to make it into a full application, but a fun project.
ReactJS
Typescript
NextJS
