Removed navbar temporarily, added PageButton

raphaeling · Oct 27, 2023 · 19d768a · 19d768a
1 parent 8fd8e72
commit 19d768a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/src/app/(pages)/layout.tsx b/src/app/(pages)/layout.tsx
@@ -1,5 +1,5 @@
 import Footer from '@/components/root/Footer';
-import NavBar from '@/components/root/NavBar';
+// import NavBar from '@/components/root/NavBar';
 import PageLogo from '@/components/root/PageLogo';
 import { Fragment } from 'react';
 
@@ -11,7 +11,7 @@ export default function Layout({
   return (
     <Fragment>
       <header className='relative'>
-        <NavBar />
+        {/* <NavBar /> */}
         <PageLogo className='w-16 pt-12 lg:pt-20 pl-12 md:px-24' />
       </header>
       <main className='justify-center px-12 md:px-24 pb-24 text-lg'>

diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
@@ -1,32 +1,29 @@
 import ExternalLink from '../root/ExternalLink';
 import FadeIn from '../root/FadeIn';
 import { FaGithub, FaLinkedin } from 'react-icons/fa';
+import PageHeading from '../root/PageHeading';
+import PageButton from '../root/PageButton';
 
 export default function Hero(): JSX.Element {
   return (
     <div className='max-w-2xl pt-64'>
-      <div className='font-display'>
-        <FadeIn>
-          <h1 className='text-4xl pb-2'>Hi, I’m Raphael Gatchalian.</h1>
-        </FadeIn>
-        <FadeIn order={1}>
-          <h2 className='flex text-2xl text-light font-thin pb-8'>
-            he/him/
-            <ExternalLink href='https://en.wiktionary.org/wiki/siya#Tagalog' className='hover:text-lighter'>
-              siya
+      <PageHeading title='Hi, I’m Raphael Gatchalian.'>
+        <h2 className='flex text-2xl text-light font-thin pb-8'>
+          he/him/
+          <ExternalLink href='https://en.wiktionary.org/wiki/siya#Tagalog' className='hover:text-lighter'>
+            siya
+          </ExternalLink>
+          &nbsp;•&nbsp;
+          <span className='flex space-x-3 my-auto'>
+            <ExternalLink href='https://www.linkedin.com/in/raphaelg09/' className='hover:text-lighter'>
+              <FaLinkedin />
             </ExternalLink>
-            &nbsp;•&nbsp;
-            <span className='flex space-x-3 my-auto'>
-              <ExternalLink href='https://www.linkedin.com/in/raphaelg09/' className='hover:text-lighter'>
-                <FaLinkedin />
-              </ExternalLink>
-              <ExternalLink href='https://github.com/raphaeling' className='hover:text-lighter'>
-                <FaGithub />
-              </ExternalLink>
-            </span>
-          </h2>
-        </FadeIn>
-      </div>
+            <ExternalLink href='https://github.com/raphaeling' className='hover:text-lighter'>
+              <FaGithub />
+            </ExternalLink>
+          </span>
+        </h2>
+      </PageHeading>
       <FadeIn order={2}>
         <div className='font-thin text-lg leading-6'>
           <p>
@@ -94,6 +91,7 @@ export default function Hero(): JSX.Element {
             students in tech at ACM at UCLA and hosted dev workshops and panels for high school students from underserved
             areas of Los Angeles at exploretech.la. */}
           </p>
+          <PageButton label='View my resume' href='/assets/resume.pdf' className='bg-light hover:bg-lighter text-white font-display text-darker font-bold py-2 px-4 mt-8' />
         </div>
       </FadeIn>
     </div>

diff --git a/src/components/root/PageButton.tsx b/src/components/root/PageButton.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link';
+
+export default function PageButton({
+  label,
+  href,
+  className,
+}: {
+  label: string,
+  href: string,
+  className: string,
+}
+) {
+  return (
+    <Link href={href}>
+      <button className={className}>
+        {label}
+      </button>
+    </Link>
+  );
+}