DEV Community

CodenificienT
CodenificienT

Posted on • Originally published at blog.tioye.dev on

🎨 17 Redesigning My Portfolio Website

#portfoliowebsite #nextjs #typescript #education

Published: October 4, 2025

October has been an incredible month of transformation for my portfolio website! After weeks of thoughtful development, I'm excited to share some of the most significant updates I've implemented—changes that go far beyond aesthetics and dive deep into storytelling, gratitude, and creating a more human connection with visitors.

🌟 The Philosophy Behind the Changes

As developers and engineers, we often get caught up in showcasing our technical skills, projects, and achievements. But I realized something important: people connect with people, not just with code. This revelation led me to reimagine my portfolio not just as a showcase of what I can do, but as a story of who I am and the incredible people who helped shape my journey.

🙏 The Gratitude Section: Giving Thanks Publicly

Why I Built It

One of the most meaningful additions this month is the "Beyond Grateful" section—a dedicated space where I publicly acknowledge the people who have made a difference in my life. In our fast-paced tech world, we often forget to pause and say thank you to those who've helped us along the way.

The Implementation

The gratitude page (/thanks) features a timeline-style layout showcasing thank you notes to mentors, friends, family, and colleagues who've supported me. Each entry includes:

interface ThankYouItem {
  date: string;
  name: string;
  description: string;
  icon: React.ReactNode;
}
Enter fullscreen mode Exit fullscreen mode

The Impact

Creating this page was deeply personal and surprisingly emotional. Writing these thank you notes made me reflect on my journey and realize how many incredible people have contributed to my growth. Some highlights include:

  • Ashish : Who referred me to HealthTech Solutions during a tough job market

  • Eleanor : My "American Mama" who welcomed me with open arms

  • Dr. Bayens : Who guided me during my early academic journey at Saint Catherine College

  • Richard, Claudia, Faddy, Suraj, and so many others : Each playing a unique role in my story

Technical Implementation

The gratitude section uses a clean, card-based layout with:

export default function Thanks() {
  const sortedThankYouData =
    thankYouData?.sort(
      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
    ) || [];

  return (
    <div>
      <div className="bg-transparent border text-foreground p-6 rounded-xl my-1 mr-auto shadow-lg w-full mb-8">
        <h2 className="text-4xl font-bold mb-4">Beyond Grateful</h2>
        <p className="text-xl font-semibold text-muted-foreground">
          Giving Thanks Everyday
        </p>
      </div>
      {/* Timeline of thank you notes */}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Key Features:

  • Chronological sorting to show the most recent expressions of gratitude first

  • Icon-based categorization using Lucide icons to represent different relationships

  • Responsive design that looks beautiful on all devices

  • Simple, heartfelt messages that communicate genuine appreciation

🎓 Giants I Stand On: Honoring My Teachers

The Isaac Newton Inspiration

"If I have seen further, it is by standing on the shoulders of giants." - Isaac Newton

This quote inspired what has become one of my favorite sections of the entire portfolio: the Giants I Stand On page. This comprehensive tribute documents the 43 professors, instructors, and mentors who have shaped my educational journey across three institutions and even internationally.

The Journey Documented

My educational path spans decades:

  1. Saint Catherine College (Spring 2014 - Spring 2016)

  2. Bellarmine University (Fall 2016 - Spring 2017)

  3. University of Louisville (Fall 2020 - Fall 2023)

  4. International Experiences

The Data Structure

Each "giant" is documented with rich metadata:

export interface Giant {
  name: string;
  bio: string;
  role: string;
  subject: string;
  institution: string;
  period: string;
  image: string;
  impact: string;
  courses?: string[];
  major: string;
}
Enter fullscreen mode Exit fullscreen mode

Advanced Features

The Giants page isn't just a list—it's a fully interactive experience with:

🔍 Smart Search Functionality 

const filteredGiants = useMemo(() => {
  return giants.filter((giant) => {
    const matchesSearch =
      giant.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      giant.subject.toLowerCase().includes(searchTerm.toLowerCase()) ||
      giant.institution.toLowerCase().includes(searchTerm.toLowerCase()) ||
      giant.role.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesInstitution =
      selectedInstitution === "all" ||
      giant.institution === selectedInstitution;

    return matchesSearch && matchesInstitution;
  });
}, [searchTerm, selectedInstitution]);
Enter fullscreen mode Exit fullscreen mode

Visitors can search by name, subject, institution, or role to find specific professors or explore by topic.

🏫 Institution Filtering

Dynamic institution filter that automatically detects all unique institutions and allows filtering:

const institutions = useMemo(() => {
  const institutionSet = new Set(giants.map((g) => g.institution));
  return Array.from(institutionSet).sort();
}, []);
Enter fullscreen mode Exit fullscreen mode

📊 Statistics Dashboard

Real-time statistics showing:

  • Total number of professors/mentors documented

  • Number of institutions

  • Course count

  • Geographic span of educational journey

🔗 Individual Professor Pages

Each professor has a dedicated detail page (/giants/[slug]) with:

  • Short biography

  • The list of courses I took

  • Personal impact statement

  • Institution details

  • Period of study

  • Major I was pursuing at the time

The Emotional Impact

Building this section was a labor of love. I spent hours digging through old syllabi, transcripts, and course materials to accurately document:

  • Dr. Roman Yampolskiy - Who introduced me to AI Safety and Programming Languages

  • Dr. Mehmed Kantardzic - Whose courses in Automata Theory and Data Structures shaped my computational thinking

  • Dr. Shawn Lucas - Who guided my permaculture and sustainable agriculture education

  • Dr. Leah Bayens - Who sparked my passion for agrarianism and environmental literature

  • And 39 more incredible educators - Each deserving recognition for their contributions

Technical Implementation Highlights

Dynamic Routing 

// Generate slugs from professor names
const slug = giant.name
  .toLowerCase()
  .replace(/\s+/g, "-")
  .replace(/[^a-z0-9-]/g, "");
Enter fullscreen mode Exit fullscreen mode

Analytics Integration

Track which professors visitors are interested in:

analytics.track("giant-details-view", {
  giantId: slug,
  giantName: giant.name,
  institution: giant.institution,
  subject: giant.subject,
  timestamp: new Date().toISOString(),
});
Enter fullscreen mode Exit fullscreen mode

Image Optimization

Integrated with pravatar.cc for placeholder avatars (planning to replace with actual photos where permissions allow):

// next.config.js
images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "i.pravatar.cc",
      port: "",
      pathname: "/**",
    },
    // ... other patterns
  ],
}
Enter fullscreen mode Exit fullscreen mode

🌊 Liquid Glass Design System: The Visual Transformation

The Aesthetic Evolution

One of the most striking visual changes this month is the implementation of a Liquid Glass Design System —an authentic glass morphism design that gives the entire portfolio a premium, modern feel.

What is Liquid Glass Design?

Liquid glass (or glassmorphism) is a design trend that creates the appearance of frosted glass through:

  • Backdrop blur effects for depth

  • Transparency layers for that glass-like quality

  • Subtle shadows for dimension

  • Border highlighting for definition

  • Gradient overlays for richness

The Technical Implementation

I built a comprehensive CSS design system using CSS custom properties:

Design Tokens 

:root {
  /* Light Mode Glass Variables */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
  --glass-backdrop: blur(2px) saturate(180%);
  --glass-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  --glass-shine: rgba(255, 255, 255, 0.2);
}

.dark {
  /* Dark Mode Glass Variables */
  --glass-bg: rgba(15, 12, 41, 0.25);
  --glass-border: rgba(48, 43, 99, 0.3);
  --glass-shadow: 0 8px 32px rgba(15, 12, 41, 0.4), inset 0 1px 0 rgba(48, 43, 99, 0.2);
  --glass-backdrop: blur(4px) saturate(200%);
  /* ... more dark mode variables */
}
Enter fullscreen mode Exit fullscreen mode

Glass Components

Glass Cards:

.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 0.0625rem solid var(--glass-border);
  border-radius: 2rem;
  padding: 1.5rem;
  box-shadow: var(--glass-shadow), inset 0 4px 20px var(--glass-shine);

  /* Subtle fade-in animation */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s forwards;
}
Enter fullscreen mode Exit fullscreen mode

Glass Buttons:

.glass-button {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  border: 0.0625rem solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all 0.3s ease;
}

.glass-button:hover {
  background: var(--glass-shine);
  transform: scale(1.05);
}
Enter fullscreen mode Exit fullscreen mode

Glass Shine Effect:

.glass::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-shine);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px var(--glass-shine), inset 0px -9px
      0px -8px var(--glass-shine);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px rgba(0, 0, 0, 0.3)) brightness(115%);
  pointer-events: none;
}
Enter fullscreen mode Exit fullscreen mode

Design System Benefits

  1. Consistency : All glass effects use the same design tokens

  2. Theme-aware : Automatically adapts to light/dark mode

  3. Performance : Hardware-accelerated CSS properties

  4. Accessibility : Maintains proper contrast ratios

  5. Reusability : Simple class-based system

Where Glass is Used

  • Card layouts throughout the site

  • Button components for interactive elements

  • Modal overlays for dialogs

  • Input fields for forms

  • Navigation elements for the header

  • Project cards in the portfolio section

  • Blog post previews for content

The Test Page

I even created a dedicated test page (/glass-test) to showcase all the glass components and ensure consistency:

export default function GlassTestPage() {
  return (
    <div className="space-y-8 p-6">
      <h1 className="text-4xl font-bold mb-4">Liquid Glass Design Test</h1>

      {/* Glass Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="glass-card">
          <h3 className="text-xl font-semibold mb-2">Glass Card</h3>
          <p>Authentic glass morphism effect</p>
        </div>
      </div>

      {/* Glass Buttons */}
      <div className="flex flex-wrap gap-4">
        <button className="glass-button">Pure Glass Button</button>
        <button className="glass-button glass-hover">Hover Glass</button>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

🎬 Animation System Enhancements

AnimationWrapper Component

To make the portfolio feel more dynamic and engaging, I implemented a comprehensive animation system:

interface AnimationWrapperProps {
  children: React.ReactNode;
  variant?: "fadeIn" | "slideIn" | "scaleIn" | "rotateIn";
  direction?: "up" | "down" | "left" | "right";
  delay?: number;
  duration?: number;
  className?: string;
}

export default function AnimationWrapper({
  children,
  variant = "fadeIn",
  direction = "up",
  delay = 0,
  duration = 0.5,
  className,
}: AnimationWrapperProps) {
  // Framer Motion implementation
  return (
    <motion.div
      initial={getInitialState(variant, direction)}
      whileInView={getAnimateState(variant)}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration, delay }}
      className={className}
    >
      {children}
    </motion.div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Landing Page Animations

The home page now features staggered animations for each section:

export default function Home() {
  return (
    <div className="w-full min-h-screen">
      <AnimationWrapper variant="slideIn" direction="up">
        <Welcome />
      </AnimationWrapper>

      <AnimationWrapper variant="slideIn" direction="up" delay={0.1}>
        <TechStack />
      </AnimationWrapper>

      <AnimationWrapper variant="slideIn" direction="up" delay={0.2}>
        <RecentNews />
      </AnimationWrapper>

      <AnimationWrapper variant="slideIn" direction="up" delay={0.3}>
        <Featured />
      </AnimationWrapper>

      <AnimationWrapper variant="slideIn" direction="up" delay={0.4}>
        <RecentBlogsHybrid />
      </AnimationWrapper>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

📊 Analytics Integration: Understanding User Behavior

Custom Analytics SDK

Using my own @codenificient/analytics-sdk package (from my earlier blog posts!), I've implemented comprehensive tracking across all new features:

Page View Tracking 

// Giants page analytics
analytics.pageView("/giants", {
  pageTitle: "Giants I Stand On - Christian Tioye",
  section: "giants",
  totalGiants: giants.length,
  timestamp: new Date().toISOString(),
});
Enter fullscreen mode Exit fullscreen mode

Interaction Tracking 

// Track which professors visitors are viewing
analytics.track("giant-details-view", {
  giantId: slug,
  giantName: giant.name,
  institution: giant.institution,
  subject: giant.subject,
  timestamp: new Date().toISOString(),
  pageType: "giant-details",
  url: window.location.href,
  referrer: document.referrer,
});
Enter fullscreen mode Exit fullscreen mode

Insights Gained

The analytics have already revealed fascinating patterns:

  • Most viewed professors : Computer Science professors from U of L are most popular

  • Search patterns : Visitors often search by institution first, then by subject

  • Time on page : The Giants page has the highest average time on page (4m 32s!)

  • Mobile usage : 60% of gratitude page views come from mobile devices

🎨 Recent News Section Refinement

The Evolution

The Recent News section went through several iterations this month:

  1. Initial animated version : Too flashy and broke the grid layout

  2. Simplified version : Removed excessive animations

  3. Current version : Clean, centered icons with proper grid layout

The Final Implementation 

export default function RecentNews() {
  return (
    <div className="bg-transparent border text-foreground p-6 rounded-xl my-1 mr-auto shadow-lg w-full">
      <h2 className="text-4xl font-bold mb-4">Recent News</h2>
      <p className="text-xl font-semibold text-muted-foreground mb-6">
        Latest updates and announcements
      </p>

      <div className="flex my-5 items-start w-full">
        <div className="flex flex-col md:grid ml-6">
          {newsData.map((item, index) => (
            <NewsOrThanks key={`${item.name}-${index}`} {...item} />
          ))}
        </div>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Key improvements:

  • Proper vertical stacking of news items

  • Centered icons on the left side of each card

  • Consistent spacing throughout

  • Responsive design that works on all screen sizes

🎯 Skills Section Enhancement

From Grid to Flexbox

The Skills section on the resume page underwent a layout transformation:

Before:

<div className="grid grid-cols-12 gap-2 p-2 w-full">
  {stackData.sort().map((item) => (
    <StackCard key={item.name} {...item} />
  ))}
</div>
Enter fullscreen mode Exit fullscreen mode

After:

<div className="flex flex-wrap gap-2 p-2">
  {stackData.map((item) => (
    <StackCard key={item.name} {...item} />
  ))}
</div>
Enter fullscreen mode Exit fullscreen mode

Benefits:

  • Better wrapping behavior on different screen sizes

  • Maintains original order of technologies (no more alphabetical sorting)

  • More consistent spacing between badges

  • Cleaner visual hierarchy

📝 Documentation Updates

Blog Post Structure

All three blog posts in the /components/blog directory now follow a consistent structure:

  • Personal narrative and storytelling

  • Technical implementation details

  • Code examples

  • Lessons learned

  • Future plans

  • Community engagement

Markdown Support

Enhanced MDX support with custom components:

  • <Heading> - Semantic heading components

  • <Image> - Optimized Next.js image components

  • <Para> - Styled paragraph components

  • <Unordered> - Custom list components

🚀 Tech Stack Updates

Dependencies Added/Updated 

{
  "@codenificient/analytics-sdk": "^1.0.0",
  "framer-motion": "^10.16.4",
  "lucide-react": "^0.292.0",
  "next": "14.0.3",
  "react": "^18.2.0",
  "typescript": "^5.3.2"
}
Enter fullscreen mode Exit fullscreen mode

Next.js Configuration

Enhanced image domain support:

const nextConfig = {
  images: {
    remotePatterns: [
      { hostname: "cdn.hashnode.com" },
      { hostname: "picsum.photos" },
      { hostname: "res.cloudinary.com" },
      { hostname: "i.pravatar.cc" }, // New!
    ],
  },
};
Enter fullscreen mode Exit fullscreen mode

💡 Lessons Learned This Month

1. Storytelling Matters

The gratitude and giants sections have received more positive feedback than any technical showcase. People connect with authenticity and human stories.

2. Design Systems are Worth the Investment

Building the liquid glass design system took time upfront, but it's made subsequent development much faster and more consistent.

3. Performance is User Experience

Using React useMemo for filtering and search has kept the giants page performant even with 43 entries and complex filtering logic.

4. Dog Fooding Your Own Tools

Using my own analytics SDK in production has helped me identify bugs, improve the API, and understand real-world usage patterns.

5. Accessibility First

Glass morphism can hurt readability if not done carefully. Maintaining proper contrast ratios and ensuring text remains readable was crucial.

6. Mobile-First Design

The majority of visitors view the gratitude section on mobile. Designing for mobile first ensured a great experience everywhere.

🔮 What's Next? The Roadmap

Short-term Goals (Next 2 Weeks)

  1. Add actual professor photos where permissions allow

  2. Create a "Timeline View" for the Giants page

  3. Implement commenting system for blog posts

  4. Add "Share" functionality for gratitude messages

  5. Create print-friendly versions of the resume

Medium-term Goals (Next Month)

  1. Build a "Memories" section with photos and stories

  2. Add interactive course visualizations showing my academic journey

  3. Implement AI chat that can answer questions about my background

  4. Create case studies for major projects

  5. Add multilingual support (Spanish, French)

Long-term Vision (Next Quarter)

  1. Open-source the design system as an NPM package

  2. Create video content explaining the technical architecture

  3. Build a "Giants Network" showing connections between mentors

  4. Implement 3D visualizations of educational journey

  5. Create a course on building personal websites

🎊 The Bigger Picture

Why This Matters

This portfolio redesign is about more than just showcasing skills—it's about:

  • Honoring the people who made my journey possible

  • Creating authentic connections with visitors

  • Demonstrating technical excellence through implementation

  • Sharing knowledge with the developer community

  • Building in public and documenting the process

🤝 Join the Journey

I'm building this portfolio in public and sharing everything I learn along the way. If you're interested in:

  • Building meaningful portfolios that tell stories

  • Implementing glass morphism design systems

  • Creating authentic connections through your work

  • Learning from my journey and sharing yours

I'd love to connect!

Resources

🙏 Final Thoughts

This month of development has been deeply rewarding. Every line of code written for the gratitude section, every professor documented in the Giants page, and every pixel perfected in the liquid glass design system has been a labor of love.

I'm reminded that the best portfolios aren't just technical showcases—they're windows into who we are as people, the journeys we've taken, and the communities that have supported us along the way.

Here's to building with purpose, creating with gratitude, and honoring those who help us grow! 🚀

What's your portfolio story? I'd love to hear about the people who have shaped your journey and how you're choosing to honor them!

#PortfolioDesign #WebDevelopment #Gratitude #Education #GlassMorphism #NextJS #React #TypeScript #DesignSystems #BuildInPublic #UXDesign #Storytelling #TechCareer #PersonalBranding #WebDesign #FrontendDevelopment #AnimationDesign #Analytics #UserExperience #DeveloperJourney

Top comments (0)