From 79b18542dd247201356a55ef732938729cb268db Mon Sep 17 00:00:00 2001 From: Francesca Date: Wed, 2 Feb 2022 16:46:48 +0000 Subject: [PATCH] Added icons for the project skills Changed the skills section of the home page adding the icons and a flex-box --- css/style.css | 41 ++++- img/skills/icn_MVP.svg | 12 ++ img/skills/icn_android.svg | 12 ++ img/skills/icn_coding.svg | 11 ++ img/skills/icn_high-fidelity.svg | 15 ++ img/skills/icn_icons.svg | 16 ++ img/skills/icn_ios.svg | 14 ++ img/skills/icn_mock-up.svg | 16 ++ img/skills/icn_prototype.svg | 13 ++ img/skills/icn_responsive-design.svg | 10 ++ img/skills/icn_style-guide.svg | 12 ++ img/skills/icn_user-flows.svg | 15 ++ img/skills/icn_user-persona.svg | 12 ++ img/skills/icn_user-research.svg | 9 ++ img/skills/icn_user-testing.svg | 17 ++ img/skills/icn_wireframes.svg | 14 ++ index.html | 232 ++++++++++++++++++++++++--- 17 files changed, 443 insertions(+), 28 deletions(-) create mode 100644 img/skills/icn_MVP.svg create mode 100644 img/skills/icn_android.svg create mode 100644 img/skills/icn_coding.svg create mode 100644 img/skills/icn_high-fidelity.svg create mode 100644 img/skills/icn_icons.svg create mode 100644 img/skills/icn_ios.svg create mode 100644 img/skills/icn_mock-up.svg create mode 100644 img/skills/icn_prototype.svg create mode 100644 img/skills/icn_responsive-design.svg create mode 100644 img/skills/icn_style-guide.svg create mode 100644 img/skills/icn_user-flows.svg create mode 100644 img/skills/icn_user-persona.svg create mode 100644 img/skills/icn_user-research.svg create mode 100644 img/skills/icn_user-testing.svg create mode 100644 img/skills/icn_wireframes.svg diff --git a/css/style.css b/css/style.css index b504926..0a93363 100644 --- a/css/style.css +++ b/css/style.css @@ -281,18 +281,28 @@ h4 { margin-bottom: 0; } -#work img { - border-radius: 0; - margin: 16px 0 4px; -} - #work { padding-bottom: 8px; } .skills { - font-style: italic; - color: #898d89; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + align-content: flex-start; + grid-row-gap: 4px; +} + +.skills p { + padding-top: unset; +} + +.item { + width: 148px; +} + +.item p { + line-height: 36px; } .bold { @@ -382,6 +392,10 @@ h4 { padding-left: 12px; } +.space-left-40 { + padding-left: 40px; +} + /* Main Column classes */ .col-4 { width: 33.33%; @@ -475,10 +489,19 @@ h4 { padding-bottom: 36px; } +.space-vertical-16 { + padding-top: 16px; + padding-bottom: 16px; +} + .space-top16 { padding-top: 16px; } +.space-top-20 { + padding-top: 20px; +} + .space-top { padding-top: 24px; } @@ -487,6 +510,10 @@ h4 { padding-bottom: 20px; } +.space-bottom-4 { + padding-bottom: 4px; +} + .space-bottom12 { padding-bottom: 12px; } diff --git a/img/skills/icn_MVP.svg b/img/skills/icn_MVP.svg new file mode 100644 index 0000000..ad7e70c --- /dev/null +++ b/img/skills/icn_MVP.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/skills/icn_android.svg b/img/skills/icn_android.svg new file mode 100644 index 0000000..973ae78 --- /dev/null +++ b/img/skills/icn_android.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/skills/icn_coding.svg b/img/skills/icn_coding.svg new file mode 100644 index 0000000..7568654 --- /dev/null +++ b/img/skills/icn_coding.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/img/skills/icn_high-fidelity.svg b/img/skills/icn_high-fidelity.svg new file mode 100644 index 0000000..500db93 --- /dev/null +++ b/img/skills/icn_high-fidelity.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/img/skills/icn_icons.svg b/img/skills/icn_icons.svg new file mode 100644 index 0000000..025ff61 --- /dev/null +++ b/img/skills/icn_icons.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/img/skills/icn_ios.svg b/img/skills/icn_ios.svg new file mode 100644 index 0000000..30ea83c --- /dev/null +++ b/img/skills/icn_ios.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/img/skills/icn_mock-up.svg b/img/skills/icn_mock-up.svg new file mode 100644 index 0000000..5253047 --- /dev/null +++ b/img/skills/icn_mock-up.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/img/skills/icn_prototype.svg b/img/skills/icn_prototype.svg new file mode 100644 index 0000000..ba8b255 --- /dev/null +++ b/img/skills/icn_prototype.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/img/skills/icn_responsive-design.svg b/img/skills/icn_responsive-design.svg new file mode 100644 index 0000000..298ea22 --- /dev/null +++ b/img/skills/icn_responsive-design.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/skills/icn_style-guide.svg b/img/skills/icn_style-guide.svg new file mode 100644 index 0000000..54f82af --- /dev/null +++ b/img/skills/icn_style-guide.svg @@ -0,0 +1,12 @@ + + + + + + + + Abc + + + + diff --git a/img/skills/icn_user-flows.svg b/img/skills/icn_user-flows.svg new file mode 100644 index 0000000..04bf6f4 --- /dev/null +++ b/img/skills/icn_user-flows.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/img/skills/icn_user-persona.svg b/img/skills/icn_user-persona.svg new file mode 100644 index 0000000..6a9acef --- /dev/null +++ b/img/skills/icn_user-persona.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/img/skills/icn_user-research.svg b/img/skills/icn_user-research.svg new file mode 100644 index 0000000..f2e4a42 --- /dev/null +++ b/img/skills/icn_user-research.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/skills/icn_user-testing.svg b/img/skills/icn_user-testing.svg new file mode 100644 index 0000000..141b544 --- /dev/null +++ b/img/skills/icn_user-testing.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/img/skills/icn_wireframes.svg b/img/skills/icn_wireframes.svg new file mode 100644 index 0000000..fa72125 --- /dev/null +++ b/img/skills/icn_wireframes.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 580dac2..e809c64 100644 --- a/index.html +++ b/index.html @@ -58,7 +58,7 @@

Hi, I am Francesca.
-

My work

+

My work

@@ -67,10 +67,63 @@

My work
-

Quick & Tasty

-

This concept of a recipe web app provides quick and tasty recipes to the users, with the possibility to add your own recipes and filter results by taste.

-

Skills: User research, User personas, creation of a MVP, user testing, creation of wireframes and high fidelity screens, creation of mockups.

- View Project +
+

Quick & Tasty

+

This concept of a recipe web app provides quick and tasty recipes to the users, with the possibility to add your own recipes and filter results by taste.

+
+
+

Skills

+
+
+ User Research icon +

User Research

+
+
+ User Persona icon +

User Persona

+
+
+ MVP icon +

MVP

+
+ +
+ User Flows icon +

User Flows

+
+
+ Wireframes icon +

Wireframing

+
+
+ User Testing icon +

User Testing

+
+
+ Style Guide icon +

Style Guide

+
+
+ Creation of icons icon +

Icons

+
+
+ High-fidelity screen icon +

High-fidelity screens

+
+
+ Mock-up icon +

Mock-ups

+
+
+ Prototype icon +

Prototyping

+
+
+
+
+ View Project +
@@ -82,10 +135,50 @@

Quick & Tasty

-

My Style

-

This concept app allows users to buy new clothes and get suggestions according to the personalized style they have created when signing up.

-

Skills: creation of wireframes and user flows, user testing, creation of high fidelity screens, creation of a native app for iOS and Android using their respective patterns.

- View Project +
+

My Style

+

This concept app allows users to buy new clothes and get suggestions according to the personalized style they have created when signing up.

+
+
+

Skills

+
+
+ User Flows icon +

User Flows

+
+
+ Wireframes icon +

Wireframing

+
+
+ iOS icon +

iOS native app

+
+
+ Android icon +

Android native app

+
+
+ Style Guide icon +

Style Guide

+
+
+ High-fidelity screen icon +

High-fidelity screens

+
+
+ Mock-up icon +

Mock-ups

+
+
+ Prototype icon +

Prototyping

+
+
+
+
+ View Project +
@@ -97,10 +190,46 @@

My Style

-

Money Organizer

-

A concept app of a money-saving tool.

-

Skills: creation of wireframes and user flows, user testing, creation of icons and high fidelity screens

- View Project +
+

Money Organizer

+

A concept app of a money-saving tool.

+
+
+

Skills

+
+
+ User Flows icon +

User Flows

+
+
+ Wireframes icon +

Wireframing

+
+
+ User Testing icon +

User Testing

+
+
+ Style Guide icon +

Style Guide

+
+
+ Creation of icons icon +

Icons

+
+
+ Mock-up icon +

Mock-ups

+
+
+ Prototype icon +

Prototyping

+
+
+
+
+ View Project +
@@ -112,10 +241,43 @@

Money Organizer

-

Activities View

-

This concept app allows users to plan their day quickly and review it at a glance.

-

Skills: creation of a style guide, wireframes, high fidelity screens and mockups

- View Project +
+

Activities View

+

This concept app allows users to plan their day quickly and review it at a glance.

+
+ +
+

Skills

+
+
+ User Flows icon +

User Flows

+
+
+ Wireframes icon +

Wireframing

+
+
+ Style Guide icon +

Style Guide

+
+
+ Creation of icons icon +

Icons

+
+
+ High-fidelity screen icon +

High-fidelity screens

+
+
+ Mock-up icon +

Mock-ups

+
+
+
+
+ View Project +
@@ -139,10 +301,38 @@

Icon sets

-

Portfolio Redesign

-

Redesign of a portfolio website keeping the same structure.

-

Skills: creation of icons and high fidelity screens, responsive design, HTML and CSS coding.

- View Project +
+

Portfolio Redesign

+

Redesign of a portfolio website keeping the same structure.

+
+
+

Skills

+
+
+ Style Guide icon +

Style Guide

+
+
+ Creation of icons icon +

Icons

+
+
+ High-fidelity screen icon +

High-fidelity screens

+
+
+ Responsive Design icon +

Responsive Design

+
+
+ Responsive Design icon +

HTML and CSS

+
+
+
+
+ View Project +