Feat: Add better links to cards / blurred nav

rudyorre · Dec 31, 2023 · e477baa · e477baa
1 parent ea99126
commit e477baa
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mantine/hooks": "^7.3.2",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.4",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { UserNav } from '@/components/user-nav'
 import { Search } from '@/components/search'
 import { MainNav } from '@/components/main-nav'
 import { ModeToggle } from '@/components/mode-toggle'
+import Link from 'next/link'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -21,26 +22,28 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth">
       <body className={inter.className}>
           <ThemeProvider
             attribute="class"
             defaultTheme="system"
             enableSystem
             disableTransitionOnChange
-          >
-              <div className="border-b">
-                <div className="flex h-16 items-center px-4">
+          > 
+            <div className={`border-b fixed top-0 z-20 w-screen backdrop-filter backdrop-blur-lg bg-background/[0.7]`}>
+              <div className="flex h-16 items-center px-4">
+                <Link href="/" className="inline-flex">
                   <div className="font-extrabold">rudyorre</div>.com
-                  <MainNav className="mx-6" />
-                  <div className="ml-auto flex items-center space-x-4">
-                    <Search />
-                    <UserNav />
-                    <ModeToggle />
-                  </div>
+                </Link>
+                <MainNav className="mx-6" />
+                <div className="ml-auto flex items-center space-x-4">
+                  <Search />
+                  <UserNav />
+                  <ModeToggle />
                 </div>
               </div>
-              {children}
+            </div>
+            {children}
           </ThemeProvider>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,12 +10,14 @@ export default function Home() {
       <br />
       <Hero />
       <br />
+      <div id="experience" />
       rudyorre/<h1 className="text-6xl font-bold tracking-tight">Experience</h1>
       <br />
       <Experience />
       <br />
       <br />
       <br />
+      <div id="projects" />
       rudyorre/<h1 className="text-6xl font-bold tracking-tight">Projects</h1>
       <br />
       <Projects />

diff --git a/src/components/cards.tsx b/src/components/cards.tsx
@@ -2,10 +2,14 @@
 
 import { Button } from '@/components/ui/button';
 import React, { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
 import { useInView } from 'react-intersection-observer';
 import { cn } from '@/lib/utils';
 import styles from '@/components/styles/cards.module.css';
 import { Project as ProjectType } from '@/constants/projects';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
 interface CardProps {
     project: ProjectType;
@@ -122,12 +126,13 @@ return (
         <h3 className="text-lg font-bold">{project.title}</h3>
         <p className="text-sm">{project.description}</p>
         <div className="flex space-x-2 mt-4">
-            <Button className="block" variant="default">
-                Explore demo
-            </Button>
-            <Button className="block" variant="default">
-                View code
-            </Button>
+            <Link className="block group/link" href="/">
+                View code <FontAwesomeIcon icon={faGithub} className="transform transition-transform duration-300 ease-in-out group-hover/link:translate-x-1"/>
+            </Link>
+            <p>   </p>
+            <Link className="block group/link" href="/">
+                Explore demo <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="transform transition-transform duration-300 ease-in-out group-hover/link:translate-x-1" />
+            </Link>
         </div>
         </div>
         </div>

diff --git a/src/components/main-nav.tsx b/src/components/main-nav.tsx
@@ -11,12 +11,12 @@ export function MainNav({
       className={cn("flex items-center space-x-4 lg:space-x-6", className)}
       {...props}
     >
-      <Link
+      {/* <Link
         href="#overview"
         className="text-sm font-medium transition-colors hover:text-primary"
       >
         Overview
-      </Link>
+      </Link> */}
       <Link
         href="#experience"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
@@ -29,12 +29,12 @@ export function MainNav({
       >
         Projects
       </Link>
-      <Link
+      {/* <Link
         href="#more"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         More
-      </Link>
+      </Link> */}
     </nav>
   )
 }