diff --git a/.replit b/.replit index ca797b3df..c79c61004 100644 --- a/.replit +++ b/.replit @@ -10,3 +10,7 @@ run = ["sh", "-c", "npm run dev"] [[ports]] localPort = 3000 externalPort = 80 + +[[ports]] +localPort = 3001 +externalPort = 3001 diff --git a/app/components/AutoPlayAudio.tsx b/app/components/AutoPlayAudio.tsx new file mode 100644 index 000000000..2dcb83016 --- /dev/null +++ b/app/components/AutoPlayAudio.tsx @@ -0,0 +1,42 @@ +'use client' +import { useEffect, useRef, useState } from 'react'; + +const AutoPlayAudio = () => { + const audioRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + + const handlePlay = async () => { + if (audioRef.current) { + try { + await audioRef.current.play(); + setIsPlaying(true); + } catch (err) { + console.error('Failed to play audio:', err); + } + } + }; + + const handlePause = () => { + if (audioRef.current) { + audioRef.current.pause(); + setIsPlaying(false); + } + }; + + useEffect(() => { + handlePlay(); + }, []); + + return ( +
+
+ ); +}; + +export default AutoPlayAudio; diff --git a/app/components/CurrentTime.tsx b/app/components/CurrentTime.tsx index 74afe76cb..fb87e9e5a 100644 --- a/app/components/CurrentTime.tsx +++ b/app/components/CurrentTime.tsx @@ -1,32 +1,47 @@ -'use client' -import { useEffect, useState } from 'react'; +"use client"; +import { useEffect, useState } from "react"; const CurrentTime: React.FC = () => { - const [currentTime, setCurrentTime] = useState(''); + const [currentTime, setCurrentTime] = useState(""); + const [curDay, setCurDay] = useState(""); useEffect(() => { const updateTime = () => { const now = new Date(); - const formattedTime = new Intl.DateTimeFormat('en-US', { - weekday: 'short', - era: 'long', - hour: 'numeric', - minute:"numeric", - hour12: true , - dayPeriod: 'short', + const formattedTime = new Intl.DateTimeFormat("en-US", { + hour: "2-digit", + hour12: true, + dayPeriod: "short", + }).format(now); setCurrentTime(formattedTime); }; - updateTime(); // Initial call to set the time immediately const intervalId = setInterval(updateTime, 1000); // Update time every second return () => clearInterval(intervalId); // Cleanup interval on component unmount }, []); - return
{currentTime}
; + useEffect(() => { + const updateDay = () => { + const now = new Date(); + const formattedDay = new Intl.DateTimeFormat("en-US", { + weekday: 'short', + }).format(now); + setCurDay(formattedDay); + }; + updateDay(); // Initial call to set the day immediately + const intervalId = setInterval(updateDay, 1000); // Update day every second + return () => clearInterval(intervalId); // Cleanup interval on component unmount + }, []); + return ( + <> +
+
{curDay}
+
{currentTime}
+
+ + ); }; export default CurrentTime; diff --git a/app/components/StickyRelativeDemo.tsx b/app/components/StickyRelativeDemo.tsx index 496267fc5..932c264a9 100644 --- a/app/components/StickyRelativeDemo.tsx +++ b/app/components/StickyRelativeDemo.tsx @@ -2,25 +2,26 @@ import { NextPage } from "next"; import Image from "next/image"; import DotCircle from "./acceries/DotCircle"; +import Link from "next/link"; const StickyRelativeDemo: NextPage = () => { return ( -
+
Recent projects
-
-
+
+
2021
-
+
-

+

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

@@ -31,11 +32,103 @@ const StickyRelativeDemo: NextPage = () => { inventore porro?

- Sticky Div +
+
    +
  • Role
    • +
  • Digital Marketing
    • +
+
    +
  • Deliverables
    • +
  • Survey checks
    • +
+
    +
  • Company
    • +
  • Veecrew Market Research pvt. ltd.
    • +
+
    +
  • Visit Site
    • +
  • + +
    • +
+
+
+
+
+
+
+ showcase +
+
+ {"My + {"My + {"My +
+
+
+
+
+
+
+
+ 2021 +
+
+
+
+

+ 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 + inventore. Quod, officia vel aliquam exercitationem est + inventore porro? +

+
+
+
    +
  • Role
    • +
  • Digital Marketing
    • +
+
    +
  • Deliverables
    • +
  • Survey checks
    • +
+
    +
  • Company
    • +
  • Veecrew Market Research pvt. ltd.
    • +
+
    +
  • Visit Site
    • +
  • + +
    • +
+
-
+
showcase
@@ -46,21 +139,21 @@ const StickyRelativeDemo: NextPage = () => { width={300} height={300} className="min-w-full min-h-full rounded-2xl " - /> + /> {"My + /> {"My + />
diff --git a/app/components/TextFlipper.tsx b/app/components/TextFlipper.tsx index 3c97ccd59..7b48a2c05 100644 --- a/app/components/TextFlipper.tsx +++ b/app/components/TextFlipper.tsx @@ -15,7 +15,7 @@ const TextFlipper: React.FC = () => { }, []); return ( -
+
{ return (
diff --git a/app/components/introSection.tsx b/app/components/introSection.tsx index 84c3c1b34..8265fc7c9 100644 --- a/app/components/introSection.tsx +++ b/app/components/introSection.tsx @@ -1,5 +1,6 @@ "use client"; +import AutoPlayAudio from "./AutoPlayAudio"; import StickyRelativeDemo from "./StickyRelativeDemo"; import { TypewriterEffectSmoothDemo } from "./typeWriter"; @@ -8,6 +9,7 @@ export default function IntroSection() { return ( <> + ); diff --git a/app/components/typeWriter.tsx b/app/components/typeWriter.tsx index e90167fa2..fc2bb2422 100644 --- a/app/components/typeWriter.tsx +++ b/app/components/typeWriter.tsx @@ -18,7 +18,7 @@ export function TypewriterEffectSmoothDemo() { }, { text: "neeraj rekwar.", - className: "text-[#5e716a] dark:text-[#5e716a] ", + className: "text-dark", }, ]; return ( diff --git a/app/components/ui/typewriter-effect.tsx b/app/components/ui/typewriter-effect.tsx index 9b7a8b312..80920a244 100644 --- a/app/components/ui/typewriter-effect.tsx +++ b/app/components/ui/typewriter-effect.tsx @@ -88,7 +88,7 @@ export const TypewriterEffect = ({ repeatType: "reverse", }} className={cn( - "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-[#5e716a]", + "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-dark", cursorClassName, )} > @@ -176,7 +176,7 @@ export const TypewriterEffectSmooth = ({ repeatType: "reverse", }} className={cn( - "block rounded-sm w-[4px] h-4 sm:h-6 xl:h-12 bg-[#5e716a]", + "block rounded-sm w-[4px] h-4 sm:h-6 xl:h-12 bg-dark ", cursorClassName, )} > diff --git a/app/globals.css b/app/globals.css index 5ba5faef6..427428154 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,11 +3,11 @@ @tailwind utilities; @import './add.css'; :root { - --color-primary: #242424; - --color-secondary: #182e2f3c; - --color-white: #ffffff; - --color-gray-light: #d9d9d9; - --color-dark: #ffdd00; + --color-primary: #0B3948; + --color-secondary: #416165; + --color-white: #B3FFB3; + --color-gray-light: #D1FFD7; + --color-dark: #FFC800; } diff --git a/app/layout.tsx b/app/layout.tsx index 568b5330b..02eba66bf 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,11 +1,14 @@ -import { Inter } from "next/font/google"; +import { Alata } from "next/font/google"; import "./globals.css"; import "./add.css"; import { FloatingNavDemo } from "./components/floatingNavBar"; import { ThemeProvider } from "./context/ThemeContext"; import Footer from "./components/footer"; -const inter = Inter({ subsets: ["latin"] }); +const alata = Alata({ + weight: '400', + subsets: ['latin'], +}); export default function RootLayout({ @@ -16,7 +19,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/app/page.tsx b/app/page.tsx index 773a983e9..ec463cf09 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -5,18 +5,19 @@ import AdminWeather from "./components/AdminWeather"; import IntroSection from "./components/introSection"; import ReviewSection from "./components/reviewSection"; + export const metadata: Metadata = { - title: "bug fixer programmer freelancer", + title: "nee. - Portfolio Framer Template For Freelancers", description: "Generated by create next app", }; export default function Home() { return ( -
+
-
+