From e87ae5889d133b1b1235084acd0488d0e4ec6a37 Mon Sep 17 00:00:00 2001 From: Neeraj Rekwar <88387699+neerajrekwar@users.noreply.github.com> Date: Sat, 13 Jul 2024 17:36:16 +0000 Subject: [PATCH] gfds --- app/add.css | 35 +++++++++------- app/components/StickyRelativeDemo.tsx | 14 +++---- app/components/TextFlipper.tsx | 4 +- app/components/backgroundBeams.tsx | 16 ++++--- app/components/homeSectionHeader.tsx | 4 +- app/globals.css | 45 ++++++++++++-------- tailwind.config.ts | 60 ++++++++++----------------- 7 files changed, 86 insertions(+), 92 deletions(-) diff --git a/app/add.css b/app/add.css index d02521385..19de495ec 100644 --- a/app/add.css +++ b/app/add.css @@ -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{ diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx index 21af82d9f..e3fecc597 100644 --- a/app/components/StickyRelativeDemo.tsx +++ b/app/components/StickyRelativeDemo.tsx @@ -12,9 +12,9 @@ const source_Code_Pro = Source_Code_Pro({ const StickyRelativeDemo: NextPage = () => { return ( -
-
-
+
+
+
•
Recent projects @@ -23,17 +23,17 @@ const StickyRelativeDemo: NextPage = () => {
-
+
2024
-

+

Craft & Code: Building the Future, One Line at a Time

-

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quo natus accusantium eius molestiae expedita possimus accusamus, aspernatur, quia quae asperiores @@ -77,7 +77,7 @@ const StickyRelativeDemo: NextPage = () => {

-
+
Showcase
diff --git a/app/components/TextFlipper.tsx b/app/components/TextFlipper.tsx index 96c6a765d..5065c3b5e 100644 --- a/app/components/TextFlipper.tsx +++ b/app/components/TextFlipper.tsx @@ -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 ( -
+
Build the right to way
@@ -62,7 +62,7 @@ export function BackgroundBeamsDemo() { > - - Welcome to MailJet, the best transactional email service on the web. - We provide reliable, scalable, and customizable email solutions for - your business. Whether you'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're sending order any bug fix in your web, or tools, nee. has got you covered. @@ -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 @@ -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 diff --git a/app/components/homeSectionHeader.tsx b/app/components/homeSectionHeader.tsx index 3ee27fc45..1cb267951 100644 --- a/app/components/homeSectionHeader.tsx +++ b/app/components/homeSectionHeader.tsx @@ -17,9 +17,9 @@ export default function HomeSectionHeader() {
- +
- + {/* */} nee. diff --git a/app/globals.css b/app/globals.css index 7b838e6ce..9fcd4bd2a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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:wght@400..700&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; @@ -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 { diff --git a/tailwind.config.ts b/tailwind.config.ts index 70762d838..4f0d6add3 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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", @@ -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"), }, }, });