Skip to content

Commit

Permalink
application almost finished
Browse files Browse the repository at this point in the history
  • Loading branch information
RohitKS7 committed Jul 4, 2024
1 parent 5ffddb2 commit a0b90c5
Show file tree
Hide file tree
Showing 16 changed files with 415 additions and 251 deletions.
23 changes: 17 additions & 6 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -174,19 +174,30 @@ code {
}

/* Embla Carousel */

.embla {
/* margin-inline: 5rem;
width: 55rem; */
--slide-size: 30%;
overflow: hidden;
}

.embla__container {
backface-visibility: hidden;
display: flex;
gap: 1rem;
touch-action: pan-y pinch-zoom;
margin-left: calc(var(--slide-spacing) * -1);
}

.embla__slide {
flex: 0 0 30%;
flex: 0 0 var(--slide-size);
}

/* for big screens above 640px */
@media (min-width: 640px) {
.embla {
width: 50rem;
--slide-size: 24%;
overflow: hidden;
}

.embla__slide {
flex: 0 0 var(--slide-size);
}
}
4 changes: 2 additions & 2 deletions app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ const IntroPage = () => {
<ProjectLinks />
</div>
{/* ⁡⁣⁢⁣Social Links⁡ */}
<div className="max-md:flex max-md:gap-6 md:absolute md:right-0 md:top-[35%]">
<div className="max-md:flex max-md:gap-4 md:absolute md:right-0 md:top-[35%]">
{socialLinks.map((item) => (
<Link
key={item.imgURL}
href={item.link}
className="flex-center cursor-pointer flex-col"
className="flex-center cursor-pointer flex-col rounded-sm bg-[#ffdada] px-2 py-1 md:my-2 md:pl-2"
>
<Image
src={item.imgURL}
Expand Down
74 changes: 46 additions & 28 deletions components/shared/ProjectLinks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,46 @@
import { projectLinks } from "@/constants";
import Link from "next/link";
import Image from "next/image";
import React from "react";
import useEmblaCarousel from "embla-carousel-react";
import { EmblaOptionsType } from "embla-carousel";

const OPTIONS: EmblaOptionsType = {
align: "start",
loop: true,
// breakpoints: {
// "(max-width: 640px)": { axis: "y" }, // --> 420px screens and axis will change from "X" (right to left scroll) to "Y" (down to up scroll)
// },
};
import React, { useEffect, useState } from "react";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from "@/components/ui/carousel";

const ProjectLinks = () => {
const [emblaRef] = useEmblaCarousel(OPTIONS);
const [isMobile, setIsMobile] = useState<boolean>(false);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 1024);
};

handleResize();
window.addEventListener("resize", handleResize);

return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<div className="embla" ref={emblaRef}>
<div className="embla__container items-center justify-center gap-5 ">
<Carousel
className="w-full max-w-screen-md"
opts={{
align: "center",
loop: true,
dragFree: true,
breakpoints: {
"(min-width: 768px)": { align: "start" },
"(min-width: 1024px)": { align: "start", dragFree: false },
},
}}
>
<CarouselContent>
{projectLinks.map((item) => (
<div
<CarouselItem
key={item.label + item.projectlink}
className=" embla__slide flex cursor-pointer items-center justify-center rounded-md bg-[#ffdada] max-sm:p-3 sm:px-3 sm:pt-3"
className="flex-center mx-3 w-full basis-8/12 bg-[#ffdada] pl-0 pt-3 md:basis-1/3 lg:basis-1/4"
>
<div className="flex-center max-w-40 flex-col gap-3">
<Link
Expand All @@ -33,7 +51,7 @@ const ProjectLinks = () => {
<div>
{item.label}
<p className="mt-[2px]">{item.type}</p>
<div className="paragraph-semibold project-hover-shadow absolute inset-x-0 top-[-40px] flex items-end justify-center bg-[#ffdada] p-[5px] text-gray-700 opacity-0 duration-300 group-hover:opacity-100 max-md:hidden">
<div className="paragraph-semibold project-hover-shadow absolute inset-x-0 top-[-40px] flex items-end justify-center bg-primary-500 p-[5px] text-[#f8f8ff] opacity-0 duration-300 group-hover:opacity-100 max-md:hidden">
Code
</div>
</div>
Expand All @@ -46,23 +64,23 @@ const ProjectLinks = () => {
height={150}
className="object-contain"
/>
<div className="paragraph-semibold absolute inset-x-0 bottom-0 flex items-end justify-center bg-[#ffdada] text-gray-700 opacity-0 duration-300 group-hover:opacity-100 md:hidden">
<div className="paragraph-semibold absolute inset-x-0 bottom-0 flex items-end justify-center bg-primary-500 text-[#f8f8ff] opacity-0 duration-300 group-hover:opacity-100 max-md:hidden">
Website
</div>
</Link>
</div>
</div>
</CarouselItem>
))}
</div>
</div>
</CarouselContent>
{/* Show Arrows on large screens only */}
{isMobile && (
<>
<CarouselPrevious />
<CarouselNext />
</>
)}
</Carousel>
);
};

export default ProjectLinks;

// On Screen Size bigger than tablet
// @media (max-width: 768px) {
// .embla__slide {
// flex: 0 0 50%; /* Breakpoint SM slide covers 50% of the viewport */
// }
// }
79 changes: 79 additions & 0 deletions components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
Loading

0 comments on commit a0b90c5

Please sign in to comment.