Merge pull request #6 from grillinr/card-heigt

Small updates

Author: grillinr

index.html

@@ -5,8 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       name="description"
-      content="Nathan Grilliot portfolio, projects, and technical writing."
+      content="Computer Science student at the University of Cincinnati (2026) building practical tools across web, data, and systems."
     />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://nathangrilliot.com" />
+    <meta property="og:title" content="Nathan Grilliot | Portfolio" />
+    <meta
+      property="og:description"
+      content="Computer Science student at the University of Cincinnati (2026) building practical tools across web, data, and systems."
+    />
+    <meta property="og:image" content="/preview.png" />
+    <meta property="og:image:alt" content="Preview of Nathan Grilliot portfolio" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://nathangrilliot.com" />
+    <meta name="twitter:title" content="Nathan Grilliot | Portfolio" />
+    <meta
+      name="twitter:description"
+      content="Computer Science student at the University of Cincinnati (2026) building practical tools across web, data, and systems."
+    />
+    <meta name="twitter:image" content="/preview.png" />
+    <link rel="canonical" href="https://nathangrilliot.com" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

public/preview.png

@@ -4,6 +4,7 @@ import { SiteShell } from "@/components/layout/site-shell";
 import { AboutPage } from "@/pages/about-page";
 import { BlogIndexPage } from "@/pages/blog-index-page";
 import { BlogPostPage } from "@/pages/blog-post-page";
+import { ContactPage } from "@/pages/contact-page";
 import { HomePage } from "@/pages/home-page";
 import { ProjectDetailPage } from "@/pages/project-detail-page";
 import { ProjectsPage } from "@/pages/projects-page";
@@ -38,6 +39,7 @@ function App() {
           <Route path="resume" element={<ResumePage />} />
           <Route path="posts" element={<BlogIndexPage />} />
           <Route path="posts/:slug" element={<BlogPostPage />} />
+          <Route path="contact" element={<ContactPage />} />
         </Route>
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

src/App.tsx

@@ -23,7 +23,7 @@ export function ContentOverviewCard({
   const reduceMotion = useReducedMotion();
 
   return (
-    <Card className={cn("group", className)}>
+    <Card className={cn("group flex h-full flex-col", className)}>
       <p className="m-0 text-xs uppercase tracking-wide text-[var(--fg-dim)]">
         {formatDate(entry.date)}
       </p>
@@ -38,7 +38,7 @@ export function ContentOverviewCard({
       </div>
       <Link
         to={href}
-        className="link-accent mt-5 inline-flex items-center gap-1 text-sm text-[var(--aqua)]"
+        className="link-accent mt-auto inline-flex items-center gap-1 pt-5 text-sm text-[var(--aqua)]"
       >
         {ctaLabel}
         <motion.span

src/components/content/content-overview-card.tsx

@@ -14,7 +14,10 @@ export function Navbar() {
   return (
     <header className="site-nav relative">
       <div className="container flex h-16 items-center justify-between gap-6">
-        <Link to="/" className="font-['Space_Grotesk','IBM_Plex_Sans',sans-serif] text-lg font-semibold">
+        <Link
+          to="/"
+          className="nav-brand font-['Space_Grotesk','IBM_Plex_Sans',sans-serif] text-lg font-semibold"
+        >
           {profile.name}
         </Link>
 

src/components/layout/navbar.tsx

@@ -67,7 +67,7 @@ export function SkillsGrid() {
     <MotionStagger className="grid gap-4 md:grid-cols-3">
       {skillGroups.map((group) => (
         <MotionStaggerItem key={group.label}>
-          <Card className="h-full">
+          <Card className="skill-card relative z-0 h-full hover:z-30 focus-within:z-30">
             <h3 className="m-0 font-['Space_Grotesk','IBM_Plex_Sans',sans-serif] text-lg">
               {group.label}
             </h3>
@@ -78,7 +78,12 @@ export function SkillsGrid() {
                   categoryColorMap[group.label] ?? "text-[var(--fg-dim)]";
 
                 return (
-                  <li key={value} aria-label={value} title={value}>
+                  <li
+                    key={value}
+                    aria-label={value}
+                    className="skill-tooltip"
+                    data-tooltip={value}
+                  >
                     {Icon ? (
                       <motion.span
                         className="inline-flex"

src/components/sections/skills-grid.tsx

@@ -0,0 +1,40 @@
+---
+title: Redesigning my portfolio
+date: 2026-03-08
+summary: My philosophy and process for redoing my personal website.
+tags:
+  - Writing
+  - Workflow
+  - Portfolio
+type: post
+featured: true
+draft: false
+---
+
+Until recently, UI and UX design felt like more of a chore than a creative outlet. I had a personal website that was functional but lacked personality and engagement. It was time for a change.
+This semester, I have been working with a team of UI and UX designers, creating a design system used across my company. At first
+I thought, "Design is optional for a software engineer, right?" But as I dove into the world of design, I realized how much it can enhance the user experience and make users really want to use a product.
+While working on other projects ([NQ](#/projects/nq), [DevBits](#/projects/devbits)), I got to a point where the backend was mature enough to support a more dynamic and engaging frontend. While there is always room for optimization, if the
+frontend is not engaging, users won't stick around long enough to experience the benefits of a well-designed backend. So I decided to redesign my portfolio to be more engaging and reflective of my personality and work.
+
+## Goals
+
+- Make the site more engaging and visually appealing.
+- Add interactive elements to showcase my projects and skills.
+- Keep it easy to add new content and share what I'm working on.
+
+## Why MDX
+
+- I can write like normal Markdown, keeping it simple but still allowing for flexibility.
+- I still have the option to embed React components later.
+- The content stays version controlled and easy to review.
+
+## How I made it
+
+- React for the frontend, with a simple and clean design.
+- shadcn/ui for the design system, ensuring consistency and responsiveness.
+- MDX for content management, allowing me to write blog posts and project updates in a familiar way.
+- Gruvbox color scheme for a visually appealing and cohesive look that reflects the same colors I use for my IDEs and Hyprland setup.
+
+As the project grows, this site becomes a changelog of ideas, experiments, and outcomes. I can share what I want
+without relying on social media.

src/content/posts/first-blog-post.mdx

@@ -156,7 +156,7 @@ a {
 }
 
 .grain-overlay {
-  position: absolute;
+  position: fixed;
   inset: 0;
   pointer-events: none;
   opacity: 0.15;
@@ -277,6 +277,74 @@ a {
   opacity: 1;
 }
 
+.surface.skill-card {
+  overflow: visible;
+}
+
+.skill-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.skill-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 0.7rem);
+  transform: translate(-50%, 0.3rem);
+  padding: 0.28rem 0.55rem;
+  border: 1px solid var(--border);
+  border-radius: 0.45rem;
+  background: linear-gradient(135deg, var(--bg-soft), var(--bg-float));
+  box-shadow: 0 10px 18px var(--shadow-lift);
+  color: var(--fg-main);
+  font-size: 0.72rem;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--motion-fast) var(--motion-ease),
+    transform var(--motion-fast) var(--motion-ease);
+  transition-delay: 0ms;
+  z-index: 80;
+}
+
+.skill-tooltip::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 0.32rem);
+  width: 0.52rem;
+  height: 0.52rem;
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-float);
+  transform: translateX(-50%) rotate(45deg) scale(0.9);
+  opacity: 0;
+  transition:
+    opacity var(--motion-fast) var(--motion-ease),
+    transform var(--motion-fast) var(--motion-ease);
+  transition-delay: 0ms;
+  pointer-events: none;
+  z-index: 79;
+}
+
+.skill-tooltip:hover::after,
+.skill-tooltip:hover::before,
+.skill-tooltip:focus-within::after,
+.skill-tooltip:focus-within::before {
+  opacity: 1;
+  transform: translate(-50%, 0);
+  transition-delay: 200ms;
+}
+
+.skill-tooltip:hover::before,
+.skill-tooltip:focus-within::before {
+  transform: translateX(-50%) rotate(45deg) scale(1);
+}
+
 .site-nav {
   position: sticky;
   top: 0;
@@ -286,6 +354,31 @@ a {
   backdrop-filter: blur(10px);
 }
 
+.nav-brand {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.55rem;
+  border: 1px solid transparent;
+  border-radius: 0.6rem;
+  color: var(--fg-main);
+  transition:
+    color var(--motion-fast) var(--motion-ease),
+    border-color var(--motion-fast) var(--motion-ease),
+    background-color var(--motion-fast) var(--motion-ease),
+    box-shadow var(--motion-base) var(--motion-ease),
+    transform var(--motion-fast) var(--motion-ease);
+}
+
+.nav-brand:hover,
+.nav-brand:focus-visible {
+  color: var(--yellow);
+  border-color: var(--kicker-border);
+  background-color: var(--nav-link-active);
+  box-shadow: 0 8px 16px var(--shadow-soft);
+  transform: translateY(-1px);
+}
+
 .nav-link {
   position: relative;
 }

src/content/posts/portfolio-redesign.mdx

@@ -83,6 +83,7 @@ export const navigation = [
   { label: "Home", to: "/" },
   { label: "About", to: "/about" },
   { label: "Projects", to: "/projects" },
-  { label: "Resume", to: "/resume" },
   { label: "Posts", to: "/posts" },
+  { label: "Contact", to: "/contact" },
+  { label: "Resume", to: "/resume" },
 ];