Skip to content

Commit

Permalink
Refactor: Optimized TypewriterEffectSmooth component usage and improv…
Browse files Browse the repository at this point in the history 
…ed background image handling in page.tsx
  • Loading branch information
@StarOne01
StarOne01 committed May 1, 2024
1 parent 828fe03 commit 770b0a8
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 220 deletions.
Binary file added public/AIGenImage3.webp
View file
Binary file not shown.
18 changes: 18 additions & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@tailwind components;
@tailwind utilities;


:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
Expand All @@ -24,9 +25,26 @@ body {
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));

scroll-behavior: smooth;
}

.container {
height: 80vh;
position: relative;
border: 3px solid green;
}

.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}


@layer utilities {
.text-balance {
text-wrap: balance;
Expand Down
86 changes: 38 additions & 48 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
"use client";

import { TypewriterEffectSmooth } from "../components/ui/typewriter-effect";
import { motion } from "framer-motion";
import React from "react";
import { AuroraBackground } from "../components/ui/aurora-background";
import { Poppins } from 'next/font/google'
import { Fragment, useState } from 'react'
import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
Expand Down Expand Up @@ -37,37 +35,37 @@ const callsToAction = [
{ name: 'Contact sales', href: '#', icon: PhoneIcon },
]

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



function Example() {
function Nav() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<header className="bg-trasparent text-black dark:text-white dark:bg-black backdrop-blur-sm fixed w-full">
<nav className="mx-auto flex max-w-7xl z-50 items-center justify-between p-6 lg:px-8" aria-label="Global">
<header className="bg-trasparent z-10 text-black dark:text-white dark:bg-black backdrop-blur-sm fixed w-full">
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
<div className="flex lg:flex-1">
<a href="#" className="-m-1.5 p-1.5">
<a href="#" className="-m-1.5 font-semibold p-1.5">
<span >StarOne</span>
</a>
</div>
<div className="flex lg:hidden">
<button
type="button"
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-black dark:text-white"
onClick={() => { setMobileMenuOpen(true); console.log(mobileMenuOpen) }}
onClick={() => { setMobileMenuOpen(true) }}
>
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<Popover.Group className="hidden lg:flex lg:gap-x-12">
<Popover className="relative">
<Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
Product
</Popover.Button>
<a href="#" className="font-semibold text-lg leading-6 text-gray-900">
Whoami
</a>
{/*
<ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
Expand Down Expand Up @@ -116,20 +114,19 @@ function Example() {
</Popover.Panel>
</Transition>
*/}
</Popover>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Features
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
Skills
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Marketplace
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
Projects
</a>
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Company
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
Interests
</a>
</Popover.Group>
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
Log in <span aria-hidden="true">&rarr;</span>
<a href="#" className="text-lg font-semibold leading-6 text-gray-900">
Socials <span aria-hidden="true">&rarr;</span>
</a>
</div>
</nav>
Expand All @@ -138,7 +135,7 @@ function Example() {
<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">
<div className="flex items-center justify-between">
<a href="#" className="-m-1.5 p-1.5">
<span className="text-black dark:text-white">StarOne</span>
<span className="text-black font-semibold dark:text-white">StarOne</span>
</a>
<button
type="button"
Expand All @@ -149,12 +146,12 @@ function Example() {
<XMarkIcon className="h-6 w-6 dark:text-white text-black" aria-hidden="true" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6">
<div className="mt-6 flow-root ">
<div className="-my-6 center divide-gray-500/10">
<div className="space-y-2 text-center align-middle py-6">
<a
href="#"
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"
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"
>
Whoami
</a>{ /*
Expand Down Expand Up @@ -189,27 +186,27 @@ function Example() {
</Disclosure>*/}
<a
href="#"
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"
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"
>
Skills
</a>
<a
href="#"
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"
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"
>
Projects
</a>
<a
href="#"
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"
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"
>
Interests
</a>
</div>
<div className="py-6">
<a
href="#"
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"
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"
>
Socials
</a>
Expand All @@ -234,32 +231,24 @@ function Hero() {
},
{
text: "Prashanth",
className: "dark:text-yellow-200 text-cyan-600 font-light",
className: "dark:text-yellow-200 text-white",
},
];
return (
<>
<AuroraBackground className={"-z-10 " + poppins300.className}>
<motion.div
initial={{ opacity: 0.0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{
delay: 0.3,
duration: 0.8,
ease: "easeInOut",
}}
className="relative flex flex-col gap-4 items-center justify-center px-4"
<div className={"bg-[url('../../public/AIGenImage3.webp')] bg-cover bg-center " + poppins300.className}>
<div
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`}
>
<div className="text-4xl md:text-6xl dark:text-white text-center">
<div className="text-4xl md:text-6xl text-slate-100 text-center">
<TypewriterEffectSmooth words={words} />
<TypewriterEffectSmooth words={name} />
</div>
</motion.div>
</AuroraBackground>
</>
</div>
</div>
);
}


function Whoami() {
return (
<div className={"m-7 max md:mx-auto text-base " + poppins400.className}>
Expand All @@ -270,12 +259,13 @@ function Whoami() {
<li>FOSS Enthusiasist</li>
<li>Astrophile</li>
<li>Melophile</li>
<li></li>
</ul>
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.

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.
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.

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>
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>

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.
</div>);
Expand Down Expand Up @@ -309,7 +299,7 @@ function Projects() {
export default function Home() {
return (
<>
<Example />
<Nav />
<Hero />
<Whoami />
<br />
Expand Down
35 changes: 0 additions & 35 deletions src/components/ui/aurora-background.tsx
View file

This file was deleted.

104 changes: 0 additions & 104 deletions src/components/ui/lamp.tsx
View file

This file was deleted.

Loading

0 comments on commit 770b0a8

Please sign in to comment.