Skip to content

Commit

Permalink
added case study section
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-ashish-k
cp-ashish-k committed Dec 5, 2023
1 parent bc1dace commit 49dcd67
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 34 deletions.
3 changes: 2 additions & 1 deletion .github/workflows/deploy-frontend-dev.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ name: DeployFrontendDev

on:
push:

# branches:
# - "master"

jobs:
deploy-frontend-dev:
Expand Down
Binary file added nuxt-frontend/assets/images/flutter-app-development/casestudy/p1-1200w.webp
View file
Binary file not shown.
102 changes: 69 additions & 33 deletions nuxt-frontend/components/flutter-app-development/CaseStudySection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,34 +39,36 @@
</div>
<!-- Mobile UI ends -->
<!-- Desktop UI -->
<div class="hidden lg:block">
<div id="stickyParent" class="h-[300vh]">
<div
v-for="(portfolio, index) in portfolios"
:key="index"
class="main sticky flex bg-[#F8F8F8]"
>
<div class="flex-1">
<img
:src="portfolio.image[2]"
:srcset="`${portfolio.image[2]} 800w`"
:alt="portfolio.title"
class="w-full h-full object-contain"
loading="lazy"
/>
</div>
<div
class="flex-1 relative text-left text-white"
:class="(portfolio.background, { 'animate-moveIn': isAnimated })"
>
<div
class="absolute -left-4 top-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-[18px] border-b-[18px] border-r-[18px] border-r-[#EF223C] border-l-solid"
></div>
<div id="stickyParent" class="hidden lg:block h-[150vh]">
<div class="sticky top-0 max-h-full main">
<div v-for="(portfolio, index) in portfolios" :key="index">
<div class="flex bg-[#F8F8F8] h-screen">
<div class="flex-1">
<img
:src="portfolio.image[2]"
:srcset="`${portfolio.image[2]} 800w,${portfolio.image[3]} 1200w`"
:alt="portfolio.title"
class="w-full h-full object-contain opacity-0"
loading="lazy"
:class="{ 'animate-fadeInLeft opacity-100': isAnimated }"
/>
</div>
<div
class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
class="flex-1 relative text-left text-white opacity-0"
:class="
({ 'animate-moveIn opacity-100': isAnimated },
portfolio.background)
"
>
<h3 class="header-3">{{ portfolio.title }}</h3>
<span class="sub-h1-regular">{{ portfolio.description }}</span>
<div
class="absolute -left-4 top-1/2 -translate-y-1/2 w-0 h-0 border-transparent border-t-[18px] border-b-[18px] border-r-[18px] border-r-[#EF223C] border-l-solid"
></div>
<div
class="absolute flex flex-col gap-6 w-[27.25rem] top-1/2 left-14 -translate-y-1/2"
>
<h3 class="header-3">{{ portfolio.title }}</h3>
<span class="sub-h1-regular">{{ portfolio.description }}</span>
</div>
</div>
</div>
</div>
Expand All @@ -75,16 +77,22 @@
<!-- Desktop UI ends -->
</div>
</template>
<script setup>
<script setup type="module">
import mobile_reelnews1 from "@/assets/images/flutter-app-development/casestudy/mobile/p1-400w.webp";
import mobile_reelnews2 from "@/assets/images/flutter-app-development/casestudy/mobile/p1-800w.webp";
import desktop_reelnews1 from "@/assets/images/flutter-app-development/casestudy/p1-800w.webp";
import desktop_reelnews2 from "@/assets/images/flutter-app-development/casestudy/p1-1200w.webp";
const isAnimated = ref(false);
const portfolios = [
{
title: "Reelnews",
image: [mobile_reelnews1, mobile_reelnews2, desktop_reelnews1],
image: [
mobile_reelnews1,
mobile_reelnews2,
desktop_reelnews1,
desktop_reelnews2,
],
background: "bg-[#EF233C]",
description:
"Ditch Old News, Get reelnews: The News App for the Upcoming Wave of News Creators and Consumers.",
Expand All @@ -102,14 +110,42 @@ const handleScroll = () => {
const sections = document.querySelectorAll(".main");
const windowHeight = window.innerHeight;
sections.forEach((section, index) => {
sections.forEach((section) => {
const react = section.getBoundingClientRect();
if (react.top < windowHeight / 2 && react.bottom >= 0) {
if (react.top <= windowHeight / 4 && react.bottom >= 0) {
isAnimated.value = true;
} else {
isAnimated.value = false;
}
});
};
</script>
<style lang="postcss" scoped></style>
<!-- <style lang="postcss" scoped>
@keyframes fadeInLeft {
0% {
transform: translateX(100%);
opacity: 0;
}
50% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
}
}
@keyframes moveIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
.animate-fadeInLeft {
animation: fadeInLeft 2s ease-in-out;
opacity: 1;
}
.animate-moveIn {
animation: moveIn 1s ease-in-out;
opacity: 1;
}
</style> -->
17 changes: 17 additions & 0 deletions nuxt-frontend/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@ module.exports = {
"0%": { top: "-120px", opacity: "0" },
"100%": { top: " 0", opacity: "1" },
},
fadeInLeft: {
"0%": { transform: "translateX(100%)", opacity: "0" },
"50%": { transform: "translateX(50%)", opacity: "0" },
"100%": { transform: "translateX(0)", opacity: "1" },
},
fadeInRight: {
"0%": { transform: "translateX(200px);" },
"100%": { transform: "translateX(0px);" },
Expand All @@ -127,6 +132,16 @@ module.exports = {
opacity: 0,
},
},
moveIn: {
"0%": {
transform: "translateY(100%);",
opacity: 0,
},
"100%": {
transform: "translateY(0);",
opacity: 1,
},
},
moveUp: {
"0%": {
transform: "translateY(3rem)",
Expand Down Expand Up @@ -175,6 +190,8 @@ module.exports = {
fadeSlideOut: "fadeOut 2.5s ease-in-out",
zoomEffect: "zoomEffect 0.5s ease forwards",
moveUp: "moveUp 1s ease-in-out",
fadeInLeft: "fadeInLeft 1s ease-in-out",
moveIn: "moveIn 0.5s ease-in-out",
},
zIndex: {
"-1": "-1",
Expand Down

0 comments on commit 49dcd67

Please sign in to comment.