first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,62 @@
|
||||
'use client'
|
||||
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
const PortfolioImages = ["screen_21", "screen_22", "screen_23", "screen_22"];
|
||||
|
||||
const MobileAppPortfolio = () => {
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrow: false,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
centerMode: true,
|
||||
centerPadding: "0",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
centerMode: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 450,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
centerMode: false,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{PortfolioImages.map((val, i) => (
|
||||
<div className="item" key={i}>
|
||||
<div className="img-holder">
|
||||
<Image width={385} height={1000} style={{height:'fit-content'}} src={`/images/assets/${val}.png`} alt="screen" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileAppPortfolio;
|
||||
@@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Image from "next/image";
|
||||
const PortfolioImages = [
|
||||
"screen_25",
|
||||
"screen_26",
|
||||
"screen_27",
|
||||
"screen_28",
|
||||
"screen_29",
|
||||
"screen_27",
|
||||
];
|
||||
|
||||
const MobileAppScreenSlider = () => {
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrow: false,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 5,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
centerMode: true,
|
||||
centerPadding: "0",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{PortfolioImages.map((val, i) => (
|
||||
<div className="item" key={i}>
|
||||
<div className="img-holder">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={`/images/assets/${val}.png`} alt="screen" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileAppScreenSlider;
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Image from "next/image";
|
||||
import { PortfolioImages } from "@/data/portfolios";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
const Portfolio = () => {
|
||||
const settings = {
|
||||
dots: false,
|
||||
draggable: false,
|
||||
arrow: true,
|
||||
infinite: false,
|
||||
speed: 900,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{PortfolioImages.map((val, i) => (
|
||||
<Link href={`/portfolios/${val.id}`} className="item" key={i}>
|
||||
<div className="img-meta">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}} src={val.img} alt={val.altName} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Slider from "react-slick";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import { PortfolioContent } from "@/data/portfolios";
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const Portfolio = () => {
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrow: true,
|
||||
infinite: true,
|
||||
speed: 900,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
centerMode: true,
|
||||
centerPadding: "0",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Slider {...settings}>
|
||||
{PortfolioContent.map((val, i) => (
|
||||
<div className="item" key={i}>
|
||||
<div className="portfolio-block-three">
|
||||
<Link href={`/portfolios/${val.id}`} className="img-holder">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt="portfolio"
|
||||
className="w-100 tran5s"
|
||||
/>
|
||||
</Link>
|
||||
<div className="text">
|
||||
<div className="tag">{val.meta}</div>
|
||||
<h4>
|
||||
<Link href={`/portfolios/${val.id}`}>{val.title}</Link>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
{/* /.portfolio-block-three */}
|
||||
</div>
|
||||
// End .item
|
||||
))}
|
||||
</Slider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
@@ -0,0 +1,106 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React, { useState , useEffect} from "react";
|
||||
import Link from "next/link";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
import { AllPortfolioItem } from "@/data/portfolios";
|
||||
import Image from "next/image";
|
||||
const TabListContent = ["All", "Development", "Plugin", "Design", "Branding"];
|
||||
|
||||
|
||||
|
||||
const PortfolioFour = () => {
|
||||
|
||||
const [currentCategory, setCurrentCategory] = useState('All')
|
||||
const [fitteredItems, setFitteredItems] = useState([])
|
||||
useEffect(() => {
|
||||
if (currentCategory == 'All') {
|
||||
setFitteredItems(AllPortfolioItem)
|
||||
|
||||
} else {
|
||||
setFitteredItems(
|
||||
AllPortfolioItem.filter(elm=>elm.meta.split(' ').join('').split(',').includes(currentCategory)))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [currentCategory])
|
||||
|
||||
return (
|
||||
<Gallery>
|
||||
<Tabs className="portfolio-container">
|
||||
<div className="controls po-control-one text-center mb-90 md-mb-50 mt-90 md-mt-60">
|
||||
<TabList className="d-flex flex-wrap justify-content-center">
|
||||
{TabListContent.map((tab, i) => (
|
||||
<Tab onClick={()=>setCurrentCategory(tab)} key={i}>
|
||||
<button type="button" className="control">
|
||||
{tab}
|
||||
</button>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
</div>
|
||||
{/* End pc-control-one */}
|
||||
|
||||
<div>
|
||||
<div className="mixitUp-container gutter-space-one d-flex flex-wrap">
|
||||
{fitteredItems.map((val, i) => (
|
||||
<div
|
||||
className="mix"
|
||||
key={i}
|
||||
data-aos="fade-right"
|
||||
data-aos-delay={val.dalayAnimation}
|
||||
>
|
||||
<div className="portfolio-block-two position-relative">
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt={val.meta}
|
||||
className="w-100 h-100 tran4s img-meta"
|
||||
/>
|
||||
<Item
|
||||
original={val.img}
|
||||
thumbnail={val.img}
|
||||
width={407}
|
||||
height={496}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div
|
||||
className="fancybox"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
>
|
||||
<i
|
||||
className="fa fa-arrows-alt"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
<div className="hover-content">
|
||||
<h3>
|
||||
<Link href={`/portfolios/${val.id}`}>{val.title}</Link>
|
||||
</h3>
|
||||
<div className="tag">{val.meta}</div>
|
||||
</div>
|
||||
{/* /.hover-content */}
|
||||
</div>
|
||||
{/* /.portfolio-block-two */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* single mixitUp-container */}
|
||||
</div>
|
||||
|
||||
</Tabs>
|
||||
</Gallery>
|
||||
);
|
||||
};
|
||||
|
||||
export default PortfolioFour;
|
||||
@@ -0,0 +1,104 @@
|
||||
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
import { AllPortfolioTwo } from "@/data/portfolios";
|
||||
const TabListContent = ["All", "Development", "Plugin", "Design", "Branding"];
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const PortfolioSix = () => {
|
||||
const [currentCategory, setCurrentCategory] = useState('All')
|
||||
const [fitteredItems, setFitteredItems] = useState([])
|
||||
useEffect(() => {
|
||||
if (currentCategory == 'All') {
|
||||
setFitteredItems(AllPortfolioTwo)
|
||||
|
||||
} else {
|
||||
setFitteredItems(AllPortfolioTwo.filter(elm=>elm.meta.split(' ').join('').split(',').includes(currentCategory)))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [currentCategory])
|
||||
return (
|
||||
<div className="portfolio-container">
|
||||
<Tabs className="controls po-control-two text-center mb-90 md-mb-50 mt-90 md-mt-60">
|
||||
<TabList className="d-flex flex-wrap justify-content-center">
|
||||
{TabListContent.map((tab, i) => (
|
||||
<Tab onClick={()=>setCurrentCategory(tab)} key={i}>
|
||||
<button type="button" className="control">
|
||||
{tab}
|
||||
</button>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
</Tabs>
|
||||
{/* End pc-control-one */}
|
||||
|
||||
<Gallery>
|
||||
<Tab>
|
||||
<div className="mixitUp-container gutter-space-one d-flex flex-wrap">
|
||||
{fitteredItems.map((val, i) => (
|
||||
<div
|
||||
className="mix"
|
||||
key={i}
|
||||
data-aos="fade-right"
|
||||
data-aos-delay={val.dalayAnimation}
|
||||
>
|
||||
<div className="portfolio-block-two position-relative">
|
||||
<div className="d-flex align-vals-center justify-content-center">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt={val.meta}
|
||||
className="w-100 h-100 tran4s img-meta"
|
||||
/>
|
||||
<Item
|
||||
original={val.img}
|
||||
thumbnail={val.img}
|
||||
width={1050}
|
||||
height={525}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div
|
||||
className="fancybox"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
>
|
||||
<i
|
||||
className="fa fa-arrows-alt"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
<div className="hover-content">
|
||||
<h3>
|
||||
<Link href={`/portfolios/${val.id}`}>{val.title}</Link>
|
||||
</h3>
|
||||
<div className="tag">{val.meta}</div>
|
||||
</div>
|
||||
{/* /.hover-content */}
|
||||
</div>
|
||||
{/* /.portfolio-block-two */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* single mixitUp-container */}
|
||||
</Tab>
|
||||
|
||||
{/* End branding */}
|
||||
</Gallery>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PortfolioSix;
|
||||
@@ -0,0 +1,103 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
import { AllPortfolioThree } from "@/data/portfolios";
|
||||
const TabListContent = ["All", "Development", "Plugin", "Design", "Branding"];
|
||||
import Image from "next/image";
|
||||
|
||||
|
||||
const PortfolioThree = () => {
|
||||
|
||||
const [currentCategory, setCurrentCategory] = useState('All')
|
||||
const [fitteredItems, setFitteredItems] = useState([])
|
||||
useEffect(() => {
|
||||
if (currentCategory == 'All') {
|
||||
setFitteredItems(AllPortfolioThree)
|
||||
|
||||
} else {
|
||||
setFitteredItems(AllPortfolioThree.filter(elm=>elm.meta.split(' ').join('').split(',').includes(currentCategory)))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [currentCategory])
|
||||
return (
|
||||
<Tabs className="portfolio-container">
|
||||
<div className="controls po-control-one text-center mb-90 md-mb-50 mt-90 md-mt-60">
|
||||
<TabList className="d-flex flex-wrap justify-content-center">
|
||||
{TabListContent.map((tab, i) => (
|
||||
<Tab onClick={()=>setCurrentCategory(tab)} key={i}>
|
||||
<button type="button" className="control">
|
||||
{tab}
|
||||
</button>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
</div>
|
||||
{/* End pc-control-one */}
|
||||
<Gallery>
|
||||
<div>
|
||||
<div className="mixitUp-container gutter-space-one d-flex flex-wrap">
|
||||
{fitteredItems.map((val, i) => (
|
||||
<div
|
||||
className="mix"
|
||||
key={i}
|
||||
data-aos="fade-right"
|
||||
data-aos-delay={val.dalayAnimation}
|
||||
>
|
||||
<div className="portfolio-block-two position-relative">
|
||||
<div className="d-flex align-vals-center justify-content-center">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt={val.meta}
|
||||
className="w-100 h-100 tran4s img-meta"
|
||||
/>
|
||||
<Item
|
||||
original={val.img}
|
||||
thumbnail={val.img}
|
||||
width={635}
|
||||
height={544}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div
|
||||
className="fancybox"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
>
|
||||
<i
|
||||
className="fa fa-arrows-alt"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
<div className="hover-content">
|
||||
<h3>
|
||||
<Link href={`/portfolios/${val.id}`}>{val.title}</Link>
|
||||
</h3>
|
||||
<div className="tag">{val.meta}</div>
|
||||
</div>
|
||||
{/* /.hover-content */}
|
||||
</div>
|
||||
{/* /.portfolio-block-two */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* single mixitUp-container */}
|
||||
</div>
|
||||
{/* End all portfolio */}
|
||||
|
||||
</Gallery>
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
|
||||
export default PortfolioThree;
|
||||
@@ -0,0 +1,106 @@
|
||||
|
||||
'use client'
|
||||
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import { Gallery, Item } from "react-photoswipe-gallery";
|
||||
import { AllPortfolioFour } from "@/data/portfolios";
|
||||
import Image from "next/image";
|
||||
const TabListContent = ["All", "Development", "Plugin", "Design", "Branding"];
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const PortfolioTwo = () => {
|
||||
const [currentCategory, setCurrentCategory] = useState('All')
|
||||
const [fitteredItems, setFitteredItems] = useState([])
|
||||
useEffect(() => {
|
||||
if (currentCategory == 'All') {
|
||||
setFitteredItems(AllPortfolioFour)
|
||||
|
||||
} else {
|
||||
setFitteredItems(AllPortfolioFour.filter(elm=>elm.meta.split(' ').join('').split(',').includes(currentCategory)))
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}, [currentCategory])
|
||||
|
||||
return (
|
||||
<Gallery>
|
||||
<Tabs className="portfolio-container">
|
||||
<div className="controls po-control-one text-center mb-90 md-mb-50 mt-90 md-mt-60">
|
||||
<TabList className="d-flex flex-wrap justify-content-center">
|
||||
{TabListContent.map((tab, i) => (
|
||||
<Tab onClick={()=>setCurrentCategory(tab)} key={i}>
|
||||
<button type="button" className="control">
|
||||
{tab}
|
||||
</button>
|
||||
</Tab>
|
||||
))}
|
||||
</TabList>
|
||||
</div>
|
||||
{/* End pc-control-one */}
|
||||
|
||||
<div>
|
||||
<div className="mixitUp-container gutter-space-one d-flex flex-wrap">
|
||||
{fitteredItems.map((val, i) => (
|
||||
<div
|
||||
className={`mix ${val.imgClass}`}
|
||||
key={i}
|
||||
data-aos="fade-right"
|
||||
data-aos-delay={val.dalayAnimation}
|
||||
>
|
||||
<div className="portfolio-block-two position-relative">
|
||||
<div className="d-flex align-items-center justify-content-center">
|
||||
<Image width={990} height={890} style={{width:'100%',height:'fit-content'}}
|
||||
src={val.img}
|
||||
alt={val.meta}
|
||||
className="w-100 h-100 tran4s img-meta"
|
||||
/>
|
||||
<Item
|
||||
original={val.img}
|
||||
thumbnail={val.img}
|
||||
width={val.width}
|
||||
height={val.height}
|
||||
>
|
||||
{({ ref, open }) => (
|
||||
<div
|
||||
className="fancybox"
|
||||
role="button"
|
||||
ref={ref}
|
||||
onClick={open}
|
||||
>
|
||||
<i
|
||||
className="fa fa-arrows-alt"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
)}
|
||||
</Item>
|
||||
</div>
|
||||
<div className="hover-content">
|
||||
<h3>
|
||||
<Link href={`/portfolios/${val.id}`}>{val.title}</Link>
|
||||
</h3>
|
||||
<div className="tag">{val.meta}</div>
|
||||
</div>
|
||||
{/* /.hover-content */}
|
||||
</div>
|
||||
{/* /.portfolio-block-two */}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* single mixitUp-container */}
|
||||
</div>
|
||||
|
||||
</Tabs>
|
||||
</Gallery>
|
||||
);
|
||||
};
|
||||
|
||||
export default PortfolioTwo;
|
||||
Reference in New Issue
Block a user