cleaner home page

abhishekg999 · Aug 30, 2024 · 43904cb · 43904cb
1 parent c07f1fe
commit 43904cb
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 26 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@mui/styled-engine-sc": "^6.0.0-rc.0",
     "@preact/signals": "^1.3.0",
     "install": "^0.13.0",
+    "lucide-preact": "^0.436.0",
     "preact": "^10.23.2",
     "preact-router": "^4.1.2",
     "styled-components": "^6.1.12"

diff --git a/src/components/Error.tsx b/src/components/Error.tsx
@@ -3,7 +3,7 @@ import { routerPage } from "../signals/RouterPageSignal";
 
 export function Error({ url }: RouterProps) {
     routerPage.value = "Error";
-    
+
     return (
         <section class="error w-full pt-10 pb-8 flex flex-col justify-center items-center container max-w-[600px] p-4 my-4 m-[0_auto]">
             <p>Oops that page does not exist. If you are seeing this now, its probably cause this site is still in development, check back later!</p>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ export function Footer() {
     return (
         <>
             <footer className="text-xs p-1 pt-4 text-center">
-                <p>© 2024 Abhishek Govindarasu | Work In Progress</p>
+                {/* <p>© 2024 Abhishek Govindarasu</p> */}
             </footer>
         </>
     );

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -1,22 +1,21 @@
 import { routerPage } from "../signals/RouterPageSignal";
+import { GithubIcon, LinkedinIcon, MailIcon } from 'lucide-preact';
 
-export function Home(_: any) {
-    routerPage.value = "Home";
 
-    const copyEmailToClipboard = () => {
-        navigator.clipboard.writeText("[email protected]");
-    };
+const ICON_SIZE = 34;
+
+export function Home() {
+    routerPage.value = "Home";
 
     return (
-        <main className="flex flex-col justify-center items-center">
+        <main className="flex flex-col justify-center items-center pb-12">
             <section className="w-full pt-10 pb-8 flex flex-col justify-center items-center container max-w-[600px] px-4">
-                <div className="container flex flex-col items-center justify-center space-y-4">
+                <div className="container flex flex-col items-center justify-center space-y-4 px-4">
                     <div className="text-center">
                         <h1 className="text-5xl font-bold tracking-tighter pt-6 text-white">
                             Hi, I'm Abhishek
                         </h1>
-
-                        <div className="text-gray-300 px-4 pt-2">
+                        <div className="text-gray-300 px-4 pt-2 text-sm md:text-base lg:text-lg mb-4">
                             I'm a Software Developer and Computer Science
                             student at UC San Diego. In my free time, I am a
                             Capture the Flag (CTF) player specializing in web
@@ -25,23 +24,15 @@ export function Home(_: any) {
                     </div>
                     <div
                         className="container space-y-4 flex flex-col items-center bg-[url(https://images.unsplash.com/photo-1706922926159-d32db3419657?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcwOTAxNzc4MQ&ixlib=rb-4.0.3&q=80&w=1080)] bg-[100%_auto] max-w-[60rem] max-h-[30rem] aspect-video rounded-2xl"
-                        alt="placeholder"
-                    ></div>
+                        alt="placeholder">
+                    </div>
                 </div>
             </section>
-                <hr className="w-5/6 max-w-[480px] my-12"></hr>
-
-            {/* Last thing of main page will be this */}
-            <section className="w-full pb-8 flex flex-col justify-center items-center container max-w-[600px] px-4">
-                <div className="mt-6">
-                    <a
-                        className="p-2 px-6 border-[1px] border-white rounded-md hover:bg-white hover:text-black transition-colors duration-300 ease-in-out"
-                        href="mailto:[email protected]"
-                        onClick={copyEmailToClipboard}
-                    >
-                        Contact Me
-                    </a>
-                </div>
+
+            <section className="flex justify-center space-x-8 py-4">
+                <a href="//github.com/abhishekg999" target="_blank" rel="noopener noreferrer" className="text-white hover:text-green-500"><GithubIcon size={ICON_SIZE} /></a>
+                <a href="//linkedin.com/in/abhishekgovindarasu" target="_blank" rel="noopener noreferrer" className="text-white hover:text-green-500"><LinkedinIcon size={ICON_SIZE} /></a>
+                <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" className="text-white hover:text-green-500"><MailIcon size={ICON_SIZE} /></a>
             </section>
         </main>
     );