├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── cosmic.svg ├── favicon.ico ├── index.html ├── logo.svg └── manifest.json └── src ├── App.js ├── components ├── buttons │ └── Button.js ├── headers │ ├── H1.js │ └── H2.js ├── page │ └── Contact.js ├── parts │ ├── Anchor.js │ ├── Caption.js │ ├── Card.js │ ├── CategoryCard.js │ ├── Center.js │ ├── Contain.js │ ├── Figure.js │ ├── Paragraph.js │ └── PositionContainer.js └── section │ ├── Category.js │ ├── Footer.js │ ├── Nav.js │ ├── PartGrid.js │ ├── Single.js │ └── Wrap.js ├── font-awesome-4.7.0 ├── HELP-US-OUT.txt ├── css │ ├── font-awesome.css │ └── font-awesome.min.css ├── fonts │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── less │ ├── animated.less │ ├── bordered-pulled.less │ ├── core.less │ ├── fixed-width.less │ ├── font-awesome.less │ ├── icons.less │ ├── larger.less │ ├── list.less │ ├── mixins.less │ ├── path.less │ ├── rotated-flipped.less │ ├── screen-reader.less │ ├── stacked.less │ └── variables.less └── scss │ ├── _animated.scss │ ├── _bordered-pulled.scss │ ├── _core.scss │ ├── _fixed-width.scss │ ├── _icons.scss │ ├── _larger.scss │ ├── _list.scss │ ├── _mixins.scss │ ├── _path.scss │ ├── _rotated-flipped.scss │ ├── _screen-reader.scss │ ├── _stacked.scss │ ├── _variables.scss │ └── font-awesome.scss ├── index.js ├── layout └── Layout.js ├── serviceWorker.js └── utils ├── colors.js └── theme.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | .env 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Portfolio Website 2 | 3 | ![Full](https://github.com/3ndrius/portfolio/blob/master/public/4.jpg?raw=true) 4 | 5 | # Proudly powered by [Cosmic JS](https://cosmicjs.com/) 6 | Cosmic JS 7 | Portfolio was created to expirement and demonstrate the Cosmic JS multiple options Backend data is stored, management, and recieved from Cosmic JS. 8 | 9 | - ReactJS 10 | - Styled-Components 11 | - HTML 12 | - AdobeXD 13 | - (RWD - mobile, tablet, desktop) / css-grid, media 14 | - CMS from [Cosmic JS](https://cosmicjs.com/) 15 | 16 |
17 | 18 | ### Getting Started / Download 19 | 20 | ``` 21 | git clone https://github.com/3ndrius/portfolio.git 22 | cd portfolio 23 | npm install 24 | ``` 25 | 26 | ## Run 27 | 28 | ``` 29 | npm start 30 | ``` 31 | 32 | ### Develop 33 | 34 | ``` 35 | After install app, add your own bucket slug to app in 36 | - App 37 | - PartGrid 38 | - Single 39 | - Contact 40 | 41 | ``` 42 | 43 | ### Run in build react mode 44 | 45 | ``` 46 | npm run build 47 | ``` 48 | 49 | # [DEMO](https://portfolio-cosmic.netlify.com/) 50 | ![Desktop](https://github.com/3ndrius/portfolio/blob/master/public/5.jpg?raw=true) 51 | ![Tablet](https://github.com/3ndrius/portfolio/blob/master/public/6.jpg?raw=true) 52 | ![Mobile](https://github.com/3ndrius/portfolio/blob/master/public/1.jpg?raw=true) 53 | 54 |
55 | 56 | ## File structure 57 | 58 | ```bash 59 | App.js 60 | │ index.js 61 | │ serviceWorker.js 62 | │ 63 | ├───components 64 | │ ├───buttons 65 | │ │ Button.js 66 | │ │ 67 | │ ├───headers 68 | │ │ H1.js 69 | │ │ H2.js 70 | │ │ 71 | │ ├───page 72 | │ │ Contact.js 73 | │ │ 74 | │ ├───parts 75 | │ │ Anchor.js 76 | │ │ Caption.js 77 | │ │ Card.js 78 | │ │ CategoryCard.js 79 | │ │ Center.js 80 | │ │ Contain.js 81 | │ │ Figure.js 82 | │ │ Paragraph.js 83 | │ │ PositionContainer.js 84 | │ │ 85 | │ └───section 86 | │ Category.js 87 | │ Footer.js 88 | │ Nav.js 89 | │ PartGrid.js 90 | │ Single.js 91 | │ Wrap.js 92 | │ 93 | ├───font-awesome-4.7.0 94 | │ │ HELP-US-OUT.txt 95 | │ │ 96 | │ ├───css 97 | │ │ font-awesome.css 98 | │ │ font-awesome.min.css 99 | │ │ 100 | │ ├───fonts 101 | │ │ fontawesome-webfont.eot 102 | │ │ fontawesome-webfont.svg 103 | │ │ fontawesome-webfont.ttf 104 | │ │ fontawesome-webfont.woff 105 | │ │ fontawesome-webfont.woff2 106 | │ │ FontAwesome.otf 107 | │ │ 108 | │ ├───less 109 | │ │ animated.less 110 | │ │ bordered-pulled.less 111 | │ │ core.less 112 | │ │ fixed-width.less 113 | │ │ font-awesome.less 114 | │ │ icons.less 115 | │ │ larger.less 116 | │ │ list.less 117 | │ │ mixins.less 118 | │ │ path.less 119 | │ │ rotated-flipped.less 120 | │ │ screen-reader.less 121 | │ │ stacked.less 122 | │ │ variables.less 123 | │ │ 124 | │ └───scss 125 | │ font-awesome.scss 126 | │ _animated.scss 127 | │ _bordered-pulled.scss 128 | │ _core.scss 129 | │ _fixed-width.scss 130 | │ _icons.scss 131 | │ _larger.scss 132 | │ _list.scss 133 | │ _mixins.scss 134 | │ _path.scss 135 | │ _rotated-flipped.scss 136 | │ _screen-reader.scss 137 | │ _stacked.scss 138 | │ _variables.scss 139 | │ 140 | ├───layout 141 | │ Layout.js 142 | │ 143 | └───utils 144 | colors.js 145 | theme.js 146 | ``` 147 | 148 |
149 | 150 | ### This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 151 | 152 | 153 | 154 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "cosmicjs": "^3.2.14", 7 | "react": "^16.6.3", 8 | "react-dom": "^16.6.3", 9 | "react-pose": "^4.0.4", 10 | "react-pose-text": "^3.1.0", 11 | "react-router-dom": "^4.3.1", 12 | "react-scripts": "2.1.1", 13 | "styled-components": "^4.1.3", 14 | "styled-loaders": "^0.3.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": [ 26 | ">0.2%", 27 | "not dead", 28 | "not ie <= 11", 29 | "not op_mini all" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /public/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/1.jpg -------------------------------------------------------------------------------- /public/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/2.jpg -------------------------------------------------------------------------------- /public/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/3.jpg -------------------------------------------------------------------------------- /public/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/4.jpg -------------------------------------------------------------------------------- /public/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/5.jpg -------------------------------------------------------------------------------- /public/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/6.jpg -------------------------------------------------------------------------------- /public/cosmic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 23 | 24 | 26 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/react-portfolio-website/fbd7c743019fe9126797e1e584ccbc59f03362a8/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | //PACKAGE IMPORT 2 | import React, { Component } from 'react'; 3 | import {BrowserRouter, Switch, Route} from 'react-router-dom'; 4 | 5 | //CSS COMPONENT IMPORTS 6 | import './font-awesome-4.7.0/css/font-awesome.min.css'; 7 | import Layout from './layout/Layout'; 8 | import Wrap from './components/section/Wrap'; 9 | import Category from './components/section/Category'; 10 | import PartGrid from './components/section/PartGrid'; 11 | import Contact from './components/page/Contact'; 12 | import Single from './components/section/Single'; 13 | import Footer from './components/section/Footer'; 14 | import Center from './components/parts/Center'; 15 | 16 | class App extends Component { 17 | state = { 18 | category:null, 19 | hg:false 20 | } 21 | componentDidMount = async () => { 22 | const Cosmic = require('cosmicjs'); 23 | const api = Cosmic(); 24 | const bucket = api.bucket({ 25 | slug: process.env.REACT_APP_COSMIC_BUCKET || 'react-portfolio-website', 26 | read_key: process.env.REACT_APP_COSMIC_READ_KEY || '' 27 | }) 28 | const data = await bucket.getObjects({ 29 | type: 'categories' 30 | }) 31 | this.setState({ 32 | category: data.objects, 33 | }) 34 | document.addEventListener('scroll', () => { 35 | if(window.pageYOffset > 50 ) { 36 | this.setState({ 37 | hg: true 38 | }) 39 | } 40 | else{ 41 | this.setState({ 42 | hg: false 43 | }) 44 | } 45 | }); 46 | } 47 | handleMenu = () => { 48 | this.setState((prevProps) => ({visable: !prevProps.visable })); 49 | } 50 | render() { 51 | console.log(this.state.category); 52 | return ( 53 |
54 | 55 | 56 | <> 57 | 58 | 59 | }/> 60 | 61 | 62 | 63 | 64 | 65 | 66 |
" A portfolio is a set of pictures by someone, or photographs of examples of their work, which they use when entering competitions or applying for work. "
67 |
70 | ); 71 | } 72 | } 73 | 74 | export default App; 75 | -------------------------------------------------------------------------------- /src/components/buttons/Button.js: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | const Button = styled.button` 5 | background: ${({theme}) => theme.colors.light} 6 | color: ${({theme}) => theme.colors.darkOne} 7 | font-size: ${({theme}) => theme.fontWg.thin} 8 | font-size: 1em; 9 | padding:10px; 10 | border-radius:50px; 11 | height:40px; 12 | width:200px; 13 | border:1px solid ${({theme}) => theme.colors.darkOne}; 14 | cursor:pointer; 15 | transition:all .7s ease; 16 | 17 | :hover{ 18 | background: ${({theme}) => theme.colors.dark}; 19 | color: ${({theme}) => theme.colors.light} 20 | } 21 | `; 22 | export default Button; 23 | -------------------------------------------------------------------------------- /src/components/headers/H1.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const H1 = styled.h1 ` 4 | color:${({theme}) => theme.colors.dark} 5 | font-size: ${(props) => props.isBig ? '3em' : '1em'}; 6 | text-align:${(props) => props.center ? 'center' : 'left'}; 7 | max-height:100px; 8 | 9 | `; 10 | 11 | export default H1; -------------------------------------------------------------------------------- /src/components/headers/H2.js: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | const H2 = styled.h2` 5 | font-size:1.6em; 6 | margin:0; 7 | font-weight: ${({theme}) => theme.fontWg.reg} 8 | `; 9 | 10 | 11 | export default H2; -------------------------------------------------------------------------------- /src/components/page/Contact.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import styled from 'styled-components' 3 | import Center from '../parts/Center'; 4 | import H1 from '../headers/H1'; 5 | import Par from './../parts/Paragraph'; 6 | import Img from './../parts/Figure'; 7 | 8 | 9 | const PageWrap = styled.div` 10 | ${({theme}) => theme.media.mobile} { 11 | width:100%; 12 | height:100%; 13 | padding:30px 0; 14 | 15 | } 16 | ${({theme}) => theme.media.tablet} { 17 | padding:150px 0; 18 | } 19 | 20 | `; 21 | 22 | export default class Contact extends Component { 23 | 24 | state = { 25 | content: null 26 | } 27 | componentDidMount = async() => { 28 | const Cosmic = require('cosmicjs') 29 | const api = Cosmic() 30 | const bucket = api.bucket({ 31 | slug: process.env.REACT_APP_COSMIC_BUCKET || 'imageapp', 32 | read_key: process.env.REACT_APP_COSMIC_READ_KEY || '' 33 | }) 34 | const data = await bucket.getObject({ 35 | slug: 'contact' 36 | }) 37 | this.setState({ 38 | content:data.object 39 | }) 40 | } 41 | render() { 42 | console.log(this.state.content); 43 | 44 | return ( 45 | 46 |
47 | {this.state.content &&

{this.state.content.title}

} 48 | {this.state.content && } 49 |

About author:

50 | Created by: 3ndrius 51 | 52 |
53 | {this.state.content && img} 54 |
55 | 56 | ) 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/parts/Anchor.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | const Anchor = styled.span` 3 | position:absolute; 4 | top:0; 5 | left:0; 6 | z-index:100; 7 | height:50px; 8 | width:50px; 9 | display:flex; 10 | justify-content:center; 11 | color:${({theme}) => theme.colors.dark}; 12 | border:1px solid ${({theme}) => theme.colors.dark} 13 | border-radius:50%; 14 | align-items:center; 15 | transition:all .8s ease; 16 | text-decoration:none; 17 | `; 18 | export default Anchor; -------------------------------------------------------------------------------- /src/components/parts/Caption.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const CaptionWrap = styled.div` 4 | background: ${({theme}) => theme.colors.light}; 5 | width:100%; 6 | height:100%; 7 | position:relative; 8 | order:${(props) => props.index % 2 === 0 ? '2' : '1'}; 9 | display:flex; 10 | justify-content:center; 11 | align-items:center; 12 | 13 | 14 | `; 15 | 16 | export default CaptionWrap; -------------------------------------------------------------------------------- /src/components/parts/Card.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Card = styled.div` 4 | width:320px; 5 | height:400px; 6 | background:${({theme}) => theme.colors.lightOne}; 7 | overflow:hidden; 8 | justify-self:center; 9 | transition:all .8s ease; 10 | cursor:pointer; 11 | position:relative; 12 | opacity:0.7; 13 | display:flex; 14 | justify-content:center; 15 | align-items:center; 16 | 17 | a{ 18 | transform: translate(15px, -150%); 19 | } 20 | 21 | :hover{ 22 | transform: translateY(-5px); 23 | opacity:1; 24 | 25 | 26 | } 27 | :hover a{ 28 | transform:translate(15px, 20%); 29 | } 30 | 31 | `; 32 | export default Card; -------------------------------------------------------------------------------- /src/components/parts/CategoryCard.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const CategoryCard = styled.div ` 4 | display:grid; 5 | width:100%; 6 | padding:10px 0; 7 | grid-template-columns: minmax(320px, 640px); 8 | img{ 9 | width:100%; 10 | height:auto; 11 | object-fit: cover; 12 | 13 | } 14 | 15 | ${({theme}) => theme.media.mobile} { 16 | grid-template-columns:${(props) => props.index % 2 === 0 ? '390px 250px' : '250px 390px'}; 17 | font-size:0.6em; 18 | grid-template-rows:300px; 19 | img{ 20 | 21 | height:300px; 22 | width:100%; 23 | background:yellow; 24 | box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, .15); 25 | order:${(props) => props.index % 2 === 0 ? '1' : '2'}; 26 | } 27 | } 28 | ${({theme}) => theme.media.tablet} { 29 | grid-template-columns:${(props) => props.index % 2 === 0 ? '550px 350px' : '350px 550px'}; 30 | font-size:0.8em; 31 | grid-template-rows:400px; 32 | img{ 33 | 34 | height:400px; 35 | width:100%; 36 | background:yellow; 37 | box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, .15); 38 | order:${(props) => props.index % 2 === 0 ? '1' : '2'}; 39 | 40 | } 41 | ${({theme}) => theme.media.desktop} { 42 | display:grid; 43 | font-size:1.1em; 44 | grid-template-columns:${(props) => props.index % 2 === 0 ? '850px 450px' : '450px 850px'}; 45 | grid-template-rows:600px; 46 | width:100%; 47 | 48 | img{ 49 | height:600px; 50 | 51 | } 52 | } 53 | 54 | `; 55 | export default CategoryCard; -------------------------------------------------------------------------------- /src/components/parts/Center.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Center = styled.div` 4 | max-width:1100px; 5 | height:100%; 6 | margin:30px auto; 7 | padding:0 60px; 8 | box-sizing:border-box; 9 | font-size:${(props) => props.fs ? '2.1em' : '0.7em'}; 10 | text-align:${(props) => props.center ? 'justify' : 'left'}; 11 | ${({theme}) => theme.media.tablet} { 12 | margin:150px auto; 13 | font-size:${(props) => props.fs ? '2.3em' : '1em'}; 14 | } 15 | 16 | `; 17 | export default Center; 18 | 19 | -------------------------------------------------------------------------------- /src/components/parts/Contain.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const ContainerCategory = styled.div` 4 | height:100%; 5 | max-width:640px; 6 | margin:250px auto 150px auto; 7 | box-sizing:border-box; 8 | a{ 9 | padding-left:20px; 10 | } 11 | ${({theme}) => theme.media.mobile} { 12 | 13 | max-width:640px; 14 | a{ 15 | padding-left:0px; 16 | } 17 | } 18 | ${({theme}) => theme.media.tablet} { 19 | max-width:800px; 20 | margin:250px auto; 21 | } 22 | ${({theme}) => theme.media.desktop} { 23 | max-width:1300px; 24 | } 25 | `; 26 | 27 | export default ContainerCategory; -------------------------------------------------------------------------------- /src/components/parts/Figure.js: -------------------------------------------------------------------------------- 1 | 2 | import styled from 'styled-components'; 3 | 4 | const Img = styled.img` 5 | object-fit: cover; 6 | width: ${(props) => props.responsive ? '100%' : ''}; 7 | `; 8 | export default Img; -------------------------------------------------------------------------------- /src/components/parts/Paragraph.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | 4 | const Par = styled.p` 5 | 6 | `; 7 | export default Par; -------------------------------------------------------------------------------- /src/components/parts/PositionContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Position = styled.div` 4 | background:${({theme}) => theme.colors.light}; 5 | box-sizing:border-box; 6 | padding:0 20px; 7 | 8 | 9 | ${({theme}) => theme.media.mobile} { 10 | height:250px; 11 | width:400px; 12 | position:relative; 13 | box-shadow: ${(props) => props.index % 2 === 0 ? ' -9px 11px 14px 0 rgba(0, 0, 0, .15)' : ' 11px 11px 14px 0 rgba(0, 0, 0, .15)'}; 14 | left:${(props) => props.index % 2 === 0 ? '-100px' : '100px'}; 15 | :before{ 16 | right:${(props) => props.index % 2 === 0 ? '0' : '200px'}; 17 | content:''; 18 | height:100px; 19 | position:absolute; 20 | width:100px; 21 | top:0; 22 | border-right:${(props) => props.index % 2 === 0 ? '1px solid black;' : 'none'}; 23 | border-left:${(props) => props.index % 2 !== 0 ? '1px solid black;' : 'none'}; 24 | border-top:1px solid black; 25 | } 26 | 27 | } 28 | ${({theme}) => theme.media.tablet} { 29 | height:300px; 30 | padding:0 40px; 31 | width:500px; 32 | :before{ 33 | right:${(props) => props.index % 2 === 0 ? '0' : '250px'}; 34 | } 35 | } 36 | ${({theme}) => theme.media.desktop} { 37 | height:450px; 38 | width:550px; 39 | padding:0 50px; 40 | h1{ 41 | margin-bottom:60px; 42 | } 43 | ::before{ 44 | right:${(props) => props.index % 2 === 0 ? '0' : '350px'}; 45 | } 46 | } 47 | `; 48 | 49 | export default Position; -------------------------------------------------------------------------------- /src/components/section/Category.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import CategoryCard from './../parts/CategoryCard'; 3 | import CaptionWrap from '../parts/Caption'; 4 | import Button from './../buttons/Button'; 5 | import H1 from '../headers/H1'; 6 | import ContainerCategory from './../parts/Contain'; 7 | import Position from './../parts/PositionContainer'; 8 | import { Link } from 'react-router-dom' 9 | import Par from './../parts/Paragraph'; 10 | 11 | export default function Category(props) { 12 | console.log("Props category", props); 13 | return ( 14 | 15 | {props.category && props.category.map((item, index) => { 16 | return( 17 | 18 | img 19 | 20 | 21 |

{item.title}

22 | 23 | 24 | 25 | 26 | 27 | ) 28 | })} 29 | 30 | ) 31 | } 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/components/section/Footer.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import styled from 'styled-components'; 4 | 5 | 6 | const FootWrap = styled.div` 7 | width:100%; 8 | height:350px; 9 | display:flex; 10 | justify-content:center; 11 | align-items:center; 12 | flex-direction:column; 13 | a{ 14 | color:#29AAE1; 15 | text-decoration:none; 16 | } 17 | i{ 18 | margin:6px; 19 | cursor:pointer; 20 | } 21 | span{ 22 | display:flex; 23 | justify-content:center; 24 | align-items:center; 25 | 26 | } 27 | 28 | `; 29 | 30 | export default function Footer() { 31 | return ( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | Proudly powered by: Cosmic JS 40 | cosmic_logo 41 | 42 | 43 | 44 | ) 45 | } 46 | -------------------------------------------------------------------------------- /src/components/section/Nav.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import styled from 'styled-components'; 3 | import posed from 'react-pose'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | const Menu = styled.div` 7 | position:relative; 8 | height: 31px; 9 | width: 31px; 10 | display: inline-block; 11 | cursor: pointer; 12 | z-index: 9900; 13 | `; 14 | const Bar1 = styled.div` 15 | width: 30px; 16 | height: 3px; 17 | margin:6px 0; 18 | transition: 0.4s; 19 | border-radius: 0px; 20 | font-size: .5px; 21 | display: block; 22 | background:black; 23 | transform:${({val}) => val ? 'rotate(-45deg) translate(-5px, 3px)' : 'rotate(-0deg) translate(-0px, 0px)'}; 24 | `; 25 | const Bar2 = styled.div` 26 | width: 30px; 27 | height: 3px; 28 | background-color:black; 29 | margin:6px 0; 30 | transition: 0.4s; 31 | border-radius: 0px; 32 | font-size: .5px; 33 | display: block; 34 | opacity:${({val}) => val ? '0' : '1'}; 35 | `; 36 | const Bar3 = styled.div` 37 | width: 30px; 38 | height: 3px; 39 | background-color:black 40 | margin:6px 0; 41 | transition: 0.4s; 42 | border-radius: 0px; 43 | font-size: .5px; 44 | display: block; 45 | transform:${({val}) => val ? 'rotate(45deg) translate(-10px, -8px)' : 'rotate(-0deg) translate(-0px, 0px)'}; 46 | `; 47 | const pOverlay = posed.div({ 48 | true: { 49 | x: '0%', 50 | opacity:1, 51 | transition: { duration: 600 }, 52 | }, 53 | false: { 54 | x:'150%', 55 | opacity:0, 56 | }, 57 | }); 58 | 59 | const pOverlay2 = posed.ul({ 60 | true: { 61 | x: 0, 62 | opacity:1, 63 | transition: { duration: 1200 }, 64 | }, 65 | false: { 66 | x:'150%', 67 | opacity:0, 68 | }, 69 | }); 70 | const Overlay = styled(pOverlay)` 71 | position:fixed; 72 | top:0; 73 | left:0; 74 | height:100vh; 75 | width:100%; 76 | z-index:100; 77 | background:${({theme}) => theme.colors.light} 78 | // display:${({val}) => val ? 'block' : 'none'}; 79 | `; 80 | const ListMenu = styled(pOverlay2)` 81 | display:flex; 82 | justify-content:center; 83 | align-items:center; 84 | flex-direction:column; 85 | list-style-type:none; 86 | margin: 4%; 87 | li{ 88 | font-size:4em; 89 | font-weight:${({theme}) => theme.fontWg.fat}; 90 | transition: all 1s ease; 91 | :hover{ 92 | color:${({theme}) => theme.colors.lightOne} 93 | transform: translateX(5px); 94 | } 95 | } 96 | `; 97 | class Nav extends Component { 98 | state={ 99 | visable: false 100 | } 101 | handleMenu = () => { 102 | this.setState((prevState) => ({visable: !prevState.visable })); 103 | } 104 | 105 | render() { 106 | return ( 107 | 108 | 109 | 110 |
  • Home
    • 111 |
  • Contact
    • 112 |     113 |     114 | 115 | 116 | 117 |     118 | ) 119 | } 120 | } 121 | 122 | export default Nav; 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /src/components/section/PartGrid.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import styled from 'styled-components' 3 | import Card from '../parts/Card'; 4 | import Img from '../parts/Figure'; 5 | import Anchor from './../parts/Anchor'; 6 | import { Link } from 'react-router-dom'; 7 | const GridContainer = styled.div` 8 | min-height:100%; 9 | display:grid; 10 | margin:150px auto; 11 | justify-items:center; 12 | grid-template-column:1fr; 13 | grid-template-rows:400px; 14 | grid-gap:10px; 15 | ${({theme}) => theme.media.mobile} { 16 | grid-template-columns:320px 320px; 17 | width:640px; 18 | } 19 | ${({theme}) => theme.media.tablet} { 20 | grid-template-columns:320px 320px 320px; 21 | width:960px; 22 | } 23 | ${({theme}) => theme.media.desktop} { 24 | grid-template-columns:320px 320px 320px 320px; 25 | width:1280px; 26 | margin:200px auto 450px auto; 27 | } 28 | `; 29 | export default class PartGrid extends Component { 30 | state ={ 31 | picture: [] 32 | } 33 | componentDidMount = async() => { 34 | const slug = this.props.match.params.slug; 35 | 36 | const Cosmic = require('cosmicjs') 37 | const api = Cosmic() 38 | const bucket = api.bucket({ 39 | slug: process.env.REACT_APP_COSMIC_BUCKET || 'imageapp', 40 | read_key: process.env.REACT_APP_COSMIC_READ_KEY || '' 41 | }) 42 | const data = await bucket.getObject({ 43 | slug: `${slug}` 44 | }) 45 | this.setState({ 46 | picture:data.object 47 | }) 48 | } 49 | render() { 50 | return ( 51 | 52 | { this.state.picture.metadata && this.state.picture.metadata.images.map((item, index) => { 53 | return( 54 | 55 | grid-img 56 | 57 | 58 | 59 | 60 | ) 61 | })} 62 | 63 | ) 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/section/Single.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | import CategoryCard from './../parts/CategoryCard'; 4 | import CaptionWrap from '../parts/Caption'; 5 | import Button from './../buttons/Button'; 6 | import H1 from '../headers/H1'; 7 | import ContainerCategory from './../parts/Contain'; 8 | import Position from './../parts/PositionContainer'; 9 | import { Link } from 'react-router-dom'; 10 | import Par from './../parts/Paragraph'; 11 | 12 | export default class Single extends Component { 13 | state ={ 14 | img: null 15 | } 16 | componentDidMount = async() => { 17 | const link = this.props.match.params.slug; 18 | 19 | const Cosmic = require('cosmicjs') 20 | const api = Cosmic() 21 | const bucket = api.bucket({ 22 | slug: process.env.REACT_APP_COSMIC_BUCKET || 'imageapp', 23 | read_key: process.env.REACT_APP_COSMIC_READ_KEY || '' 24 | }) 25 | const data = await bucket.getObject({ 26 | slug: `${link}` 27 | }) 28 | this.setState({ 29 | img:data.object 30 | }) 31 | } 32 | 33 | render() { 34 | return ( 35 | 36 | 37 | {this.state.img && img } 38 | 39 | 40 | {this.state.img &&

    {this.state.img.title}

    } 41 | {this.state.img && } 42 |     43 |     44 |     45 |

    46 | 47 |     48 | ) 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/section/Wrap.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import H2 from '../headers/H2'; 3 | import React from 'react' 4 | import Nav from './Nav'; 5 | 6 | 7 | 8 | const Wraps = styled.div` 9 | width:100%; 10 | height:100vh; 11 | position:fixed; 12 | display:${(props) => props.hg ? 'none' :'block' }; 13 | top:0; 14 | left:0; 15 | z-index:1000; 16 | box-sizing:border-box; 17 | background: linear-gradient(to bottom, #ffffff 50%, rgba(255, 255, 255, 0.8) 100%); 18 | span{ 19 | display:flex; 20 | max-width:1200px; 21 | margin:20px auto; 22 | justify-content:space-between; 23 | align-items:center; 24 | padding:0 30px ; 25 | box-sizing:inherit; 26 | } 27 | a{ 28 | color:${({theme}) => theme.colors.dark} ; 29 | text-decoration:none; 30 | } 31 | i{ 32 | display:flex 33 | justify-content:center; 34 | position:absolute; 35 | bottom:5%; 36 | left:0; 37 | right:0; 38 | } 39 | `; 40 | const Name = styled.img` 41 | margin:0 auto; 42 | width:100%; 43 | padding:30px 9%; 44 | box-sizing:border-box; 45 | text-transform:uppercase; 46 | display:flex; 47 | justify-content:center; 48 | align-items:center; 49 | height:70%; 50 | position:relative; 51 | `; 52 | export default function Wrap(props) { 53 | return ( 54 | 55 | 56 |

    JohnDoe

     57 |