├── .DS_Store ├── .babelrc ├── .gitignore ├── README.md ├── package.json ├── src ├── .DS_Store ├── components │ ├── .DS_Store │ ├── AboutPage.js │ ├── App.js │ ├── BlogPage.js │ ├── CarouselIntro.js │ ├── CarouselItemTemplate.js │ ├── ContactCard.js │ ├── ContactPage.js │ ├── Footer.js │ ├── GalleryContainer.js │ ├── Home.js │ ├── NavigationBar.js │ ├── PhotoProjects │ │ ├── 01.05.19_Wedding_WW2.js │ │ ├── 01.26.19_JJ_Proposal.js │ │ ├── 02.02.19_Nola.js │ │ ├── 03.24.18_March_4_Our_Lives.js │ │ ├── 05.01.17_Brielle_of_Tarth.js │ │ ├── 05.21.18_Lauren_Night_Shoot.js │ │ ├── 06.12.18_Gad_Suzzane.js │ │ ├── 08.05.18_Wedding_Cbass_Becca.js │ │ ├── 08.18.18_Urban_SF.js │ │ ├── 09.01.19_Ninasky.js │ │ ├── 09.02.17_Yvonne_Wedding.js │ │ ├── 10.04.18_Laruen_Lychee.js │ │ ├── 10.11.18_Wedding_AA.js │ │ ├── 10.15.17_Lilly_LinkedIn.js │ │ ├── 10.24.18_Baby_Ginger.js │ │ ├── 11.12.17_Boardwalk_Kristina.js │ │ ├── 12.15.18_Wedding_WW.js │ │ ├── 2017_S.E.A_Backpacking.js │ │ ├── 2017_South_America.js │ │ ├── 2018_Europe.js │ │ ├── About_Me_Config.js │ │ ├── All_Projects_Config.js │ │ ├── Featured_Gallery.js.donotuse │ │ └── Featured_Portfolio.js │ ├── Projects │ │ ├── All_Projects.js │ │ ├── All_Projects_Copy.js │ │ ├── ProjectContainer.js │ │ ├── ProjectHeader.js │ │ └── ProjectTemplate.js │ ├── ResponsiveGallery-InfSCR.js │ ├── ResponsiveGallery.js │ ├── Routes.js │ ├── Store │ │ ├── All_ProjectsReducer.js │ │ └── Reducer.js │ ├── TestPage.css │ ├── TestPage.js │ ├── configs │ │ ├── constants.js │ │ └── shuffle.js │ └── css │ │ └── App.css ├── index.html ├── index.js └── lib │ ├── .DS_Store │ └── animate.min.css └── webpack.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielnuwin/React-Photography-Portfolio/97ed5e27b074d531a1d7024696369ac27b24c766/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "stage-0"], 3 | //Can't compile for some reason 4 | // "plugins": [ 5 | // "babel-preset-stage-0", 6 | // "transform-object-rest-spread", 7 | // "transform-es2015-destructuring" 8 | // ], 9 | "env": { 10 | "debug": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json 4 | 5 | # production 6 | dist 7 | 8 | #images 9 | /src/images/ 10 | 11 | # misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | **/.DS_Store 22 | .DS_Store 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Photography Portfolio 2 | > My Photography Portfolio. 3 | 4 | [Demo](https://danielnuwin.github.io) 5 | ## Quick Start 6 | > Note: Images are private for my use only, therefore will not build without it. However the demo link will showcase the portfolio. 7 | ``` bash 8 | # Install dependencies 9 | npm install 10 | 11 | # Serve on localhost:3000 12 | npm start 13 | 14 | # Build for production 15 | npm run build 16 | ``` 17 | 18 | ## Code Work Flow 19 | ![Flow Diagram](https://www.dropbox.com/s/6l7tl4mvuh4dci7/Portfolio_Flowdiagram.png?raw=1) 20 | 21 | ### Author 22 | 23 | Daniel Nguyen 24 | 25 | ### Version 26 | 27 | 1.0.0 28 | 29 | ### License 30 | 31 | This project is licensed under the MIT License 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_photography_portfolio", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development --open --hot --history-api-fallback", 8 | "build": "webpack --mode production --history-api-fallback", 9 | "deploy": "npm run build && gh-pages -d dist" 10 | }, 11 | "homepage": "https://github.com/danielnuwin/React_Photography_Portfolio", 12 | "author": "Daniel Nguyen", 13 | "license": "MIT", 14 | "dependencies": { 15 | "animate.css": "^3.7.0", 16 | "bootstrap": "^4.1.3", 17 | "classnames": "^2.2.6", 18 | "cors": "^2.8.4", 19 | "file-loader": "^1.1.11", 20 | "gh-pages": "^2.0.1", 21 | "jquery": "^3.3.1", 22 | "mdbreact": "^4.7.1", 23 | "muicss": "^0.9.41", 24 | "react": "^16.2.0", 25 | "react-anchor-link-smooth-scroll": "^1.0.11", 26 | "react-animate-on-scroll": "^2.1.5", 27 | "react-dom": "^16.2.0", 28 | "react-fade-in": "^0.1.6", 29 | "react-ga": "^2.5.3", 30 | "react-headroom": "^2.2.4", 31 | "react-images": "^0.5.19", 32 | "react-lazy-load": "^3.0.13", 33 | "react-motions": "^0.3.0", 34 | "react-parallax": "^2.0.1", 35 | "react-redux": "^6.0.0", 36 | "react-responsive-masonry": "^2.0.0", 37 | "react-router": "^4.3.1", 38 | "react-router-dom": "^4.3.1", 39 | "react-web-tabs": "^1.0.1", 40 | "reactstrap": "^6.4.0", 41 | "redux": "^4.0.1" 42 | }, 43 | "devDependencies": { 44 | "babel-core": "^6.26.0", 45 | "babel-loader": "^7.1.4", 46 | "babel-plugin-transform-es2015-destructuring": "^6.23.0", 47 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 48 | "babel-preset-env": "^1.6.1", 49 | "babel-preset-react": "^6.24.1", 50 | "babel-preset-stage-0": "^6.24.1", 51 | "clean-webpack-plugin": "^0.1.19", 52 | "css-loader": "^0.28.11", 53 | "html-webpack-plugin": "^3.1.0", 54 | "style-loader": "^0.20.3", 55 | "url-loader": "^1.0.1", 56 | "webpack": "^4.4.0", 57 | "webpack-cli": "^3.1.1", 58 | "webpack-dev-server": "^3.1.1" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielnuwin/React-Photography-Portfolio/97ed5e27b074d531a1d7024696369ac27b24c766/src/.DS_Store -------------------------------------------------------------------------------- /src/components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielnuwin/React-Photography-Portfolio/97ed5e27b074d531a1d7024696369ac27b24c766/src/components/.DS_Store -------------------------------------------------------------------------------- /src/components/AboutPage.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Container, Row, Col, Mask, Fa, View, Button } from 'mdbreact'; 3 | import './css/App.css' 4 | import ScrollAnimation from 'react-animate-on-scroll'; 5 | import ReactGA from 'react-ga'; 6 | // ReactGA.pageview(window.location.href); 7 | 8 | const AboutPage = () => { 9 | window.scroll({ 10 | top: 0, 11 | behavior: "smooth" 12 | }); // console.log("*******Lazy Load*******"); 13 | ReactGA.event({ 14 | category: 'LandedOn: /AboutPage', 15 | action: 'Landed On', 16 | }); 17 | return ( 18 | 19 | 20 | 21 | {/*

Who am I?

*/} 22 |

23 | Welcome to my portfolio! 24 |
25 | I'm a photographer, avid wanderer, and a software engineer. 26 | I was born in the Bay Area but spent most of my 27 | growing up days in Southern California where I attended college. I've occassionally 28 | bounced around the world traveling for a couple years here and there....rest to be continued! 29 |

30 |
31 | 32 | 33 | 34 | 35 | Sample image 36 | 37 | 38 | 39 | 40 | {/*
Me
 41 |

I am Daniel NuWin

42 |

"Travel isn’t always pretty. It isn’t always comfortable. Sometimes it hurts, 43 | it even breaks your heart. But that’s okay. The journey changes you; 44 | it should change you. It leaves marks on your memory, on your consciousness, 45 | on your heart, and on your body. You take something with you. Hopefully, you 46 | leave something good behind. -- Anthony Bourdain"

47 | 48 |

.... Under Construction

*/} 49 |

Photographer

50 |

51 | What kind of photography do I do? Well, I do all types. Anywhere from travel, landscapes, lifestyle to wedddings, portraits, and events. Well 52 | pretty much whatever you need me to do I can do for you! I've even dabbled in food and product photography. 53 |

54 |

55 | Initially, I found my inspiration came from traveling around the world seeing different kinds of people, places, and things. As you can tell from my photos, I love colors. 56 |
57 |
58 | -- Open for shoots and collaborations! Feel free to email me for rates and more info at danielnuwin@gmail.com 59 |

60 | 61 |

My Camera Gear

62 |
    63 |
  • Canon 5D mark iii
    • 64 | {/*
  • Canon 5D mark III
    • */} 65 |
  • Sigma 35mm f/1.4
    • 66 |
  • Tamron 24-70mm f/2.8
    • 67 |
  • Canon 70-200mm is f/2.8
    • 68 |
  • Canon 50mm f/1.8
    • 69 |
  • Canon Speedlite 430ex ii
    • 70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | {/* 78 |
79 | Lifestyle
80 | */} 81 |

Traveler

82 |

24 Countries --- 75+ Cities ---- Millions of stories

83 |
84 | Travel Blog Under Construction... 85 | 86 | 87 | 88 | 89 | Sample image 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | Sample image 99 | 100 | 101 | 102 | 103 |

Software Engineer

104 |

105 | I'm a software engineer with 5 years experience in the industry. I graduated with a B.S. in Computer Science at the University of California, Irvine. 106 | My expertise includes Frontend development with React and Angular, some Backend development in Java, as well as Quality Assurance. 107 |
108 | {/*
109 | My Technical Resume */} 110 |
111 | Github Repo 112 |

113 | 114 |

This Portfolio was built with

115 |
    116 |
  • Reactjs - A JavaScript framework for building user interfaces
    • 117 |
  • Redux - is a predictable state container for JavaScript apps
    • 118 |
  • Webpack - JavaScript module bundler
    • 119 |
  • Babel - JavaScript transpiler/compiler
    • 120 |
121 | 122 | 123 | 124 | 125 | 126 | ); 127 | } 128 | export default AboutPage; -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './css/App.css'; 3 | //Components 4 | import NavigationBar from './NavigationBar'; 5 | import Routes from './Routes' 6 | import FooterPage from './Footer'; 7 | // import Home from './Home' 8 | // import ScrollAnimation from 'react-animate-on-scroll'; 9 | import Headroom from 'react-headroom' 10 | import ReactGA from 'react-ga'; 11 | 12 | ReactGA.initialize('UA-128379418-1'); 13 | ReactGA.pageview(window.location.href); 14 | 15 | class App extends Component { 16 | constructor(props) { 17 | super(props); 18 | this.state = { 19 | } 20 | } 21 | 22 | componentDidMount() { 23 | // console.log("App > CDM() > Headroom Scroll"); 24 | 25 | window.scroll({ 26 | top: 70, 27 | behavior: "smooth" 28 | }); 29 | } 30 | 31 | render() { 32 | // console.log("App > Render()",this.props); 33 | 34 | return ( 35 |
36 | 37 | 38 |
39 |
40 |

_

41 |
42 | 43 | 44 | 45 | 46 |
47 | ); 48 | } 49 | } 50 | 51 | export default App; 52 | 53 | -------------------------------------------------------------------------------- /src/components/BlogPage.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Container, Row, Col, Card, CardBody, Mask, Fa, View, Badge } from 'mdbreact'; 3 | 4 | const BlogPage = () => { 5 | const newsStyle = { borderBottom: '1px solid #e0e0e0', marginBottom: '1.5rem' } 6 | return ( 7 | 8 |

My Brain Farts

9 |

10 | Just random spirts of things going on in my noggin. Mostly random, sometimes serious, on 11 | oncassion funny, but hopefully pretty much introspective. Most of my life experiences 12 | stem from all my years of traveling, putting myself in really uncomfortable situations. 13 |

14 | 15 | 16 |
17 | 18 | Sample image 19 | 20 | 21 | 22 | 23 |
24 |
Culinary
 25 |

27/02/2018

26 |
27 |

My Vegas Vacation

28 |

Viva Las Vegas

29 |
30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | Sample image 38 | 39 | 40 | 41 | 42 | 43 | 44 |

26/02/2018

45 |
46 | 47 | Something I ate Last years 48 | 49 | 50 |
51 | 52 | 53 |
54 | 55 |
56 | 57 | 58 | 59 | Sample image 60 | 61 | 62 | 63 | 64 | 65 | 66 |

25/02/2018

67 |
68 | 69 | Something I ate Last years 70 | 71 | 72 |
73 | 74 | 75 |
76 | 77 |
78 | 79 | 80 | 81 | Sample image 82 | 83 | 84 | 85 | 86 | 87 | 88 |

24/03/2018

89 |
90 | 91 | Something I ate Last years 92 | 93 | 94 |
95 | 96 | 97 |
98 | 99 |
100 | 101 | 102 | 103 | Sample image 104 | 105 | 106 | 107 | 108 | 109 | 110 |

23/02/2018

111 |
112 | 113 | Something I ate Last years 114 | 115 | 116 |
117 | 118 | 119 |
120 | 121 | 122 | 123 | 124 | ); 125 | } 126 | 127 | export default BlogPage; -------------------------------------------------------------------------------- /src/components/CarouselIntro.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import { 4 | Mask, Row, Col, Fa, Button, View, Container, 5 | Carousel, CarouselCaption, CarouselInner, CarouselItem 6 | } from 'mdbreact'; 7 | import './css/App.css' 8 | // import Slideshow from './Slideshow'; 9 | // import ScrollAnimation from 'react-animate-on-scroll'; 10 | // import { Parallax } from "react-parallax"; 11 | // import AnchorLink from 'react-anchor-link-smooth-scroll' 12 | // import { Bounce } from 'react-motions' 13 | // import { BrowserRouter as Router, Route, Link, withRouter, Redirect } from "react-router-dom"; 14 | // import FadeIn from 'react-fade-in'; 15 | import CarouselItemTemplate from './CarouselItemTemplate' 16 | 17 | class CarouselIntro extends React.Component { 18 | constructor(props) { 19 | super(props), 20 | this.state = { 21 | } 22 | } 23 | 24 | render() { 25 | return ( 26 |
27 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | ); 45 | } 46 | }; 47 | 48 | export default CarouselIntro; -------------------------------------------------------------------------------- /src/components/CarouselItemTemplate.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom' 3 | import { 4 | Mask, Row, Col, Fa, Button, View, Container, 5 | Carousel, CarouselCaption, CarouselInner, CarouselItem 6 | } from 'mdbreact'; 7 | import './css/App.css' 8 | import ScrollAnimation from 'react-animate-on-scroll'; 9 | import { Parallax } from "react-parallax"; 10 | import AnchorLink from 'react-anchor-link-smooth-scroll' 11 | import { Bounce } from 'react-motions' 12 | import { BrowserRouter as Router, Route, Link, withRouter, Redirect } from "react-router-dom"; 13 | import FadeIn from 'react-fade-in'; 14 | 15 | import ReactGA from 'react-ga'; 16 | 17 | function trackGA(link) { 18 | ReactGA.event({ 19 | category: 'Clicked: ' + link, 20 | action: 'Clicked Intro Menu', 21 | }); 22 | } 23 | 24 | const CarouselItemTemplate = (props) => { 25 | const { view } = props; 26 | return ( 27 | 28 | 29 | {/* Second slide */} 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 |
39 |
40 |

Daniel NuWin

41 | {/*

Photography

*/} 42 |

Photography | Travel | Tech

43 |
44 |
45 | {/*
“Embrace the unknown for which it will eventually bring you to where you need to be”
*/} 46 | 47 | 48 | 49 | 50 | 51 | 52 | 55 | {/* */} 56 | 57 | 58 | 59 |
60 | 61 | 62 | 63 | 64 |
65 | 66 | 67 | 68 | 69 | 70 | 71 | trackGA('Portfolio_Arrow_Down')}> 73 | 74 | 75 | 76 | 77 | ); 78 | } 79 | export default CarouselItemTemplate; -------------------------------------------------------------------------------- /src/components/ContactCard.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './css/App.css' 3 | import { Parallax } from "react-parallax"; 4 | import { Jumbotron, Card, Button, CardText } from 'reactstrap'; 5 | import { Container, Row, Col, Mask, Fa, View, CardTitle } from 'mdbreact'; 6 | import { BrowserRouter as Router, Route, Link, withRouter, Redirect } from "react-router-dom"; 7 | import LazyLoad from 'react-lazy-load'; 8 | import ScrollAnimation from 'react-animate-on-scroll'; 9 | 10 | const ContactCard = () => { 11 | // console.log("*******Lazy Load*******"); 12 | const myPhoto = require("../images/About_Page/about2.jpg"); 13 | const SF_Image = require('../images/08.18.18_Urban_SF/SF-17.jpg'); 14 | 15 | return ( 16 |
17 | 18 | 19 |
20 |
21 | 22 |
23 | {/* Doesn't get picked up by anchor*/} 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |

Hello!

 34 |

Daniel Nguyen

35 |
Send me an Email
36 |
danielnuwin
37 |
38 | {/*
39 | 40 | 41 | 42 | 43 | 44 | 45 |
*/} 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | {/* */} 55 |
56 | 57 |
58 | ); 59 | } 60 | export default ContactCard; -------------------------------------------------------------------------------- /src/components/ContactPage.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Container, Row, Col, Mask, Fa, View, Button } from 'mdbreact'; 3 | import './css/App.css' 4 | 5 | const ContactPage = () => { 6 | window.scroll({ 7 | top: 0, 8 | behavior: "smooth" 9 | }); // console.log("*******Lazy Load*******"); 10 | return ( 11 | 12 |

Want to Chat?

13 |
14 | 15 | 16 | 17 | 18 | Sample image 19 | 20 | 21 | 22 | 23 | 24 |
Me
 25 | 26 |

Contact me at:

27 | 28 |

Email: danielnuwin@gmail.com

29 |

Instagram: @danielnuwin

30 | 31 | 32 | 33 | 34 | ); 35 | } 36 | export default ContactPage; -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Col, Container, Row, Footer } from 'mdbreact'; 3 | 4 | class FooterPage extends React.Component { 5 | render() { 6 | return ( 7 | 61 | ); 62 | } 63 | } 64 | 65 | export default FooterPage; -------------------------------------------------------------------------------- /src/components/GalleryContainer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './css/App.css' 3 | 4 | //Import responsive gallery component 5 | import ResponseiveGallery from './ResponsiveGallery'; 6 | //import DEFAULT_IMAGES from './Images'; 7 | import { View } from 'mdbreact' 8 | 9 | export default class GalleryContainer extends Component { 10 | 11 | constructor(props) { 12 | super(props); 13 | 14 | this.state = { 15 | imageArray: [], 16 | title: "", 17 | desc: "", 18 | showFilter: false, 19 | style: "" 20 | } 21 | } 22 | 23 | componentWillMount() { 24 | this.setState({ 25 | imageArray: this.props.imageArray, 26 | title: this.props.Title, 27 | desc: this.props.Desc, 28 | showFilter: this.props.showFilter, 29 | style: this.props.style 30 | }); 31 | } 32 | 33 | render() { 34 | // console.log("Temp: " + JSON.stringify(DEFAULT_IMAGES)); 35 | const { imageArray, showFilter, style} = this.state; 36 | return ( 37 |
38 | {/* Remove Container if you want entire page gallery */} 39 | 40 | 43 | 44 | 45 |
46 | 47 | ) 48 | } 49 | } 50 | 51 | -------------------------------------------------------------------------------- /src/components/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './css/App.css'; 3 | //Components 4 | import GalleryContainer from './GalleryContainer'; 5 | import CarouselIntro from './CarouselIntro'; 6 | import ScrollAnimation from 'react-animate-on-scroll'; 7 | import { Parallax } from "react-parallax"; 8 | import AnchorLink from 'react-anchor-link-smooth-scroll' 9 | // import Featured_Gallery from './PhotoProjects/Featured_Gallery.js' 10 | import ProjectContainer from './Projects/ProjectContainer' 11 | import LazyLoad from 'react-lazy-load'; 12 | import Featured from './PhotoProjects/Featured_Portfolio' 13 | import ContactCard from './ContactCard' 14 | 15 | //unused 16 | import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 17 | import NavigationBar from './NavigationBar'; 18 | import FooterPage from './Footer'; 19 | import BlogPage from './BlogPage' 20 | import Routes from './Routes' 21 | import All_Projects from './Projects/All_Projects' 22 | import AboutPage from './AboutPage' 23 | class Home extends Component { 24 | constructor(props) { 25 | super(props); 26 | this.state = { 27 | } 28 | } 29 | componentDidUpdate() { 30 | window.scroll({ 31 | top: 0, 32 | behavior: "smooth" 33 | }); 34 | console.log("HOME SCROLL_______"); 35 | } 36 | componentDidMount() { 37 | window.scroll({ 38 | top: 0.5, 39 | behavior: "smooth" 40 | }); 41 | console.log("HOME SCROLL_______Did Mount"); 42 | } 43 | 44 | render() { 45 | // Parallax Images will be local 46 | // const Oregon_Image = require('../images/Featured_Portfolio/Travel/Travel-10.jpg'); 47 | // const SF_Image = require('../images/08.18.18_Urban_SF/SF-17.jpg'); 48 | return ( 49 |
50 |
51 | {/* */} 52 | 53 | 54 | 55 | {/* */} 56 |
57 | 58 | {/* */} 59 | 60 |
61 | 62 | 70 | 71 |
72 | {/* 73 |
74 |
75 | */} 76 | 77 | 78 | 79 | {/* Unused */} 80 | {/* Lazy Load Will Cause Anchor Link issue */} 81 | {/*
82 | 83 | 84 |
85 |
86 | 87 | 88 |
*/} 89 |
90 | ); 91 | } 92 | } 93 | 94 | export default Home; 95 | 96 | -------------------------------------------------------------------------------- /src/components/NavigationBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router, Route, Link, withRouter, Redirect } from "react-router-dom"; 3 | import { 4 | Navbar, NavbarBrand, NavbarNav, NavItem, NavLink, NavbarToggler, Collapse, Container, FormInline, 5 | Dropdown, DropdownToggle, DropdownMenu, DropdownItem 6 | } from 'mdbreact'; 7 | import './css/App.css' 8 | import AnchorLink from 'react-anchor-link-smooth-scroll' 9 | // ******** Routes ******** // 10 | import Home from './Home' 11 | import GalleryContainer from './GalleryContainer'; 12 | import BlogPage from './BlogPage' 13 | import TestPage from './TestPage' 14 | import About from './AboutPage' 15 | import ProjectHeader from './Projects/ProjectHeader' 16 | import ProjectContainer from './Projects/ProjectContainer' 17 | import Routes from './Routes' 18 | 19 | // ******** Project Routes ******** // 20 | 21 | class NavigationBar extends React.Component { 22 | constructor(props) { 23 | super(props), 24 | this.state = { 25 | collapse: false, 26 | showFullNav: true 27 | } 28 | this.onClick = this.onClick.bind(this); 29 | } 30 | 31 | onClick() { 32 | this.setState({ 33 | collapse: !this.state.collapse, 34 | }); 35 | 36 | // if (this.props.location.pathname === '/') { 37 | // window.scroll({ 38 | // top: 0, 39 | // behavior: "smooth" 40 | // }); 41 | // } 42 | // if(this.props.location.pathname !== '/'){ 43 | // console.log("redirect"); 44 | // 45 | // } 46 | 47 | // 48 | // 49 | // 50 | // 51 | // 52 | // ()} /> 53 | // 54 | // 55 | // 56 | } 57 | 58 | render() { 59 | const overlay =
60 | 61 | return ( 62 | // 63 | 108 | // 109 | ); 110 | } 111 | }; 112 | 113 | export default withRouter(NavigationBar); -------------------------------------------------------------------------------- /src/components/PhotoProjects/01.05.19_Wedding_WW2.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 01.05.19_Wedding_WW2 3 | Date: 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/01.05.19_WW2/Wedding_WW-1.jpg'), 13 | title: "Amanda & Aymand Wedding", 14 | date: "January 5th, 2019", 15 | desc: "" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 42; i++) { 22 | const obj = { 23 | src: require('../../images/01.05.19_WW2/Wedding_WW-' + i + '.jpg'), 24 | src: require('../../images/01.05.19_WW2/Wedding_WW-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/01.26.19_JJ_Proposal.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 01.26.19_JJ_Proposal 3 | Date: 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/01.26.19_JJ_Proposal/JJ-17.jpg'), 13 | title: "Jeremy & Jessica's Proposal", 14 | date: "January 26th, 2019", 15 | desc: "Proposal on Pigeon Point" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 52; i++) { 22 | const obj = { 23 | src: require('../../images/01.26.19_JJ_Proposal/JJ-' + i + '.jpg'), 24 | src: require('../../images/01.26.19_JJ_Proposal/JJ-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/02.02.19_Nola.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 02.02.19_Nola 3 | Date: 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/02.02.19_Nola/Nola-4.jpg'), 13 | title: "New Orleans 2019", 14 | date: "Feb 2-5th, 2019", 15 | desc: "No Superbowl, No Problem" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 60; i++) { 22 | const obj = { 23 | src: require('../../images/02.02.19_Nola/Nola-' + i + '.jpg'), 24 | src: require('../../images/02.02.19_Nola/Nola-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/03.24.18_March_4_Our_Lives.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 03.24.18_March_4_Our_Lives 3 | Date: 03.24.18_March_4_Our_Lives 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/03.24.18_March_4_Our_Lives/M4OL-19.jpg'), 13 | title: "March for our Lives SF", 14 | date: "March 24th, 2018", 15 | desc: "Protest on Gun Violence in San Francisco" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 34; i++) { 22 | const obj = { 23 | src: require('../../images/03.24.18_March_4_Our_Lives/M4OL-' + i + '.jpg'), 24 | thumbnail: require('../../images/03.24.18_March_4_Our_Lives/M4OL-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: shuffle(imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/05.01.17_Brielle_of_Tarth.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 05.01.17_Brielle_of_Tarth 3 | Date: 05.01.17_Brielle_of_Tarth 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/05.01.17_Brielle_of_Tarth/Brielle-1.jpg'), 13 | title: "Brielle of Tarth", 14 | date: "May 1st, 2017", 15 | desc: "Brielle and Friends" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 23; i++) { 22 | const obj = { 23 | src: require('../../images/05.01.17_Brielle_of_Tarth/Brielle-' + i + '.jpg'), 24 | thumbnail: require('../../images/05.01.17_Brielle_of_Tarth/Brielle-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/05.21.18_Lauren_Night_Shoot.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 05.21.18_Lauren_Night_Shoot 3 | Date: 05.21.18_Lauren_Night_Shoot 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/05.21.18_Lauren_Night_Shoot/Lauren_Night-6.jpg'), 13 | title: "Lauren SF Night Shoot", 14 | date: "May 21st, 2018", 15 | desc: "San Francisco By Night" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 25; i++) { 22 | const obj = { 23 | src: require('../../images/05.21.18_Lauren_Night_Shoot/Lauren_Night-' + i + '.jpg'), 24 | thumbnail: require('../../images/05.21.18_Lauren_Night_Shoot/Lauren_Night-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: shuffle(imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/06.12.18_Gad_Suzzane.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 06.12.18_Gad_Suzzane 3 | Date: 06.12.18_Gad_Suzzane 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/06.12.18_Gad_Suzzane/Grad-29.jpg'), 13 | title: "Suzzane's Graduation", 14 | date: "June 12th, 2018", 15 | desc: "Master's in Psychology" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 29; i++) { 22 | const obj = { 23 | src: require('../../images/06.12.18_Gad_Suzzane/Grad-' + i + '.jpg'), 24 | thumbnail: require('../../images/06.12.18_Gad_Suzzane/Grad-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/08.05.18_Wedding_Cbass_Becca.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 08.05.18_Wedding_Cbass_Becca 3 | Date: 08.05.18_Wedding_Cbass_Becca 4 | Location: Maui, Hawaii 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/08.05.18_Wedding_Cbass_Becca/Wedding_Cbass-2.jpg'), 13 | title: "Sebastian and Becca's Wedding", 14 | date: "August 5th, 2018", 15 | desc: "High School Sweet Hearts tie the knot in Maui" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = [ 20 | // { 21 | // src: require('../../images/slider6.jpg'), 22 | // thumbnail: require('../../images/slider6.jpg'), 23 | // caption: 'Lauren', 24 | // category: "Port" 25 | // }, { 26 | // src: require('../../images/slider7.jpg'), 27 | // thumbnail: require('../../images/slider7.jpg'), 28 | // caption: 'Lychee ', 29 | // category: "Wed" 30 | // } 31 | ]; 32 | 33 | for (var i = 1; i <= 33; i++) { 34 | const obj = { 35 | src: require('../../images/08.05.18_Wedding_Cbass_Becca/Wedding_Cbass-' + i + '.jpg'), 36 | thumbnail: require('../../images/08.05.18_Wedding_Cbass_Becca/Wedding_Cbass-' + i + '.jpg'), 37 | caption: '', 38 | category: "" 39 | } 40 | imageArray.push(obj); 41 | } 42 | {/*********************** Return Object Data ***********************/ } 43 | 44 | const projectData = { 45 | imageArray: (imageArray), 46 | projectHeader: headerData 47 | } 48 | 49 | export default projectData; 50 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/08.18.18_Urban_SF.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName:08.18.18_SF_Urban 3 | Date: 08.18.18_SF_Urban 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/08.18.18_Urban_SF/SF-16.jpg'), 13 | title: "Urban Exploring in San Francisco", 14 | date: "August 8th, 2018", 15 | desc: "First time shooting in SF!" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 29; i++) { 22 | const obj = { 23 | src: require('../../images/08.18.18_Urban_SF/SF-' + i + '.jpg'), 24 | thumbnail: require('../../images/08.18.18_Urban_SF/SF-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/09.01.19_Ninasky.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 09.01.19_Ninaksy 3 | Date: 09.01.19 4 | Location: San Jose, Ca 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/09.01.19_Ninasky/Ninasky-12.jpg'), 13 | title: "Nina Sky", 14 | date: "September 1st, 2019", 15 | desc: "Nina Sky Performing at Sonido Clash in San Jose, CA" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 64; i++) { 22 | const obj = { 23 | src: require('../../images/09.01.19_Ninasky/Ninasky-' + i + '.jpg'), 24 | thumbnail: require('../../images/09.01.19_Ninasky/Ninasky-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/09.02.17_Yvonne_Wedding.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: Jason and Yvonne Wedding 3 | Date: 4 | Location: Half Moon Bay 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/09.09.17_Wedding_Wan_Chen/Wedding_WC-8.jpg'), 13 | title: "Jason and Yvonne's Wedding", 14 | date: "September 2nd, 2017", 15 | desc: "When you find love in the club" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 16; i++) { 22 | const obj = { 23 | src: require('../../images/09.09.17_Wedding_Wan_Chen/Wedding_WC-' + i + '.jpg'), 24 | thumbnail: require('../../images/09.09.17_Wedding_Wan_Chen/Wedding_WC-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/10.04.18_Laruen_Lychee.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: Lauren and Lychee 3 | Date: 10.04.18 4 | Location: Lauren's House 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/10.04.18_Lauren_Lychee/Lauren_Lychee-1.jpg'), 13 | title: "Lauren and Lychee", 14 | date: "October 4th, 2018", 15 | desc: "A Dog's Best Friend" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 39; i++) { 22 | const obj = { 23 | src: require('../../images/10.04.18_Lauren_Lychee/Lauren_Lychee-' + i + '.jpg'), 24 | thumbnail: require('../../images/10.04.18_Lauren_Lychee/Lauren_Lychee-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: shuffle(imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/10.11.18_Wedding_AA.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 10.11.18_Wedding_AA 3 | Date: 10.11.18_Wedding_AA 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/10.11.18_Wedding_AA/Wedding_AA_Cover.jpg'), 13 | title: "Antoine + Ayton Wedding", 14 | date: "October 11th, 2018", 15 | desc: "Viva Las Vegas" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 29; i++) { 22 | const obj = { 23 | src: require('../../images/10.11.18_Wedding_AA/Wedding_AA-' + i + '.jpg'), 24 | thumbnail: require('../../images/10.11.18_Wedding_AA/Wedding_AA-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/10.15.17_Lilly_LinkedIn.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 10.15.17_Lilly_LinkedIn 3 | Date: 10.15.17_Lilly_LinkedIn 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/10.15.17_Lilly_LinkedIn/Lilly_LinkedIn-cover.jpg'), 13 | title: "Lilly's LinkedIn Headshots", 14 | date: "October 15th, 2017", 15 | desc: "Lilly's LinkedIn Headshots" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 15; i++) { 22 | const obj = { 23 | src: require('../../images/10.15.17_Lilly_LinkedIn/Lilly_LinkedIn-' + i + '.jpg'), 24 | thumbnail: require('../../images/10.15.17_Lilly_LinkedIn/Lilly_LinkedIn-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/10.24.18_Baby_Ginger.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 10.24.18_Baby_Ginger 3 | Date: 10.24.18_Baby_Ginger 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/10.24.18_Baby_Ginger/Ginger-8.jpg'), 13 | title: "Ginger Baby", 14 | date: "October 24th, 2018", 15 | desc: "Baby Ginger's first Hallowween" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 34; i++) { 22 | const obj = { 23 | src: require('../../images/10.24.18_Baby_Ginger/Ginger-' + i + '.jpg'), 24 | thumbnail: require('../../images/10.24.18_Baby_Ginger/Ginger-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/11.12.17_Boardwalk_Kristina.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 11.12.17_Boardwalk_Kristina 3 | Date: 11.12.17_Boardwalk_Kristina 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/11.12.17_Boardwalk_Kristina/Kristina-10.jpg'), 13 | title: "Kristina at the Boardwalk", 14 | date: "November 27th, 2017", 15 | desc: "Athleticism at its finest" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 11; i++) { 22 | const obj = { 23 | src: require('../../images/11.12.17_Boardwalk_Kristina/Kristina-' + i + '.jpg'), 24 | thumbnail: require('../../images/11.12.17_Boardwalk_Kristina/Kristina-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: shuffle(imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/12.15.18_Wedding_WW.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 12.15.18_Wedding_WW 3 | Date: 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/12.15.18_Wedding_WW/Wedding_WW-15.jpg'), 13 | title: "Sister's Double Wedding", 14 | date: "December 15th, 2018", 15 | desc: "Two Sisters have a beautiful combined wedding" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 61; i++) { 22 | const obj = { 23 | src: require('../../images/12.15.18_Wedding_WW/Wedding_WW-' + i + '.jpg'), 24 | src: require('../../images/12.15.18_Wedding_WW/Wedding_WW-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/2017_S.E.A_Backpacking.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 2017_S.E.A_Backpacking 3 | Date: 2017_S.E.A_Backpacking 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/2017_S.E.A_Backpacking/Asia-Cover.jpg'), 13 | title: "South East Asia Backpacking", 14 | date: "Spring 2017", 15 | desc: "First Time Solo Backpacking through Thailand, Cambodia, Vietnam, & Hong Kong." 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 47; i++) { 22 | const obj = { 23 | src: require('../../images/2017_S.E.A_Backpacking/Asia-' + i + '.jpg'), 24 | thumbnail: require('../../images/2017_S.E.A_Backpacking/Asia-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/2017_South_America.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName:2017_South_America 3 | Date: 2017_South_America 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/2017_South_America/South-2.jpg'), 13 | title: "South American Adventures", 14 | date: "Summer 2017", 15 | desc: "My Journey volunteering in Brazil and exploration of Peru and Argentina. " 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 37; i++) { 22 | const obj = { 23 | src: require('../../images/2017_South_America/South-' + i + '.jpg'), 24 | thumbnail: require('../../images/2017_South_America/South-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/2018_Europe.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 2018_Europe 3 | Date: 2018_Europe 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/2018_Europe/Europe-36.jpg'), 13 | title: "Europe 2018", 14 | date: "April 10 - May 7, 2018", 15 | desc: "Norway -> Germany -> Czech Republic -> Italy -> Croatia" 16 | }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | const imageArray = []; 20 | 21 | for (var i = 1; i <= 42; i++) { 22 | const obj = { 23 | src: require('../../images/2018_Europe/Europe-' + i + '.jpg'), 24 | thumbnail: require('../../images/2018_Europe/Europe-' + i + '.jpg'), 25 | caption: '', 26 | category: "" 27 | } 28 | imageArray.push(obj); 29 | } 30 | {/*********************** Return Object Data ***********************/ } 31 | 32 | const projectData = { 33 | imageArray: (imageArray), 34 | projectHeader: headerData 35 | } 36 | 37 | export default projectData; 38 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/About_Me_Config.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | Date: Project: 3 | ----------------------------------------- 4 | 5 | **********/ } 6 | 7 | {/************************** Header Data *************************/ } 8 | const headerData = { 9 | bgImage: require('../../images/About_Page/about_header.jpg'), 10 | title: "About Me", 11 | date: "", 12 | desc: "", 13 | // style: "TEST" 14 | }; 15 | 16 | {/************************** Project Data *************************/ } 17 | 18 | const imageArray = []; 19 | 20 | {/*********************** Return Object Data ***********************/ } 21 | 22 | const projectData = { 23 | imageArray: imageArray, 24 | projectHeader: headerData 25 | } 26 | 27 | export default projectData; -------------------------------------------------------------------------------- /src/components/PhotoProjects/All_Projects_Config.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | Date: Project: 3 | ----------------------------------------- 4 | 08.05.18 Lauren & Lychee 5 | 6 | **********/ } 7 | import { CONSTANT_TRAVEL, CONSTANT_WEDDING, CONSTANT_URBAN, CONSTANT_PEOPLE, CONSTANT_CONCERT } from '../configs/constants' 8 | 9 | {/************************** Header Data *************************/ } 10 | const headerData = { 11 | bgImage: require('../../images/Backgrounds/All_Project_Header.jpg'), 12 | title: "All Projects", 13 | date: "2017 - Present", 14 | desc: "Snapshots through the Years", 15 | // style: "TEST" 16 | }; 17 | 18 | {/************************** Project Data *************************/ } 19 | 20 | const imageArray = [ 21 | { 22 | title: "Nina Sky", 23 | date: "September 2019", 24 | coverImage: require('../../images/09.01.19_Ninasky/Ninasky-18.jpg'), 25 | link: "/ninasky2019", 26 | category: CONSTANT_CONCERT, 27 | bannerStyle: "dark", 28 | style: "ap-mobile-cover-Ninasky" 29 | }, { 30 | title: "New Orleans 2019", 31 | date: "February 2019", 32 | coverImage: require('../../images/02.02.19_Nola/Nola-8.jpg'), 33 | link: "/nola2019", 34 | category: CONSTANT_TRAVEL, 35 | bannerStyle: "light" 36 | }, 37 | { 38 | title: "Jeremy + Jessica's Proposal", 39 | date: "January 2019", 40 | coverImage: require('../../images/01.26.19_JJ_Proposal/JJ-17.jpg'), 41 | link: "/jj_proposal", 42 | category: CONSTANT_WEDDING, 43 | bannerStyle: "dark" 44 | }, 45 | { 46 | title: "Aymand + Amanda's Wedding", 47 | date: "January 2019", 48 | coverImage: require('../../images/01.05.19_WW2/Wedding_WW-9.jpg'), 49 | link: "/wedding_ww2", 50 | category: CONSTANT_WEDDING, 51 | bannerStyle: "light" 52 | }, 53 | { 54 | title: "Sister's Double Wedding", 55 | date: "December 2018", 56 | coverImage: require('../../images/12.15.18_Wedding_WW/Wedding_WW-15.jpg'), 57 | link: "/wedding_ww", 58 | category: CONSTANT_WEDDING, 59 | bannerStyle: "dark" 60 | }, 61 | { 62 | title: "Ginger's 1st Halloween", 63 | date: "October 2018", 64 | coverImage: require('../../images/10.24.18_Baby_Ginger/Ginger-Thumb.jpg'), 65 | link: "/baby_ginger", 66 | category: CONSTANT_PEOPLE, 67 | bannerStyle: "light" 68 | }, { 69 | title: "Antoine + Ayton Wedding", 70 | date: "October 2018", 71 | coverImage: require('../../images/10.11.18_Wedding_AA/Wedding_AA-Thumb.jpg'), 72 | link: "/wedding_aa", 73 | category: CONSTANT_WEDDING, 74 | bannerStyle: "dark" 75 | }, { 76 | title: "Lauren and Lychee", 77 | date: "October 2018", 78 | coverImage: require('../../images/10.04.18_Lauren_Lychee/Lauren_Lychee-21.jpg'), 79 | link: "/laurenlychee", 80 | category: CONSTANT_PEOPLE, 81 | bannerStyle: "light", 82 | style: "ap-mobile-cover-Lauren_Lychee" 83 | }, { 84 | title: "Urban San Francisco", 85 | date: "August 2018", 86 | coverImage: require('../../images/08.18.18_Urban_SF/SF-25.jpg'), 87 | link: "/urban_sf", 88 | category: CONSTANT_URBAN, 89 | bannerStyle: "dark" 90 | }, { 91 | title: "Sebastian + Becca Wedding", 92 | date: "August 2018", 93 | coverImage: require('../../images/08.05.18_Wedding_Cbass_Becca/Wedding_Cbass-15.jpg'), 94 | link: "/wedding_cbass_becca", 95 | category: CONSTANT_WEDDING, 96 | bannerStyle: "light" 97 | }, { 98 | title: "Suzzane's Graduation", 99 | date: "June 2018", 100 | coverImage: require('../../images/06.12.18_Gad_Suzzane/Grad-21.jpg'), 101 | link: "/grad_suzzane", 102 | category: CONSTANT_PEOPLE, 103 | bannerStyle: "dark" 104 | }, { 105 | title: "Lauren at the Pier", 106 | date: "May 2018", 107 | coverImage: require('../../images/05.21.18_Lauren_Night_Shoot/Lauren_Night-11.jpg'), 108 | link: "/lauren_night_shoot", 109 | category: CONSTANT_PEOPLE, 110 | bannerStyle: "light" 111 | }, 112 | // }, { 113 | // title: "Europe 2018", 114 | // date: "April-May 2018", 115 | // coverImage: require('../../images/2018_Europe/Europe-36.jpg'), 116 | // link: "/europe_2018", 117 | // category: CONSTANT_TRAVEL, 118 | // bannerStyle: "dark" 119 | // }, { 120 | { 121 | title: "March 4 Our Lives SF", 122 | date: "March 2018", 123 | coverImage: require('../../images/03.24.18_March_4_Our_Lives/M4OL-27.jpg'), 124 | link: "/march_for_our_lives", 125 | category: CONSTANT_URBAN, 126 | bannerStyle: "light" 127 | }, { 128 | title: "Kristina at the Boardwalk", 129 | date: "November 2017", 130 | coverImage: require('../../images/11.12.17_Boardwalk_Kristina/Kristina-1.jpg'), 131 | link: "/boardwalk_kristina", 132 | category: CONSTANT_PEOPLE, 133 | bannerStyle: "dark" 134 | }, { 135 | title: "Lilly's LinkedIn Headshots", 136 | date: "October 2017", 137 | coverImage: require('../../images/10.15.17_Lilly_LinkedIn/Lilly_LinkedIn-Thumb.jpg'), 138 | link: "/lilly_linkedin", 139 | category: CONSTANT_PEOPLE, 140 | bannerStyle: "light", 141 | style: "ap-mobile-cover-Lilly_Linkedin" 142 | }, { 143 | title: "Yvonne + Jason Wedding", 144 | date: "September 2017", 145 | coverImage: require('../../images/09.09.17_Wedding_Wan_Chen/Wedding_WC-8.jpg'), 146 | link: "/wedding_wan_chen", 147 | category: CONSTANT_WEDDING, 148 | bannerStyle: "dark" 149 | }, 150 | // { 151 | // title: "Brielle of Tarth", 152 | // date: "May 1st, 2017", 153 | // coverImage: require('../../images/05.01.17_Brielle_of_Tarth/Brielle-cover.jpg'), 154 | // link: "/brielle_of_tarth", 155 | // bannerStyle: "light" 156 | // }, 157 | { 158 | title: "South American Adventures", 159 | date: "Summer 2017", 160 | coverImage: require('../../images/2017_South_America/South-18.jpg'), 161 | link: "/2017_South_America", 162 | category: CONSTANT_TRAVEL, 163 | bannerStyle: "light" 164 | }, 165 | { 166 | title: "S.E.Asia Backpacking", 167 | date: "Spring 2017", 168 | coverImage: require('../../images/2017_S.E.A_Backpacking/Asia-Thumb.jpg'), 169 | link: "/2017_Asia", 170 | category: CONSTANT_TRAVEL, 171 | bannerStyle: "dark" 172 | } 173 | ]; 174 | 175 | {/*********************** Return Object Data ***********************/ } 176 | 177 | const projectData = { 178 | imageArray: imageArray, 179 | projectHeader: headerData 180 | } 181 | 182 | export default projectData; -------------------------------------------------------------------------------- /src/components/PhotoProjects/Featured_Gallery.js.donotuse: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: Featured Photos 3 | Date: 2017 - Present 4 | Location: Everywhere 5 | Notes: 6 | **********/ } 7 | import shuffle from '../configs/shuffle' 8 | 9 | {/************************** Header Data *************************/ } 10 | 11 | // const headerData = { 12 | // bgImage: "https://www.dropbox.com/s/618qitswbj0nlgt/IMG_0799.jpg?raw=1", 13 | // title: "Featured Portfolio", 14 | // date: "2017 - Present", 15 | // desc: "Ecclectic Everything" 16 | // }; 17 | 18 | {/************************** Gallery Data *************************/ } 19 | 20 | // const imageArray = [ 21 | // { 22 | // src: require('../../images/img_10.jpg'), 23 | // thumbnail: require('../../images/img_10.jpg'), 24 | // caption: 'Kristie @ Alviso, California', 25 | // category: "Port" 26 | // }, { 27 | // src: require('../../images/img_2.jpg'), 28 | // thumbnail: require('../../images/img_2.jpg'), 29 | // caption: 'Kristie @ Campbell, California', 30 | // category: "Wed" 31 | // }, { 32 | // src: require('../../images/img_8.jpg'), 33 | // thumbnail: require('../../images/img_8.jpg'), 34 | // caption: 'Lilly @ Cuptertino, California', 35 | // category: "Port" 36 | // }, { 37 | // src: require('../../images/img_13.jpg'), 38 | // thumbnail: require('../../images/img_13.jpg'), 39 | // caption: 'Maui Wedding', 40 | // category: "Port" 41 | // }, { 42 | // src: require('../../images/img_16.jpg'), 43 | // thumbnail: require('../../images/img_16.jpg'), 44 | // caption: 'Maui Wedding', 45 | // category: "Wed" 46 | // } 47 | // , { 48 | // src: require('../../images/img_16.jpg'), 49 | // thumbnail: require('../../images/img_16.jpg'), 50 | // caption: 'Maui Wedding', 51 | // category: "Wed" 52 | // }, { 53 | // src: require('../../images/img_12.jpg'), 54 | // thumbnail: require('../../images/img_12.jpg'), 55 | // caption: 'Maui Wedding', 56 | // category: "Wed" 57 | // }, { 58 | // src: require('../../images/img_17.jpg'), 59 | // thumbnail: require('../../images/img_17.jpg'), 60 | // caption: 'Maui Wedding', 61 | // category: "Wed" 62 | // }, { 63 | // src: require('../../images/img_4.jpg'), 64 | // thumbnail: require('../../images/img_4.jpg'), 65 | // caption: 'Maui Wedding', 66 | // category: "Wed" 67 | // }, { 68 | // src: require('../../images/img_18.jpg'), 69 | // thumbnail: require('../../images/img_18.jpg'), 70 | // caption: 'Maui Wedding', 71 | // category: "Port" 72 | // }, { 73 | // src: require('../../images/img_5.jpg'), 74 | // thumbnail: require('../../images/img_5.jpg'), 75 | // caption: 'Maui Wedding', 76 | // category: "Wed" 77 | // }, { 78 | // src: require('../../images/img_19.jpg'), 79 | // thumbnail: require('../../images/img_19.jpg'), 80 | // caption: 'Image 1', 81 | // category: "Wed" 82 | // }, { 83 | // src: require('../../images/img_6.jpg'), 84 | // thumbnail: require('../../images/img_6.jpg'), 85 | // caption: 'Image 1', 86 | // category: "Urb" 87 | // }, { 88 | // src: require('../../images/img_7.jpg'), 89 | // thumbnail: require('../../images/img_7.jpg'), 90 | // caption: 'Image 1', 91 | // category: "Urb" 92 | // }, { 93 | // src: require('../../images/img_8.jpg'), 94 | // thumbnail: require('../../images/img_8.jpg'), 95 | // caption: 'Image 1', 96 | // category: "Urb" 97 | // }, { 98 | // src: require('../../images/img_9.jpg'), 99 | // thumbnail: require('../../images/img_9.jpg'), 100 | // caption: 'Image 1', 101 | // category: "Urb" 102 | // }, { 103 | // src: require('../../images/img_1.jpg'), 104 | // thumbnail: require('../../images/img_1.jpg'), 105 | // caption: 'Image 1', 106 | // category: "Urb" 107 | // }, { 108 | // src: require('../../images/img_12.jpg'), 109 | // thumbnail: require('../../images/img_12.jpg'), 110 | // caption: 'Image 1', 111 | // category: "Urb" 112 | // }, { 113 | // src: require('../../images/img_15.jpg'), 114 | // thumbnail: require('../../images/img_15.jpg'), 115 | // caption: 'Image 1', 116 | // category: "Urb" 117 | // }, { 118 | // src: require('../../images/img_17.jpg'), 119 | // thumbnail: require('../../images/img_17.jpg'), 120 | // caption: 'Image 1', 121 | // category: "Urb" 122 | // }, { 123 | // src: require('../../images/img_18.jpg'), 124 | // thumbnail: require('../../images/img_18.jpg'), 125 | // caption: 'Image 1', 126 | // category: "Urb" 127 | // }, { 128 | // src: require('../../images/img_19.jpg'), 129 | // thumbnail: require('../../images/img_19.jpg'), 130 | // caption: 'Image 1', 131 | // category: "One" 132 | // } 133 | // ]; 134 | 135 | {/*********************** Return Object Data ***********************/ } 136 | 137 | // const projectData = { 138 | // imageArray: shuffle(imageArray), 139 | // projectHeader: headerData 140 | // } 141 | 142 | // export default projectData; 143 | -------------------------------------------------------------------------------- /src/components/PhotoProjects/Featured_Portfolio.js: -------------------------------------------------------------------------------- 1 | {/********* 2 | ProjectName: 2018_Europe 3 | Date: 2018_Europe 4 | Location: 5 | Notes: 6 | **********/} 7 | 8 | import shuffle from '../configs/shuffle' 9 | 10 | {/************************** Header Data *************************/ } 11 | const headerData = { 12 | bgImage: require('../../images/Backgrounds/Carousel-15.jpg'), //Portfolio_Header 13 | title: "Featured Portfolio", 14 | date: "2017 - Present", 15 | desc: "Ecclectic Everything", 16 | style: "featured-header-mobile" 17 | }; 18 | 19 | {/************************** Gallery Data *************************/ } 20 | let imageArray = []; 21 | 22 | 23 | {/************************** Travel Data *************************/ } 24 | const travelArray = []; 25 | const featTravel = [1,2,3,4,6,8,9,10,12,13,15,17,18,21,22,23,24,28,31,36,38,40,42,43,46]; 26 | 27 | for (var i = 1; i <= 46; i++) { 28 | const obj = { 29 | src: require('../../images/Featured_Portfolio/Travel/Travel-' + i + '.jpg'), 30 | thumbnail: require('../../images/Featured_Portfolio/Travel/Travel-' + i + '.jpg'), 31 | caption: '', 32 | category: ["travel"] 33 | } 34 | if(featTravel.includes(i)){ 35 | obj['category'].push('*') 36 | } 37 | travelArray.push(obj); 38 | } 39 | 40 | {/************************** People Data *************************/ } 41 | const peopleArray = []; 42 | const featPeople = [1,2,5,7,9,10,12,17,19,23,29,30]; 43 | 44 | for (var i = 1; i <= 30; i++) { 45 | const obj = { 46 | src: require('../../images/Featured_Portfolio/People/People-' + i + '.jpg'), 47 | thumbnail: require('../../images/Featured_Portfolio/People/People-' + i + '.jpg'), 48 | caption: '', 49 | category: ["ppl"] 50 | } 51 | if(featPeople.includes(i)){ 52 | obj['category'].push('*') 53 | } 54 | //Remove Lani Photos 55 | if(i !== 8 && i !== 15){ 56 | peopleArray.push(obj); 57 | } 58 | //peopleArray.push(obj); 59 | } 60 | {/************************** Wedding Data *************************/ } 61 | const weddingArray = []; 62 | const featWedding = [1,4,10,12,13,15,20,27,28,40,45,47,49,50]; 63 | 64 | for (var i = 1; i <= 50; i++) { 65 | const obj = { 66 | src: require('../../images/Featured_Portfolio/Wedding/Wedding-' + i + '.jpg'), 67 | thumbnail: require('../../images/Featured_Portfolio/Wedding/Wedding-' + i + '.jpg'), 68 | caption: '', 69 | category: ["wed"] 70 | } 71 | if(featWedding.includes(i)){ 72 | obj['category'].push('*') 73 | } 74 | weddingArray.push(obj); 75 | } 76 | 77 | {/************************** Urban Data *************************/ } 78 | const urbanArray = []; 79 | const featUrban = [1,3,4,6,8,14,21,26,27,28,31,35]; 80 | 81 | for (var i = 1; i <= 35; i++) { 82 | const obj = { 83 | src: require('../../images/Featured_Portfolio/Urban/Urban-' + i + '.jpg'), 84 | thumbnail: require('../../images/Featured_Portfolio/Urban/Urban-' + i + '.jpg'), 85 | caption: '', 86 | category: ["urb"] 87 | } 88 | if(featUrban.includes(i)){ 89 | obj['category'].push('*') 90 | } 91 | urbanArray.push(obj); 92 | } 93 | 94 | {/************************** Concert Data *************************/ } 95 | const concertArray = []; 96 | const featConcert = [2,6,8,9,16,23,26,29,39,40,43,44]; 97 | 98 | for (var i = 1; i <= 44; i++) { 99 | const obj = { 100 | src: require('../../images/Featured_Portfolio/Concert/Concert-' + i + '.jpg'), 101 | thumbnail: require('../../images/Featured_Portfolio/Concert/Concert-' + i + '.jpg'), 102 | caption: '', 103 | category: ["concert"] 104 | } 105 | if(featConcert.includes(i)){ 106 | obj['category'].push('*') 107 | } 108 | concertArray.push(obj); 109 | } 110 | 111 | {/*********************** Return Object Data ***********************/ } 112 | imageArray = [...shuffle(travelArray), ...shuffle(peopleArray), ...weddingArray, ...urbanArray, ...shuffle(concertArray)]; 113 | // console.log("arrayIMages: " + JSON.stringify(imageArray)) 114 | 115 | const projectData = { 116 | imageArray: (imageArray), 117 | projectHeader: headerData 118 | } 119 | 120 | export default projectData; 121 | -------------------------------------------------------------------------------- /src/components/Projects/All_Projects.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | CONSTANT_NEW, CONSTANT_OLD, 4 | CONSTANT_TRAVEL, CONSTANT_WEDDING 5 | , CONSTANT_URBAN, CONSTANT_PEOPLE, CONSTANT_CONCERT, 6 | ACTION_TYPE_FILTER 7 | } from '../configs/constants' 8 | import { Container, Row, Col, Card } from 'mdbreact'; 9 | import '../css/App.css' 10 | import ProjectTemplate from './ProjectTemplate' 11 | import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs'; 12 | import { connect } from "react-redux"; 13 | import ReactGA from 'react-ga'; 14 | 15 | const mapStateToProps = state => { 16 | return { 17 | projectObject: state.All_ProjectsReducer.projectObject 18 | }; 19 | }; 20 | 21 | class All_Projects extends Component { 22 | //Commented out for Redux 23 | // constructor(props) { 24 | // super(props); 25 | // this.state = { 26 | // projectObject: {} 27 | // } 28 | // this.renderAllProjects = this.renderAllProjects.bind(this); 29 | // this.renderFilter = this.renderFilter.bind(this); 30 | // this.filterProjects = this.filterProjects.bind(this); 31 | // } 32 | // componentWillMount() { 33 | // this.setState({ 34 | // projectObject: this.state.imageArray 35 | 36 | // }); 37 | // console.log("state: " + JSON.stringify(this.props.projectObject)); 38 | // } 39 | componentDidMount() { 40 | window.scroll({ 41 | top: 350, 42 | behavior: "smooth" 43 | }); 44 | ReactGA.event({ 45 | category: "LandedOn: /All_Projects_Page", 46 | action: 'Landed On', 47 | }); 48 | 49 | // console.log("ALL PROJECTS: didMount: scrollUp"); 50 | 51 | //Will Reload Reducer when coming back to projects page 52 | this.props.dispatch({ type: CONSTANT_NEW }) 53 | 54 | } 55 | 56 | renderAllProjects() { 57 | if (!this.props.projectObject) { 58 | return; 59 | } 60 | const projectGallery = this.props.projectObject.map((obj, i) => { 61 | return ( 62 | 66 | ); 67 | }); 68 | return projectGallery; 69 | } 70 | 71 | // THERE IS A DELAY OF SETTING STATE ON FILTER, Does not re render for some reason. 72 | filterProjects(filter) { 73 | // const projCopy = this.props.imageArray; 74 | // const reverseCopy = projCopy.reverse(); 75 | 76 | // const filteredArray = projCopy.filter(function (proj) { 77 | // let searchValue = proj.category; 78 | // return searchValue.indexOf(filter) !== -1; 79 | // }); 80 | 81 | // if (filter === CONSTANT_NEW) { 82 | // this.setState({ projectObject: projCopy }); 83 | // // console.log("New Projects: " +JSON.stringify(this.state.projectObject)); 84 | 85 | // } 86 | // else if (filter === CONSTANT_OLD) { 87 | // this.setState({ projectObject: reverseCopy }); 88 | // // console.log("reverseCopy: " +JSON.stringify(this.state.projectObject)); 89 | 90 | // } 91 | // else { 92 | // // console.log('before currentState = ' + JSON.stringify(this.state.imageArray)); // State is delayed 93 | // this.setState({ projectObject: filteredArray }); 94 | // // console.log("filteredArray: " +JSON.stringify(this.state.projectObject)); 95 | // } 96 | 97 | // Added for redux 98 | if (filter === CONSTANT_NEW) { 99 | this.props.dispatch({ type: CONSTANT_NEW, value: filter }) 100 | } 101 | else if (filter === CONSTANT_OLD) { 102 | this.props.dispatch({ type: CONSTANT_OLD, value: filter }) 103 | } 104 | else { 105 | this.props.dispatch({ type: ACTION_TYPE_FILTER, value: filter }) 106 | } 107 | } 108 | 109 | renderFilter() { 110 | const cursorStyle = { cursor: "pointer" }; 111 | return ( 112 | 113 | 114 | this.filterProjects(CONSTANT_NEW)}>Newest 115 | this.filterProjects(CONSTANT_OLD)}>Oldest 116 | this.filterProjects(CONSTANT_TRAVEL)}>Travel 117 | this.filterProjects(CONSTANT_PEOPLE)}> People 118 | this.filterProjects(CONSTANT_URBAN)}>Urban & Street 119 | this.filterProjects(CONSTANT_WEDDING)}>Weddings 120 | this.filterProjects(CONSTANT_CONCERT)}>Concerts 121 | 122 | 123 | ); 124 | } 125 | 126 | render() { 127 | 128 | return ( 129 |
130 |
131 | 132 | 133 | {this.renderFilter()} 134 | 135 | 136 | 137 | {this.renderAllProjects()} 138 | 139 |
140 |
141 | ); 142 | }; 143 | } 144 | 145 | export default connect(mapStateToProps)(All_Projects); -------------------------------------------------------------------------------- /src/components/Projects/All_Projects_Copy.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Container, Row, Col, Card } from 'mdbreact'; 3 | import '../css/App.css' 4 | import ProjectTemplate from './ProjectTemplate' 5 | import AllProjectsConfig from '../PhotoProjects/All_Projects_Config' 6 | import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact' 7 | import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs'; 8 | import { Parallax } from "react-parallax"; 9 | 10 | class All_Projects extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | projectObject: {} 15 | } 16 | this.renderAllProjects = this.renderAllProjects.bind(this); 17 | this.renderFilter = this.renderFilter.bind(this); 18 | this.filterProjects = this.filterProjects.bind(this); 19 | } 20 | componentWillMount() { 21 | this.setState({ 22 | // projectObject: AllProjectsConfig.imageArray 23 | projectObject: this.props.imageArray 24 | 25 | }); 26 | // console.log("state: " + JSON.stringify(this.props.projectObject)); 27 | } 28 | componentDidMount() { 29 | window.scroll({ 30 | top: 350, 31 | behavior: "smooth" 32 | }); 33 | // console.log("ALL PROJECTS: didMount: scrollUp"); 34 | } 35 | 36 | renderAllProjects() { 37 | if (!this.state.projectObject) { 38 | return; 39 | } 40 | const projectGallery = this.state.projectObject.map((obj, i) => { 41 | return ( 42 | 46 | ); 47 | }); 48 | return projectGallery; 49 | } 50 | 51 | // THERE IS A DELAY OF SETTING STATE ON FILTER, Does not re render for some reason. 52 | filterProjects(filter) { 53 | const projCopy = this.props.imageArray; 54 | const reverseCopy = projCopy.reverse(); 55 | 56 | const filteredArray = projCopy.filter(function (proj) { 57 | let searchValue = proj.category; 58 | return searchValue.indexOf(filter) !== -1; 59 | }); 60 | 61 | if (filter === "new") { 62 | this.setState({ projectObject: projCopy }); 63 | // console.log("New Projects: " +JSON.stringify(this.state.projectObject)); 64 | 65 | } 66 | else if (filter === "old") { 67 | this.setState({ projectObject: reverseCopy }); 68 | // console.log("reverseCopy: " +JSON.stringify(this.state.projectObject)); 69 | 70 | } 71 | else { 72 | // console.log('before currentState = ' + JSON.stringify(this.state.imageArray)); // State is delayed 73 | this.setState({ projectObject: filteredArray }); 74 | // console.log("filteredArray: " +JSON.stringify(this.state.projectObject)); 75 | } 76 | } 77 | 78 | renderFilter() { 79 | const cursorStyle = { cursor: "pointer" }; 80 | return ( 81 | 82 | 83 | this.filterProjects("new")}>Newest 84 | this.filterProjects("old")}>Oldest 85 | this.filterProjects("travel")}>Travel 86 | this.filterProjects("ppl")}> People 87 | this.filterProjects("urb")}>Urban & Street 88 | this.filterProjects("wed")}>Weddings 89 | 90 | {/* this.filterProjects("new")}>Newest 91 | this.filterProjects("old")}>Oldest 92 | this.filterProjects("travel")}>Travel 93 | this.filterProjects("urb")}>Urban & Street 94 | this.filterProjects("ppl")}> People 95 | this.filterProjects("wed")}>Weddings */} 96 | {/* 97 | 98 | Projects 99 | 100 | 101 | 102 | All Projects 103 | > Lauren Lychee 104 | 105 | 106 | 107 | 108 | */} 109 | 110 | 111 | ); 112 | } 113 | 114 | render() { 115 | const thailand = require('../../images/2017_S.E.A_Backpacking/Asia-6.jpg'); 116 | 117 | return ( 118 |
119 |
120 | 121 | 122 | {this.renderFilter()} 123 | 124 | 125 | 126 | {this.renderAllProjects()} 127 | 128 |
129 | {/* 130 |
131 |
132 | */} 133 |
134 | ); 135 | }; 136 | } 137 | 138 | export default All_Projects; -------------------------------------------------------------------------------- /src/components/Projects/ProjectContainer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import '../css/App.css' 3 | import ProjectHeader from './ProjectHeader' 4 | import GalleryContainer from '../GalleryContainer'; 5 | import All_Projects from './All_Projects' 6 | import ScrollAnimation from 'react-animate-on-scroll'; 7 | import AboutPage from '../AboutPage' 8 | 9 | class ProjectContainer extends Component { 10 | constructor(props) { 11 | super(props); 12 | const { headerInfo, imageArray, renderType, showFilter, style } = props; 13 | 14 | this.state = { 15 | headerInfo: headerInfo, 16 | imageArray: imageArray, 17 | renderType: renderType, 18 | showFilter: showFilter, 19 | style: style 20 | } 21 | 22 | this.renderProject = this.renderProject.bind(this); 23 | } 24 | // componentWillMount() { 25 | // this.setState({ 26 | // headerInfo: this.props.headerInfo, 27 | // imageArray: this.props.imageArray, 28 | // renderType: this.props.renderType, 29 | // showFilter: this.props.showFilter, 30 | // style: this.props.style 31 | // }); 32 | 33 | // console.log("props: " + JSON.stringify(this.props)); 34 | // console.log("state: " + JSON.stringify(this.state)); 35 | // } 36 | //Main Scroll, will scroll on most pages, interchange 350, 100 to not show nav 37 | // componentDidMount() { 38 | // window.scroll({ 39 | // top: 100, 40 | // behavior: "smooth" 41 | // }); 42 | // // console.log("ProjectContainer: window did mount"); 43 | // } 44 | 45 | //Cause issue with home '/' scroll mid way" 46 | // componentWillUpdate() { 47 | // return (window.scroll({ 48 | // top: 350, 49 | // behavior: "smooth" 50 | // })); 51 | // } 52 | 53 | renderProject(renderType) { 54 | // Check which project type (Gallery, Projects Page, or Ind. Project) 55 | // Gallery Container 56 | // Projects Page 57 | 58 | if (renderType === "gallery" || renderType === "feature") { 59 | return 64 | } 65 | else if (renderType === "allprojects") { 66 | return 69 | } 70 | else if (renderType === "aboutme") { 71 | return ; 72 | } 73 | else { 74 | return No Pictures 75 | } 76 | } 77 | 78 | render() { 79 | // **Alan > Deconstruct Defaults 80 | const { renderType, headerInfo: { title= 'default', desc, bgImage, date, style } } = this.state; 81 | return ( 82 |
83 | Passing a spread operator as props 85 | // title={title} 86 | // desc={desc} 87 | // date={date} 88 | // bgImage={bgImage} 89 | // style={style} 90 | /> 91 | {this.renderProject(renderType)} 92 |
93 | ); 94 | } 95 | }; 96 | 97 | export default ProjectContainer; -------------------------------------------------------------------------------- /src/components/Projects/ProjectHeader.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import All_Projects from './All_Projects' 3 | import { Jumbotron, Card, Button, CardTitle, CardText } from 'reactstrap'; 4 | // import { Container, Row, Col, CardBody, Mask, Fa, View, Badge } from 'mdbreact'; 5 | 6 | // import { CardImage } from 'mdbreact'; 7 | import { Parallax } from "react-parallax"; 8 | import '../css/App.css' 9 | 10 | class ProjectHeader extends Component { 11 | constructor(props) { 12 | super(props); 13 | this.state = { 14 | bgImage: "", 15 | title: "", 16 | date: "", 17 | desc: "", 18 | style: "" 19 | } 20 | } 21 | 22 | componentWillMount() { 23 | this.setState({ 24 | bgImage: this.props.bgImage, 25 | title: this.props.title, 26 | date: this.props.date, 27 | desc: this.props.desc, 28 | style: this.props.style 29 | }); 30 | } 31 | 32 | render() { 33 | const { bgImage, title, date, desc, style } = this.state; 34 | return ( 35 |
36 | 37 |
38 |
39 | 40 |
41 | 42 |

{title}

43 | {/*
*/} 44 | {/*
*/} 45 |
{date}
46 |

{desc}

47 | 48 |
49 |
50 | 51 | ); 52 | 53 | } 54 | 55 | } 56 | export default ProjectHeader; -------------------------------------------------------------------------------- /src/components/Projects/ProjectTemplate.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Container, Row, Col, Card } from 'mdbreact'; 3 | import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 4 | import '../css/App.css' 5 | import ReactGA from 'react-ga' 6 | 7 | class ProjectTemplate extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = { 11 | title: "", 12 | date: "", 13 | coverImage: "", 14 | link: "", 15 | bannerStyle: "", 16 | projectObject: {}, 17 | style: "" 18 | }; 19 | } 20 | 21 | trackGA(link) { 22 | ReactGA.event({ 23 | category: 'Clicked Project: ' + link, 24 | action: 'Clicked Project', 25 | }); 26 | } 27 | 28 | componentWillMount() { 29 | this.setState({ 30 | // link: this.props.link, 31 | // coverImage: this.props.coverImage, 32 | // title: this.props.title, 33 | // date: this.props.date, 34 | // bannerStyle: this.props.bannerStyle 35 | link: this.props.projectObject.link, 36 | coverImage: this.props.projectObject.coverImage, 37 | title: this.props.projectObject.title, 38 | date: this.props.projectObject.date, 39 | bannerStyle: this.props.projectObject.bannerStyle, 40 | style: this.props.projectObject.style 41 | }); 42 | 43 | } 44 | 45 | render() { 46 | // const image1 = require('../../images/slider5.jpg'); 47 | const { link, coverImage, title, date, bannerStyle, style } = this.state; 48 | 49 | return ( 50 | 51 | this.trackGA(link)}> 52 | 53 |
54 | 55 |
56 |
57 | {/*

21 ? "1.25em" : ""}}> {title}

*/} 58 |

{title}

59 | {/*

Category

*/} 60 |

61 |
62 |
63 |
64 | 65 | 66 | 67 | ); 68 | } 69 | 70 | } 71 | export default ProjectTemplate; -------------------------------------------------------------------------------- /src/components/ResponsiveGallery-InfSCR.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Lightbox from 'react-images'; 3 | import PropTypes from 'prop-types'; 4 | import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"; 5 | import ScrollAnimation from 'react-animate-on-scroll'; 6 | import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, NavbarNav, NavItem, NavLink, Mask, View } from 'mdbreact'; 7 | import './css/App.css' 8 | // import Animated from "react-animated-css" 9 | import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs'; 10 | import 'react-web-tabs/dist/react-web-tabs.css'; 11 | import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom"; 12 | import LazyLoad from 'react-lazy-load'; 13 | import shuffle from './configs/shuffle' 14 | import InfiniteScroll from 'react-infinite-scroller'; 15 | 16 | class ResponsiveGallery extends Component { 17 | constructor(props) { 18 | super(props); 19 | this.state = { 20 | lightboxIsOpen: false, 21 | currentImage: 0, 22 | imageArray: [], 23 | showFilter: false, 24 | loadedImages: [], 25 | hasMoreItems: true 26 | }; 27 | 28 | //Lightbox 29 | this.closeLightbox = this.closeLightbox.bind(this); 30 | this.gotoNext = this.gotoNext.bind(this); 31 | this.gotoPrevious = this.gotoPrevious.bind(this); 32 | this.gotoImage = this.gotoImage.bind(this); 33 | this.handleClickImage = this.handleClickImage.bind(this); 34 | this.openLightbox = this.openLightbox.bind(this); 35 | 36 | //Image Control 37 | this.renderGallery = this.renderGallery.bind(this); 38 | this.filterImage = this.filterImage.bind(this); 39 | 40 | this.cursorStyle = { cursor: "pointer" }; 41 | this.renderFilter = this.renderFilter.bind(this); 42 | this.showThumbnailBanner = this.showThumbnailBanner.bind(this); 43 | 44 | } 45 | //************************ LightBox *************************// 46 | openLightbox(index, event) { 47 | event.preventDefault(); 48 | this.setState({ 49 | currentImage: index, 50 | lightboxIsOpen: true, 51 | }); 52 | } 53 | closeLightbox() { 54 | this.setState({ 55 | currentImage: 0, 56 | lightboxIsOpen: false, 57 | }); 58 | } 59 | gotoPrevious() { 60 | this.setState({ 61 | currentImage: this.state.currentImage - 1, 62 | }); 63 | } 64 | gotoNext() { 65 | // console.log("length: " + this.state.imageArray.length) 66 | // console.log("current image: " + this.state.currentImage) 67 | //Stops from going to next index when reached end of array 68 | if ((this.state.currentImage + 1) < this.state.imageArray.length) { 69 | this.setState({ 70 | currentImage: this.state.currentImage + 1, 71 | }); 72 | } 73 | } 74 | 75 | gotoImage(index) { 76 | this.setState({ 77 | currentImage: index, 78 | }); 79 | } 80 | 81 | handleClickImage() { 82 | if (this.state.currentImage === this.props.images.length - 1) return; 83 | this.gotoNext(); 84 | } 85 | 86 | // Show Banner only if on features page 87 | showThumbnailBanner(obj) { 88 | if (this.props.location.pathname === '/') { 89 | return ( 90 |
91 |
92 |

{obj.caption}

93 |

94 |
95 |
96 | ); 97 | } 98 | } 99 | //END************************ LightBox *************************// 100 | loadMoreImages(page) { 101 | // console.log("this.state.imageArray", this.state.imageArray); 102 | 103 | const perPage = 10; 104 | const moreItems = this.state.imageArray.slice( 105 | page * perPage - perPage, 106 | page * perPage + 1 107 | ); 108 | //logic for hasMore images: get the length of the array 109 | if (this.state.loadedImages.length > 0) { 110 | console.log("HELOOOOO"); 111 | 112 | this.setState({ loadedImages: this.state.loadedImages.concat(moreItems) }); 113 | 114 | } 115 | else { 116 | this.setState({ hasMoreItems: false }); 117 | } 118 | } 119 | 120 | renderGallery(images) { 121 | console.log("*****Lazy Load Responsive Gallery******"); 122 | if (!images) { 123 | return; 124 | } 125 | const gallery = images.map((obj, i) => { 126 | return ( 127 | //Old animation 128 | // 129 | //Lazy Load offsetTop={2000 * i} will trigger when going to contact card anchor 130 | // 131 | 132 | 133 |
134 | this.openLightbox(i, e)} 137 | src={obj.src} 138 | style={{ width: "100%", height: "auto", display: "block" }} 139 | /> 140 |
this.openLightbox(i, e)}> 141 | {/* Show Banner only on Feature Page */} 142 | {/* {this.showThumbnailBanner(obj)} */} 143 |
144 |
145 | 146 | 147 | ); 148 | }); 149 | return ( 150 | //This allows grid view on mobile 151 | 152 | 153 | {gallery} 154 | 155 | 156 | ); 157 | } 158 | 159 | filterImage(filter) { 160 | let imagesCopy = this.props.images; 161 | // const newArray = imagesCopy.filter(function (img) { 162 | // let searchValue = img.category; 163 | // return searchValue.indexOf(filter) !== -1; 164 | // }); 165 | 166 | //Filter Images 167 | let newArray = imagesCopy.filter(function (img) { 168 | let searchValue = img.category; //Array of Categories 169 | return searchValue.includes(filter); 170 | }); 171 | 172 | if (filter === "*") { 173 | newArray = shuffle(newArray); 174 | } 175 | this.setState({ imageArray: newArray }); 176 | 177 | // Deprecated, no longer need as featured state is set in componentWillMount 178 | // if (filter === "*") { 179 | // this.setState({ imageArray: newArray }); 180 | // //this.renderGallery(imagesCopy); //Removed because setting state renders imageArrary so no need to recall this method. 181 | // } 182 | // else { 183 | // // console.log('before currentState = ' + JSON.stringify(this.state.imageArray)); // State is delayed 184 | // this.setState({ imageArray: newArray });//Should rerender for animation bc it already exists in filter 185 | // //this.renderGallery(newArray); //Removed because setting state renders imageArrary so no need to recall this method. 186 | // } 187 | } 188 | 189 | renderFilter(showFilter) { 190 | const cursorStyle = { cursor: "pointer" }; 191 | 192 | if (showFilter) { 193 | return ( 194 | 195 | 196 | this.filterImage("*")}>Featured 197 | this.filterImage("travel")}>Travel 198 | this.filterImage("ppl")}>People 199 | this.filterImage("urb")}>Urban & Street 200 | this.filterImage("wed")}>Weddings 201 | {/* this.filterImage("all")}>All */} 202 | 203 | 204 | Projects 205 | 206 | 207 | 208 | All Projects 209 | {/* > Lauren Lychee */} 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | ); 218 | } 219 | } 220 | 221 | //Will Set State before initial Render 222 | componentWillMount() { 223 | //For Featured Gallery 224 | if (this.props.location.pathname === '/') { 225 | const featArray = this.props.images.filter(function (img) { 226 | let searchValue = img.category; //Array of Categories 227 | return searchValue.includes('*'); 228 | }); 229 | this.setState({ 230 | imageArray: shuffle(featArray), 231 | showFilter: this.props.showFilter 232 | }); 233 | } 234 | // For Project Galleries 235 | else { 236 | this.setState({ 237 | imageArray: this.props.images, 238 | showFilter: this.props.showFilter 239 | }); 240 | } 241 | 242 | } 243 | 244 | //Scroll To Hide Header 245 | componentDidMount() { 246 | if (!this.state.showFilter) { 247 | window.scroll({ 248 | top: 0, 249 | behavior: "smooth" 250 | }); 251 | console.log("RESPONSIVE GALLERY: window did mount"); 252 | } 253 | } 254 | 255 | 256 | render() { 257 | const cursorStyle = { cursor: "pointer" }; 258 | const loader =
Loading ...
; 259 | 260 | return ( 261 |
262 | 263 | {this.renderFilter(this.state.showFilter)} 264 | {/* */} 265 | 270 | 271 | {this.renderGallery(this.state.imageArray)} 272 | 273 | 274 | 275 | {/* */} 276 | 277 | 291 |
292 | ); 293 | } 294 | } 295 | 296 | ResponsiveGallery.propTypes = { 297 | images: PropTypes.array, 298 | showThumbnails: PropTypes.bool, 299 | }; 300 | 301 | export default withRouter(ResponsiveGallery); -------------------------------------------------------------------------------- /src/components/ResponsiveGallery.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Lightbox from 'react-images'; 3 | import PropTypes from 'prop-types'; 4 | import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"; 5 | import ScrollAnimation from 'react-animate-on-scroll'; 6 | import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, NavbarNav, NavItem, NavLink, Mask, View } from 'mdbreact'; 7 | import './css/App.css' 8 | // import Animated from "react-animated-css" 9 | import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs'; 10 | import 'react-web-tabs/dist/react-web-tabs.css'; 11 | import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom"; 12 | import LazyLoad from 'react-lazy-load'; 13 | import shuffle from './configs/shuffle' 14 | 15 | import ReactGA from 'react-ga'; 16 | 17 | function trackGA(action) { 18 | console.log("clicked Action: ", action); 19 | 20 | ReactGA.event({ 21 | category: 'Clicked: ' + action, 22 | action: 'Clicked Portolio Image/Filter' + action, 23 | }); 24 | } 25 | 26 | class ResponsiveGallery extends Component { 27 | constructor(props) { 28 | super(props); 29 | this.state = { 30 | lightboxIsOpen: false, 31 | currentImage: 0, 32 | imageArray: [], 33 | showFilter: false, 34 | }; 35 | 36 | //Lightbox 37 | this.closeLightbox = this.closeLightbox.bind(this); 38 | this.gotoNext = this.gotoNext.bind(this); 39 | this.gotoPrevious = this.gotoPrevious.bind(this); 40 | this.gotoImage = this.gotoImage.bind(this); 41 | this.handleClickImage = this.handleClickImage.bind(this); 42 | this.openLightbox = this.openLightbox.bind(this); 43 | 44 | //Image Control 45 | this.renderGallery = this.renderGallery.bind(this); 46 | this.filterImage = this.filterImage.bind(this); 47 | 48 | this.cursorStyle = { cursor: "pointer" }; 49 | this.renderFilter = this.renderFilter.bind(this); 50 | this.showThumbnailBanner = this.showThumbnailBanner.bind(this); 51 | 52 | } 53 | //************************ LightBox *************************// 54 | openLightbox(index, event) { 55 | trackGA("clicked_image: "+index) 56 | event.preventDefault(); 57 | this.setState({ 58 | currentImage: index, 59 | lightboxIsOpen: true, 60 | }); 61 | } 62 | closeLightbox() { 63 | this.setState({ 64 | currentImage: 0, 65 | lightboxIsOpen: false, 66 | }); 67 | } 68 | gotoPrevious() { 69 | this.setState({ 70 | currentImage: this.state.currentImage - 1, 71 | }); 72 | } 73 | gotoNext() { 74 | // console.log("length: " + this.state.imageArray.length) 75 | // console.log("current image: " + this.state.currentImage) 76 | //Stops from going to next index when reached end of array 77 | if ((this.state.currentImage + 1) < this.state.imageArray.length) { 78 | this.setState({ 79 | currentImage: this.state.currentImage + 1, 80 | }); 81 | } 82 | } 83 | 84 | gotoImage(index) { 85 | this.setState({ 86 | currentImage: index, 87 | }); 88 | } 89 | 90 | handleClickImage() { 91 | if (this.state.currentImage === this.props.images.length - 1) return; 92 | this.gotoNext(); 93 | } 94 | 95 | // Show Banner only if on features page 96 | showThumbnailBanner(obj) { 97 | if (this.props.location.pathname === '/') { 98 | return ( 99 |
100 |
101 |

{obj.caption}

102 |

103 |
104 |
105 | ); 106 | } 107 | } 108 | //END************************ LightBox *************************// 109 | 110 | renderGallery(images) { 111 | console.log("*****Lazy Load Responsive Gallery******"); 112 | if (!images) { 113 | return; 114 | } 115 | const gallery = images.map((obj, i) => { 116 | return ( 117 | //Old animation 118 | // 119 | //Lazy Load offsetTop={2000 * i} will trigger when going to contact card anchor 120 | // 121 | 122 | 123 |
124 | this.openLightbox(i, e)} 127 | src={obj.src} 128 | style={{ width: "100%", height: "auto", display: "block" }} 129 | onClick={() => trackGA("image: " + i)} 130 | /> 131 |
this.openLightbox(i, e)}> 132 | {/* Show Banner only on Feature Page */} 133 | {/* {this.showThumbnailBanner(obj)} */} 134 |
135 |
136 | 137 | 138 | ); 139 | }); 140 | return ( 141 | //This allows grid view on mobile 142 | 143 | 144 | {gallery} 145 | 146 | 147 | ); 148 | } 149 | 150 | filterImage(filter) { 151 | let imagesCopy = this.props.images; 152 | // const newArray = imagesCopy.filter(function (img) { 153 | // let searchValue = img.category; 154 | // return searchValue.indexOf(filter) !== -1; 155 | // }); 156 | 157 | //Track clicks 158 | trackGA(filter); 159 | 160 | //Filter Images 161 | let newArray = imagesCopy.filter(function (img) { 162 | let searchValue = img.category; //Array of Categories 163 | return searchValue.includes(filter); 164 | }); 165 | 166 | if (filter === "*") { 167 | newArray = shuffle(newArray); 168 | } 169 | this.setState({ imageArray: newArray }); 170 | 171 | // Deprecated, no longer need as featured state is set in componentWillMount 172 | // if (filter === "*") { 173 | // this.setState({ imageArray: newArray }); 174 | // //this.renderGallery(imagesCopy); //Removed because setting state renders imageArrary so no need to recall this method. 175 | // } 176 | // else { 177 | // // console.log('before currentState = ' + JSON.stringify(this.state.imageArray)); // State is delayed 178 | // this.setState({ imageArray: newArray });//Should rerender for animation bc it already exists in filter 179 | // //this.renderGallery(newArray); //Removed because setting state renders imageArrary so no need to recall this method. 180 | // } 181 | } 182 | 183 | renderFilter(showFilter) { 184 | const cursorStyle = { cursor: "pointer" }; 185 | 186 | if (showFilter) { 187 | return ( 188 | 189 | 190 | this.filterImage("*")}>Featured 191 | this.filterImage("travel")}>Travel 192 | this.filterImage("ppl")}>People 193 | this.filterImage("urb")}>Urban & Street 194 | this.filterImage("wed")}>Weddings 195 | this.filterImage("concert")}>Concert 196 | {/* this.filterImage("all")}>All */} 197 | 198 | 199 | Projects 200 | 201 | 202 | 203 | All Projects 204 | {/* > Lauren Lychee */} 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | ); 213 | } 214 | } 215 | 216 | //Will Set State before initial Render 217 | componentWillMount() { 218 | //For Featured Gallery 219 | if (this.props.location.pathname === '/') { 220 | const featArray = this.props.images.filter(function (img) { 221 | let searchValue = img.category; //Array of Categories 222 | return searchValue.includes('*'); 223 | }); 224 | this.setState({ 225 | imageArray: shuffle(featArray), 226 | showFilter: this.props.showFilter 227 | }); 228 | } 229 | // For Project Galleries 230 | else { 231 | this.setState({ 232 | imageArray: this.props.images, 233 | showFilter: this.props.showFilter 234 | }); 235 | } 236 | 237 | } 238 | 239 | //Scroll To Hide Header 240 | componentDidMount() { 241 | if (!this.state.showFilter) { 242 | window.scroll({ 243 | top: 0, 244 | behavior: "smooth" 245 | }); 246 | console.log("RESPONSIVE GALLERY: window did mount"); 247 | } 248 | } 249 | 250 | 251 | render() { 252 | const cursorStyle = { cursor: "pointer" }; 253 | return ( 254 |
255 | 256 | {this.renderFilter(this.state.showFilter)} 257 | {/* */} 258 | {this.renderGallery(this.state.imageArray)} 259 | {/* */} 260 | 261 | 275 |
276 | ); 277 | } 278 | } 279 | 280 | ResponsiveGallery.propTypes = { 281 | images: PropTypes.array, 282 | showThumbnails: PropTypes.bool, 283 | }; 284 | 285 | export default withRouter(ResponsiveGallery); -------------------------------------------------------------------------------- /src/components/Routes.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createHashHistory } from "history"; 3 | import { BrowserRouter, Route, Switch } from 'react-router-dom'; 4 | 5 | // ******** ComponentRoutes ******** // 6 | import App from "./App"; 7 | import Home from './Home' 8 | import GalleryContainer from './GalleryContainer'; 9 | import BlogPage from './BlogPage' 10 | import AboutPage from './AboutPage' 11 | import TestPage from './TestPage' 12 | import ProjectHeader from './Projects/ProjectHeader' 13 | import ProjectContainer from './Projects/ProjectContainer' 14 | import ContactPage from './ContactPage' 15 | import ContactCard from './ContactCard' 16 | 17 | // ******** Project Routes ******** // 18 | import AllProjectsConfig from './PhotoProjects/All_Projects_Config' 19 | import AboutMeConfig from './PhotoProjects/About_Me_Config' 20 | import Laruen_Lychee from './PhotoProjects/10.04.18_Laruen_Lychee' 21 | import Wedding_Wan_Chen from './PhotoProjects/09.02.17_Yvonne_Wedding' 22 | import Wedding_Cbass_Becca from './PhotoProjects/08.05.18_Wedding_Cbass_Becca' 23 | import Wedding_WW from './PhotoProjects/12.15.18_Wedding_WW' 24 | import Wedding_WW2 from './PhotoProjects/01.05.19_Wedding_WW2' 25 | import Lauren_Night_Shoot from './PhotoProjects/05.21.18_Lauren_Night_Shoot' 26 | import Urban_SF from './PhotoProjects/08.18.18_Urban_SF' 27 | import MarchForOurLives from './PhotoProjects/03.24.18_March_4_Our_Lives' 28 | import Boardwalk_Kristina from './PhotoProjects/11.12.17_Boardwalk_Kristina' 29 | import Grad_Suzzane from './PhotoProjects/06.12.18_Gad_Suzzane' 30 | import Lilly_LinkedIn from './PhotoProjects/10.15.17_Lilly_LinkedIn' 31 | import Brille_of_Tarth from './PhotoProjects/05.01.17_Brielle_of_Tarth' 32 | import Wedding_AA from './PhotoProjects/10.11.18_Wedding_AA' 33 | import Europe_2018 from './PhotoProjects/2018_Europe' 34 | import Baby_Ginger from './PhotoProjects/10.24.18_Baby_Ginger' 35 | import SEA_Backpacking from './PhotoProjects/2017_S.E.A_Backpacking' 36 | import South_America from './PhotoProjects/2017_South_America' 37 | import JJ_Proposal from './PhotoProjects/01.26.19_JJ_Proposal' 38 | import Nola from './PhotoProjects/02.02.19_Nola' 39 | import Ninasky from './PhotoProjects/09.01.19_Ninasky' 40 | 41 | const Routes = () => { 42 | 43 | // console.log("ROUTE: " + JSON.stringify(Laruen_Lychee.imageArray)) 44 | return ( 45 | // 46 | // Switch creates issues in routes, Fixes the issue of not rendering when url changes, maybe not anymore?? 47 | // 48 |
49 | 50 | 51 | 52 | 53 | 54 | {/* */} 55 | 56 | 60 | } 61 | /> 62 | 63 | 67 | } 68 | /> 69 | 70 | 77 | } 78 | /> 79 | 80 | 87 | } 88 | /> 89 | 90 | 97 | } 98 | /> 99 | 100 | 107 | } 108 | /> 109 | 110 | 117 | } 118 | /> 119 | 120 | 127 | } 128 | /> 129 | 130 | 137 | } 138 | /> 139 | 140 | 147 | } 148 | /> 149 | 150 | 157 | } 158 | /> 159 | 160 | 167 | } 168 | /> 169 | 170 | 177 | } 178 | /> 179 | 180 | 187 | } 188 | /> 189 | 190 | 197 | } 198 | /> 199 | 200 | 207 | } 208 | /> 209 | 210 | 217 | } 218 | /> 219 | 220 | 227 | } 228 | /> 229 | 230 | 237 | } 238 | /> 239 | 240 | 247 | } 248 | /> 249 | 250 | 257 | } 258 | /> 259 | 260 | 267 | } 268 | /> 269 |
270 | 271 | // 272 | // 273 | ); 274 | } 275 | 276 | export default Routes; -------------------------------------------------------------------------------- /src/components/Store/All_ProjectsReducer.js: -------------------------------------------------------------------------------- 1 | import { 2 | CONSTANT_NEW, CONSTANT_OLD, ACTION_TYPE_FILTER 3 | } from '../configs/constants' 4 | import AllProjectsConfig from '../PhotoProjects/All_Projects_Config' 5 | 6 | const initialState = { 7 | projectObject: AllProjectsConfig.imageArray 8 | }; 9 | 10 | const All_ProjectsReducer = (state = initialState, action) => { 11 | //Delay in rendering state 12 | let projCopy = [...initialState.projectObject]; 13 | let newState = { ...state }; 14 | //Allows for the reverse when clicking filter on any category 15 | // const reverseCopy = projCopy.reverse(); //Actually manipulates this variable projcopy 16 | 17 | // console.log("initial state: ", JSON.stringify(projCopy)); 18 | // console.log("newState : ", JSON.stringify(newState)); 19 | // console.log(" state: ", JSON.stringify(state)); 20 | switch (action.type) { 21 | case CONSTANT_NEW: 22 | newState.projectObject = initialState.projectObject; 23 | // console.log("newstate_NEW: ", JSON.stringify(newState.projectObject)); 24 | return newState; 25 | 26 | case CONSTANT_OLD: 27 | let reverseCopy = projCopy.reverse(); 28 | newState.projectObject = reverseCopy; 29 | // console.log("newstate_OLD: ", JSON.stringify(newState.projectObject)); 30 | return newState; 31 | 32 | case ACTION_TYPE_FILTER: 33 | let filteredArray = projCopy.filter(function (proj) { 34 | let searchValue = proj.category; 35 | return searchValue.indexOf(action.value) !== -1; 36 | }); 37 | newState.projectObject = filteredArray; 38 | // console.log("newstate_FILTER: ", JSON.stringify(newState.projectObject)); 39 | return newState; 40 | } 41 | // console.log("newstate_END: ", JSON.stringify(newState.projectObject)); 42 | 43 | return newState; 44 | }; 45 | 46 | export default All_ProjectsReducer; -------------------------------------------------------------------------------- /src/components/Store/Reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import All_ProjectsReducer from './All_ProjectsReducer' 3 | 4 | const rootReducer = combineReducers({ 5 | All_ProjectsReducer: All_ProjectsReducer, 6 | }); 7 | 8 | export default rootReducer; -------------------------------------------------------------------------------- /src/components/TestPage.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin-top:0; 3 | padding:0; 4 | font-family:"Helvetica Neue", Helvetica, Sans-serif; 5 | word-spacing:-2px; 6 | } 7 | 8 | h1 { 9 | font-size:40px; 10 | font-weight:bold; 11 | color:#191919; 12 | -webkit-font-smoothing: antialiased; 13 | } 14 | 15 | h2 { 16 | font-weight:normal; 17 | font-size:20px; 18 | color:#888; 19 | padding:5px 0; 20 | } 21 | 22 | .message { 23 | background:#181818; 24 | color:#FFF; 25 | position: absolute; 26 | top: -250px; 27 | left: 0; 28 | width: 100%; 29 | height: 250px; 30 | padding: 20px; 31 | transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 32 | overflow: hidden; 33 | box-sizing: border-box; 34 | 35 | } 36 | 37 | .message h1 { 38 | color:#FFF; 39 | } 40 | 41 | #toggle { 42 | position:absolute; 43 | appearance:none; 44 | cursor:pointer; 45 | left:-100%; 46 | top:-100%; 47 | } 48 | 49 | #toggle + label { 50 | position:absolute; 51 | cursor:pointer; 52 | padding:10px; 53 | background: #26ae90; 54 | width: 100px; 55 | border-radius: 3px; 56 | padding: 8px 10px; 57 | color: #FFF; 58 | line-height:20px; 59 | font-size:12px; 60 | text-align:center; 61 | -webkit-font-smoothing: antialiased; 62 | cursor: pointer; 63 | margin:20px 50px; 64 | transition:all 500ms ease; 65 | } 66 | #toggle + label:after { 67 | content:"Open" 68 | } 69 | 70 | .container { 71 | transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); 72 | padding:5em 3em; 73 | } 74 | 75 | #toggle:checked ~ .message { 76 | top: 0; 77 | } 78 | 79 | #toggle:checked ~ .container { 80 | margin-top: 250px; 81 | } 82 | 83 | #toggle:checked + label { 84 | background:#dd6149; 85 | } 86 | 87 | #toggle:checked + label:after { 88 | content:"Close" 89 | } 90 | 91 | -------------------------------------------------------------------------------- /src/components/TestPage.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './TestPage.css' 3 | import ProjectPageTest from './Projects/All_Projects' 4 | // import { Jumbotron, Container, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap'; 5 | import { CardImage } from 'mdbreact'; 6 | import { Parallax } from "react-parallax"; 7 | import './css/App.css' 8 | import { Container, Row, Col, Mask, Fa, View, Button } from 'mdbreact'; 9 | 10 | const TestPage = () => { 11 | // const image1 = 'https://www.dropbox.com/s/05znwgdjf1haqo8/IMG_3732.jpg?raw=1'; 12 | 13 | return ( 14 |
15 | 16 | {/*





17 |





18 |





*/} 19 | 20 | 21 | 22 |
23 |

Pure CSS3 Slide Down Toggle Demo

24 |

Click the Open button to see hidden mesage.

25 |
26 |

hello, I'm a hidden message. You found it.

27 |

Now Click the Heart button in the bottom to support CSS3

28 |
29 | 30 | {/* 31 | 32 | 33 | Sample image 34 | 35 | 36 | 37 | 38 | */} 39 | 40 | 41 | 42 | 43 | {/* 44 | 45 |

Fluid jumbotron

46 |

This is a modified jumbotron that occupies the entire horizontal space of its parent.

47 | 48 | 49 | 50 | 51 | Special Title Treatment 52 | With supporting text below as a natural lead-in to additional content. 53 | 54 | 55 | 56 | 57 | */} 58 | 59 | {/* */} 60 | 61 | {/* 62 |
63 |
64 | 65 | 66 |
67 | 68 | 69 |

March for Our Lives

70 |
March 31st 2018
71 |

Lrem ipsum dolor sit amet, consectetur adipisicing elit. 72 | Exercitationem perspiciatis voluptatum a, quo nobis, non commodi quia repellendus 73 | sequi nulla voluptatem dicta reprehenderit, placeat laborum ut beatae ullam suscipit veniam. 74 |

75 | 76 | 77 |
*/} 78 | 79 | {/* */} 80 | 81 | 82 |
83 | 84 | 85 | 86 | ); 87 | } 88 | export default TestPage; -------------------------------------------------------------------------------- /src/components/configs/constants.js: -------------------------------------------------------------------------------- 1 | export const CONSTANT_NEW = 'FILTER_NEW'; 2 | export const CONSTANT_OLD = 'FILTER_OLD'; 3 | export const CONSTANT_TRAVEL = 'FILTER_TRAVEL'; 4 | export const CONSTANT_URBAN = 'FILTER_URBAN'; 5 | export const CONSTANT_WEDDING = 'FILTER_WEDDING'; 6 | export const CONSTANT_PEOPLE = 'FILTER_PEOPLE'; 7 | export const CONSTANT_CONCERT = 'FILTER_CONCERT'; 8 | export const ACTION_TYPE_FILTER = 'ACTION_TYPE_FILTER'; -------------------------------------------------------------------------------- /src/components/configs/shuffle.js: -------------------------------------------------------------------------------- 1 | const shuffleArray = (array) => { 2 | let i = array.length - 1; 3 | let tempArray = array; 4 | 5 | for (; i > 0; i--) { 6 | const j = Math.floor(Math.random() * (i + 1)); 7 | const temp = array[i]; 8 | tempArray[i] = tempArray[j]; 9 | tempArray[j] = temp; 10 | } 11 | return tempArray; 12 | } 13 | 14 | export default shuffleArray; -------------------------------------------------------------------------------- /src/components/css/App.css: -------------------------------------------------------------------------------- 1 | /*----------------------------------------*/ 2 | 3 | /* Portfolio page CSS 4 | /*----------------------------------------*/ 5 | 6 | .mb-intro .intro-container { 7 | padding: 2em 0 2em 1em; 8 | /* border: "solid" !important; 9 | background-color: '#2715151f' !important; */ 10 | } 11 | 12 | .portfolio-filter { 13 | list-style: none; 14 | } 15 | 16 | .portfolio-filter li { 17 | display: inline-block; 18 | margin-right: 40px; 19 | font-size: 14px; 20 | color: #222; 21 | cursor: pointer; 22 | font-weight: 500; 23 | } 24 | 25 | .portfolio-filter li.active { 26 | text-decoration: underline; 27 | -webkit-text-decoration-color: #2046f2; 28 | text-decoration-color: #2046f2; 29 | } 30 | 31 | .portfolio-warp { 32 | display: block; 33 | overflow: hidden; 34 | } 35 | 36 | .portfolio-warp .grid-item { 37 | width: 20%; 38 | background-position: center; 39 | } 40 | 41 | .portfolio-warp .grid-item:after { 42 | content: ''; 43 | display: block; 44 | clear: both; 45 | } 46 | 47 | .portfolio-warp .grid-item.grid-wide, .portfolio-warp .grid-item.grid-long { 48 | width: 40%; 49 | } 50 | 51 | .portfolio-warp .grid-item a { 52 | width: 100%; 53 | height: 100%; 54 | display: block; 55 | background: rgba(186, 255, 0, 0.45); 56 | opacity: 0; 57 | -webkit-transition: all 0.4s; 58 | -o-transition: all 0.4s; 59 | transition: all 0.4s; 60 | } 61 | 62 | .portfolio-warp .grid-item a:after { 63 | position: absolute; 64 | content: "+"; 65 | left: 50%; 66 | top: 60%; 67 | width: 48px; 68 | margin-left: -24px; 69 | margin-top: -24px; 70 | color: #fff; 71 | font-size: 48px; 72 | line-height: 48px; 73 | text-align: center; 74 | -webkit-transition: all 0.4s; 75 | -o-transition: all 0.4s; 76 | transition: all 0.4s; 77 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.25); 78 | } 79 | 80 | .portfolio-warp .grid-item:hover a { 81 | opacity: 1; 82 | } 83 | 84 | .portfolio-warp .grid-item:hover a:after { 85 | top: 50%; 86 | } 87 | 88 | .portfolio-warp .grid-sizer { 89 | width: 20%; 90 | } 91 | 92 | .headroom-wrapper { 93 | height: 4em !important; 94 | } 95 | 96 | /*----------------------------------------*/ 97 | 98 | /* Carousel Intro CSS 99 | /*----------------------------------------*/ 100 | 101 | #carouselIntro .gradient { 102 | background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%); 103 | background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%); 104 | background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7))); 105 | background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%); 106 | background: linear-gradient(to 45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%); 107 | } 108 | 109 | #carouselIntro .view { 110 | /* background-image: url('../../images/About_Page/about_header.jpg'); */ 111 | /* background-image: url('../../images/About_Page/home1.jpg'); */ 112 | /* background-image: url('../../images/About_Page/home2.jpg'); */ 113 | background-image: url('../../images/Backgrounds/Carousel-1.jpg'); 114 | background-repeat: no-repeat; 115 | background-size: cover; 116 | background-position: center center; 117 | height: 103vh; 118 | } 119 | 120 | #carouselIntro .view2 { 121 | background-image: url('../../images/Backgrounds/Carousel-8.jpg'); 122 | background-repeat: no-repeat; 123 | background-size: cover; 124 | background-position: center center; 125 | height: 103vh; 126 | } 127 | #carouselIntro .view3 { 128 | background-image: url('../../images/Backgrounds/Carousel-16.jpg'); 129 | background-repeat: no-repeat; 130 | background-size: cover; 131 | background-position: center center; 132 | height: 103vh; 133 | } 134 | #carouselIntro .view4 { 135 | background-image: url('../../images/Backgrounds/Carousel-14.jpg'); 136 | background-repeat: no-repeat; 137 | background-size: cover; 138 | background-position: center center; 139 | height: 103vh; 140 | } 141 | .btn-intro a{ 142 | color: black; 143 | word-spacing: 0px; 144 | } 145 | 146 | 147 | /* Navbar CSS */ 148 | 149 | #navigation h6 { 150 | line-height: 1.7; 151 | } 152 | 153 | #navigation strong { 154 | font-size: 1.25em; 155 | font-weight: 500; 156 | } 157 | 158 | #navigation .navbar { 159 | transition: background .5s ease-in-out, padding .5s ease-in-out; 160 | } 161 | 162 | /* #navigation .brand { 163 | color: black; 164 | } */ 165 | 166 | #navigation .top-nav-collapse { 167 | background: white !important; 168 | } 169 | 170 | /* Gallery Filter Project */ 171 | 172 | .colorBlackLink { 173 | color: black; 174 | } 175 | 176 | /* #navigation { 177 | position: absolute; 178 | top: 0; left: 0; right: 0; bottom: 0; 179 | z-index: 0; 180 | } 181 | */ 182 | 183 | #Template h1 { 184 | margin-bottom: 1em; 185 | } 186 | 187 | .center { 188 | text-align: center; 189 | } 190 | 191 | /* Gallery Container View */ 192 | 193 | #GalleryContainer h1 { 194 | margin-bottom: .4em; 195 | } 196 | 197 | /* Margin of Masonry Grid */ 198 | 199 | #GalleryContainer { 200 | /* margin: 0.5em; */ 201 | margin-top: -5em; 202 | } 203 | 204 | /* TabFilter */ 205 | 206 | #Tab .TabList { 207 | border: 'none' !important; 208 | margin: '-5em 0 2em 0em' !important; 209 | } 210 | 211 | #Tab .TabFilter { 212 | cursor: "pointer"; 213 | } 214 | 215 | .GalleryContainer { 216 | margin: '-5em 0em 2em 0em' !important; 217 | } 218 | 219 | .centerdiv { 220 | text-align: center; 221 | margin: 0 auto; 222 | } 223 | 224 | .clearBorder { 225 | border-bottom: none; 226 | } 227 | 228 | .nav-format { 229 | padding-left: 24px; 230 | color: black; 231 | } 232 | 233 | /* Project Header */ 234 | 235 | #headerbox { 236 | margin: -6em 18em 5em 18em; 237 | } 238 | 239 | #headerbox .Card { 240 | padding: 1.25rem; 241 | background-color: rgba(255, 255, 255, .7); 242 | margin-bottom: 7.5em; 243 | } 244 | 245 | .headerbg { 246 | height: 450px; 247 | } 248 | 249 | .headerTitle { 250 | letter-spacing: 2px; 251 | } 252 | 253 | p, h3 { 254 | letter-spacing: 1px; 255 | } 256 | 257 | .container p { 258 | text-indent: 3em; 259 | } 260 | 261 | .email { 262 | color: #cb3837; 263 | font-size: 1.25em; 264 | } 265 | 266 | .padding-top-3 { 267 | padding-top: 0.5em; 268 | } 269 | 270 | /* Intro Arrow Button */ 271 | 272 | .button, buttonMore { 273 | -moz-appearance: none; 274 | -webkit-appearance: none; 275 | -ms-appearance: none; 276 | appearance: none; 277 | -moz-transition: background-color 0.2s ease-in-out; 278 | -webkit-transition: background-color 0.2s ease-in-out; 279 | -ms-transition: background-color 0.2s ease-in-out; 280 | transition: background-color 0.2s ease-in-out; 281 | background-color: rgba(229, 230, 231, 0.375); 282 | border: 0; 283 | border-radius: 3.5em; 284 | color: #ffffff; 285 | cursor: pointer; 286 | display: inline-block; 287 | height: 3.5em; 288 | line-height: 3.5em; 289 | outline: 0; 290 | padding: 0 2em 0 2em; 291 | position: relative; 292 | text-align: center; 293 | text-decoration: none; 294 | } 295 | 296 | input[type="button"].down, .button.down, button.down { 297 | width: 5em; 298 | height: 5em; 299 | line-height: 4.5em; 300 | padding: 0; 301 | background-image: url("../../images/buttons/dark-arrow.svg"); 302 | background-position: center center; 303 | background-repeat: no-repeat; 304 | text-indent: -10em; 305 | overflow: hidden; 306 | margin-bottom: 5em; 307 | } 308 | 309 | button:hover { 310 | background-color: rgba(229, 230, 231, 0.375); 311 | } 312 | 313 | .button:active, button:active { 314 | background-color: rgba(229, 230, 231, 0.375); 315 | } 316 | 317 | .button.style2, button.style2 { 318 | /* background-color: transparent; */ 319 | background-color: rgba(39, 21, 21, 0.12); 320 | border: solid 1px #f8f9fa; 321 | color: inherit; 322 | } 323 | 324 | .button.style2:hover, button.style2:hover { 325 | background-color: rgba(229, 230, 231, 0.375); 326 | } 327 | 328 | .button.style2:active, button.style2:active { 329 | background-color: rgba(229, 230, 231, 0.375); 330 | } 331 | 332 | /* =========================== 333 | Responsive 334 | ==============================*/ 335 | 336 | /* Large Display */ 337 | 338 | @media only screen and (min-width: 1600px) { 339 | html { 340 | font-size: 80% !important; 341 | } 342 | .container { 343 | width: 100% !important; 344 | } 345 | #headerbox { 346 | margin: -6em 40em 5em 40em !important; 347 | } 348 | .mb-intro { 349 | margin-bottom: 19em!important; 350 | } 351 | .display-4 { 352 | padding-top: 0.5em !important; 353 | font-size: 4.5em !important; 354 | } 355 | .headerbg { 356 | height: 45em !important; 357 | } 358 | .mb-intro .intro-container { 359 | padding: 2em 0 4em 1em; 360 | } 361 | /* Parallax Header Image */ 362 | .parallax-mobile-view img { 363 | top: 11em; 364 | height: 100em !important; 365 | } 366 | .col-md-6 { 367 | max-width: 48%!important; 368 | } 369 | span { 370 | word-spacing: 2px; 371 | /* text-indent: 3em; */ 372 | } 373 | /* Parallax Header Image */ 374 | /* .parallax-mobile-view img { 375 | top: -4em !important; 376 | height: 102em !important; 377 | } */ 378 | /* .display-4{ 379 | padding-top: 0em !important; 380 | } */ 381 | } 382 | 383 | @media only screen and (min-width: 1477px) and (max-width: 1599px) { 384 | html { 385 | font-size: 80%; 386 | } 387 | .container { 388 | max-width: 80%!important; 389 | } 390 | .view .mb-intro { 391 | margin-bottom: 12em; 392 | } 393 | .view .imgFit { 394 | height: 57vh !important; 395 | width: 93vw !important; 396 | } 397 | /* Parallax Header Image */ 398 | .display-4 { 399 | padding-top: 0.5em !important; 400 | } 401 | /* #headerbox{ 402 | margin: -6em 25em 5em 25em !important; 403 | } */ 404 | /* .container { 405 | max-width: 1200px !important; 406 | } */ 407 | } 408 | 409 | @media only screen and (min-width: 1400px) and (max-width: 1476px) { 410 | html { 411 | font-size: 80%; 412 | } 413 | .container { 414 | max-width: 80%!important; 415 | } 416 | .view .imgFit { 417 | height: 57vh !important; 418 | width: 93vw !important; 419 | } 420 | .view .stripe div p { 421 | font-size: 1.25em !important; 422 | } 423 | /* Parallax Header Image */ 424 | .parallax-mobile-view img { 425 | top: 9em; 426 | height: 77em !important; 427 | } 428 | .display-4 { 429 | padding-top: 0.5em !important; 430 | } 431 | .view .mb-intro { 432 | margin-bottom: 10em; 433 | } 434 | #headerbox { 435 | margin: -6em 23em 5em 23em; 436 | } 437 | .headerbg-contact { 438 | height: 47em !important; 439 | } 440 | } 441 | 442 | @media only screen and (min-width: 1200px) and (max-width: 1399px) { 443 | html { 444 | font-size: 80%; 445 | } 446 | .container { 447 | width: 85% !important; 448 | } 449 | .view .stripe div p { 450 | font-size: 1.25em !important; 451 | } 452 | .display-4 { 453 | padding-top: 0.5em !important; 454 | } 455 | #headerbox { 456 | margin: -6em 20em 5em 20em; 457 | } 458 | .view .mb-intro { 459 | margin-bottom: 10em !important; 460 | } 461 | /* Parallax Header Image */ 462 | .parallax-mobile-view img { 463 | top: 14em !important; 464 | height: 70em !important; 465 | } 466 | .headerbg-contact { 467 | height: 43em; 468 | } 469 | } 470 | 471 | /* Medium screen : 992px. Ipad Pro */ 472 | 473 | @media only screen and (min-width: 992px) and (max-width: 1199px) { 474 | html { 475 | font-size: 80% !important; 476 | } 477 | .container { 478 | width: 95% !important; 479 | } 480 | .view .imgFit { 481 | height: 22vh !important; 482 | width: 93vw !important; 483 | } 484 | .view .stripe { 485 | padding: 0.2rem !important; 486 | font-size: 0.8em !important; 487 | } 488 | #headerbox { 489 | margin: -6em 8em 5em 8em !important; 490 | } 491 | #headerbox .Card { 492 | margin-bottom: 6em !important; 493 | } 494 | .mb-intro .intro-container { 495 | padding: 0em 0 2em 0em; 496 | } 497 | .mb-intro { 498 | margin-bottom: 11em!important; 499 | } 500 | /* Parallax Header Image */ 501 | .parallax-mobile-view img { 502 | top: 15em !important; 503 | height: 58em !important; 504 | } 505 | .headerbg-contact { 506 | height: 62em!important; 507 | } 508 | .display-4 { 509 | padding-top: 1em !important; 510 | } 511 | .contactcard_margin { 512 | margin-top: -22em!important 513 | } 514 | /* .btn { 515 | font-size: 0.5em !important; 516 | } */ 517 | } 518 | 519 | /* Tablet :768px. Ipad */ 520 | 521 | @media only screen and (min-width: 768px) and (max-width: 991px) { 522 | html { 523 | font-size: 80% !important; 524 | } 525 | .container { 526 | width: 100% !important; 527 | } 528 | #navigation .navbar:not(.top-nav-collapse) { 529 | background: white !important; 530 | } 531 | #btngroup { 532 | position: relative; 533 | display: grid; 534 | vertical-align: middle; 535 | } 536 | #headerbox { 537 | margin: -7em 9em 5em 9em; 538 | } 539 | .view .imgFit { 540 | height: 38vh !important; 541 | width: 93vw !important; 542 | object-position: center !important; 543 | } 544 | .display-4 { 545 | font-size: 3.25em !important; 546 | padding-top: 1em !important; 547 | } 548 | .display-5 { 549 | font-size: 1.25em !important; 550 | } 551 | .mb-intro .intro-container { 552 | padding: 0em 0 1em 0em; 553 | margin: 0 2em 0 2em; 554 | } 555 | .mb-intro { 556 | margin-bottom: 11em!important; 557 | } 558 | /* Parallax Header Image */ 559 | .parallax-mobile-view img { 560 | top: 18em !important; 561 | height: 50em !important; 562 | } 563 | .contactcard_margin { 564 | margin-top: -22em!important 565 | } 566 | .contactcard_width { 567 | width: 50% !important; 568 | } 569 | .contactcard_padding_mobile { 570 | padding-left: 0px !important; 571 | } 572 | .headerbg-contact { 573 | height: 42em; 574 | } 575 | /* .btn { 576 | font-size: 0.75em !important; 577 | } */ 578 | } 579 | 580 | @media only screen and (min-width: 520px) and (max-width: 767px) { 581 | html { 582 | font-size: 80% !important; 583 | } 584 | .container { 585 | width: 100% !important; 586 | } 587 | .display-4 { 588 | font-size: 4em !important; 589 | padding-top: 0em !important; 590 | } 591 | .mb-intro .intro-container { 592 | padding: 2em 0 2em 0em; 593 | } 594 | .card-margin { 595 | width: 50% !important; 596 | margin-bottom: 1em !important; 597 | } 598 | .contactcard_width { 599 | width: 50% !important; 600 | } 601 | } 602 | 603 | /* Large Mobile :480px. */ 604 | 605 | @media only screen and (max-width: 767px) { 606 | .container { 607 | width: 100% !important; 608 | } 609 | /* For BayBridge Photo */ 610 | /* #carouselIntro .view { 611 | background-image: url('../../images/Backgrounds/Carousel-1-mobile.jpg'); 612 | background-repeat: no-repeat; 613 | background-size: cover; 614 | background-position: center center; 615 | } */ 616 | #headerbox { 617 | margin: -7em 2em 5em 2em; 618 | } 619 | .headerbg { 620 | height: 300px; 621 | } 622 | .headerTitle { 623 | font-size: 2.5em !important; 624 | /* letter-spacing: 2px; */ 625 | } 626 | /* p, h3 { 627 | letter-spacing: 1px; 628 | } */ 629 | .headerDate { 630 | font-size: 1em !important; 631 | } 632 | .headerDesc { 633 | font-size: 1em !important; 634 | } 635 | .container p { 636 | text-indent: 0em; 637 | } 638 | .display-3 { 639 | font-size: 1.5em !important; 640 | margin-top: 1em !important; 641 | } 642 | .subtext-header { 643 | font-size: 1em !important; 644 | } 645 | /* All Project Card Size */ 646 | .view .imgFit { 647 | height: 27em !important; 648 | /* width: 32em !important; */ 649 | object-fit: cover !important; 650 | object-position: center !important; 651 | } 652 | .section .project-margins { 653 | margin: 1em !important; 654 | } 655 | .view .imgFit { 656 | /* height:25vh !important; */ 657 | height: 27vh !important; 658 | width: 100vw !important; 659 | object-position: center !important; 660 | } 661 | .project-margins { 662 | margin: -3em 1em 1em 1em !important; 663 | } 664 | .view .stripe { 665 | bottom: 1rem !important; 666 | padding: 0.2rem !important; 667 | } 668 | .view .stripe p { 669 | font-size: 0.8em !important; 670 | } 671 | .display-4 { 672 | font-size: 4em !important; 673 | padding-top: 0em !important; 674 | } 675 | .display-5 { 676 | font-size: 1em !important; 677 | } 678 | .display-6 { 679 | font-size: 0.85em !important; 680 | } 681 | .mb-5 { 682 | margin-bottom: 1em !important; 683 | } 684 | /* Parallax Header Image */ 685 | .parallax-mobile-view img { 686 | top: 10em !important; 687 | height: 37em !important; 688 | /* content: url('../../images/mobile_header.jpg') !important; */ 689 | } 690 | /* All Projects Image Cover for mobile */ 691 | /* .ap-mobile-cover { 692 | content: url('../../images/About_Page/about.jpg') !important; 693 | } */ 694 | .ap-mobile-cover-Lauren_Lychee { 695 | content: url('../../images/10.04.18_Lauren_Lychee/Lauren_Lychee-11.jpg') !important; 696 | } 697 | .ap-mobile-cover-Lilly_Linkedin { 698 | content: url('../../images/10.15.17_Lilly_LinkedIn/Lilly_LinkedIn-11.jpg') !important; 699 | } 700 | .ap-mobile-cover-Ninasky { 701 | content: url('../../images/09.01.19_Ninasky/Ninasky-19.jpg') !important; 702 | } 703 | .featured-header-mobile img { 704 | /* content: url('../../images/mobile_header.jpg') !important; */ 705 | top: 14em !important; 706 | height: 50em !important; 707 | } 708 | .contactcard_width { 709 | width: 50% !important; 710 | } 711 | .col-md-6 { 712 | padding-left: 0.5em !important; 713 | padding-right: 0.5em !important; 714 | } 715 | .view .mb-intro { 716 | margin-bottom: 12em !important; 717 | } 718 | .headerbg-contact { 719 | height: 39em!important; 720 | } 721 | /* .btn { 722 | font-size: 0.5em !important; 723 | } */ 724 | } 725 | 726 | /* Iphone X */ 727 | 728 | @media only screen and (max-width: 375px) and (max-height: 812px) { 729 | .container { 730 | width: 100% !important; 731 | } 732 | .contactcard_margin { 733 | margin-top: -37em!important; 734 | /* margin-bottom: 16em !important; */ 735 | } 736 | .parallax-mobile-view img { 737 | top: 8em !important; 738 | height: 48em !important; 739 | } 740 | #carouselIntro .view { 741 | background-position: 72% !important; 742 | } 743 | .view .mb-intro { 744 | margin-bottom: 10em !important; 745 | } 746 | .social-media { 747 | margin-left: -1.25em !important; 748 | } 749 | .headerbg-contact { 750 | height: 39em!important; 751 | } 752 | .tech-info { 753 | font-size: 1.5rem !important; 754 | } 755 | /* .fa { 756 | padding: .5rem; 757 | font-size: 1em !important; 758 | width: 1.7em; 759 | text-align: center; 760 | text-decoration: none; 761 | margin: 1px; 762 | border-radius: 25%; 763 | } */ 764 | /* .btn-lg{ 765 | padding: .25rem 0rem .5rem 1rem !important; 766 | } */ 767 | } 768 | 769 | /* small mobile :320px. */ 770 | 771 | @media only screen and (max-width: 479px) { 772 | html { 773 | font-size: 100% !important; 774 | } 775 | .headerbg { 776 | height: 250px; 777 | } 778 | .view .stripe { 779 | bottom: 1rem !important; 780 | padding: 0.2rem !important; 781 | } 782 | .button.down { 783 | width: 3.5em; 784 | height: 3.5em; 785 | margin-bottom: 3.5em; 786 | } 787 | #headerbox { 788 | margin-top: -5em !important; 789 | } 790 | #headerbox .Card { 791 | padding: 0.5em !important; 792 | /* margin-bottom: 6em !important; */ 793 | } 794 | .rwt__tab { 795 | padding: 0.5rem 0.75rem !important; 796 | } 797 | .card-margin { 798 | margin: 1em !important; 799 | } 800 | .display-4 { 801 | font-size: 1.85em !important; 802 | padding-top: 1em !important; 803 | } 804 | .display-5 { 805 | font-size: 1em !important; 806 | } 807 | .intro-title { 808 | font-size: 3em !important; 809 | /* padding-top: 0.5em !important; */ 810 | } 811 | .intro-subtitle { 812 | font-size: 1em !important; 813 | /* padding-top: 0.5em !important; */ 814 | } 815 | .mb-intro .intro-container { 816 | padding: 0em 0 2em 0em; 817 | } 818 | .col-md-6 { 819 | padding-left: 0em !important; 820 | padding-right: 0em !important; 821 | } 822 | btn { 823 | font-size: .75em !important; 824 | } 825 | .contactcard_margin { 826 | margin-top: -20em!important 827 | } 828 | .contactcard_info { 829 | font-size: 0.80em !important; 830 | } 831 | .contactcard_title { 832 | font-size: 1.2em !important; 833 | } 834 | .contactcard_padding { 835 | padding-left: 0px !important; 836 | } 837 | .page-footer { 838 | margin-top: 8em !important; 839 | } 840 | .pagefooter-margin { 841 | margin-top: -3.5rem!important; 842 | padding-top: 1.5rem!important; 843 | } 844 | .social-media .fa { 845 | font-size: 1.25em !important; 846 | } 847 | .btn-lg { 848 | padding: .25rem 0px .5rem 1em !important; 849 | } 850 | } 851 | 852 | /* =========================== 853 | All Projects Cards 854 | ==============================*/ 855 | 856 | .collection-card .stripe { 857 | position: absolute; 858 | bottom: 1rem; 859 | width: 100%; 860 | text-align: center; 861 | padding: 1.2rem; 862 | } 863 | 864 | .collection-card .stripe.dark { 865 | background-color: #263238; 866 | } 867 | 868 | .collection-card .stripe.dark a p { 869 | color: #eee 870 | } 871 | 872 | .collection-card .stripe.light { 873 | background-color: rgba(255, 255, 255, .7) 874 | } 875 | 876 | .collection-card .stripe.light a p { 877 | color: #424242 878 | } 879 | 880 | .collection-card .stripe a p { 881 | padding: 0; 882 | margin: 0; 883 | letter-spacing: .25rem 884 | } 885 | 886 | .card-margin { 887 | margin-bottom: 2em; 888 | } 889 | 890 | .figureFit { 891 | width: 100%; 892 | text-align: center; 893 | overflow: hidden; 894 | } 895 | 896 | .imgFit { 897 | height: 60vh !important; 898 | width: 93vw !important; 899 | object-fit: cover !important; 900 | object-position: center !important; 901 | } 902 | 903 | .project-margins { 904 | margin: 3em; 905 | } 906 | 907 | .mb-10 { 908 | margin-bottom: 10em; 909 | } 910 | 911 | /* For Responsive Gallery Info */ 912 | 913 | .view .stripe { 914 | position: absolute; 915 | bottom: 2rem; 916 | width: 100%; 917 | text-align: center; 918 | padding: 1.2rem; 919 | } 920 | 921 | .view .stripe.dark { 922 | background-color: rgb(64, 64, 64, .7); 923 | } 924 | 925 | .view .stripe.dark div p { 926 | color: #eee; 927 | font-family: "Helvetica Neue", Helvetica, Sans-serif; 928 | font-size: 1.5em; 929 | } 930 | 931 | .view.stripe.light { 932 | background-color: rgba(255, 255, 255, .7) 933 | } 934 | 935 | .stripe.light { 936 | background-color: rgba(255, 255, 255, .7) 937 | } 938 | 939 | .view .stripe.light div p { 940 | color: #424242; 941 | font-family: "Helvetica Neue", Helvetica, Sans-serif; 942 | font-size: 1.5em; 943 | } 944 | 945 | .view .stripe div p { 946 | padding: 0; 947 | margin: 0; 948 | letter-spacing: .15rem; 949 | } 950 | 951 | .view .stripe div .date { 952 | font-size: 0.75em; 953 | letter-spacing: 0.1; 954 | } 955 | 956 | .cursor-pointer { 957 | cursor: pointer !important; 958 | } 959 | 960 | .containerMarginTopFeature { 961 | margin-top: -10em !important; 962 | } 963 | 964 | .containerMarginTopProjects { 965 | margin-top: -6em !important; 966 | } 967 | 968 | .allprojectmargintop { 969 | margin-top: -5em !important; 970 | } 971 | 972 | .marginTop3 { 973 | margin-top: -9em !important; 974 | } 975 | 976 | .display-4 { 977 | font-weight: 500 !important; 978 | padding-top: 1em; 979 | /* text-shadow: 2px 2px 4px #5a5051; */ 980 | font-size: 4rem; 981 | } 982 | 983 | .display-5 { 984 | /* font-size: 2em; */ 985 | text-shadow: 0px 0px 10px #5a5051; 986 | padding-left: 4px; 987 | /* Diff Occupation desc */ 988 | font-size: 1.25em; 989 | word-spacing: 0.1em !important; 990 | } 991 | 992 | .hr-light { 993 | border-top: 2px solid #fff !important; 994 | } 995 | 996 | .hr-dark { 997 | border-top: 2px solid #5a5051 !important; 998 | } 999 | 1000 | .intro-title { 1001 | text-shadow: 0px 0px 4px #5a5051; 1002 | } 1003 | 1004 | .contactcard_margin { 1005 | margin-top: -22em; 1006 | } 1007 | 1008 | .view1 .container { 1009 | margin-bottom: "8em"; 1010 | } 1011 | 1012 | .social-media { 1013 | margin-left: -1em; 1014 | } 1015 | 1016 | .social-media .fa { 1017 | font-size: 2em; 1018 | } 1019 | 1020 | /* Social Media Icons */ 1021 | 1022 | .fa-soundcloud-contact { 1023 | color: orangered; 1024 | } 1025 | 1026 | .fa-linkedin-contact { 1027 | color: #0073b1; 1028 | } 1029 | 1030 | .fa-facebook-contact { 1031 | color: rgb(59, 89, 152); 1032 | } 1033 | 1034 | .fa-instagram-contact { 1035 | color: darkviolet 1036 | } 1037 | 1038 | .fa-github-contact { 1039 | color: #24292e; 1040 | } 1041 | 1042 | /* 1043 | .fa { 1044 | padding: .5rem; 1045 | font-size: 2.5rem; 1046 | width: 1.7em; 1047 | text-align: center; 1048 | text-decoration: none; 1049 | margin: 1px; 1050 | border-radius: 25%; 1051 | } 1052 | 1053 | .fa:hover { 1054 | opacity: 0.7; 1055 | } 1056 | .fa-facebook { 1057 | background: #3B5998; 1058 | color: white; 1059 | } 1060 | .fa-twitter { 1061 | background: #55ACEE; 1062 | color: white; 1063 | } 1064 | .fa-linkedin { 1065 | background: #007bb5; 1066 | color: white; 1067 | } 1068 | .fa-instagram { 1069 | background: #125688; 1070 | color: white; 1071 | } 1072 | .fa-snapchat-ghost { 1073 | background: #fffc00; 1074 | color: white; 1075 | text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 1076 | } 1077 | .fa-soundcloud { 1078 | background: #ff5500; 1079 | color: white; 1080 | } */ 1081 | 1082 | .tech-info { 1083 | font-size: 1.875rem; 1084 | border-bottom: 1px solid rgba(0, 0, 0, .1); 1085 | padding-bottom: 8px; 1086 | letter-spacing: -0.8px; 1087 | letter-spacing: -.05rem; 1088 | } 1089 | 1090 | .tech-info-list { 1091 | font-size: 1.25em; 1092 | color: #cb3837; 1093 | text-decoration: none; 1094 | font-weight: 400; 1095 | line-height: 1.4; 1096 | } 1097 | 1098 | .tech-info .margin-left-1 { 1099 | margin-left: 1em; 1100 | } 1101 | 1102 | .camera-info-list { 1103 | font-size: 1.25em; 1104 | font-weight: 400; 1105 | } 1106 | 1107 | .border-bottom { 1108 | border-bottom: 1px solid rgba(0, 0, 0, .1); 1109 | margin: 2em 1em 2em 1em; 1110 | padding: 2em 1em 2em 1em; 1111 | } 1112 | 1113 | .border-bottom-tech { 1114 | /* border-bottom: 1px solid rgba(0, 0, 0, .1); */ 1115 | margin: 2em 1em 0 1em; 1116 | padding: 2em 1em 0 1em; 1117 | } -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Daniel NuWin | Photography 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './components/App'; 4 | 5 | //For getting individual routes to work. 6 | // import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 7 | import { Router, Route, Link } from "react-router-dom"; 8 | 9 | //Material Design Bootstrap 10 | import 'font-awesome/css/font-awesome.min.css'; 11 | import 'bootstrap/dist/css/bootstrap.min.css'; 12 | import 'mdbreact/dist/css/mdb.css'; 13 | import './lib/animate.min.css'; 14 | 15 | //Redux 16 | import { Provider } from 'react-redux'; 17 | import { createStore } from 'redux'; 18 | import rootReducer from './components/Store/Reducer'; 19 | const store = createStore(rootReducer); 20 | 21 | // document.body.style.zoom="80%"; 22 | //HashHistory works for github pages but not on browser router with godaddy domain. 23 | import createHashHistory from 'history/createHashHistory'; 24 | const hashHistory = createHashHistory({ basename: process.env.PUBLIC_URL }); 25 | 26 | ReactDOM.render( 27 | 28 | 29 | 30 | 31 | , 32 | document.getElementById('app')); 33 | 34 | //Disable right click 35 | // document.oncontextmenu = function (e) { 36 | // console.log(e.button); 37 | // if (e.button == 2) { 38 | // e.preventDefault(); 39 | // alert("Images are copy protected"); 40 | // return false; 41 | // } 42 | // } -------------------------------------------------------------------------------- /src/lib/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danielnuwin/React-Photography-Portfolio/97ed5e27b074d531a1d7024696369ac27b24c766/src/lib/.DS_Store -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/index.js', 7 | output: { 8 | path: path.join(__dirname, '/dist'), 9 | filename: 'index_bundle.js', 10 | publicPath: '' 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules/, 17 | use: { 18 | loader: 'babel-loader' 19 | }, 20 | }, 21 | { 22 | test: /\.css$/, 23 | use: ['style-loader', 'css-loader'] 24 | }, 25 | { 26 | test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg|png)(\?.*$|$)/, 27 | use: [ 28 | { 29 | loader: 'url-loader', 30 | options: { 31 | name: "./assets/[hash].[ext]", 32 | limit: 8192 33 | }, 34 | } 35 | ] 36 | }, { 37 | test: /\.js$/, 38 | exclude: /(node_modules|bower_components)/, 39 | use: { 40 | loader: 'babel-loader', 41 | options: { 42 | presets: ['babel-preset-env', 'babel-preset-react'] 43 | } 44 | } 45 | } 46 | ] 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | }, 51 | plugins: [ 52 | new HtmlWebpackPlugin({ 53 | template: './src/index.html' 54 | }), 55 | new CleanWebpackPlugin(['dist']) 56 | ] 57 | }; 58 | --------------------------------------------------------------------------------