My name is Ivan F.

I am a web developer

Portfolio Resume

About me

My name is Ivan

A rapidly developing Front-End Developer with experience in creating dynamic and responsive web applications. I am constantly working on myself. Well-versed in the basics of HTML, CSS, JavaScript, and popular frameworks such as React. Experienced with development tools and version control (Git), and committed to continuous learning and improving my skills. Able to work in a team, open to new challenges, and eager to grow in the field of web development. My English level is A2.

Resume

How can I be useful

Education

Donetsk University of Economics and Law

Bachelor's degree | Donetsk (2005-2009)

Faculty of Economics and Entrepreneurship. Specialty Economist
Stepik
Udemy
Udemy
ITVDN

Work

Front-end development

Freelance | Odessa (September 2023 to present)

adaptive, reliable, cross-browser website layout
furniture making, sales, interior design

(2010-2022)

full cycle from finding a client, sales, project development to manufacturing and installation of cabinet furniture

Skills

What do I use at work

HTML5

It creates the framework of your website or application, and the fifth version will allow me to create a more SEO-optimized structure for your product
CSS

This styling language allows me to create absolutely any look and feel for your site or application. Everything is limited only by your imagination!
Saas

This is CSS with superpowers that allows you to use variables, nesting, mixins and other nice things to make writing CSS easier
Git

This is a version control system. With its help, you can easily track the history of changes and interact with other developers.
JavaScript

This programming language allows you to bring anything to life: sliders, windows, tooltips, tabs, receiving data from the server and much more
TypeScript

TypeScript is a programming language that extends JavaScript by adding static typing. It allows for safer and more predictable code, making it easier to develop large applications.
Jquery

The Jquery library will speed up development. We will not integrate it into the project unless necessary, but we have the skill to work with it
Gulp

Gulp is a task manager for automatically performing frequently used tasks (for example, minification, testing, merging files), written in the JavaScript programming language.
Webpack

Webpack is a popular module bundler for JavaScript applications that allows you to bundle, optimize, and manage dependencies. It supports various plugins and loaders to customize the build for the specific needs of a project.
Vite

Vite is a modern build tool for web applications that leverages native browser capabilities for fast development. It provides instant reloading and optimization, making the development process more efficient.
React

React. js is an open source library for the JavaScript programming language for developing user interfaces. It helps you quickly and easily implement reactivity - a phenomenon where, in response to a change in one element, everything else changes.

Code

My example code


function scrollUp() {
    const offset = 100,
          scrollUp = document.querySelector('.scroll-up'),
          scrollUpSvgPath = document.querySelector('.scroll-up__path'),
          pathLength = scrollUpSvgPath.getTotalLength();

    scrollUpSvgPath.style.strokeDasharray = `${pathLength} ${pathLength}`;
    scrollUpSvgPath.style.transition = 'stroke-dashoffset 20ms';

    const getTop = () => window.scrollY || document.documentElement.scrollTop;    

    const updateDashOffset = () => {
        const height = document.documentElement.scrollHeight - window.innerHeight;
        const dashOffset = pathLength - (getTop() * pathLength / height);
        scrollUpSvgPath.style.strokeDashoffset = dashOffset;
    };

    //on scroll
    window.addEventListener('scroll', () => {
        updateDashOffset();

        if (getTop() > offset) {
            scrollUp.classList.add('scroll-up--active');
        } else {
            scrollUp.classList.remove('scroll-up--active');
        }        
    });

    scrollUp.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    });
}

Portfolio