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 0000000..b2f9e95 Binary files /dev/null and b/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png differ diff --git a/src/reducers/site-content-reducer.js b/src/reducers/site-content-reducer.js index d628e27..8e6f219 100644 --- a/src/reducers/site-content-reducer.js +++ b/src/reducers/site-content-reducer.js @@ -1,3 +1,5 @@ +import {APP_PAGE, GITHUB} from "../constants/link-types"; + const initialState = { recentNews: ["nope"], portfolioItems: [ @@ -5,10 +7,16 @@ const initialState = { name: 'AnkiLan', description: 'The app created for pushing cards with english words and their definitions to AnkiLan', gallery: [], + pageLink: '', links: [ { - name: 'github', - type: 'github', + name: 'GitHub', + type: GITHUB, + src: 'https://github.com' + }, + { + name: 'App page', + type: APP_PAGE, src: 'https://github.com' }, ] @@ -17,10 +25,25 @@ const initialState = { name: 'Time garden', description: 'The Forest like app for desktop and mobile', gallery: [], + pageLink: '', links: [ { - name: 'github', - type: 'github', + name: 'GitHub', + type: GITHUB, + src: 'https://github.com' + } + + ] + }, + { + name: 'Time garden', + description: 'The Forest like app for desktop and mobile', + gallery: [], + pageLink: '', + links: [ + { + name: 'GitHub', + type: GITHUB, src: 'https://github.com' } diff --git a/src/svg/app-page.svg b/src/svg/app-page.svg new file mode 100644 index 0000000..60f31f2 --- /dev/null +++ b/src/svg/app-page.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + + + + + + + +