Skip to content

Commit 770b0a8

Browse files
StarOne01StarOne01
committed
Refactor: Optimized TypewriterEffectSmooth component usage and improved background image handling in page.tsx
1 parent 828fe03 commit 770b0a8

File tree

6 files changed

+56
-220
lines changed

6 files changed

+56
-220
lines changed

‎public/AIGenImage3.webp

42.7 KB
Binary file not shown.

‎src/app/globals.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
56
:root {
67
--foreground-rgb: 0, 0, 0;
78
--background-start-rgb: 214, 219, 220;
@@ -24,9 +25,26 @@ body {
2425
rgb(var(--background-end-rgb))
2526
)
2627
rgb(var(--background-start-rgb));
28+
2729
scroll-behavior: smooth;
2830
}
2931

32+
.container {
33+
height: 80vh;
34+
position: relative;
35+
border: 3px solid green;
36+
}
37+
38+
.center {
39+
margin: 0;
40+
position: absolute;
41+
top: 50%;
42+
left: 50%;
43+
-ms-transform: translate(-50%, -50%);
44+
transform: translate(-50%, -50%);
45+
}
46+
47+
3048
@layer utilities {
3149
.text-balance {
3250
text-wrap: balance;

‎src/app/page.tsx

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
"use client";
22

33
import { TypewriterEffectSmooth } from "../components/ui/typewriter-effect";
4-
import { motion } from "framer-motion";
54
import React from "react";
6-
import { AuroraBackground } from "../components/ui/aurora-background";
75
import { Poppins } from 'next/font/google'
86
import { Fragment, useState } from 'react'
97
import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
@@ -37,37 +35,37 @@ const callsToAction = [
3735
{ name: 'Contact sales', href: '#', icon: PhoneIcon },
3836
]
3937

38+
const imgIndex = Math.floor(Math.random() * 3) + 1
4039
function classNames(...classes: any) {
4140
return classes.filter(Boolean).join(' ')
4241
}
4342

4443

4544

46-
function Example() {
45+
function Nav() {
4746
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
4847
return (
49-
<header className="bg-trasparent text-black dark:text-white dark:bg-black backdrop-blur-sm fixed w-full">
50-
<nav className="mx-auto flex max-w-7xl z-50 items-center justify-between p-6 lg:px-8" aria-label="Global">
48+
<header className="bg-trasparent z-10 text-black dark:text-white dark:bg-black backdrop-blur-sm fixed w-full">
49+
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
5150
<div className="flex lg:flex-1">
52-
<a href="#" className="-m-1.5 p-1.5">
51+
<a href="#" className="-m-1.5 font-semibold p-1.5">
5352
<span >StarOne</span>
5453
</a>
5554
</div>
5655
<div className="flex lg:hidden">
5756
<button
5857
type="button"
5958
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-black dark:text-white"
60-
onClick={() => { setMobileMenuOpen(true); console.log(mobileMenuOpen) }}
59+
onClick={() => { setMobileMenuOpen(true) }}
6160
>
6261
<span className="sr-only">Open main menu</span>
6362
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
6463
</button>
6564
</div>
6665
<Popover.Group className="hidden lg:flex lg:gap-x-12">
67-
<Popover className="relative">
68-
<Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
69-
Product
70-
</Popover.Button>
66+
<a href="#" className="font-semibold text-lg leading-6 text-gray-900">
67+
Whoami
68+
</a>
7169
{/*
7270
<ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
7371
@@ -116,20 +114,19 @@ function Example() {
116114
</Popover.Panel>
117115
</Transition>
118116
*/}
119-
</Popover>
120-
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
121-
Features
117+
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
118+
Skills
122119
</a>
123-
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
124-
Marketplace
120+
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
121+
Projects
125122
</a>
126-
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
127-
Company
123+
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
124+
Interests
128125
</a>
129126
</Popover.Group>
130127
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
131-
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
132-
Log in <span aria-hidden="true">&rarr;</span>
128+
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
129+
Socials <span aria-hidden="true">&rarr;</span>
133130
</a>
134131
</div>
135132
</nav>
@@ -138,7 +135,7 @@ function Example() {
138135
<Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-transparent backdrop-blur-xl dark:backdrop-blur-3xl px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
139136
<div className="flex items-center justify-between">
140137
<a href="#" className="-m-1.5 p-1.5">
141-
<span className="text-black dark:text-white">StarOne</span>
138+
<span className="text-black font-semibold dark:text-white">StarOne</span>
142139
</a>
143140
<button
144141
type="button"
@@ -149,12 +146,12 @@ function Example() {
149146
<XMarkIcon className="h-6 w-6 dark:text-white text-black" aria-hidden="true" />
150147
</button>
151148
</div>
152-
<div className="mt-6 flow-root">
153-
<div className="-my-6 divide-y divide-gray-500/10">
154-
<div className="space-y-2 py-6">
149+
<div className="mt-6 flow-root ">
150+
<div className="-my-6 center divide-gray-500/10">
151+
<div className="space-y-2 text-center align-middle py-6">
155152
<a
156153
href="#"
157-
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
154+
className="-mx-3 block rounded-lg px-3 py-2 text-2xl font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
158155
>
159156
Whoami
160157
</a>{ /*
@@ -189,27 +186,27 @@ function Example() {
189186
</Disclosure>*/}
190187
<a
191188
href="#"
192-
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
189+
className="-mx-3 block rounded-lg px-3 py-2 text-2xl font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
193190
>
194191
Skills
195192
</a>
196193
<a
197194
href="#"
198-
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
195+
className="-mx-3 block rounded-lg px-3 py-2 text-2xl font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
199196
>
200197
Projects
201198
</a>
202199
<a
203200
href="#"
204-
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
201+
className="-mx-3 block rounded-lg px-3 py-2 text-2xl font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
205202
>
206203
Interests
207204
</a>
208205
</div>
209206
<div className="py-6">
210207
<a
211208
href="#"
212-
className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
209+
className=" block rounded-lg px-3 py-2 text-2xl font-semibold leading-7 text-black dark:text-white hover:text-white dark:hover:text-black hover:bg-black dark:hover:bg-yellow-200"
213210
>
214211
Socials
215212
</a>
@@ -234,32 +231,24 @@ function Hero() {
234231
},
235232
{
236233
text: "Prashanth",
237-
className: "dark:text-yellow-200 text-cyan-600 font-light",
234+
className: "dark:text-yellow-200 text-white",
238235
},
239236
];
240237
return (
241-
<>
242-
<AuroraBackground className={"-z-10 " + poppins300.className}>
243-
<motion.div
244-
initial={{ opacity: 0.0, y: 40 }}
245-
whileInView={{ opacity: 1, y: 0 }}
246-
transition={{
247-
delay: 0.3,
248-
duration: 0.8,
249-
ease: "easeInOut",
250-
}}
251-
className="relative flex flex-col gap-4 items-center justify-center px-4"
238+
<div className={"bg-[url('../../public/AIGenImage3.webp')] bg-cover bg-center " + poppins300.className}>
239+
<div
240+
className={`relative flex backdrop-blur-sm dark:mix-blend-hard-light flex-col h-[100vh] bg-[rgba(255,255,255,0.4)] dark:bg-[rgba(50,50,50,0.45)] gap-4 items-center justify-center px-4`}
252241
>
253-
<div className="text-4xl md:text-6xl dark:text-white text-center">
242+
<div className="text-4xl md:text-6xl text-slate-100 text-center">
254243
<TypewriterEffectSmooth words={words} />
255244
<TypewriterEffectSmooth words={name} />
256245
</div>
257-
</motion.div>
258-
</AuroraBackground>
259-
</>
246+
</div>
247+
</div>
260248
);
261249
}
262250

251+
263252
function Whoami() {
264253
return (
265254
<div className={"m-7 max md:mx-auto text-base " + poppins400.className}>
@@ -270,12 +259,13 @@ function Whoami() {
270259
<li>FOSS Enthusiasist</li>
271260
<li>Astrophile</li>
272261
<li>Melophile</li>
262+
<li></li>
273263
</ul>
274264
Welcome to my digital realm, where I bring code to life in extraordinary ways. I'm a <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">system developer, skilled in C, C++</span> – the building blocks of software magic. My journey takes me deep into the heart of machines, crafting their very souls and making them hum with electronic vitality.
275265

276-
I'm also a <span className="highlight">aspiring dual-faceted engineer,</span> both Electric and Electronic. Electronic engineering supports my <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">interests in Computers and electronical systems,</span> while my passion for Electric engineering quenches my thirst for understanding the beauty of physics and electromagnetism. As an electronic engineer, I create powerful things with mere milliamps. On the other hand, as an electrical engineer, I play with hundreds of volts and craft high-power appliances.
266+
I'm also a <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">aspiring dual-faceted engineer,</span> both Electric and Electronic. Electronic engineering supports my <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">interests in Computers and electronical systems,</span> while my passion for Electric engineering quenches my thirst for understanding the beauty of physics and electromagnetism. As an electronic engineer, I create powerful things with mere milliamps. On the other hand, as an electrical engineer, I play with hundreds of volts and craft high-power appliances.
277267

278-
But that's not all – <span className="highlight">I'm also a cybersecurity enthusiast,</span> unearthing hidden truths across various realms. <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">From the vast expanse of astronomy to the intricate dance of wireless networks, and from captivating graphics to the core of bare-metal transistors, I love unveiling secrets and seeing what lies beneath the surface.</span>
268+
But that's not all – <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">I'm also a cybersecurity enthusiast,</span> unearthing hidden truths across various realms. <span className="dark:text-yellow-300 dark:bg-transparent text-white-500 bg-cyan-200">From the vast expanse of astronomy to the intricate dance of wireless networks, and from captivating graphics to the core of bare-metal transistors, I love unveiling secrets and seeing what lies beneath the surface.</span>
279269

280270
Come, join me on this adventure where science fiction meets reality. Let's explore uncharted code, push the boundaries of what's possible, and dive into the very heart of technology and the mysteries of the electronical world.
281271
</div>);
@@ -309,7 +299,7 @@ function Projects() {
309299
export default function Home() {
310300
return (
311301
<>
312-
<Example />
302+
<Nav />
313303
<Hero />
314304
<Whoami />
315305
<br />

‎src/components/ui/aurora-background.tsx

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎src/components/ui/lamp.tsx

Lines changed: 0 additions & 104 deletions
This file was deleted.

0 commit comments

Comments
 (0)