🌍 English ∙ 简体中文

Jihen Messaoud's Portfolio

A modern, feature-rich portfolio website showcasing my work as a Full-Stack Developer with expertise in AI-powered solutions and cloud architecture. Built on the excellent Corey Chiu Portfolio Template with extensive enhancements and customizations.

Features

Core Features

• 🎨 Beautifully designed UI using TailwindCSS, MagicUI, and Shadcn/UI
• 📱 Fully responsive layout (mobile, tablet, desktop)
• 🌓 Light/Dark Mode with theme persistence
• 🔍 SEO Friendly with meta tags and structured data
• 📊 Web Analytics (Google Analytics, OpenPanel Analytics, Plausible Analytics)
• 📈 Visitor Counter with daily tracking

Content & Showcase

• 💼 Work Experience & Education sections with side-by-side layout
• 🎓 Certifications showcase
• 🌐 LinkedIn Posts integration with gradient fade effects
• 🐍 GitHub Contribution Snake animation
• ☁️ Tech Icon Cloud with 30+ technologies
• 📝 Blog Section with MDX and Markdown support
• 📡 RSS Feed

Interactive Features

• 🤖 AI Chatbot - Personalized chatbot that appears on page load with smooth animations, realistic typing delays, and message sounds
• 💬 LinkedIn Activity Feed - Vertical marquee display of LinkedIn posts with smooth scrolling
• 🎯 Smooth Animations - Entrance animations, hover effects, and micro-interactions throughout
• 🔊 Message Sounds - Web Audio API-based notification sounds for chatbot interactions

Tech Stack

• Next.js
• TailwindCSS
• Shadcn/UI
• MagicUI
• Phosphor Icons

Demo

Visit my portfolio: jihenportfolio.com (or your deployed URL)

Original Template Demo: https://coreychiu.com

Customizations & Enhancements

This portfolio includes several custom enhancements beyond the original template:

AI Chatbot (src/components/shared/ChatBot.tsx)

• Personalized chatbot that appears on page load
• Extracts information from your CV/LaTeX file
• Smooth slide-up entrance animation with fade-in effects
• Realistic typing delays (1.5-2 seconds) with random variation
• Web Audio API-based message notification sounds
• Maintains state when closed/reopened with floating button
• Responsive design with dark mode support

LinkedIn Posts Integration

• Gradient Fade Effects (src/components/home/LinkedInMarqueeVertical.tsx)
  • Smooth gradient overlays at top and bottom of scrollable area
  • Theme-aware colors that blend with light/dark modes
  • Uses CSS variables for automatic theme adaptation
• Vertical Marquee Display - Continuous scrolling animation
• Grid Layout - Responsive grid for mobile devices

Footer Redesign (src/components/layout/Footer.tsx)

• Two-column layout with elements distributed left and right
• Responsive design that stacks on mobile
• Better visual hierarchy and spacing

Dark Mode Improvements

• Fixed LinkedIn post display in dark mode
• Proper contrast and readability
• Theme-aware gradient overlays

Configuration

• .env.local - environment variables
• src/config/siteConfig.ts - site config
• src/config/infoConfig.ts - personal info config
• src/config/*.ts - config for each section (activity, career, education, certifications, etc.)
• src/content/blog/**.mdx - blog posts
• public/github-contribution-snake/*.svg - github contribution snake svg file (generated by github action and updated every day)
• cv/ - CV files for chatbot data extraction

Run

pnpm install
pnpm dev

Deploy

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/iamcorey/coreychiu-portfolio-template coreychiu-portfolio-template

Then, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).