zurCode
This is a collection of webs, concepts, components, plugins, code... a lab.
There is a special order for the items: no order.
Responsive Personal portfolio done with React and TS, NextJS, Tailwind, Github Actions (CI/CD)
Calculate compound interest for a given principal amount, interest rate, and time period.
Export data to csv.
Practice. Getting countries from a GraphQL API using Apollo, React, TS and Tailwind.
Pomodoro Timer App with a clean, modern, and slightly neumorphic design. Options to modify work time and break time. You can choose the alarm sound from a few alternatives.
Created Stamp Duty Land Tax (UK) calculator
following [government rules](https://www.gov.uk/stamp-duty-land-tax/residential-property-rates) for residential properties
Example of accordion made with vanilla JavaScript and Materialize
Another accordion made with vanilla JavaScript and CSS
Playing with Hackernews API, ask feed to create a dynamic grid
deployed on surge.sh from the terminal
Playing with Reddit API, reactjs subreddit feed to create a list of articles.
Styled with styled-components and deployed on surge.sh from the terminal
Basic Break time alarm built in node app.
It's a useful reminder to strech your legs every now and then when sitting in front of the computer for many hours.
github repo with easy-to-follow instructions to setup on your computer
Creation of an interactive SVG map to enhance the experience on Cool Earth charity project to halt deforestation and protect rainforest
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
A simple UI made of JS where you can play different sounds based on your keyboard keys.
Have fun!
React app example following Wes Bos React course. Learning on the way:
Brand redesign for a company.
Created this responsive website using PHP CodeIgniter framework.
The idea behind this was for everyone to access in a quick and easy way to the brand guidelines and downloadables
Alpha Engineering Solutions has been at the forefront of the manufacturing of precision-machined parts and assemblies for over 18 years. I designed a concept for their re-brand and corporate website. I created a strong but very simple logo design along with a minimalist website design.
While I was building RAVN brand guidelines from scratch I was in need of colors written in different color codes, so I built this app where I can add a color and quickly get lighter and darker versions.
Simple page that displays a white rectangle centred on a black background. When the user taps the white square, it animates the white rectangle so that it fills the screen, and then animates to its original dimensions. This entire sequence takes 3 seconds to complete.
The orientation and positioning of the square is consistent between portrait and landscape orientations. (Meaning that the left + right sides is higher in portrait mode and the top + bottom sides longer in landscape).
The rectangle's initial dimensions is 20% of the devices width and height respectively.
The page is optimised for webkit mobile devices (android and iOS).
The final product is executable purely within the browser without relying on a backend.Teran Frias believe that exceptional design is usable, simple and beautiful. I used a minimalist approach for the design created to be responsive.
Bulles d'Or is a company who delivers baby food and was planning this event for their launching
From a given PSD file, the final result of a functional website with animations, in a couple of days.
Eden Pansion is a Hostel located in Bosnia-Herzegovina to host pilgrims who are visiting Medjugorje.
This project was a complete redesign of this sport and business media company. Before was one screen website, with a few lines of information, no form and no design.
This site started as a reference manual from my personal JS studies. I think this manual could be reference point for others who are in this incredible journey of program development.
From a given "users" JSON object I wrote the code needed to display it on a website folloing this format:
- A User ID Tag is a 300x300px square filled with the tag background color.
- Display a User ID Tag for each user.
- The users should be sorted by their IDs.
- The tag background colors should be randomly picked - different for each user and different with every refresh.
- On mouse-over each tag should change to have white background and display user name, mention name and email in black.
- The tags should be displayed in a never ending grid - 3 tags per row, as many rows as needed to display all users.
- Number of tags per row is reduced with the screen size so on narrow screens we will just see one column of user tags.
This is a project started while playing with python libraries, modules and classes. I'm really enjoying programming!
This is a basic app while playing with angular.js framework.
Looks horrible because I didn't spent my time with the css, but it is working!
This is a gallery of Ascii art, where you can add your own!. Some of this are not mine, but are here to enjoy for everyone. Thanks
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.