From 514cd8674c6f8f7add248e52d84e9ad1ccade97c Mon Sep 17 00:00:00 2001 From: Themalni Date: Fri, 11 Oct 2019 11:51:36 +0200 Subject: [PATCH] changed media quaries in about and product pages --- about-me.html | 6 +- calculator-js-app.html | 150 +++++---- camera-css-illustration.html | 151 +++++---- character-limiter-app.html | 154 +++++---- css/about_media_small.css | 3 +- ...ia_small_320.css => media_extra_small.css} | 7 +- css/media_medium.css | 2 +- css/media_small.css | 2 +- css/project_media_small.css | 3 +- css/styles.css | 3 +- fun-facts-app.html | 154 +++++---- image-hover-effects.html | 147 +++++---- index.html | 2 +- just-a-pair.html | 300 ++++++++--------- livet-website-template.html | 160 ++++----- owl-css-illustration.html | 148 +++++---- pomodoro-clock-app.html | 2 +- random-quote-machine-app.html | 153 +++++---- react-reddit-search.html | 303 +++++++++--------- vue-career-page.html | 12 +- wikipedia-viewer-app.html | 150 +++++---- 21 files changed, 1056 insertions(+), 956 deletions(-) rename css/{media_small_320.css => media_extra_small.css} (97%) diff --git a/about-me.html b/about-me.html index 26b8ea9..d41e81a 100644 --- a/about-me.html +++ b/about-me.html @@ -20,10 +20,10 @@ + - + JavaScript

I've a solid knowledge of JS including JS6 and improve it daily by using it to ES6 and improve it daily by using it to refactor some old projects and building new ones.

diff --git a/calculator-js-app.html b/calculator-js-app.html index baf6488..13d1962 100644 --- a/calculator-js-app.html +++ b/calculator-js-app.html @@ -1,5 +1,6 @@ + @@ -10,81 +11,82 @@ Dina Blaszczak | Calculator JS App - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Calculator JS

+

Calculator JS

Basic calculator for simple arithmetic operations

- header image + images/calculator_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, + (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
Live Demo GitHub @@ -96,14 +98,16 @@

Basic calculator for simple arithmetic operatio

Project description

-

Calculator JS is a web application to be used for simple arithmetic operations such as addition, subtraction, multiplication and division.

+

Calculator JS is a web application to be used for simple arithmetic operations + such as addition, subtraction, multiplication and division.

This app is a part of Advanced projects for Free Code Camp course.

Role

Design and development of the app.

Challenge:

-

Avoid operators chaining and allow for only a single decimal point per number.

+

Avoid operators chaining and allow for only a single decimal point per number. +

Skills

Design @@ -116,8 +120,10 @@

Skills

- ←Previous - Next→ + ←Previous + Next→
@@ -141,7 +147,8 @@

© Dina Blaszczak 2017

- +
@@ -152,15 +159,18 @@

© Dina Blaszczak 2017

- + - + + \ No newline at end of file diff --git a/camera-css-illustration.html b/camera-css-illustration.html index 07eb13f..d980518 100644 --- a/camera-css-illustration.html +++ b/camera-css-illustration.html @@ -1,5 +1,6 @@ + @@ -10,81 +11,82 @@ Dina Blaszczak | Camera CSS Illustration - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Vintage Camera

+

Vintage Camera

Illustration made with pure CSS.

- header image + images/camera_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, + (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
Live Demo GitHub @@ -96,13 +98,16 @@

Illustration made with pure CSS.

Project description

-

This illustration is a demonstration of what an amazing images can be created with CSS. I'm very entertained by making CSS drawings. I find it to be a particularly creative and satisfying activity and a great way to practice new skills in CSS.

+

This illustration is a demonstration of what an amazing images can be created + with CSS. I'm very entertained by making CSS drawings. I find it to be a particularly creative and + satisfying activity and a great way to practice new skills in CSS.

Role

Design and creation of the illustration.

Challenge:

-

Noticing all the little details a camera has and decide which of them to include in the illustration.

+

Noticing all the little details a camera has and decide which of them to + include in the illustration.

Skills

Design @@ -114,8 +119,10 @@

Skills

- ←Previous - Next→ + ←Previous + Next→
@@ -139,7 +146,8 @@

© Dina Blaszczak 2017

- +
@@ -150,15 +158,18 @@

© Dina Blaszczak 2017

- + - + + \ No newline at end of file diff --git a/character-limiter-app.html b/character-limiter-app.html index d6d0e5b..89ba46b 100644 --- a/character-limiter-app.html +++ b/character-limiter-app.html @@ -1,5 +1,6 @@ + @@ -10,83 +11,86 @@ Dina Blaszczak | Character Limiter App - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Character limiter JS

+

Character limiter JS

Mini app to count and limit text characters made with Vanilla JavaScript

- header image + images/character_limiter_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, + (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
- Live Demo - GitHub + Live + Demo + GitHub
@@ -95,13 +99,15 @@

Mini app to count and limit text characters mad

Project description

-

I took Twitter "Compose new Tweet" as an example to create my own version of character limiter.

+

I took Twitter "Compose new Tweet" as an example to create my own version of + character limiter.

Role

Design and development of the app.

Challenge:

-

Display correct data in the counter following a number of different conditions.

+

Display correct data in the counter following a number of different conditions. +

Skills

Design @@ -113,8 +119,10 @@

Skills

- ←Previous - Next→ + ←Previous + Next→
@@ -138,7 +146,8 @@

© Dina Blaszczak 2017

- +
@@ -149,10 +158,12 @@

© Dina Blaszczak 2017

- + + \ No newline at end of file diff --git a/css/about_media_small.css b/css/about_media_small.css index e73e480..5f237ae 100644 --- a/css/about_media_small.css +++ b/css/about_media_small.css @@ -1,5 +1,4 @@ -@media screen and (min-width: 320px) - and (max-width: 500px){ +@media screen and (max-width: 500px) { .about-me__header { background-size: 110%; background-position: center bottom; diff --git a/css/media_small_320.css b/css/media_extra_small.css similarity index 97% rename from css/media_small_320.css rename to css/media_extra_small.css index 740a0ac..2a7678c 100644 --- a/css/media_small_320.css +++ b/css/media_extra_small.css @@ -1,5 +1,4 @@ -@media screen and (min-width: 320px) - and (max-width: 340px){ +@media screen and (max-width: 340px) { .about__title { padding-top: 1.5em; } @@ -134,8 +133,8 @@ .portfolio__items-container { min-height: auto; } - .portfolio__item { - height: 220px; + .portfolio__item__info { + font-size: 1.2em; } .portfolio__item__hover__title { margin-top: 0em; diff --git a/css/media_medium.css b/css/media_medium.css index cb37744..55a3530 100644 --- a/css/media_medium.css +++ b/css/media_medium.css @@ -129,7 +129,7 @@ } .portfolio__item { width: 420px; - height: 300px; + /* height: 300px; */ } .portfolio__item__hover__title { margin-top: 1.5em; diff --git a/css/media_small.css b/css/media_small.css index 5cb5323..cc04658 100644 --- a/css/media_small.css +++ b/css/media_small.css @@ -129,7 +129,7 @@ height: auto; } .portfolio__item { - height: 240px; + /* height: 240px; */ } .portfolio__item__hover__title { margin-top: 0.5em; diff --git a/css/project_media_small.css b/css/project_media_small.css index b1d0896..e11361e 100644 --- a/css/project_media_small.css +++ b/css/project_media_small.css @@ -1,5 +1,4 @@ -@media screen and (min-width: 320px) - and (max-width: 1024px) { +@media screen and (max-width: 1024px) { .nav-menu__list { margin-left: -1em; } diff --git a/css/styles.css b/css/styles.css index ffad147..2d967b1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -483,14 +483,13 @@ a { display: block; margin: 0.5em; width: 450px; - height: 320px; background-color: #7078a9; position: relative; overflow: hidden; float: left; } .portfolio__item__info { - margin: 0.2em 0 0; + margin: 0.2em 0 0.5em; color: #fff; font-size: 1.4em; font-family: 'Open Sans', sans-serif; diff --git a/fun-facts-app.html b/fun-facts-app.html index 58e5737..683dbca 100644 --- a/fun-facts-app.html +++ b/fun-facts-app.html @@ -1,5 +1,6 @@ + @@ -10,83 +11,86 @@ Dina Blaszczak | Fun Facts App - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Fun facts about coding

+

Fun facts about coding

Little app to display coding related facts

- header image + images/fun_facts_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, + (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
- Live Demo - GitHub + Live + Demo + GitHub
@@ -95,13 +99,15 @@

Little app to display coding related facts

Project description

-

This app is a fun way to share some coding related information with those who only start their coding journey.

+

This app is a fun way to share some coding related information with those who + only start their coding journey.

Role

Design and development of the app.

Challenge:

-

Making facts being displayed one after another using CSS animations and JavaScript array.

+

Making facts being displayed one after another using CSS animations and + JavaScript array.

Skills

Design @@ -113,8 +119,10 @@

Skills

- ←Previous - Next→ + ←Previous + Next→
@@ -138,7 +146,8 @@

© Dina Blaszczak 2017

- +
@@ -149,10 +158,12 @@

© Dina Blaszczak 2017

- + + \ No newline at end of file diff --git a/image-hover-effects.html b/image-hover-effects.html index 62e46d9..d15477f 100644 --- a/image-hover-effects.html +++ b/image-hover-effects.html @@ -1,5 +1,6 @@ + @@ -10,81 +11,82 @@ Dina Blaszczak | Image Hover Effects - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Image Hover Effects

+

Image Hover Effects

Collection of inspiration for hover effects.

- header image + (max-width: 1024px) 75vw, 50vw" class="project__header__img" alt="header image" />
Live Demo GitHub @@ -96,8 +98,10 @@

Collection of inspiration for hover effects.

Project description

-

Image hover effects is a collection of ideas for a gallery of images with text.

-

It consists of four demos including eight hover effects demonstrating different possibilities of CSS transitions.

+

Image hover effects is a collection of ideas for a gallery of images with text. +

+

It consists of four demos including eight hover effects demonstrating different + possibilities of CSS transitions.

Role

@@ -116,7 +120,8 @@

Skills

- Next→ + Next→
@@ -140,7 +145,8 @@

© Dina Blaszczak 2017

- +
@@ -151,15 +157,18 @@

© Dina Blaszczak 2017

- + - + + \ No newline at end of file diff --git a/index.html b/index.html index 98a8f1b..da3dff4 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ - + diff --git a/just-a-pair.html b/just-a-pair.html index c770093..6164476 100644 --- a/just-a-pair.html +++ b/just-a-pair.html @@ -2,174 +2,176 @@ - + - - - - + + + + - Dina Blaszczak | Just a Pair + Dina Blaszczak | Just a Pair - - + + - - - - - + + + + + - - + + + - - + + - - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- - -
- -
-

Just A Pair

-

Online shoe store made with Vue.js and Vuex

- + +
+

Just A Pair

+

Online shoe store made with Vue.js and Vuex

+ header image -
- Live Demo - GitHub -
-
- -
-
- -
-

Project description

-

E-commerce website to sell and advertise shoes.

-

In this project I used Vue.js to make it a SPA, Vuex to manage state of the website - and Firebase for the authentication and data storage.

-
-
-

Role

-

Design and development of the project.

-

Challenge:

-

Connect all the parts of the store like product page, size selection, shopping cart - and make it fully functional.

-

Skills

-

- Design - Web development - Responsive - HTML - CSS - JavaScript - Vue.js - Vuex - Firebase -

-
-
- Next→ -
- - -
+
+ Live Demo + GitHub +
+ + +
+
+ +
+

Project description

+

E-commerce website to sell and advertise shoes.

+

In this project I used Vue.js to make it a SPA, Vuex to manage state of the + website + and Firebase for the authentication and data storage.

+
+
+

Role

+

Design and development of the project.

+

Challenge:

+

Connect all the parts of the store like product page, size selection, shopping + cart + and make it fully functional.

+

Skills

+

+ Design + Web development + Responsive + HTML + CSS + JavaScript + Vue.js + Vuex + Firebase +

+
+
+ Next→ +
+ + +
- - - + + + - + diff --git a/livet-website-template.html b/livet-website-template.html index 3eb692e..4b6f733 100644 --- a/livet-website-template.html +++ b/livet-website-template.html @@ -1,5 +1,6 @@ + @@ -10,79 +11,81 @@ Dina Blaszczak | Livet - One page website template - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
-
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
+
-

Livet

+

Livet +

Bootstrap based custom website template

- header image + images/livet_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, (max-width: 640px) 100vw, 60vw" + class="project__header__img" alt="header image" />
Live Demo GitHub @@ -94,15 +97,22 @@

Bootstrap based custom website template

Project description

-

Livet is a Bootstrap based HTML website template. It was designed to be used by a media agency or a startup with a young spirit and positive energy, who want to create their online presence.

-

This template is focused on its visitors. At the same time it's giving the agency an opportunity to present themselves in the best possible way to convert the website visitors into the potential clients.

-

Template is easily customizable, well documented and fully responsive. This way even users with little or no coding experience could effortlessly make adjustments to the template to meet their individual needs.

+

Livet is a Bootstrap based HTML website template. It was designed to be used by + a media agency or a startup with a young spirit and positive energy, who want to create their online + presence.

+

This template is focused on its visitors. At the same time it's giving the + agency an opportunity to present themselves in the best possible way to convert the website visitors into + the potential clients.

+

Template is easily customizable, well documented and fully responsive. This way + even users with little or no coding experience could effortlessly make adjustments to the template to meet + their individual needs.

Role

Design and development of the template including functionality on the page.

Challenge:

-

Adaptation of the Bootstrap grid layout to various screen sizes. I did some customization to the grid and it made the transformation more challenging.

+

Adaptation of the Bootstrap grid layout to various screen sizes. I did some + customization to the grid and it made the transformation more challenging.

Skills

Design @@ -120,8 +130,10 @@

Skills

- ←Previous - Next→ + ←Previous + Next→
@@ -145,21 +157,24 @@

© Dina Blaszczak 2017

- +
-
+ - + + \ No newline at end of file diff --git a/owl-css-illustration.html b/owl-css-illustration.html index 8698115..950f38c 100644 --- a/owl-css-illustration.html +++ b/owl-css-illustration.html @@ -1,5 +1,6 @@ + @@ -10,80 +11,81 @@ Dina Blaszczak | Owl CSS Illustration - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Cute Owl

+

Cute Owl

Illustration made with pure CSS.

- header image + images/owl_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, + (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
Live Demo GitHub @@ -95,13 +97,16 @@

Illustration made with pure CSS.

Project description

-

This illustration is a demonstration of what an amazing images can be created with CSS. I'm very entertained by making CSS drawings. I find it to be a particularly creative and satisfying activity and a great way to practice new skills in CSS.

+

This illustration is a demonstration of what an amazing images can be created + with CSS. I'm very entertained by making CSS drawings. I find it to be a particularly creative and + satisfying activity and a great way to practice new skills in CSS.

Role

Design and creation of the illustration.

Challenge:

-

Thinking which shapes should be used for different parts of the illustration.

+

Thinking which shapes should be used for different parts of the illustration. +

Skills

Design @@ -111,7 +116,8 @@

Skills

- ←Previous + ←Previous
@@ -135,7 +141,8 @@

© Dina Blaszczak 2017

- +
@@ -146,15 +153,18 @@

© Dina Blaszczak 2017

- + - + + \ No newline at end of file diff --git a/pomodoro-clock-app.html b/pomodoro-clock-app.html index 7ca8359..b5f08f0 100644 --- a/pomodoro-clock-app.html +++ b/pomodoro-clock-app.html @@ -19,7 +19,7 @@ - + diff --git a/random-quote-machine-app.html b/random-quote-machine-app.html index 6df677a..077f7f6 100644 --- a/random-quote-machine-app.html +++ b/random-quote-machine-app.html @@ -1,5 +1,6 @@ + @@ -10,83 +11,86 @@ Dina Blaszczak | Random Quote Machine App - - + + - - - - - + + + + + - - + + + + - - +
+
+ + + - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- -
+ +
+

Dina Blaszczak is a front-end developer and designer based in Poland.

+ + +
-

Random Quote Machine

+

Random Quote Machine

App to display random inspirational quotes

- header image + images/quotes_1400.jpg 1400w" sizes="(max-width: 320px) 90vw, + (max-width: 640px) 100vw, 60vw" class="project__header__img" alt="header image" />
- Live Demo - GitHub + Live + Demo + GitHub
@@ -95,7 +99,8 @@

App to display random inspirational quotes

Project description

-

Random Quote Machine is a small web application to display random inspirational quotes and allow each of them to be shared on Twitter in a tweet.

+

Random Quote Machine is a small web application to display random inspirational + quotes and allow each of them to be shared on Twitter in a tweet.

This app is a part of Intermediate projects for Free Code Camp course.

@@ -115,8 +120,10 @@

Skills

- ←Previous - Next→ + ←Previous + Next→
@@ -140,7 +147,8 @@

© Dina Blaszczak 2017

- +
@@ -151,15 +159,18 @@

© Dina Blaszczak 2017

- + - + + \ No newline at end of file diff --git a/react-reddit-search.html b/react-reddit-search.html index a0d871b..2744c81 100644 --- a/react-reddit-search.html +++ b/react-reddit-search.html @@ -2,176 +2,177 @@ - + - - - - + + + + - Dina Blaszczak | React Reddit Search + Dina Blaszczak | React Reddit Search - - + + - - - - - + + + + + - - + + + - - + + - - -
-
- - - - -
- -
-

Dina Blaszczak is a front-end developer and designer based in Poland.

- - -
- -
-

React Reddit Search

-

Application to search Reddit using React.js, Redux and Styled Components.

- + +
+

React Reddit Search

+

Application to search Reddit using React.js, Redux and Styled Components.

+ header image -
- Live Demo - GitHub -
-
- -
-
- -
-

Project description

-

React app to find posts on Reddit using its API.

-

In this project I used React.js to make it a SPA, Redux to manage state of the app - and Styled Components to build the components system for the app.

-
-
-

Role

-

Design and development of the project.

-

Challenge:

-

Pull data from Reddit using its API and display it on the page.

-

Skills

-

- Design - Web development - Responsive - HTML - CSS - JavaScript - React.js - Redux - Styled Components -

-
-
- ←Previous - Next→ -
- - -
+
+ Live Demo + GitHub +
+ + +
+
+ +
+

Project description

+

React app to find posts on Reddit using its API.

+

In this project I used React.js to make it a SPA, Redux to manage state of the + app + and Styled Components to build the components system for the app.

+
+
+

Role

+

Design and development of the project.

+

Challenge:

+

Pull data from Reddit using its API and display it on the page.

+

Skills

+

+ Design + Web development + Responsive + HTML + CSS + JavaScript + React.js + Redux + Styled Components +

+
+
+ ←Previous + Next→ +
+ + +
- - - + + + - + diff --git a/vue-career-page.html b/vue-career-page.html index 1383d72..4c26d67 100644 --- a/vue-career-page.html +++ b/vue-career-page.html @@ -20,8 +20,8 @@ - + + @@ -161,10 +161,10 @@

© Dina Blaszczak 2017

- + - + + \ No newline at end of file