From 2a60cb882c2066f328ac971e14f2074d684bd634 Mon Sep 17 00:00:00 2001 From: horhik Date: Mon, 25 May 2020 08:29:27 +0300 Subject: [PATCH] added basic css of portfolio page --- .idea/workspace.xml | 39 +++------ src/components/pages/portfolio.jsx | 16 +++- src/constants/link-types.js | 5 ++ src/css/basic.scss | 7 +- src/css/elements/contacts.scss | 3 +- src/css/elements/portfolio-project.scss | 76 ++++++++++++++++++ src/css/variables.scss | 2 + .../░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png | Bin 0 -> 412 bytes src/reducers/site-content-reducer.js | 31 ++++++- src/svg/app-page.svg | 35 ++++++++ src/svg/appstore.svg | 16 ++++ src/svg/googleplay.svg | 13 +++ 12 files changed, 206 insertions(+), 37 deletions(-) create mode 100644 src/constants/link-types.js create mode 100644 src/css/elements/portfolio-project.scss create mode 100644 src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png create mode 100644 src/svg/app-page.svg create mode 100644 src/svg/appstore.svg create mode 100644 src/svg/googleplay.svg diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 113c79f..32017c0 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -11,33 +11,18 @@ - + + + + + + - - - - - - - - - - - - - - - - - + + - - - - - - + @@ -159,10 +144,10 @@ - + - + diff --git a/src/components/pages/portfolio.jsx b/src/components/pages/portfolio.jsx index 92b1ce2..350acbc 100644 --- a/src/components/pages/portfolio.jsx +++ b/src/components/pages/portfolio.jsx @@ -7,13 +7,23 @@ const PortfolioItem = (props) => { const description = props.project.description; const gallery = props.project.gallery; const links = props.project.links; + const pageLink = props.project.links; return (
-

{name}

+

+ {name} +

{description}

{gallery ?
    : ""}
      -
    • GitHub
      • + {links.map((link) => ( +
    • + {link.name} +
      • + ))}
    ); @@ -24,7 +34,7 @@ const PortfolioPage = (props) => {
      {props.portfolio.map((project) => ( -
    • +
      • ))} diff --git a/src/constants/link-types.js b/src/constants/link-types.js new file mode 100644 index 0000000..9c4e580 --- /dev/null +++ b/src/constants/link-types.js @@ -0,0 +1,5 @@ +export const APP = "app" +export const GITHUB = "github" +export const IPHONE = "iphone" +export const ANDROID = "android" +export const APP_PAGE = "app-page" diff --git a/src/css/basic.scss b/src/css/basic.scss index 0e0af39..51fde16 100644 --- a/src/css/basic.scss +++ b/src/css/basic.scss @@ -15,7 +15,9 @@ body { } - a{ +a, .link{ + color: $link-color; + text-decoration: none; &:hover, &:focus{ color: var(--pink) } @@ -36,4 +38,5 @@ body { @import "logo"; @import "elements/page-links"; @import "elements/recent-list"; -@import "elements/contacts"; \ No newline at end of file +@import "elements/contacts"; +@import "elements/portfolio-project"; \ No newline at end of file diff --git a/src/css/elements/contacts.scss b/src/css/elements/contacts.scss index a2a883f..14a718a 100644 --- a/src/css/elements/contacts.scss +++ b/src/css/elements/contacts.scss @@ -4,7 +4,6 @@ display: flex; justify-content: space-around; flex-wrap: wrap; - width: 60vw; margin: 0 auto; } @@ -13,5 +12,7 @@ font-size: 0.3em; color: var(--cyan); line-height: 0.8em; + margin:10px 15px; + display: block; } \ No newline at end of file diff --git a/src/css/elements/portfolio-project.scss b/src/css/elements/portfolio-project.scss new file mode 100644 index 0000000..d0d5655 --- /dev/null +++ b/src/css/elements/portfolio-project.scss @@ -0,0 +1,76 @@ +.portfolio{ + list-style: none; + padding: 20px; + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + justify-content: center; + +} +.project{ + display: flex; + flex-direction: column; + padding: 26px; + box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34); + border-radius: 10px; + background: var(--background); + font-family: $main-font; + text-align: center; + margin: 20px 0; + max-width: 70vw; + +} +.project-name{ + color: $header-color; + margin: 0; + & a{ + color: $header-color; + text-decoration: none; + } +} + +.project-gallery{ + list-style: none; + padding: 0; +} + +.project-links{ + padding: 0; + list-style: none; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + +} + +.project-link{ + display: flex; + align-items: center; + align-content: center; + vertical-align: center; + &::before{ + width: 30px; + margin-right: 10px; + } + &--github{ + &::before{ + content: url("../../svg/github-icon.svg"); + } + } + &--iphone{ + &::before{ + content: url("../../svg/appstore.svg"); + } + } + &--android{ + &::before{ + content: url("../../svg/googleplay.svg"); + } + } + &--app-page{ + &::before{ + content: url("../../svg/app-page.svg"); + } + } +} \ No newline at end of file diff --git a/src/css/variables.scss b/src/css/variables.scss index a7d9712..f618825 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -14,3 +14,5 @@ $ascii-line-height: 1.115em; $header-color: var(--green); +$main-font: 'Mononoki', monospace; +$link-color: var(--cyan); diff --git a/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png b/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png new file mode 100644 index 0000000000000000000000000000000000000000..b2f9e95d2280e2cfcac87f0fadf813aae2f03f64 GIT binary patch literal 412 zcmV;N0b~A&P)fMT2`q3+hOFtI8^dmpW1zqnTF z7nz{IyN8=()B5H0n7;&iuZGS;BZ*pBZKG|$eD|}z1bXkpZ|Qb(omK`Fpo$_IECoUj zhv%?h-z#14bH7{>Og*hP-C*wSrB|Bw5HPm(-{IQuHZ9IxgyB`RSMsYOSdPnVXLpSJ z5~!T|&Y%`5(7@4043IPlj^dkNg0h?y_k@-c;Yyy5SiFcsIi0nL|8Qd_8G9I8&Y#LY zBhkE^M!xvjbkVjT*WnQJviCg)1paVspDfWm{;YH}Ii=@hBzQ~9%6fv?AJNlblk5GN zo#fZh9F09b{dS})@lU>&83#50GFc@^Pkh?>&|mp;82MkZx0p$2@?%^80000 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/svg/appstore.svg b/src/svg/appstore.svg new file mode 100644 index 0000000..7054cbd --- /dev/null +++ b/src/svg/appstore.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/svg/googleplay.svg b/src/svg/googleplay.svg new file mode 100644 index 0000000..9b9f440 --- /dev/null +++ b/src/svg/googleplay.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + +