Olena Tsybulska

Contacts

Name: Olena Tsybulska
Telegram: @oltsybulska

Projects

All
Real Projects
Train Projects
Builds

1 ... 5
< PSD2HTML Gernioplastika />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Swiper Slider
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
Two menus: the first one at the top of the page with basic information and when scrolling the page another appears with menu items
Smooth scrolling through menu items
Sliders
Forms of appointment for a consultation
Modal windows with forms when you press the buttons Call back, Get a consultation, View diploma and photo of the chief doctor
Three pages besides the main one with additional information
Decorative elements throughout the page
Animation of text and enlargement of some elements on hover
Live
1 ... 4
< PSD2HTML Endometriosis Treatment />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Swiper Slider
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
Slider with navigation: when you click on an item on the left, it opens full information about the selected item on the right. Just like scrolling the slider on the right selects the corresponding item on the left
Smooth scrolling through menu items
Two menus: the first one at the top of the page with basic information and when scrolling the page another appears with menu items
Forms of appointment for a consultation
Modal windows with forms when you press the buttons Call Back, Book a consultation
Two pages besides the main one with additional information
Decorative elements throughout the page
Animating text
Live
1 ... 5
< PSD2HTML Kunzhut />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
Development of 2 JS calculators and 4 responsive pages from .psd layouts for a cafe
Ingredient pizza constructor. In this calculator clicking on the ingredients or sauces appears their photos on the pizza, elements highlighted in color and the price appears. Remove if clicked again
Constructor from different pizza halves. In this calculator different pizza halves add up to a whole. When click on the icon, the half appears on the pizza. You can select one on the right and one on the left sides. Remove if clicked again
There is a message above the pizza telling you to choose a half. When both halves are selected, the message disappears and reappears if the half is deselected
Live
1 ... 5
< FIG2HTML CityMober />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
Responsive layout for cms, interactive elements
SVG mask for photos (cutting out lines in the photo programmatically, when replacing pictures with new ones, they will also be cut out) in the Instagram block
Adding new fields if clicking on order another bag button
Scrolling if clicking on the buttons in the instagram block
In mobile and tablet versions long blocks are collapsed and added percentage of viewed
Smooth scrolling to blocks, back to top button
Live
1 ... 1
< FIG2HTML GoSurf />
Stack
- Slick Carousel
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
Details
Animation of the appearance of blocks / titles / points on the map, actual date, choose options in surf section
Night cost calculator depending on the number of people and nights
Tooltips in shop section
Slider
Backtop button, preloader
Live Code
1 ... 3
< JavaScript Filter Calculator />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
Filter and calculator for a Steam game
Every object has name and 3 different evidences to recognize it. The player can choose up to three evidences or exclude them. There is a stub if trying to select more than three. Also highlighting input in the calculator itself with different colors
Based on the input, the filter displays a list of possible objects and possible missing evidences
There are a reset button, two languages, dark | light themes and a phrases list
Live Code
1 ... 1
< FIG2HTML Mitravel />
Stack
- Sending a request by mail with PHPMailer
- Swiper carousel
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
Details
Sign up form
Sending a request by mail
Play and stop video in head section
Gallery, slider
Backtop button, preloader
Live Code
1 ... 1
< PSD2HTML MoGo />
Stack
- Bootstrap4.5
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- jQuery, Gulp
- Responsiveness, Crossbrowser Compability
Details
Carousel, modal, accordion
Icons on hovering images
Statistics animation
Backtop button, preloader
Live Code
1 ... 1
< PSD2HTML Form Survey />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
Details
Input name, email, age
Select dropdown options, select checkboxes
Submit button
Live Code
1 ... 1
< PSD2HTML Email />
Stack
- HTML5, CSS3
Details
Hero, text, button, social section
Live Code
1 ... 1
< JavaScript Game Squares />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
Counting time and score
Manual time setting
Random square colors
Protection of the window from changes after the end of the game, protection of the input after start of the game
Live Code
1 ... 1
< JavaScript Game Fighter />
Stack
- HTML5/Pug, CSS3/SCSS/BEM, SVG Sprite
- JavaScript, Gulp
- Responsiveness, Crossbrowser Compability
- Page Speed Optimization
Details
ES6 classes and context this
Two fighters have their own characteristics displayed via JS
Start button starts counting and fighting, formulas calculate the chance of attack or miss
Battle log generated via JS, displays the winner if the fighter's health drops below 0
Live Code
1 ... 1
< ReactJS Planner />
Stack
- HTML5/Pug, CSS3/SCSS/BEM
- React JS, Webpack
- Responsiveness, Crossbrowser Compability
Details
AddTodo, removeTodo, React.Suspense (React.lazy) AddTodo
UseContext, custom hook useInputValue, useEffect
Loader
React.Fragment Modal
Live Code
1 ... 1
< Gulp Build />
Stack
- clean.js — Clean folder
- pug2html.js — Pug to HTML, pug linter, html validator, bem validator
- styles.js — SCSS to CSS, webpcss, group css media, stylelint, sourcemaps, autoprefixer, csso, rename to min
- scripts.js — Scripts, concat to one file scripts.js and libs, eslint.format, sourcemaps, babel, terser, rename to min
- fonts.js — Fonts, copy woff2 and woff, other convert to woff2 and woff
- img.js — Images, optimize (quality 85) and copy images, convert to webp and resize
- svgSprites.js — SVG sprites, optimize, make sprite and template to /dist/assets/icons/
- copyDependencies.js — Copy dependencies, template if dont want to concat libs with scripts.js
- favicon.js — Favicon, create from svg icon
- favicon2html.js — Favicon to HTML, add favicon links to HTML head
- fontsStyle.js — Fonts style, write info about fonts to /#src/scss/_fonts.scss
- serve.js — Live server, watching
Details
- Made my own Build
- Resize mobile or tablet images, retina 1x, 2x, 3x via gulp task and use with picture tag
- Automaticly create svg sprite by adding svg icons to /#src/assets/icons/, svg support ie
- Automaticly create favicon by adding the svg icon to /#src/assets/favicon/
- Convert fonts to woff2 and woff, copy them to /#src/assets/fonts/ and clean /#src/scss/_fonts.scss/ file
- Two pug template pages with separate includes folders, common files in extends folder (layout, header, footer)
- SCSS styles with separate components
- Copy script libs via gulp task from /node_modules/ and copy them to scripts.js
Live Code and Readme
1 ... 1
< Webpack Build />
Stack
Details
Made my own Build
Live Code and Readme