View All My Projects

Portfolio Item Image

Adaptive Landing Page Node.js App with sending a e-mail

It was necessary to create a landing page on an existing design using Flex Grid Layout.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones. Also the pahe should have a lot of animations for different parts of the page and an opprtunity to send a letter with customers' complaints to pre-defined e-mail address.

More Info Demo

Adaptive Landing Page Node.js App with sending a e-mail

It was necessary to create a landing page on an existing design using Flex Grid Layout.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones. Also the pahe should have a lot of animations for different parts of the page and an opprtunity to send a letter with customers' complaints to pre-defined e-mail address.

Decision:

I've built a Node.js App by design using:

  • HTML5\CSS\JavaScript
  • jQuery
  • Flex Grid Layout
  • Node.js
  • Google Maps API
  • Media Queries
  • SVG Icons
  • Additional Fonts
  • SCSS
  • Gulp

Desktop Page version:

KWE Landing Desktop Design Image

Mobile Page version:

KWE Landing Mobile Design Image

More details on Upwork:

Portfolio Item Image

Adaptive Portfolio Site Markup

It was necessary to create a portfolio site on an existing design using Flex Grid Layout.

The portfolio site should be adapted to different types of devices - computers, laptops, tablets, smartphones.

More Info Demo

Adaptive Portfolio Site Markup

It was necessary to create a portfolio site on an existing design using Flex Grid Layout.

The portfolio site should be adapted to different types of devices - computers, laptops, tablets, smartphones.

Decision:

I've built all pages by design using:

  • HTML5\CSS\JavaScript
  • jQuery
  • Flex Grid Layout
  • Media Queries
  • SVG Icons
  • Additional Fonts
  • SCSS
  • Gulp

Home Page:

Portfolio Site Home Page Image

Single Work Post Page

Portfolio Site Single Work Post Page Image

About Page:

Portfolio Site About Page Image

General Blog Page:

Portfolio Site General Blog Page Image

Single Blog Post Page:

Portfolio Site Single Blog Post Page Image

Contact Page:

Portfolio Site Contacts Page Image

More details on github:

https://github.com/gulik-lyuda/20_markup_portfolio_site_with_flex_animations
Portfolio Item Image

Adaptive Miami Home Page Markup

It was necessary to create a home page on an existing design.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones.
Additionaly page should contain some animations.

More Info Demo

Adaptive Miami Home Page Markup

It was necessary to create a home page on an existing design.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones.
Additionaly page should contain some animations.

Decision:

I've built an adaptive front-end page using:

  • HTML5\CSS\JavaScript
  • jQuery
  • Flex Grid Layout
  • Media Queries
  • SVG Icons
  • Additional Fonts
  • SCSS
  • Gulp
Landing Design Image

More details on github:

https://github.com/gulik-lyuda/19_markup_miami_home_with_flex_animations
Portfolio Item Image

Web Design for the Promo Site

The task was to create a design concept for the promo site of the architecture agency.

The main slogan for the site was - "New architecture for new ideas".

More Info

Web Design for the Promo Site

The task was to create a design concept for the promo site of the architecture agency.

The main slogan for the site was - "New architecture for new ideas".

Decision:

I studied a lot of promo sites of other architecture agencies to understand what information is really important fo such kind of sites

Also I saw for the current designs on Behance and inspired them.

Portfolio Item Image

More details on behance:

https://www.behance.net/gallery/65604583/Promo-Site-Concept
Portfolio Item Image

Error 404 page Design

Task was to create an interesting design for the Error 404 page (without any information about site)

More Info

Web Design for the Error 404 page

Task was to create an interesting design for the Error 404 page (without any information about site)

Decision:

I've found an interesting background image that inspired me to this design

Portfolio Item Image

More details on behance:

https://www.behance.net/gallery/64054189/404-Page
Portfolio Item Image

Node.js Application

The task was to display the current status of the pool and the gym based on the data of the schedule of their work and holidays from the xlsx-file.

The data should have been displayed taking into account the time zone of the pool/gym.

More Info

Node.js App with current state of the gym & pool

The task was to display the current status of the pool and the gym based on the data of the schedule of their work and holidays from the xlsx-file.

The data should have been displayed taking into account the time zone of the pool/gym.

Decision:

I've built a Node.js application using several additional libraries:

1. To import data from the xlsx file, the library xlsx.js was used.

2. For the further analysis of data and their processing, the libraries moment.js and moment-timezone.js were used.

In addition, the markup of the page was adapted for mobile devices.

Gym Closed Image Gym Open Image

Gym working hours logic:

Working hours are defined on the values of the sheets “GYM ALL YEAR” and “GYM Holidays”.

The sequence of actions for defining the message text is as follows

Pool Closed Image Pool Open Image

Pool working hours logic:

Pool is all year long closed, but open only in season.

Working hours for season’s days are defined on the sheet “Pool”

Client's feedback:

"Lyudmyla delivered a project with Node.js skills I enjoyed working with her. She gave a lot of thought before even she start, She is a quick learner and very sharp regards to understanding the project basics. Definitely, I would love to work with her again!"

More details on github:

https://github.com/gulik-lyuda/15_nodejs_app_with_xlsx
Portfolio Item Image

Adaptive Company Site Markup (Home Page)

It was necessary to create a home page for a company site on an existing design.

The page should be adapted to different types of devices (without correspondent designs) - computers, laptops, tablets, smartphones.

More Info Demo

Adaptive Company Site Markup (Home Page)

It was necessary to create a home page for a company site on an existing design.

The page should be adapted to different types of devices (without correspondent designs) - computers, laptops, tablets, smartphones.

Decision:

I've built an adaptive front-end page using:

  • HTML5\CSS\JavaScript
  • Bootstrap 3
  • jQuery (jquery.shorten.1.0.js)
  • Icon Fonts
  • Media Queries
  • SCSS
  • Gulp
Page Design Image

More details on github:

https://github.com/gulik-lyuda/04_markup_responsive_page
Portfolio Item Image

SPA with Angular.js

The task was to create a single page application with Angular.js. The application should have two pages: general table with nearest events and page with the details of a chosen event.

All dates and times should be in event's timezone. Also Google Maps should be integrated on the page with detailed information on the event to show the exact venue of the event with a marker.

More Info

SPA with Angular.js

The task was to create a single page application with Angular.js. The application should have two pages: general table with nearest events and page with the details of a chosen event.

All dates and times should be in event's timezone. Also Google Maps should be integrated on the page with detailed information on the event to show the exact venue of the event with a marker.

Decision:

I've built single page application using:

  • HTML\CSS\JavaScript
  • Angular.js (version 1.4)
  • Moment.js
  • Moment-Timzeone.js
  • Google Map API
  • SCSS
  • Gulp

Also on the page with detailed information on the event were integrated Google Maps showing the exact venue of the event with a marker.

To facilitate the deployment of the application was created server.js.

POrtfolio Item Image

More details on github:

https://github.com/gulik-lyuda/06_Upcoming_Game_events
Portfolio Item Image

Adaptive Landing Markup

It was necessary to create a landing page on an existing design.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones.

More Info Demo

Adaptive Page Markup for landing page

It was necessary to create a landing page on an existing design.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones.

Decision:

I've built an adaptive front-end page using:

  • HTML5\CSS\JavaScript
  • without Bootstrap
  • Additional Fonts
  • Font-Awesome Icons
  • social-buttons.css
  • Swiper.js (for slider)
  • SCSS
  • Gulp
Portfolio Item Image Landing Design Image

More details on github:

https://github.com/gulik-lyuda/02_markup_landing
Portfolio Item Image

My First Adaptive Landing Markup

It was necessary to create a landing page on an existing design.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones.

More Info Demo

My First Adaptive Page Markup for landing page

It was necessary to create a landing page on an existing design.

The landing page should be adapted to different types of devices - computers, laptops, tablets, smartphones.

Decision:

I've built an adaptive front-end page using:

  • HTML5\CSS\JavaScript
  • Bootstrap 3
  • Additional Fonts
  • Swiper.js (for slider)
  • SCSS
  • Gulp
Landing Design Image

More details on github:

https://github.com/gulik-lyuda/01_markup_landing

Back...