Merge pull request #8 from igor-starostenko/develop

Develop

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+**/node_modules
+**/public
+.git
+.DS_Store
+.cache

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:10
+
+WORKDIR /opt
+
+COPY package.json yarn.lock ./
+
+RUN yarn install
+
+COPY . .
+
+EXPOSE 8000
+
+CMD ["yarn", "develop"]

content/posts/2014-05-09-legacy-introduction.md

@@ -1,13 +1,14 @@
 ---
 title: Legacy Introduction
-date: "2014-05-09T23:46:37.121Z"
+date: 2014-05-09T10:00:00
 layout: post
 draft: false
 category: random
 tags:
-  - Introduction
-  - Photo
-  - Travel
+  - introduction
+  - photo
+  - travel
+description: Very first blog post that I've written for one of the previous revisions of my website. Not fun. Don't open.
 ---
 
 This is the original introduction I wrote long time ago for the v1 of my blog. Decided to keep it just to mark the epoch :)

content/posts/2014-05-29-dtla-long-exposure.md

@@ -0,0 +1,19 @@
+---
+title: DTLA Long Exposure
+date: 2014-05-29T23:44:00
+layout: post
+draft: false
+category: photo
+tags:
+  - photo
+  - travel
+  - city
+description: A short story about my first photography experience in Los Angeles. Like the first love — will never forget.
+---
+
+As soon as I arrived to Los Angeles, I set my eyes on this place in business area of the city, from which you can shoot rush hour traffic with skyscrapers in the background. Though I lived not far from that place for some time, I could not make myself go out for photo shoot in DT. My indecision eventually was supplemented with rumors about the dangers of the area in the evening hours. Business center in a daytime becomes a criminal center after sunset. Instead of guys in suits walking the streets there appear different sorts of psychos. But the place is so cool…
+
+Well… finally I found courage and took my wife with me to cover my back, we headed to the 7th street that runs through the Harbor Freeway, which connects downtown with Long Beach. Having a heavy tripod with me makes me feel more secure. I have set the equipment when the sun was still above the horizon and had to use ND filters so the exposure was 100-200 seconds and I had an opportunity to observe the scene as close to us a 40 years guy very smugly tried to spit on the cars that were passing below… Turned out all right. We were not interesting for him.
+
+After all the best photos I managed to take about 40 minutes after the sun had disappeared behind the horizon. No filters were used. Exposure was only 15-25 seconds. Diafragm f/8.
+

content/posts/2014-11-01-weho-halloween-carnaval.md

@@ -0,0 +1,18 @@
+---
+title: West Hollywood Halloween Carnaval
+date: 2014-11-01T10:11:00
+layout: post
+draft: false
+category: travel
+tags:
+  - photo
+  - travel
+  - city
+description: A short story about our fight with evil and filth on the biggest annual costume party in the world.
+---
+For two days the clouds were gathering. Few believed that the rain will come to LA, and perhaps it would not come if not the interference of dark forces who organized the world's largest procession in honor of All Hallows day.
+
+Traditionally Halloween Carnival in West Holywood raises about 500 thousand living dead along Santa Monica boulevard.
+
+Of course, me and my wife, as keepers of the light force could not stand aside and took the fight with the evil. We overpassed the entire route to record our courage on camera 😨.
+Unfortunately the end of the story was not like in a typical fairy tale. The Dark Lord triumphed, having washed us with pouring rain 😄.

content/posts/2015-03-30-the-bloom-of-desert.md

@@ -0,0 +1,34 @@
+---
+title: The Bloom of Desert
+date: 2015-03-30T08:25:00
+layout: post
+draft: false
+category: travel
+tags:
+  - photo
+  - travel
+  - landscape
+description: One day trip, exploring the wonders of nature in one of the most deadliest places of California.
+---
+So happened that I have not filled up my blog with new reports for a long time being in constant struggle with laziness :) But I simply can’t miss the review of this trip while my impressions are still fresh.
+
+Every year spring brings life even to the desert of California and in March, right after winter rains, in Death Valley you can see a mass flowering of different kinds of cacti and thorns. Together with my friends, we went to this not so hospitable place in search of this phenomenon. Previously having charged the batteries and filled a full tank.
+
+After seeing the first blooming valley, we decided that further there were going to be more beautiful locations and we continued our trip without hesitation. The next place to visit on our way was Cinder Mountain. This is a volcano of red rocks standing apart from mountains among desert cracks. An incredible place that creates a feeling of being on another planet. I'm pretty sure, many Hollywood movies about other planets were filmed near this place.
+
+We raced farther eastward on Highway 190. Our goal was to get to Badwater basin before sunset. Surrounding landscape was changing very fast: mountains and canyons were replacing valleys and deserts. Every next twist on a mountain streamer was intrigueing. One such affair made us stop and run six hundred feet to a canyon with a magnificent view over tens of miles of desert. We stayed there for about fifteen minutes and were taking pictures and hanging by the cliff edge trying to come closer to take a better shot. If we stayed there for few more minutes we would get the best seats for the show that was about to happen. When we got back to the car and prepared to continue the trip we heard a loud rumble. It was a jet fighter that was in a maneuver, diving right into the canyon near which we had been photographing a couple of minutes before.
+
+Although we were in a hurry to reach the destination before sunset we could not miss the Mesquite Flat Sand Dunes, moreover they were right on the way and we did not have to change our route significantly, unlike most of other points of interest of Death Valley. Also there is always a large number of tourists and photographers so it was rather difficult to make a photo without any casual passers in the frame. It is worth noting that in March the temperature in the Valley rarely exceeds 82 degrees, which, combined with soft sand and a light breeze makes the walk on the dunes very pleasant.
+
+There was less and less time remaining till the sunset. After passing through almost the entire Death Valley we were approaching our goal - the Badwater Basin. This is a unique place in the lowest point of North America, with an elevation of 282 feet below sea level. Water in Badwater is presented in very small quantity and is undrinkable due to excessive salt content, which makes the pool more similar to the salt desert rather than a water basin.
+The sun was rapidly approaching the tops of the mountains, so as soon as we arrived to the place we immediately went deep into the basin and I managed to memorialize the last rays of the sun over the valley in a 10-second timelapse.
+
+<div class="youtube-container">
+<iframe class="youtube-video" src="https://www.youtube-nocookie.com/embed/rxYW3qyfy8s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Most of the tourists who were at that moment in Badwater already headed back to their cars so I could enjoy an absolute silence for about half an hour, which was only occasionally interrupted from time to time by the sound of shutter release of my camera. I was one on one with nature. It is so an unusual feeling for a resident of Los Angeles.
+
+After last shots were made I could finally breathe a sigh of relief: our trip to Death Valley seemed to be successful. But I wish to come back one day for a more thorough expedition.
+That was not the end of our adventure because we were more than three hundred miles away from our homes so we had to find a lodging for the night in the city of sins — Las Vegas. But, as they say, what happens in Vegas - stays in Vegas ...
+

content/posts/2015-05-30-about-golden-gate.md

@@ -0,0 +1,27 @@
+---
+title: About Golden Gate
+date: 2015-05-30T18:55:00
+layout: post
+draft: false
+category: travel
+tags:
+  - video
+  - travel
+  - city
+description: From the good old times when I lived in Bay Area. There is something magical about this place.
+---
+<i>"If you're going to San Francisco..."</i>
+
+Singing these words from the well-known song of the previous century we went to San Francisco.
+
+"Cloud Factory” — that's how my friends described this city to me. Clouds were replacing the sun and flowing inland at high speed. Constant unfriendly wind forced us, as well as local residents, to quickly move through checkpoints, without having a lot of time to properly enjoy the beauty of the city.
+
+Luckily, my friend brought his new GoPro 4 with him. The entire video was shot handheld from the rooftop of our car. Despite the fact that it was almost fully discharged, we were able to shoot a 30-minutes ride from Battery Spencer, through the GG bridge and GG Park right to the top of Twin Peaks.
+Compared to GoPro 3 that I had, the dynamic range was much better and also had more natural color balance.
+Check it out! Sounds great with Moby music as well!
+
+<div class="youtube-container">
+<iframe class="youtube-video" src="https://www.youtube-nocookie.com/embed/kBYu6vnnLLc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<i>"If you're going to San Francisco..."</i>

docker-compose.yml

@@ -0,0 +1,20 @@
+version: "3.7"
+
+services:
+  gatsby:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    entrypoint: gatsby
+    volumes:
+      - .:/app
+
+  develop:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    command: yarn develop -H 0.0.0.0
+    ports:
+      - "8000:8000"
+    volumes:
+      - .:/app

gatsby-config.js

@@ -1,3 +1,4 @@
+require('dotenv').config();
 const siteConfig = require('./site-config');
 
 module.exports = {
@@ -18,6 +19,16 @@ module.exports = {
         path: `${__dirname}/content`,
       },
     },
+    {
+      resolve: 'gatsby-source-s3-image',
+      options: {
+        accessKeyId: process.env.S3_ACCESS_KEY_ID,
+        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
+        bucketName: process.env.S3_BUCKET_NAME,
+        region: process.env.S3_REGION,
+        domain: `s3-${process.env.S3_REGION}.amazonaws.com`,
+      },
+    },
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-webpack-size',

package.json

@@ -23,6 +23,7 @@
     "@reach/router": "^1.2.1",
     "@reach/visually-hidden": "^0.1.1",
     "babel-plugin-styled-components": "^1.10.0",
+    "dotenv": "^8.2.0",
     "gatsby": "2.18.21",
     "gatsby-image": "^2.0.39",
     "gatsby-plugin-offline": "^2.0.25",
@@ -33,6 +34,7 @@
     "gatsby-plugin-styled-components": "^3.0.7",
     "gatsby-plugin-webpack-size": "^0.0.3",
     "gatsby-source-filesystem": "^2.0.30",
+    "gatsby-source-s3-image": "^1.6.136",
     "gatsby-transformer-json": "^2.1.11",
     "gatsby-transformer-remark": "^2.3.9",
     "gatsby-transformer-sharp": "^2.1.18",
@@ -41,6 +43,8 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.0",
+    "react-images": "^1.1.0-beta.3",
+    "react-photo-gallery": "^8.0.0",
     "react-pose": "^4.0.5",
     "styled-components": "^4.1.3"
   },

src/components/article/article.css.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Article = styled.article`
+  &:first-child {
+    margin-top: 19px;
+  }
+  padding-bottom: 39px;
+  &:not(:last-child) {
+    margin-bottom: 29px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+`;

src/components/article/article.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Card from 'components/card';
+import { Article } from './article.css.js';
+
+const Container = props => (
+  <Article>
+    <Card {...props} />
+  </Article>
+);
+
+export default Container;

src/components/box/box.css.js

@@ -3,4 +3,5 @@ import styled from 'styled-components';
 export const Container = styled.div`
   padding: 2rem 4rem;
   max-width: 700px;
+  margin: 0 auto;
 `;

src/components/card/card.css.js

@@ -0,0 +1,43 @@
+import { Link } from 'gatsby';
+import styled from 'styled-components';
+import { colors } from 'constants/theme';
+
+export const SLink = styled(Link)`
+  text-decoration: none;
+`;
+
+export const Row = styled.div`
+  display: inline-flex;
+  align-items: baseline;
+  width: 100%;
+  justify-content: space-between;
+`;
+
+export const Title = styled.h3`
+  margin-bottom: 1rem;
+  color: ${colors.black};
+`;
+
+export const Description = styled.p`
+  text-decoration: none;
+  color: ${colors.black};
+`;
+
+export const Date = styled.span`
+  margin-bottom: 1rem;
+  color: ${colors.grey};
+`;
+
+export const Tags = styled.div`
+  margin: 0.5rem 0;
+`;
+
+export const Tag = styled.span`
+  margin-right: 10px;
+  padding: 3px;
+  border-radius: 7px;
+  color: ${colors.black};
+  background: ${colors.primary};
+  opacity: 50%;
+  font-size: 1.4rem;
+`;

src/components/card/card.js

@@ -0,0 +1,55 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'gatsby';
+import { SLink, Row, Title, Description, Tags, Tag, Date } from './card.css.js';
+import Image from 'components/image';
+
+const Card = ({ index, slug, title, image, date, description, tags }) => (
+  <Fragment>
+    {image && (
+      <SLink to={slug}>
+        <Image
+          style={{ margin: `${index === 0 ? 0 : 5.5}rem -3.9rem 0rem` }}
+          fluid={image.fluid}
+          alt={title}
+        />
+      </SLink>
+    )}
+    <Row>
+      <SLink to={slug}>
+        <Title>{title}</Title>
+      </SLink>
+      <Date>— {date}</Date>
+    </Row>
+    <Tags>
+      {tags.map(tag => (
+        <Tag key={tag}>#{tag}</Tag>
+      ))}
+    </Tags>
+    <Description>
+      {description}{' '}
+      <Link as="span" to={slug}>
+        Read more
+      </Link>
+    </Description>
+  </Fragment>
+);
+
+Card.propTypes = {
+  index: PropTypes.number.isRequired,
+  slug: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  image: PropTypes.shape({
+    fluid: PropTypes.object,
+  }),
+  date: PropTypes.string.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.string),
+};
+
+Card.defaultProps = {
+  tags: [],
+  image: null,
+};
+
+export default Card;

src/components/footer/footer.js

@@ -53,7 +53,7 @@ const Footer = ({ author, social }) => (
         </SocialLink>
       </Social>
       <Copyright>
-        <Link to="/">{author}</Link> © 2019
+        <Link to="/">{author}</Link> © {new Date().getFullYear()}
       </Copyright>
     </Right>
   </Container>
@@ -63,6 +63,7 @@ Footer.propTypes = {
   author: PropTypes.string.isRequired,
   social: PropTypes.shape({
     github: PropTypes.string.isRequired,
+    instagram: PropTypes.string.isRequired,
     linkedin: PropTypes.string.isRequired,
     twitter: PropTypes.string.isRequired,
     youtube: PropTypes.string.isRequired,