Skip to content

Commit

Permalink
gfds
Browse files Browse the repository at this point in the history
  • Loading branch information
neerajrekwar committed Jul 13, 2024
1 parent 08a4aec commit e87ae58
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 92 deletions.
35 changes: 19 additions & 16 deletions app/add.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,27 @@
@tailwind components;
@tailwind utilities;

:root {
--color-primary: #ffffff;
--color-secondary: #416165;
--color-third: #B3FFB3;
--color-gray-light: #D1FFD7;
--color-dark: #FFC800;
--color-dark-light: #101010;
.button-three {
@apply border-none bg-transparent;
--button-color: #000;
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #0a0a0a;
--color-secondary: #3C6E71;
--color-white: #ffffff;
--color-gray-light: #D9D9D9;
--color-dark: #284B63;
}
.button-three .hamburger {
transition: translate 1s, rotate 1s;
}

.button-three[aria-expanded="true"] .hamburger {
translate: 0px 0px;
}

.button-three .line {
transition: 1s;
stroke-dasharray: 60 31 60 300;
}

.button-three[aria-expanded="true"] .line {
stroke-dasharray: 60 105 60 300;
stroke-dashoffset: -90;
}

.workSecion{
Expand Down
14 changes: 7 additions & 7 deletions app/components/StickyRelativeDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ const source_Code_Pro = Source_Code_Pro({

const StickyRelativeDemo: NextPage = () => {
return (
<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">
<div className="m-auto scroll-smooth text-four 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 font-semibold visible sm:text-4xl">
<div className="text-4xl text-third sm:text-5xl sm:mx-2">
&#8226;
</div>
Recent projects
Expand All @@ -23,17 +23,17 @@ const StickyRelativeDemo: NextPage = () => {
<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 bg-primary border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
<div className=" mb-4 max-w-fit rounded-full border bg-five border-sBorder font-semibold px-3 py-1 antialiased ">
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-thirdText">
<h2 className="text-2xl py-3 pb-3 font-semibold ">
Craft &amp; Code: Building the Future, One Line at a Time
</h2>
<div>
<p className="text-thirdText text-base">
<p className="text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Repudiandae quo natus accusantium eius molestiae expedita
possimus accusamus, aspernatur, quia quae asperiores
Expand Down Expand Up @@ -77,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 bg-primary border-tBorder font-semibold text-thirdText px-3 py-1 antialiased text-sm">
<div className="mb-4 max-w-fit rounded-full border bg-five 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 Down
4 changes: 2 additions & 2 deletions app/components/TextFlipper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ const TextFlipper: React.FC = () => {
useEffect(() => {
const interval = setInterval(() => {
setIndex((prevIndex) => (prevIndex + 1) % words.length);
}, 3000); // Change word every 3 seconds
}, 4000); // Change word every 4 seconds
return () => clearInterval(interval);
}, []);

return (
<div className="inline-flex text-left md:h-20 lg:h-24 font-bold">
<div className="inline-flex text-four text-left md:h-20 lg:h-24 font-bold">
<div className={caveat.className}>
<motion.div
key={index}
Expand Down
16 changes: 7 additions & 9 deletions app/components/backgroundBeams.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function BackgroundBeamsDemo() {
duration: 0.8,
ease: "easeInOut",
}}
className="relative text-four font-bold z-10 md:pb-4 text-3xl sm:text-lg md:text-7xl text-left "
className="relative text-secondary font-bold z-10 md:pb-4 text-2xl sm:text-lg md:text-7xl text-left"
>
Build the right to way <br />
<div>
Expand All @@ -62,20 +62,18 @@ export function BackgroundBeamsDemo() {
>

</motion.div>
<motion.p
<motion.p
initial={{ opacity: 0, y: 100 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="text-thirdText font-semibold mx-auto my-2 text-sm text-left relative z-10"
className="text-four mx-auto my-2 text-sm sm:text-base relative z-10"
>
Welcome to MailJet, the best transactional email service on the web.
We provide reliable, scalable, and customizable email solutions for
your business. Whether you&apos;re sending order confirmations,
password reset emails, or promotional campaigns, MailJet has got you
We could be best on the web, We provide reliable, scalable, and customizable web solutions for
your business. Whether you&apos;re sending order any bug fix in your web, or tools, nee. has got you
covered.
</motion.p>

Expand All @@ -93,7 +91,7 @@ export function BackgroundBeamsDemo() {
duration: 0.8,
ease: "easeInOut",
}}
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"
className="bg-secondary justify-center items-center bg-four gap-2 text-sm font-normal border-1 border-pBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
>

Get started
Expand All @@ -112,7 +110,7 @@ export function BackgroundBeamsDemo() {
duration: 0.8,
ease: "easeInOut",
}}
className=" bg-primary justify-center items-center gap-2 text-thirdText font-normal border-2 border-fBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
className=" bg-primary justify-center items-center gap-2 text-secondary text-capitlize font-semibold text-sm border-2 border-fBorder p-2 px-4 md:p-3 md:px-5 rounded-full"
>

Explore more
Expand Down
4 changes: 2 additions & 2 deletions app/components/homeSectionHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ export default function HomeSectionHeader() {
<header className="min-h-screen text-primary overflow-hidden">
<div className="">
<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">
<span className="absolute w-full opacity-75 flex justify-between text-[.6rem] md:text-[.5rem] lg:text-[.7rem] top-2 text-four z-999 text-right top-2 right-2">
<div className={caveat.className}>
<Link href={"/"} className="sm:mx-8 mx-6 text-primaryText text-3xl sm:text-4xl md:text-5xl font-bold">
<Link href={"/"} className="sm:mx-8 mx-6 text-secondary 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
45 changes: 28 additions & 17 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -1,27 +1,17 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import './add.css';
@import 'add.css';

@import url('https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap');


:root {
--color-primary-bg: #FFFFFF;
--color-secondary-bg: #0a0a0a;
--color-third-bg: #5e716a;
--color-four-bg: #4d5150;
--color-five-bg: #eeeded;

--color-primary-text: #0a0a0a;
--color-secondary-text: #d9d9d9;
--color-third-text: #4d5150;
--color-four-text: #E2C044;
--color-five-text: #79a091;

--color-primary-border: #d1e5e0;
--color-secondary-border: #d9d9d9;
--color-third-border: #E2C044;
--color-primary: #FFFFFF;
--color-secondary: #262626;
--color-third: #2cffbf;
--color-four: #4d5150;
--color-five: #79a091;
--color-six: #e6e6e6;
--font-families-secondary: 'Caveat', cursive;

/* --color-primary-bg: #FFFFFF;
Expand Down Expand Up @@ -75,7 +65,28 @@

}
}
.button-three {
@apply border-none bg-transparent;
--button-color: #000;
}

.button-three .hamburger {
transition: translate 1s, rotate 1s;
}

.button-three[aria-expanded="true"] .hamburger {
translate: 0px 0px;
}

.button-three .line {
transition: 1s;
stroke-dasharray: 60 31 60 300;
}

.button-three[aria-expanded="true"] .line {
stroke-dasharray: 60 105 60 300;
stroke-dashoffset: -90;
}

/* Additional custom styles */
.flipper {
Expand Down
60 changes: 21 additions & 39 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,20 @@ module.exports = {
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@nextui-org/theme/dist/components/[object Object].js",
],
darkMode: ["class","selector"],
darkMode: ["class", "selector"],
theme: {
extend: {
backgroundImage: {
'custom-image': "url('/projects/kukai-art-mmkzdAN_jzQ-unsplash.jpg')",
"custom-image": "url('/projects/kukai-art-mmkzdAN_jzQ-unsplash.jpg')",
},
colors: {
primary: "var(--color-primary-bg)",
secondary: "var(--color-secondary-bg)",
third: "var(--color-third-bg)",
four: "var(--color-four-bg)",
five: "var(--color-five-bg)",
primaryText: "var(--color-primary-text)",
thirdText: "var(--color-third-text)",
secondaryText: "var(--color-secondary-text)",
fourText: "var(--color-four-text)",
pBorder: "var(--color-primary-border)",
sBorder: "var(--color-secondary-border)",
tBorder: "var(--color-third-border)",
fBorder: "var(--color-four-border)",
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
third: "var(--color-third)",
four: "var(--color-four)",
five: "var(--color-five)",
six: "var(--color-six)",

},
animation: {
aurora: "aurora 60s linear infinite",
Expand Down Expand Up @@ -63,33 +57,21 @@ module.exports = {
plugin(function ({ addBase, theme }) {
addBase({
":root": {
"--color-primary-bg": theme("colors.primary"),
"--color-secondary-bg": theme("colors.secondary"),
"--color-third-bg": theme("colors.third"),
"--color-four-bg": theme("colors.four"),
"--color-five-bg": theme("colors.five"),
"--color-primary-text": theme("colors.primaryText"),
"--color-secondary-text": theme("colors.seconadaryText"),
"--color-third-text": theme("colors.thirdText"),
"--color-four-text": theme("colors.fourText"),
"--color-primary-border": theme("colors.pBorder"),
"--color-secondary-border": theme("colors.sBorder"),
"--color-third-border": theme("colors.tBorder"),
"--color-primary": theme("colors.primary"),
"--color-secondary": theme("colors.secondary"),
"--color-third": theme("colors.third"),
"--color-four": theme("colors.four"),
"--color-five": theme("colors.five"),
"--color-six": theme("colors.six"),
},
"@media (prefers-color-scheme: dark)": {
":root": {
"--color-primary-bg": theme("colors.primary"),
"--color-secondary-bg": theme("colors.secondary"),
"--color-third-bg": theme("colors.third"),
"--color-four-bg": theme("colors.four"),
"--color-five-bg": theme("colors.five"),
"--color-primary-text": theme("colors.primaryText"),
"--color-secondary-text": theme("colors.seconadaryText"),
"--color-third-text": theme("colors.thirdText"),
"--color-four-text": theme("colors.fourText"),
"--color-primary-border": theme("colors.pBorder"),
"--color-secondary-border": theme("colors.sBorder"),
"--color-third-border": theme("colors.tBorder"),
"--color-primary": theme("colors.primary"),
"--color-secondary": theme("colors.secondary"),
"--color-third": theme("colors.third"),
"--color-four": theme("colors.four"),
"--color-five": theme("colors.five"),
"--color-six": theme("colors.six"),
},
},
});
Expand Down

0 comments on commit e87ae58

Please sign in to comment.