typescript

🎨 17 Redesigning My Portfolio Website

Christian Tioye

04 Oct 2025 — 11 min read

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;
}

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>
  );
}

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:

Saint Catherine College (Spring 2014 - Spring 2016)
- Associate of Arts in Business
- Bachelor of Arts in Farming & Ecological Agrarianism
- 22 incredible professors who introduced me to sustainable agriculture, business, and the liberal arts
Bellarmine University (Fall 2016 - Spring 2017)
- Bachelor of Arts in Environmental Studies
- 10 dedicated educators who deepened my understanding of environmental systems and ecology
University of Louisville (Fall 2020 - Fall 2023)
- Master of Science in Computer Science
- 10 exceptional professors who transformed me into a computer scientist and AI engineer
International Experiences
- Summer 2016 - Permaculture education in Australia with Robyn Francis at Djanbung Gardens
- Summer 2015 - Field work in Burkina Faso, West Africa

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;
}

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]);

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();
}, []);

📊 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, "");

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(),
});

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
  ],
}

🌊 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

![](https://ghost.afrotomation.com/content/images/2026/05/d3dfd371-1795-439d-8d1f-bf1ed976e99c-59aa5331.png align="center")

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 */
}

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;
}

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);
}

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;
}

Design System Benefits

Consistency: All glass effects use the same design tokens
Theme-aware: Automatically adapts to light/dark mode
Performance: Hardware-accelerated CSS properties
Accessibility: Maintains proper contrast ratios
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>
  );
}

🎬 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>
  );
}

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>
  );
}

📊 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(),
});

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,
});

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

The Evolution

The Recent News section went through several iterations this month:

Initial animated version: Too flashy and broke the grid layout
Simplified version: Removed excessive animations
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>
  );
}

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>

After:

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

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"
}

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!
    ],
  },
};

💡 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)

Add actual professor photos where permissions allow
Create a "Timeline View" for the Giants page
Implement commenting system for blog posts
Add "Share" functionality for gratitude messages
Create print-friendly versions of the resume

Medium-term Goals (Next Month)

Build a "Memories" section with photos and stories
Add interactive course visualizations showing my academic journey
Implement AI chat that can answer questions about my background
Create case studies for major projects
Add multilingual support (Spanish, French)

Long-term Vision (Next Quarter)

Open-source the design system as an NPM package
Create video content explaining the technical architecture
Build a "Giants Network" showing connections between mentors
Implement 3D visualizations of educational journey
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

View the Portfolio: https://tioye.dev
Explore the Giants: /giants
See My Gratitude: /thanks
GitHub Repository: github.com/codenificient/tioyedev2024
Follow My Journey: @codenificient

🙏 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