Add technologies, component restructure, config changes and style fixes
This commit is contained in:
Moris Zen
@@ -14,7 +14,7 @@ let menuClasses =
|
||||
|
||||
const Footer = () => (
|
||||
<footer className="bg-indigo-darker">
|
||||
<div className="container mx-auto pt-10 lg:flex">
|
||||
<div className="container mx-auto py-10 lg:flex">
|
||||
<div className="lg:w-1/4 p-4">
|
||||
<img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
|
||||
<div className="flex justify-between social-icons py-2">
|
||||
@@ -106,14 +106,6 @@ const Footer = () => (
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:flex items-center text-center justify-center pb-8">
|
||||
<Button
|
||||
text="Say Hello"
|
||||
standard
|
||||
classes="rounded-full text-white hover:shadow mx-2"
|
||||
url="/contact"
|
||||
/>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
|
||||
@@ -1,158 +1,126 @@
|
||||
import React 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 'react-leaf-carousel'
|
||||
|
||||
const Technologies = ({ ...props }) => (
|
||||
<Carousel
|
||||
breakpoints={[
|
||||
{
|
||||
breakpoint: 500,
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 4,
|
||||
},
|
||||
},
|
||||
]}
|
||||
dots={false}
|
||||
autoCycle={true}
|
||||
arrows={false}
|
||||
showSides={true}
|
||||
pauseOnHover={false}
|
||||
cycleInterval={2500}
|
||||
cycleInterval={2000}
|
||||
showSides={false}
|
||||
sidesOpacity={0.5}
|
||||
sideSize={0.1}
|
||||
slidesToScroll={4}
|
||||
slidesToShow={4}
|
||||
slidesToScroll={2}
|
||||
slidesToShow={6}
|
||||
scrollOnDevice={true}
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=55b64e&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconHtml} alt="HTML5 Web Agency" />
|
||||
<h3 className="text-center">HTML5</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=904098&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconReact} alt="Reactjs Agency" />
|
||||
<h3 className="text-center">React</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ef4d9c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconAmazon} alt="Amazon Web Services Agency" />
|
||||
<h3 className="text-center">Amazon AWS</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00f3d1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconAngular} alt="Angular Agency" />
|
||||
<h3 className="text-center">Angular</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=00ffff&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconDocker} alt="Docker Agency" />
|
||||
<h3 className="text-center">Docker</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ee1f34&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconElastic} alt="Elastic Agency" />
|
||||
<h3 className="text-center">Elastic</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=91b4c0&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconEs6} alt="ES6 JavaScript Agency" />
|
||||
<h3 className="text-center">JS/ES6+</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6347&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconJenkins} alt="Jenkins Web Consultancy" />
|
||||
<h3 className="text-center">Jenkins</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ebbfbf&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconMongo} alt="Mongodb Agency" />
|
||||
<h3 className="text-center">Mongo DB</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=def1f9&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconMysql} alt="MySQL Web Agency" />
|
||||
<h3 className="text-center">MySQL</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=cdf2c6&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconNode} alt="NodeJS Web Agency" />
|
||||
<h3 className="text-center">Node.js</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=9fa616&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconPostgres} alt="PostgreSQL Web Agency" />
|
||||
<h3 className="text-center">PostgreSQL</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=2c4caa&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconPython} alt="Python Web Consultancy" />
|
||||
<h3 className="text-center">Python</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=44e3e1&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconRuby} alt="Ruby Web Agency" />
|
||||
<h3 className="text-center">Ruby</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff6666&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconRails} alt="Ruby on Rails Web Agency" />
|
||||
<h3 className="text-center">Ruby on Rails</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=94e1e3&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=29083c&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ffff99&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=616161&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ed7ebe&txtclr=ffffff&txt=215%C3%97215&w=215&h=215"
|
||||
/>
|
||||
<img src={iconRedis} alt="Redis Services Consultancy" />
|
||||
<h3 className="text-center">Redis</h3>
|
||||
</div>
|
||||
</Carousel>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user