Ali Riaz – Personal Academic Portfolio Website

Preview

Project Overview

aliriaz.online is the official personal academic website of Dr. Ali Riaz — Distinguished Professor at Illinois State University, nonresident senior fellow at the Atlantic Council, President of AIBS, and former Head of Bangladesh's Constitution Reform Commission. The Laravel-based platform serves as a comprehensive digital presence for his academic work, publishing books, research reports, academic papers, commentaries, interviews, videos, and honors. The site features a custom CMS admin panel for full content management and a dynamic homepage with a ticker, book carousel, and section-based content listing.

Key Features

• Dynamic hero section with profile, bio chips & CV download
• Scrolling ticker with academic titles & affiliations
• Books carousel with prev/next navigation & dot indicators
• Research reports section with category & year display
• Academic papers section with PDF download support
• Commentaries listing with author & date
• Interviews section with featured video slider & YouTube embed
• Videos section with YouTube thumbnail auto-generation
• Honors & awards section with video highlights
• About page with full biography
• Search functionality across all content
• Admin panel for all content management (homepage settings, posts, categories, site settings)
• CV file upload & management
• Responsive design (mobile, tablet, desktop)
• SEO-friendly slug-based routing for all content

Technical Approach

Built with Laravel as the full backend framework using Blade templating for the frontend. Developed a custom CMS with a homepage settings model ($hp) for managing all hero content, ticker items, chips, CV file, and hero image dynamically from the admin panel. Implemented a books carousel with pure vanilla JS (no library dependency) featuring smooth CSS transform-based sliding, dot indicators, and prev/next buttons. YouTube video IDs are auto-extracted via regex from embed or watch URLs to auto-generate thumbnails. Content sections (books, research, papers, commentaries, interviews, videos) are all driven by dynamic Eloquent queries. Frontend uses Google Fonts (DM Serif Display, Space Mono, Plus Jakarta Sans) with a fully custom CSS design system using CSS variables for consistent theming.

Challenges & Solutions

The main challenge was building a single homepage that elegantly presents 8+ distinct content types (books, research, papers, commentaries, interviews, videos, honors, featured posts) without feeling cluttered. Solved by designing a consistent section component pattern with sec-label, sec-title, and sec-see-all — giving each section visual identity while keeping the layout unified. The books carousel required a performant pure-JS implementation without any external library, with responsive breakpoints for 5-per-row on desktop down to 2-per-row on mobile. Auto-generating YouTube thumbnails from any URL format (embed, watch, or youtu.be) was handled with dual regex patterns to ensure reliability.

Outcome

Successfully delivered a polished, fast academic portfolio that centralizes Dr. Ali Riaz's entire body of work — 19 English books, 12 Bengali books, 37+ book chapters, 50+ peer-reviewed articles, commentaries, and media appearances — in one professionally designed platform accessible to researchers, journalists, and the general public worldwide.