112 lines
3.8 KiB
JavaScript
112 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'gatsby';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
|
|
import portfolios from 'data/Digital/portfolio.json';
|
|
|
|
import "swiper/css";
|
|
import 'swiper/css/autoplay';
|
|
import 'swiper/css/navigation';
|
|
import 'swiper/css/pagination';
|
|
|
|
SwiperCore.use([Navigation, Pagination, Autoplay]);
|
|
|
|
const Portfolio = () => {
|
|
return (
|
|
<section className="portfolio section-padding bg-gray style-1" data-scroll-index="4">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col offset-lg-1">
|
|
<div className="section-head mb-60">
|
|
<h6 className="color-main text-uppercase wow fadeInUp">Portfolio</h6>
|
|
<h2 className="wow fadeInUp">
|
|
Latest Projects <span className="fw-normal">From Our Team</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="content wow fadeIn slow">
|
|
<div className="portfolio-slider">
|
|
<Swiper
|
|
className="swiper-container"
|
|
slidesPerView={3}
|
|
spaceBetween={30}
|
|
speed={1000}
|
|
pagination={{
|
|
el: ".portfolio-slider .swiper-pagination"
|
|
}}
|
|
navigation={{
|
|
nextEl: '.portfolio-slider .swiper-button-next',
|
|
prevEl: '.portfolio-slider .swiper-button-prev'
|
|
}}
|
|
mousewheel={false}
|
|
keyboard={true}
|
|
autoplay={{
|
|
delay: 4000
|
|
}}
|
|
loop={true}
|
|
breakpoints={{
|
|
0: {
|
|
slidesPerView: 1
|
|
},
|
|
480: {
|
|
slidesPerView: 2
|
|
},
|
|
787: {
|
|
slidesPerView: 2
|
|
},
|
|
991: {
|
|
slidesPerView: 3
|
|
},
|
|
1200: {
|
|
slidesPerView: 3
|
|
}
|
|
}}
|
|
>
|
|
{
|
|
portfolios.map((portfolio, index) => (
|
|
<SwiperSlide key={index}>
|
|
<div className="portfolio-card">
|
|
<div className="img">
|
|
<img src={portfolio.image} alt="" />
|
|
</div>
|
|
<div className="info">
|
|
<h5>
|
|
<Link to="/page-single-project-5">
|
|
{ portfolio.title }
|
|
</Link>
|
|
</h5>
|
|
<small className="d-block color-main text-uppercase">
|
|
{
|
|
portfolio.types.map((type, i) => (<a href="#" className="me-1" key={i}>{ type }</a>))
|
|
}
|
|
</small>
|
|
<div className="text">
|
|
{ portfolio.text }
|
|
</div>
|
|
<div className="tags">
|
|
{
|
|
portfolio.tags.map((tag, i) => (<a href="#" className="me-1" key={i}>{ tag }</a>))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))
|
|
}
|
|
</Swiper>
|
|
|
|
<div className="swiper-pagination"></div>
|
|
|
|
<div className="swiper-button-next"></div>
|
|
<div className="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="/assets/img/projects/prog/shap_r.png" alt="" className="shap_r" />
|
|
<img src="/assets/img/projects/prog/shap_l.png" alt="" className="shap_l" />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Portfolio |