Skip to content

Commit

Permalink
fda
Browse files Browse the repository at this point in the history
  • Loading branch information
@neerajrekwar
neerajrekwar committed Jul 11, 2024
1 parent c836aea commit 2b605c2
Show file tree
Hide file tree
Showing 11 changed files with 95 additions and 143 deletions.
130 changes: 20 additions & 110 deletions app/components/StickyRelativeDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,119 +12,28 @@ const source_Code_Pro = Source_Code_Pro({

const StickyRelativeDemo: NextPage = () => {
return (
<div className="m-auto justify-between p-2 max-h-fit max-w-6xl">
<div className="m-auto scroll-smooth justify-between p-2 max-h-fit max-w-6xl">
<div className="justify-start text-semibold flex items-center gap-2 sm:gap-1 py-10 text-2xl text-secondaryText font-semibold visible sm:text-4xl">
<div className="text-thirdText text-4xl sm:text-6xl sm:mx-2">
&#8226;
</div>
Recent projects
</div>
<InfoLink />

<div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative visible top-0 flex min-h-full basis-1/2 flex-col justify-between border-rose-500 sm:gap-10">
<div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center border-green-500">
<div className="flex flex-wrap border-yellow-400">
<div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-secondaryText px-3 py-1 text-sm">
2024
</div>
</div>
<div className="border-yellow-400 sm:pr-10">
<div className="max-w-2xl">
<h2 className="text-2xl py-2 pb-3 font-semibold text-secondaryText">
Craft &amp; Code: Building the Future, One Line at a Time
</h2>
<div>
<p className="text-secondaryText text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae quo natus accusantium eius molestiae expedita
possimus accusamus, aspernatur, quia quae asperiores
inventore. Quod, officia vel aliquam exercitationem est
inventore porro?
</p>
</div>
</div>
<div className="text-sm pt-12 ">
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">Role</li>
<li>Digital Marketing</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">
Deliverables
</li>
<li>Survey checks</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">Company</li>
<li>VMR</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">Visit Site</li>
<li className="px-2">
<Link href="https://veecrew.com" className="">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-secondaryText hover:fill-third"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#5f6368"
>
<path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
</svg>
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="relative basis-1/2 pt-10 overflow-hidden border-rose-500">
<div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-secondaryText px-3 py-1 text-sm">
Showcase
</div>
<div className="grid gap-4 p-2 pt-4 sm:gap-10">
<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
width={300}
height={300}
className="min-w-full min-h-full rounded-2xl "
/>

<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
width={300}
height={300}
className="min-w-full min-h-full rounded-2xl "
/>
<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
width={300}
height={300}
className="min-w-full min-h-full rounded-2xl "
/>
</div>
</div>
</div>
<div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative m-auto min-h-screen max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative visible top-0 flex min-h-full basis-1/2 flex-col justify-between border-rose-500 sm:gap-10">
<div className="sticky top-0 will-change-transform overflow-hidden z-10 pt-10 items-center justify-center border-green-500">
<div className="flex flex-wrap border-yellow-400">
<div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-secondaryText px-3 py-1 text-sm">
<div className=" mb-4 max-w-fit rounded-full border bg-primary border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
2024
</div>
</div>
<div className="border-yellow-400 sm:pr-10">
<div className="max-w-2xl">
<h2 className="text-2xl py-2 pb-3 font-semibold text-secondaryText">
<h2 className="text-2xl py-2 pb-3 font-semibold text-thirdText">
Craft &amp; Code: Building the Future, One Line at a Time
</h2>
<div>
<p className="text-secondaryText text-base">
<p className="text-thirdText text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae quo natus accusantium eius molestiae expedita
possimus accusamus, aspernatur, quia quae asperiores
Expand All @@ -133,32 +42,30 @@ const StickyRelativeDemo: NextPage = () => {
</p>
</div>
</div>
<div className="text-sm pt-12 ">
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">Role</li>
<div className="text-sm text-thirdText pt-12 ">
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Role</li>
<li>Digital Marketing</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">
Deliverables
</li>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Deliverables</li>
<li>Survey checks</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">Company</li>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder ">
<li className="text-thirdText font-normal">Company</li>
<li>VMR</li>
</ul>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-fBorder">
<li className="text-secondaryText font-normal">Visit Site</li>
<ul className="flex justify-between font-semibold py-6 border-b-1 border-sBorder">
<li className="text-thirdText font-normal">Visit Site</li>
<li className="px-2">
<Link href="https://veecrew.com" className="">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-secondaryText hover:fill-third"
className="hover:fill-third"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#5f6368"
fill="--priamryText"
>
<path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z" />
</svg>
Expand All @@ -170,7 +77,7 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
<div className="relative basis-1/2 pt-10 overflow-hidden border-rose-500">
<div className=" mb-4 max-w-fit rounded-full border-1 bg-secondary border-tBorder font-semibold text-secondaryText px-3 py-1 text-sm">
<div className="mb-4 max-w-fit rounded-full border bg-primary border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
Showcase
</div>
<div className="grid gap-4 p-2 pt-4 sm:gap-10">
Expand All @@ -181,6 +88,7 @@ const StickyRelativeDemo: NextPage = () => {
height={300}
className="min-w-full min-h-full rounded-2xl "
/>

<Image
src={"/projects/mypro.png"}
alt={"My Profile Picture"}
Expand All @@ -198,6 +106,8 @@ const StickyRelativeDemo: NextPage = () => {
</div>
</div>
</div>


</div>
);
};
Expand Down
28 changes: 18 additions & 10 deletions app/components/TextFlipper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
// components/TextFlipper.tsx
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Caveat } from "next/font/google"


const caveat = Caveat({
weight: '400',
subsets: ['latin'],
});
const words = ['Programmer', 'Creator', 'Artist', 'Photographer', 'Designer', 'Enthusiast'];
const TextFlipper: React.FC = () => {
const [index, setIndex] = useState(0);
Expand All @@ -15,16 +21,18 @@ const TextFlipper: React.FC = () => {

return (
<div className="inline-flex text-left md:h-20 lg:h-24 font-bold">
<motion.div
key={index}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.5 }}
className=" z-10 text-2xl sm:text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-center font-sans font-bold"
>
{words[index]}
</motion.div>
<div className={caveat.className}>
<motion.div
key={index}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.8, ease: "easeInOut" }}
className=" z-10 text-3xl sm:text-lg md:text-7xl text-thirdText font-bold"
>
{words[index]}
</motion.div>
</div>
</div>

);
Expand Down
31 changes: 19 additions & 12 deletions app/components/backgroundBeams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import TextFlipper from "./TextFlipper";
import Link from "next/link";
import Image from "next/image";


export function BackgroundBeamsDemo() {
return (
<div className="min-h-screen w-full bg-primary relative flex flex-col items-start justify-center antialiased">
<div className="max-w-6xl text-left mx-auto p-4">

{/* <motion.div className="gap-2 flex flex-row justify-start items-center text-secondaryText text-semibold">
<Image
src={"/me.jpg"}
Expand Down Expand Up @@ -38,7 +40,7 @@ export function BackgroundBeamsDemo() {
duration: 0.8,
ease: "easeInOut",
}}
className="relative z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-left font-sans font-bold"
className="relative text-four font-bold z-10 md:pb-4 text-3xl sm:text-lg md:text-7xl text-left "
>
Build the right to way <br />
<div>
Expand All @@ -52,8 +54,8 @@ export function BackgroundBeamsDemo() {
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
delay: 0.1,
duration: 0.2,
ease: "backIn",
}}
className="flex w-full flex-col items-center justify-center"
Expand All @@ -77,7 +79,8 @@ export function BackgroundBeamsDemo() {
covered.
</motion.p>

<motion.div className="text-secondaryText gap-2 mt-10 max-w-fit flex justify-center items-cent">
<motion.div className="text-secondaryText gap-2 mt-10 max-w-fit flex justify-center items-center">

<Link href={'blog'}
className="relative z-10 font-bold">
<motion.button
Expand All @@ -90,28 +93,32 @@ export function BackgroundBeamsDemo() {
duration: 0.8,
ease: "easeInOut",
}}
className="bg-third text-fourText font-normal border-1 border-sBorder p-1 px-3 rounded-full"
className="bg-secondary justify-center items-center gap-2 text-Text font-normal border-1 border-pBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
>

Get started
</motion.button>
</Link>
<Link href={"https://e3d840fc-de16-4c0f-a2af-4bb02b48d797-00-1iz57nutmrl9d.sisko.replit.dev/"}
</Link>
<Link href={'#vision'}

className="relative z-10 font-bold">
<motion.button

initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}

transition={{

type: 'spring', stiffness: 300, damping: 30,
padding: "0.5rem",
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="p-1 px-3 border-1 border-sBorder rounded-full text-secondaryText font-semibold"
className=" bg-primary justify-center items-center gap-2 text-thirdText font-normal border-2 border-tBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
>
Learn more

Explore more
</motion.button>
</Link>
</Link>
</motion.div>
</div>
<BackgroundBeams />
Expand Down
2 changes: 1 addition & 1 deletion app/components/homeSectionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function HomeSectionHeader() {
<BackgroundBeamsDemo />
<span className="absolute w-full opacity-75 flex justify-between text-[.6rem] md:text-[.5rem] lg:text-[.7rem] top-2 text-white z-999 text-right top-2 right-2">
<div className={caveat.className}>
<Link href={"/"} className="sm:mx-8 mx-6 text-secondaryText text-3xl sm:text-4xl md:text-5xl font-bold">
<Link href={"/"} className="sm:mx-8 mx-6 text-primaryText text-3xl sm:text-4xl md:text-5xl font-bold">
{/* <i className="bg-white px-[.2rem] my-1 h-[3rem] rounded border text-black not-italic"></i> */}
nee.
</Link>
Expand Down
4 changes: 2 additions & 2 deletions app/components/typeWriter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export function TypewriterEffectSmoothDemo() {
},
];
return (
<div className="bg-primary flex flex-col items-center justify-center h-[40rem] ">
<div className="bg0jj flex flex-col items-center justify-center h-[40rem] ">
<div className="flex flex-col items-center justify-center h-[40rem] w-full">
<p className="text-secondaryText sm:text-base ">
<p className="text-thirdText sm:text-base ">
The road to make unique from here
</p>
<TypewriterEffectSmooth words={words} />
Expand Down
2 changes: 1 addition & 1 deletion app/components/ui/typewriter-effect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const TypewriterEffectSmooth = ({
{word.text.map((char, index) => (
<span
key={`char-${index}`}
className={cn(`text-secondaryText `, word.className)}
className={cn(`text-thirdText `, word.className)}
>
{char}
</span>
Expand Down

0 comments on commit 2b605c2

Please sign in to comment.