fdsa

.replit

@@ -13,3 +13,4 @@ externalPort = 80
 
 [[ports]]
 localPort = 3001
+externalPort = 3001

app/api/weather/route.tsx

@@ -0,0 +1,34 @@
+// pages/api/weather-by-ip.ts
+"use client"
+import { NextApiRequest, NextApiResponse } from 'next';
+import axios from 'axios';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  // Get client IP address from the request
+  const clientIp = req.headers['x-real-ip'] || req.socket.remoteAddress;
+
+  // Example URL for geolocation API (replace with actual API)
+  const geoApiUrl = `https://ipapi.co/${clientIp}/json/`;
+
+  try {
+    // Fetch geolocation data based on IP
+    const geoResponse = await axios.get(geoApiUrl);
+    const { latitude, longitude } = geoResponse.data;
+
+    // Fetch weather data based on detected coordinates
+    const weatherApiUrl = 'https://weatherapi-com.p.rapidapi.com/current.json';
+    const weatherOptions = {
+      params: { q: `${latitude},${longitude}` },
+      headers: {
+        'x-rapidapi-key': 'fb4e3b3dd0mshddc389caebd5192p146dc6jsn1901b7092089',
+        'x-rapidapi-host': 'weatherapi-com.p.rapidapi.com'
+      }
+    };
+
+    const weatherResponse = await axios.get(weatherApiUrl, weatherOptions);
+    res.status(200).json(weatherResponse.data);
+  } catch (error) {
+    console.error('Error fetching weather data:', error);
+    res.status(500).json({ error: 'Failed to fetch weather data' });
+  }
+}

app/components/AnimatedButton.tsx

@@ -17,7 +17,7 @@ const AnimatedButton = () => {
       }}
       whileTap={{ scale: 0.9 }}
 
-      className='sm:py-[.8rem] sm:px-[1.2rem] py-2 px-3 sm:text-sm  text-[#242424] text-sm rounded-full bg-gradient-to-br from-[#5e716a] to-[#D9D9D9] font-bold'
+      className='py-2 px-3 border-2 text-sm rounded-full border-[#5e716a] text-yellow-400 opacity-75 font-bold'
     >
      Reach me
     </motion.button>

app/components/CurrentTime.tsx

@@ -24,7 +24,9 @@ const CurrentTime: React.FC = () => {
     return () => clearInterval(intervalId); // Cleanup interval on component unmount
   }, []);
 
-  return <div>{currentTime}</div>;
+  return <div
+           className='font-bold'
+           >{currentTime}</div>;
 };
 
 export default CurrentTime;

app/components/TextFlipper.tsx

@@ -2,27 +2,27 @@
 import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 
-const words = ['programmer', 'digital landscape', 'artist'];
+const words = ['Programmer', 'Creator', 'Artist', 'Photographer', 'Designer', 'Enthusiast'];
 
 const TextFlipper: React.FC = () => {
   const [index, setIndex] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
       setIndex((prevIndex) => (prevIndex + 1) % words.length);
-    }, 2000); // Change word every 2 seconds
+    }, 3000); // Change word every 2 seconds
     return () => clearInterval(interval);
   }, []);
 
   return (
-    <div className="flex text-left h-full ">
+    <div className="inline-flex text-left h-full ">
       <motion.div
         key={index}
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 20 }}
         transition={{ duration: 0.5 }}
-        className="text-3xl md:text-5xl font-bold dark:text-gray-100 bg-gradient-to-br from-slate-300 to-slate-500 bg-clip-text text-left text-4xl font-medium tracking-tight text-transparent md:text-4xl"
+        className="text-3xl md:text-5xl font-bold dark:text-gray-100 bg-gradient-to-br from-slate-300 to-slate-500 bg-clip-text text-left text-3xl font-medium tracking-tight text-transparent md:text-7xl"
       >
         {words[index]}
       </motion.div>

app/components/WeatherApp.tsx

@@ -0,0 +1,60 @@
+// pages/index.tsx
+"use client"
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface WeatherData {
+  location: {
+    name: string;
+    region: string;
+    country: string;
+  };
+  current: {
+    temp_c: number;
+    condition: {
+      text: string;
+      icon: string;
+    };
+  };
+}
+
+const WeatherApp = () => {
+  const [weather, setWeather] = useState<WeatherData | null>(null);
+
+  useEffect(() => {
+    const fetchWeatherByIp = async () => {
+      try {
+        const response = await axios.get('/api/weather');
+        const data: WeatherData = response.data;
+        setWeather(data);
+      } catch (error) {
+        console.error('Error fetching weather data:', error);
+      }
+    };
+
+    fetchWeatherByIp();
+  }, []);
+
+  return (
+    <div>
+      <h1>Weather Information</h1>
+      {weather ? (
+        <div>
+          <h2>{weather.location.name}, {weather.location.region}, {weather.location.country}</h2>
+          <p>Temperature: {weather.current.temp_c}°C</p>
+          <p>Condition: {weather.current.condition.text}</p>
+          <img
+            src={weather.current.condition.icon}
+            alt="Weather Icon"
+            width={64}
+            height={64}
+          />
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+export default WeatherApp;

app/components/homeSectionHeader.tsx

@@ -4,18 +4,17 @@ import CurrentTime from "./CurrentTime";
 
 export default function HomeSectionHeader() {
   return (
-    <header className="min-h-screen">
-      <div>
-
+    <header className="min-h-screen overflow-hidden">
+      <div className="">
         <LampDemo />
-        <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">
-          <Link href={"/"} className="ml-4 sm:text-base font-bold">
+        <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">
+          <Link href={"/"} className="ml-4 text-sm text-yellow-400 sm:text-xl font-bold">
             {/* <i className="bg-white px-[.2rem] my-1 h-[3rem] rounded  border text-black not-italic"></i> */}
             nee.
           </Link>
           <CurrentTime />
-
         </span>
+
       </div>
     </header>
   );

app/components/ui/lamp.tsx

@@ -3,8 +3,12 @@ import React from "react";
 import { motion } from "framer-motion";
 import { cn } from "@/app/utils/cn";
 import Link from "next/link";
-import AnimatedButton from "../AnimatedButton";
+
 import TextFlipper from "../TextFlipper";
+import AnimatedButton from "../AnimatedButton";
+
+
+
 
 export function LampDemo() {
   return (
@@ -17,25 +21,24 @@ export function LampDemo() {
           duration: 0.8,
           ease: "easeInOut",
         }}
-        className="mt-8 w-full bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-left text-4xl font-medium tracking-tight text-transparent md:text-7xl"
+        className="mt-8 w-full bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-left text-3xl font-medium tracking-tight text-transparent md:text-7xl"
       >
-        hello, world <br />
-        I&apos;m  <div className="">
-          <TextFlipper />
+        Build the right to way <br /><div>
+        with <span><TextFlipper /></span>
         </div>
-         in Delhi
+         from Delhi, India.
       </motion.h1>
       <motion.p
         initial={{ opacity: 0, y: 100 }}
-        whileInView={{ opacity: 1, y: 0 }}
+        whileInView={{ opacity: .5, y: 0 }}
         transition={{
           delay: 0.3,
           duration: 0.8,
           ease: "easeInOut",
         }}
-        className="text-xs w-full bg-gradient-to-br from-[#5e716a] to-slate-100  bg-clip-text text-left mt-4 mb-4 sm:text-base font-medium tracking-tight text-transparent"
+        className="text-sm max-w-3xl opacity-25 md:text-2xl w-full  text-left mb-1 sm:text-base bg-gradient-to-br from-slate-300 to-slate-500 bg-clip-text text-left font-medium tracking-tight text-transparent antialiased "
       >
-        Eliminate website bugs using impressive animations and graphics
+        Use impressive animations and graphics to eliminate website bugs.
       </motion.p>
       <motion.button
         initial={{ opacity: 0, y: 100 }}
@@ -66,7 +69,7 @@ export const LampContainer = ({
   return (
     <div
       className={cn(
-        "relative flex h-[120vh] sm:h-[100vh] md:h-[100vh] lg:h-[100vh]  overflow-hidden   flex-col items-center justify-center overflow-hidden bg-slate-950 w-full  z-0",
+        "relative flex h-[120vh]  flex-col items-center justify-center overflow-hidden bg-slate-950 w-full  z-0",
         className
       )}
     >

app/page.tsx

@@ -3,8 +3,8 @@ import DarkModeToggle from "./components/DarkModeToggle";
 import HomeSectionHeader from "./components/homeSectionHeader";
 import { TypewriterEffectSmoothDemo } from "./components/typeWriter";
 import WorkSection from "./components/workSection";
-import AnimatedButton from "./components/AnimatedButton";
-import SvgAnimation from "./components/svgAnimation";
+import WeatherApp from "./components/WeatherApp";
+
 
 export const metadata: Metadata = {
   title: "bug fixer programmer freelancer",
@@ -19,13 +19,11 @@ export default function Home() {
       <section className="h-[100vh] flex justify-center items-center">
         <WorkSection />
       </section>
-      <section className="h-[100vh] flex flex-col justify-center items-center">Vision to learn
-        <AnimatedButton />
-      <div>
-       <SvgAnimation/>
-      </div>
+      <section className="h-[100vh] flex flex-col justify-center items-center">
+        Vision to learn
       </section>
       <div className="flex flex-col items-center justify-center min-h-screen py-2">
+        <WeatherApp />
         <DarkModeToggle />
         {/* Other components or content */}
       </div>