Skip to content

Commit

Permalink
Fgg
Browse files Browse the repository at this point in the history
  • Loading branch information
neerajrekwar committed Jul 7, 2024
1 parent 2f62f0d commit 2249b8b
Show file tree
Hide file tree
Showing 14 changed files with 187 additions and 54 deletions.
Empty file added DeviceSystemID.tsx
Empty file.
8 changes: 5 additions & 3 deletions app/components/CurrentTime.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const CurrentTime: React.FC = () => {
const updateTime = () => {
const now = new Date();
const formattedTime = new Intl.DateTimeFormat("en-US", {
hour: "2-digit",

hour12: true,
dayPeriod: "short",

Expand All @@ -27,6 +27,8 @@ const CurrentTime: React.FC = () => {
const now = new Date();
const formattedDay = new Intl.DateTimeFormat("en-US", {
weekday: 'short',
hour: "2-digit",
minute: '2-digit',
}).format(now);
setCurDay(formattedDay);
};
Expand All @@ -36,9 +38,9 @@ const CurrentTime: React.FC = () => {
}, []);
return (
<>
<div className="flex gap-1">
<div className="">
<div className="font-bold sm:text-2xl">{curDay}</div>
<div className="font-bold sm:text-4xl">{currentTime}</div>
<div className="font-bold ">{currentTime}</div>
</div>
</>
);
Expand Down
59 changes: 59 additions & 0 deletions app/components/DeviceAddress.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// components/DeviceAddress.tsx
'use client';
import { useEffect, useState } from 'react';

type DeviceAddress = {
ip: string;
city: string;
region: string;
country: string;
};

const DeviceAddress: React.FC = () => {
const [address, setAddress] = useState<DeviceAddress | null>(null);
const [error, setError] = useState<string | null>(null);

useEffect(() => {
const fetchDeviceAddress = async () => {
try {
const response = await fetch('https://ipapi.co/json/');
if (!response.ok) {
throw new Error('Failed to fetch device address');
}
const data: DeviceAddress = await response.json();
setAddress(data);
} catch (err) {
setError("An unknown error occurred.");
}
};

fetchDeviceAddress();
}, []);

return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
<div className="bg-white shadow-md rounded-lg p-6 max-w-md w-full">
{error ? (
<div className="text-red-500 text-center">
<p>Error: {error}</p>
</div>
) : address ? (
<div>
<h2 className="text-2xl font-bold mb-4 text-center">Device Address</h2>
<p className="text-lg"><strong>IP:</strong> {address.ip}</p>
<p className="text-lg"><strong>City:</strong> {address.city}</p>
<p className="text-lg"><strong>Region:</strong> {address.region}</p>
<p className="text-lg"><strong>Country:</strong> {address.country}</p>

</div>
) : (
<div className="text-center">
<p>Loading...</p>
</div>
)}
</div>
</div>
);
};

export default DeviceAddress;
46 changes: 36 additions & 10 deletions app/components/StickyRelativeDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const StickyRelativeDemo: NextPage = () => {
<DotCircle />
Recent projects
</div>
<div className="relative text-primary m-auto min-h-full max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative m-auto min-h-full 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">
Expand Down Expand Up @@ -48,7 +48,15 @@ const StickyRelativeDemo: NextPage = () => {
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Visit Site</li>
<li>
<Link href="https://veecrew.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg></Link>
<Link href="https://veecrew.com">
<Image
src="/arr.svg"
alt="Veecrew"
width={20}
height={20}
className=""
/>
</Link>
</li>
</ul>
</div>
Expand All @@ -66,25 +74,25 @@ const StickyRelativeDemo: NextPage = () => {
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 text-primary m-auto min-h-full max-w-7xl flex-col justify-evenly border-blue-400 sm:flex sm:flex-row">
<div className="relative m-auto min-h-full 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">
Expand Down Expand Up @@ -121,7 +129,25 @@ const StickyRelativeDemo: NextPage = () => {
<ul className="font-semibold flex justify-between text-gray-light py-6 border-b-2 border-dark">
<li>Visit Site</li>
<li>
<Link href="https://veecrew.com"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg></Link>
<Link href="https://veecrew.com">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
className="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l14 0" />
<path d="M13 18l6 -6" />
<path d="M13 6l6 6" />
</svg>
</Link>
</li>
</ul>
</div>
Expand All @@ -139,21 +165,21 @@ const StickyRelativeDemo: NextPage = () => {
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>
Expand Down
2 changes: 1 addition & 1 deletion app/components/TextFlipper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const TextFlipper: React.FC = () => {
}, []);

return (
<div className="inline-flex text-left md:h-20 lg:h-24 font-bold ">
<div className="inline-flex text-left md:h-20 lg:h-24 font-bold">
<motion.div
key={index}
initial={{ opacity: 0, y: -20 }}
Expand Down
2 changes: 1 addition & 1 deletion app/components/backgroundBeams.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Link from "next/link";

export function BackgroundBeamsDemo() {
return (
<div className="min-h-screen w-full bg-neutral-950 relative flex flex-col items-start justify-center antialiased">
<div className="min-h-screen w-full bg-[#0a0a0a] relative flex flex-col items-start justify-center antialiased">
<div className="max-w-6xl text-left mx-auto p-4">
<motion.h1
initial={{ opacity: 0, y: 100 }}
Expand Down
44 changes: 31 additions & 13 deletions app/components/homeSectionHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,46 @@
import Link from "next/link";
import Image from "next/image";
import { Caveat } from "next/font/google";

import CurrentTime from "./CurrentTime";
import Weather from "./WeatherApp";
import { BackgroundBeamsDemo } from "./backgroundBeams";

const caveat = Caveat({
weight: "400",
subsets: ["latin"],
});

export default function HomeSectionHeader() {
return (
<header className="min-h-screen overflow-hidden">
<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">
<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>
<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="ml-4 text-4xl font-bold">
{/* <i className="bg-white px-[.2rem] my-1 h-[3rem] rounded border text-black not-italic"></i> */}
ne.
</Link>
</div>
<div className="grid justify-items-end">
<CurrentTime />
<Weather />
<nav>
<ul className="text-base hidden md:flex gap-2">
<li>
<Link href={"/about"}>home</Link>
</li>
<li>
<Link href={"/about"}>about</Link>
</li>
<li>
<Link href={"/about"}>contact</Link>
</li>
<li>
<Link href={"/about"}>blog</Link>
</li>
</ul>
</nav>

</div>
</span>
</div>
Expand Down
11 changes: 11 additions & 0 deletions app/components/testDemoTheme.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
"use client";

import { motion } from "framer-motion";

export const TestDemoTheme: React.FC = () =>{
return(
<div>

</div>
)
}
2 changes: 1 addition & 1 deletion app/components/typeWriter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function TypewriterEffectSmoothDemo() {
return (
<div className="bg-[#0a0a0a] text-white 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-white sm:text-base ">
<p className="text-secondary sm:text-base ">
The road to make unique from here
</p>

Expand Down
25 changes: 13 additions & 12 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,20 @@
@tailwind components;
@tailwind utilities;
@import './add.css';

:root {
--color-primary: #0B3948;
--color-primary: #ffffff;
--color-secondary: #416165;
--color-white: #B3FFB3;
--color-third: #B3FFB3;
--color-gray-light: #D1FFD7;
--color-dark: #FFC800;
--color-dark-light: #101010;
}


/* Dark mode variables */
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #ffffff;
--color-primary: #0a0a0a;
--color-secondary: #3C6E71;
--color-white: #ffffff;
--color-gray-light: #D9D9D9;
Expand All @@ -26,8 +27,10 @@
.flipper {
display: inline-block;
position: relative;
width: 200px; /* Adjust width as needed */
height: 40px; /* Adjust height as needed */
width: 200px;
/* Adjust width as needed */
height: 40px;
/* Adjust height as needed */
}

.step {
Expand All @@ -54,6 +57,7 @@
transform: rotateX(10deg);
opacity: 1;
}

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
Expand All @@ -70,16 +74,13 @@

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
background: linear-gradient(to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
}
}
Loading

0 comments on commit 2249b8b

Please sign in to comment.