Vukan Vuckovic

Get to know my skills
and passion for
web development.

About Me

I am a 19 year old Front End Developer with around 3 years of experience.
I am currently perfecting my back end skills, but at the moment, I am more efficient and confident on the front end.
In coming sections, you`ll get to know my journey, what I bring to the table, what technologies I chose to master, and a couple of projects that showcase my front-end skills, along side some full-stack projects as well.
me
me.jpg
My Journey

Learning Curve

icon

The Beginnings

Everything began in high school with C, of course. I attended a Computer Science High School in Serbia, where we learned the fundamentals—the thought process behind programming and problem-solving. It was there that I developed the ability to approach problems from different angles, exploring multiple solutions. This experience opened my mind and laid a strong foundation for the future. Later, at the same school, we were introduced to WordPress—the moment that changed everything! I was captivated by the idea of building websites. It was incredibly exciting, and that thought alone motivated me to keep improving and learning on my own. Of course, like in many schools, I didn't learn much practical knowledge, so I had to dive into research and self-learning. In hindsight, this was a good thing—it nurtured my passion for knowledge and self-improvement. Even today, I continue to strive for growth, not because I have to, but because it's something I genuinely enjoy.
Currently, I am studying at Faculty of Organizational Sciences, the Computer Science Major just like before.
As I mentioned, aside from some simple things and core principles, schools don't provide almost any practical and useful knowledge.
Most of my time goes into learning new skills, practicing and building real-world production ready full-stack projects.
I want to stay in line with time and industry standards, keeping my skills always fresh and competent.

Tech Stack

Check out the technologies I use on every single one of my projects
image

Figma

image

WordPress

image

Elementor

image

HTML

image

CSS

image

Node.js

image

JavaScript

image

TypeScript

image

PHP

image

NPM

image

React

image

React Native

image

Expo

image

Next.js

image

Tailwind CSS

image

GSAP

image

Three.js

image

Appwrite

image

Figma

image

WordPress

image

Elementor

image

HTML

image

CSS

image

Node.js

image

JavaScript

image

TypeScript

image

PHP

image

NPM

image

React

image

React Native

image

Expo

image

Next.js

image

Tailwind CSS

image

GSAP

image

Three.js

image

Appwrite

With my current knowledge and skillset, I feel confident building almost any kind of project, even all by myself. I can create fully responsive and good looking pages, I can fill them with data easily, I can write clean and modular code that`s easy to read and edit later. Setting up things such as typography and basic styling are a must for every project, making the whole process more efficient and easy to manipulate later.
Portfolio

My Projects

Interior Design Business

This project's goal was to utilize aesthetic design which suits the character of this imaginary business. Some of the data was stored in the environment files, mimicking data fetching, which allowed me to implement skeleton loading elements, leaving room for future improvement and database implementation. Simple animations and unusual page structure make it fun to explore and move around.
icon

Figma

icon

HTML

icon

TypeScript

icon

CSS

icon

Tailwind CSS

icon

React

icon

Next.js

icon

GSAP

mockup

FitQuest

FitQuest is an app that gives you daily challenges, keeping you engaged and healthy at the same time. The ability to connect with your friends keeps the competition going. The idea behind this project is to utilize simple animations and clean design. No back-end and database integration were planned for this project.
icon

Figma

icon

HTML

icon

TypeScript

icon

CSS

icon

Tailwind CSS

icon

React

icon

Next.js

icon

GSAP

mockup

ReState

This is an app that lists and filters real estate properties available for rent. It has most of the functionalities you would expect from such an app, but it's not production-ready. This means no checking for availability on certain dates, and no payment processing in-app. The goal of this project was to showcase React Native knowledge alongside some back-end skills, such as filtering, querying, uploading, updating, and fetching data. With a little bit of work, this could become a production-ready app if needed.
icon

HTML

icon

TypeScript

icon

CSS

icon

Tailwind CSS

icon

React Native

icon

Expo

icon

GSAP

icon

Appwrite

mockup

StoreIt

Cloud-Based Storage Solution System. The true full-stack project. You can upload, share, edit, download and see your files by categories, filter them, and sort them in any way you can think of. The main goal of this project was to show my back-end skills and the ability to work on and complete the project from beginning to end. I still feel more comfortable on the Front End, but I am very familiar with the processes on the other side.
icon

HTML

icon

TypeScript

icon

CSS

icon

Tailwind CSS

icon

React

icon

Next.js

icon

GSAP

icon

Appwrite

mockup
My Solutions

Leet Code

Although I`m not the best at structures and alghorithms as a front end developer, I do have some sense for doing those.
Here, you can check out some of my solutions Leet Code has marked as hard.

42. Trapping Rain Water

Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it can trap after raining. Example 1: Input: height = [0,1,0,2,1,0,1,3,2,1,2,1] Output: 6 Explanation: The above elevation map (black section) is represented by array [0,1,0,2,1,0,1,3,2,1,2,1]. In this case, 6 units of rain water (blue section) are being trapped. Example 2: Input: height = [4,2,0,3,2,5] Output: 9
1function trap(height: number[]): number {
2                let left = 0;
3                let right = height.length - 1;
4                let leftMax = 0;
5                let rightMax = 0;
6                let waterTrapped = 0;
7
8                while (left <= right) {
9                    if (height[left] <= height[right]) {
10                        if (height[left] >= leftMax) {
11                            leftMax = height[left]; // Update left max
12                        } else {
13                            waterTrapped += leftMax - height[left]; // Calculate trapped water
14                        }
15                        left++;
16                    } else {
17                        if (height[right] >= rightMax) {
18                            rightMax = height[right]; // Update right max
19                        } else {
20                            waterTrapped += rightMax - height[right]; // Calculate trapped water
21                        }
22                        right--;
23                    }
24                }
25
26                return waterTrapped;
27            }
28
29            // Example usage
30            const height1 = [0, 1, 0, 2, 1, 0, 1, 3, 2, 1, 2, 1];
31            console.log(trap(height1)); // Output: 6
32
33            const height2 = [4, 2, 0, 3, 2, 5];
34            console.log(trap(height2)); // Output: 9
Follow me

Check out my Instagram

iphone
iphone
iphone
iphone
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
post
@devhatchery