zurCode

Web Collection

This is a collection of webs, concepts, components, plugins, code... a lab.

There is a special order for the items: no order.

Some links might be broken because they were made years ago...

Personal Portfolio React - Typescript - Next - Tailwind - CI/CD

Responsive Personal portfolio done with React and TS, NextJS, Tailwind, Github Actions (CI/CD)


link to the site

Recipes Application React - TypeScript - Vite

An interactive app for searching recipes.

Users can search by ingredient, or by country, by category or simply typing a word.

Each recipe has the ingredients, amounts, description and if there is, a YouTube video explaining step by step

Enjoy!


link to the site

Angular Learning Application Angular 20 - SCSS - Signals - Animations - Routing

A comprehensive interactive Angular application demonstrating modern patterns, signals, components, animations, forms, and UI patterns.

Built with Angular 20+ and standalone components.


link to the site

Cornell Notes Taking Method HTML, CSS (SCSS), Vanilla JS (web API)

To take notes and download. Light and Dark themes.


link to the site

Users App Angular 13 - custom CSS (SCSS) - RXJS - NGRX - TS - JEST

Users App.


link to the site

Compound Calculator App (up or down) React - mui-material - chart.js

Calculate compound interest for a given principal amount, interest rate, and time period.

Export data to csv.


link to the site

Countries - GraphQL practice React - Vite - Tailwind - TS - GraphQL - Apollo

Practice. Getting countries from a GraphQL API using Apollo, React, TS and Tailwind.


link to the site

Monster Slayer Game HTML - CSS - Vanilla JS

Challenge: Monster Slayer Game - one file


link to the site

Coaching Website React - Vite - Tailwind - TypeScript

Personalised coaching website project


link to the site

Pomodoro Timer Website React 19

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.


link to the site

Jquery to Angular migration Website React - Vite - Tailwind - Typescript

Project made to help with a company's app migration from jquery to angular.


link to the site

Huddle Landing Page React 18 - Styled Components - TypeScript

Frontend Mentor challenge to practice React + TS + Styled Components


link to the site

Digital clock Angular 15 - custom CSS - TS

Digital Clock


link to the site

Tic tac toe game Vite - React

Tic tac toe game


link to the site

Weather App Angular 7 - material - openweathermap API

Weather app.


link to the site

Mixer clone HTML CSS

Mixer clone


link to the site

Life Coach Responsive website Tailwind CSS, responsive

Responsive Design for an imaginary Life Coach website made with Tailwind CSS


link to the site

Random Meal generator Vanilla JS - Skeleton CSS

Example of a random meail generator made with vanilla JavaScript and Skeleton


link to the site

Tip Calculator Vanilla JS - CSS

Tip calculator made with vanilla JavaScript and CSS


link to the site

Movie trailers page Vite - React - TS

EMovie trailes responsive page


link to the site

Playing with Grid CSS in Codepen CSS Grid

Examples of CSS Grid layouts


Header, Sidebar, Content, Footer

col / row span classes

Playing with websites - Chucrushrek HTML - CSS

An example of a intermediate HTML CSS website


Chucrushrek

Best Meat html, css (Skeleton), js

Website idea.


link to the site

Filterable List with Vanilla JS Vanilla JS - Materialize

Example of a filterable list made with vanilla JavaScript and Materialize


link to the site

Accordion implementation with Vanilla JS Vanilla JS - (Materialize)

Example of accordion made with vanilla JavaScript and Materialize


link to the site


Another accordion made with vanilla JavaScript and CSS


link to the site

Github repositories' search Github repo Search - angular 7

Testing Angular 7. Cli, components, services, Http client


link to the site

Node.js break-time alarm node

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

Dynamic SVG map SVG - HTML - CSS - JS - jQuery - Responsive

Creation of an interactive SVG map to enhance the experience on Cool Earth charity project to halt deforestation and protect rainforest


link to the site

CSS Grid and flexbox Music app design demo - CSS Grid, flexbox

Music app demo using CSS Grid and flexbox


link to the site

Semantic.ui cheatsheet

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.


link to the site

Movie Search Movie search (mobile) demo - React, CSS Grid, flexbox

Movie search. React.js + CSS grid + flexbox. Mobile view for the moment


link to the site

drum kit JS

A simple UI made of JS where you can play different sounds based on your keyboard keys.

Have fun!


link to the site

CSS clock CSS

Digital clock made of CSS.

Have fun!


link to the site

JS clock JS

Analog clock made of JS/CSS.

Have fun!


link to the site

Alpha Engineering Branding and website design

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.


link to the site

Fillscreen Development -jquery

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.


link to the site

Teranfrias Front end (Foundation) - responsive

Teran Frias believe that exceptional design is usable, simple and beautiful. I used a minimalist approach for the design created to be responsive.

link to the site

ASP PSD to html, css, js (jquery) - animation

From a given PSD file, the final result of a functional website with animations, in a couple of days.


link to the site

Eden Pansion Website design

Eden Pansion is a Hostel located in Bosnia-Herzegovina to host pilgrims who are visiting Medjugorje.


link to the site

Reference manual - JavaScript development - JS

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.


link to the site

Ascii gallery art development - HTML, CSS, PYTHON

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


link to the site