Péter Szabó

Levendula Salon

A beautician asked me to upgrade her old business website. The project was an early endeavor of mine and took me 2 months and 2500 lines of css (I was only studying frontend for half a year, now it would be much shorter :) ). The end-result was a glassmorphism styled single-page application webpage with an animated background (even with fast load times), many sections, sized images, animated social media icons and even a blog made with Javascript below with many topics that she wrote!

Taraszovics Ágnes Copywriting

A freelancer copywriter friend has asked me to dream and build a portfolio webpage for her. After some questions and searching (for images and tech-solutions) I have built a glassmorphism style responsive portfolio webpage for her with multiple subpages, basic hover-effects, an animated mobile-view with a convenient hamburger menu and a working contact form that forwards her PHP-edited emails every time a client checks in for copywriting/strategy/article services.

To-Do-List

This HTML/CSS/JS practice-project oriented around CRUD was from a lesson by developedbyed. Compared to other such projects, this to-do-list also includes JSON local storage save functionality which allows the user to refresh the webpage without losing previously created list items.

The project's aim was to build an application for an imaginary hotel's registration page. The inputed client-data from the booking page's form was sent into a MongoDB database via node/Express.js application and then listed as a table format for the imaginary administrator. I longed to see data make the full-circle:
Frontend-->Backend-->Frontend

Travel Agency Landing Page

This landing page project was about understanding Glassmorphism, animated backgrounds and and different menu-effects. An imaginary travel agency seemed like a decent standpoint for this. I found the practice project lesson at Online Tutorials.

Pink Glassmorphism Landing Page

Glassmorphism practice landing page project with animated icons and buttons. I found the practice project lesson at Online Tutorials.

Restaurant Landing Page

This landing page practice project was part of Daniel Walter Scott's Udemy course about basics concepts like map and video embeddings. I've learnt a lot from Daniel and can recommend him as a teacher.

Bicycle Repair Shop Landing Page

Another project of the course of Daniel Walter Scott at Udemy. It was a great practice opportunity regarding forms, gradients and background images in divs.

Flying Leaves

Minor CSS practice-project I coded a couple of times. Good to practice transform/translate and animation in CSS. I found the practice project lesson at Online Tutorials.

Animated Social Media Icons and Buttons

Minor project about CSS animations regarding menu items, buttons and some colorful fun with animated social media icons. I found the practice project lesson at Online Tutorials.

3D Mirrored Images Turn on Hover

Minor project revolving around 3D and mirroring effect/animation possibilities for images in CSS. I found the practice project lesson at Online Tutorials.

Videos Pause or Play on Hover

This was a project about video background hover behavior. After the first click on hover the videos start playing and pause when the cursor is removed but continues on further hover where is stopped. I found the practice project lesson at Online Tutorials.

Glowing Switch Effects

This minor project showcased the basic concept of state-switching by clicking. The buttons individually make light on or off by clicking on them. I found the practice project lesson at Online Tutorials.

Glowing/Moving Falloutlike Icons Hover

This minor animation-project was about hover effects on individual icons moving around highly inspired by sci-fi themes. I found the practice project lesson at Online Tutorials.

Animated Theme Cards on Hover

Many webpages have animations tethered to the cards of their business services so this minor CSS animation felt really useful to learn. I found the practice project lesson at Online Tutorials.

Parallax Effect for Scrolling

A parallax effect can be a very powerful tool on a webpage while scrolling. 2D images almost feel like 3D. I could also practice changing the mood of an image by changing the background of and actual daytime image to a nighttime one. I found the practice project lesson at Online Tutorials.

Waving Concentric Circles

This interesting project was about making concenctric circles in 3D moving up and down while creating a circular ripple effect. Very good practice for span, nth-child, transform-translate and animation-management. I found the practice project lesson at Online Tutorials.

Rock Paper Scissors

Basic JavaScript practice project about randomization and event listeners. I found the practice project lesson at Ania Kubow. She was a very good teacher and I can recommend her! :)

Memory Game

This Javascript practice project was also about event listeners and randomization but the placement of the images needed more code. I really enjoyed this project. I found the practice project lesson at Ania Kubow.

Form Validator

Very old practice project for JavaScript. Form Validation is essential so I wanted to learn how to do that as well. I found the practice project lesson at Web Dev Simplified.