content: import React from 'react'
  // import { config } from 'config'
  import { rhythm } from '../../utils/typography'
  
  const pictures = [
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c0.135.1080.1080/18445085_122642668303774_3605036071831732224_n.jpg',
      alt: ''
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/18380315_1179807372130812_8034030377808953344_n.jpg',
      alt: 'My essentials to reach flow state during work 🤖'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c199.0.682.682/18161865_1165854390191665_3017622637527433216_n.jpg',
      alt: ''
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c180.0.719.719/18160991_424381284588697_2586008789698215936_n.jpg',
      alt: 'The lighting was perfect 📸'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c62.0.955.955/18095899_305957299839606_8926548406101344256_n.jpg',
      alt:
        'Playing around with Fantasyland data structures in JavaScript today 🦄✨🤗'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/17333339_772426056242697_5593949948170207232_n.jpg',
      alt: ''
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c144.0.792.792/17266021_761155454049094_5900356295206109184_n.jpg',
      alt: 'Montmartre'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c165.0.750.750/17265872_1425195560836572_2465267109999935488_n.jpg',
      alt: ''
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/16463906_1949394845292036_3912360854674210816_n.jpg',
      alt:
        'Got my @therooststand set up, my future is looking up!\n#rooststand #developer #remotework #programming #imstraight 😉'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/15403326_1747491308905325_6760450575998910464_n.jpg',
      alt:
        'Remotee life #1✨ #remotework #workhardanywhere #wha #digital #developer #javascript #engineer #frontend #macbookair #web #webdevelopment #minimalsetups #workspace'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14574216_591655701025681_8121840692117897216_n.jpg',
      alt: 'Park Güell #modernismo #Gaudi #barcelona #arte #architecture'
    },
    {
      url:
        'https://scontent-frx5-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/15534777_1459941490712595_2865873170852741120_n.jpg',
      alt: 'Testing the new gear ✨ #Bordeaux #lines #garonne'
    }
  ].map((p, i) => ({ ...p, id: i }))
  
  const Photos = () => {
    return (
      <div id="photos">
        <h2>Photos</h2>
        <div>
          <ul className="pictures">
            {pictures.map(pic =>
              <li key={pic.id}>
                <img src={pic.url} />
              </li>
            )}
          </ul>
        </div>
      </div>
    )
  }
  
  export default Photos
  