128 lines
3.5 KiB
JavaScript
128 lines
3.5 KiB
JavaScript
import React, { Component } from 'react'
|
|
import Link from 'gatsby-link'
|
|
|
|
import iconReact from '../images/react.svg'
|
|
import iconHtml from '../images/html-5.svg'
|
|
import iconAmazon from '../images/amazon-webservices.svg'
|
|
import iconAngular from '../images/angular-js.svg'
|
|
import iconDocker from '../images/docker.svg'
|
|
import iconElastic from '../images/elastic.svg'
|
|
import iconEs6 from '../images/es6.svg'
|
|
import iconJenkins from '../images/jenkins.svg'
|
|
import iconMongo from '../images/mongodb.svg'
|
|
import iconMysql from '../images/mysql.svg'
|
|
import iconNode from '../images/nodejs.svg'
|
|
import iconPostgres from '../images/postgresql.svg'
|
|
import iconPython from '../images/python.svg'
|
|
import iconRuby from '../images/ruby.svg'
|
|
import iconRails from '../images/rails.svg'
|
|
import iconRedis from '../images/redis.svg'
|
|
import Carousel from './Carousel'
|
|
|
|
const Technologies = () => (
|
|
<Carousel
|
|
breakpoints={[
|
|
{
|
|
breakpoint: 576,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
slidesToScroll: 2,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
settings: {
|
|
slidesToShow: 4,
|
|
slidesToScroll: 3,
|
|
},
|
|
},
|
|
{
|
|
breakpoint: 992,
|
|
settings: {
|
|
slidesToShow: 5,
|
|
slidesToScroll: 4,
|
|
},
|
|
},
|
|
]}
|
|
dots={true}
|
|
autoCycle={true}
|
|
arrows={true}
|
|
showSides={true}
|
|
pauseOnHover={false}
|
|
cycleInterval={2000}
|
|
showSides={true}
|
|
sidesOpacity={0.5}
|
|
sideSize={0.1}
|
|
slidesToScroll={2}
|
|
slidesToShow={6}
|
|
scrollOnDevice={true}
|
|
>
|
|
<div>
|
|
<img src={iconHtml} alt="HTML5 Web Agency" />
|
|
<h3 className="text-center">HTML5</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconReact} alt="Reactjs Agency" />
|
|
<h3 className="text-center">React</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconAmazon} alt="Amazon Web Services Agency" />
|
|
<h3 className="text-center">Amazon AWS</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconAngular} alt="Angular Agency" />
|
|
<h3 className="text-center">Angular</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconDocker} alt="Docker Agency" />
|
|
<h3 className="text-center">Docker</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconElastic} alt="Elastic Agency" />
|
|
<h3 className="text-center">Elastic</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconEs6} alt="ES6 JavaScript Agency" />
|
|
<h3 className="text-center">JS/ES6+</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconJenkins} alt="Jenkins Web Consultancy" />
|
|
<h3 className="text-center">Jenkins</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconMongo} alt="Mongodb Agency" />
|
|
<h3 className="text-center">Mongo DB</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconMysql} alt="MySQL Web Agency" />
|
|
<h3 className="text-center">MySQL</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconNode} alt="NodeJS Web Agency" />
|
|
<h3 className="text-center">Node.js</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconPostgres} alt="PostgreSQL Web Agency" />
|
|
<h3 className="text-center">PostgreSQL</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconPython} alt="Python Web Consultancy" />
|
|
<h3 className="text-center">Python</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconRuby} alt="Ruby Web Agency" />
|
|
<h3 className="text-center">Ruby</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconRails} alt="Ruby on Rails Web Agency" />
|
|
<h3 className="text-center">Ruby on Rails</h3>
|
|
</div>
|
|
<div>
|
|
<img src={iconRedis} alt="Redis Services Consultancy" />
|
|
<h3 className="text-center">Redis</h3>
|
|
</div>
|
|
</Carousel>
|
|
)
|
|
|
|
export default Technologies
|