On this page 7 sections
Most portfolios show case studies as a grid or a slider. It works, but it often feels flat. The CtrlAltImran Forem-style sidebar takes a different approach: a slim rail of project icons on the side of the page, where each one opens a small preview card on hover.
Here's why I like it, followed by the full source code.
1. A living portfolio, not a static list
Each icon is an entry point to a story. As visitors hover, they discover projects one after another without leaving the page they're on.
2. Minimal, but interactive
The rail is narrow and quiet, yet the hover feedback makes it feel alive. Previews only appear when needed: hover, reveal, read, move on. Interaction replaces clutter.
3. Room for personality
Every card combines a banner, an app icon, a name and a short description: a mini identity for each project. Change colours and fonts to match your brand, and very different projects still feel like part of one family.
4. Light and adaptive
It's self-contained, has no framework dependencies, works in light and dark mode, and opens cards instantly without page reloads.
5. Storytelling in one motion
The image shows, the text explains, the link goes deeper. Visitors grasp the range of your work at a glance, which builds trust quickly.
The source code
Drop this into a Custom HTML block or your theme. Update the items list with your own projects.
<!-- CtrlAltImran Forem-style Sidebar (Fixed & Working Version) -->
<style>
#ctrl-forem-rail {
all: initial;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
--rail-w: 56px;
--rail-bg: #ffffff;
--rail-border: #e7e8ea;
--icon-w: 40px;
--icon-r: 10px;
--icon-bg: #ffffff;
--icon-hover: #f2f4f7;
--icon-ring: #dbe3ea;
--scroll-thumb: #c7cdd4;
--scroll-track: #f1f3f5;
--card-w: 300px;
--card-bg: #ffffff;
--card-border: #e6e8eb;
--card-shadow: 0 10px 24px rgba(0, 0, 0, .12);
--text: #111;
--muted: #555;
--shade-color: rgba(0,0,0,0.08);
position: fixed;
inset: 0 auto 0 0;
z-index: 9900;
}
/* Dark mode */
#ctrl-forem-rail[data-scheme="dark"] {
--rail-bg: #262626;
--rail-border: #262626;
--icon-bg: #262626;
--icon-hover: #262626;
--icon-ring: #26303b;
--scroll-thumb: #737373;
--scroll-track: #0e1319;
--card-bg: #262626;
--card-border: #1f2832;
--card-shadow: 0 10px 28px rgba(0, 0, 0, .4);
--text: #e6e8ea;
--muted: #a6acb2;
--shade-color: rgba(255,255,255,0.1);
}
/* Layout */
#ctrl-forem-rail .rail {
width: var(--rail-w);
background: var(--rail-bg);
border-right: 1px solid var(--rail-border);
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
position: relative;
overflow: hidden;
}
#ctrl-forem-rail .rail-scroll {
flex: 1 1 auto;
width: 100%;
overflow-y: auto;
padding: 8px 0;
scrollbar-gutter: stable both-edges;
}
#ctrl-forem-rail .rail-scroll::-webkit-scrollbar { width: 4px }
#ctrl-forem-rail .rail-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px }
#ctrl-forem-rail .rail-scroll::-webkit-scrollbar-track { background: transparent }
#ctrl-forem-rail .rail:hover .rail-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb) }
#ctrl-forem-rail .rail:hover .rail-scroll::-webkit-scrollbar-track { background: var(--scroll-track) }
#ctrl-forem-rail .icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#ctrl-forem-rail .ico {
width: var(--icon-w);
height: var(--icon-w);
border-radius: var(--icon-r);
background: var(--icon-bg);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset, 0 1px 2px rgba(0, 0, 0, .04);
display: grid;
place-items: center;
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease;
}
#ctrl-forem-rail .ico:hover {
background: var(--icon-hover);
box-shadow: 0 0 0 1px var(--icon-ring) inset, 0 1px 2px rgba(0, 0, 0, .05);
}
#ctrl-forem-rail .ico img {
width: 80%;
height: 80%;
object-fit: contain;
border-radius: 6px;
display: block;
}
/* Top and Bottom Shading */
#ctrl-forem-rail .shade-top,
#ctrl-forem-rail .shade-bottom {
position: absolute;
left: 0;
width: 100%;
height: 28px;
pointer-events: none;
z-index: 10;
}
#ctrl-forem-rail .shade-top {
top: 0;
background: linear-gradient(to bottom, var(--shade-color), transparent);
}
#ctrl-forem-rail .shade-bottom {
bottom: 0;
background: linear-gradient(to top, var(--shade-color), transparent);
}
/* Hover card */
#ctrl-forem-rail .card {
position: fixed;
left: calc(var(--rail-w) - 1px);
top: 0;
width: var(--card-w);
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 14px;
box-shadow: var(--card-shadow);
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-50%) scale(.985);
transform-origin: left center;
transition: opacity .12s ease, transform .12s ease;
z-index: 9999;
color: var(--text);
}
#ctrl-forem-rail .card.show {
opacity: 1;
pointer-events: auto;
transform: translateY(-50%) scale(1);
}
#ctrl-forem-rail .banner {
width: 100%;
height: 150px;
overflow: hidden;
}
#ctrl-forem-rail .banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
#ctrl-forem-rail .app {
position: absolute;
left: 18px;
top: 96px;
width: 88px;
height: 88px;
border-radius: 18px;
overflow: hidden;
background: var(--icon-bg);
box-shadow: 0 6px 14px rgba(0, 0, 0, .28), 0 0 0 4px var(--card-bg);
}
#ctrl-forem-rail .app img { width: 100%; height: 100%; object-fit: cover; }
#ctrl-forem-rail .body { padding: 38px 18px 18px; }
#ctrl-forem-rail .title { margin: 0 0 10px; font-weight: 600; font-size: 22px; }
#ctrl-forem-rail .desc { margin: 12px 0 2px; font-size: 15px; color: var(--muted); line-height: 1.5; }
#ctrl-forem-rail + .ctrl-spacer { margin-left: var(--rail-w); }
</style>
<div id="ctrl-forem-rail">
<aside class="rail" role="navigation">
<div class="shade-top"></div>
<div class="rail-scroll">
<div class="icons" id="ctrl-icons"></div>
</div>
<div class="shade-bottom"></div>
</aside>
<div class="card" id="ctrl-card">
<div class="banner"><img id="ctrl-card-banner" alt=""></div>
<div class="app"><img id="ctrl-card-app" alt=""></div>
<div class="body">
<h3 class="title" id="ctrl-card-title">Community</h3>
<p class="desc" id="ctrl-card-desc">Short description goes here.</p>
</div>
</div>
</div>
<script>
(function(){
const ROOT = document.getElementById('ctrl-forem-rail');
const list = document.getElementById('ctrl-icons');
const card = document.getElementById('ctrl-card');
const title = document.getElementById('ctrl-card-title');
const desc = document.getElementById('ctrl-card-desc');
const banner = document.getElementById('ctrl-card-banner');
const app = document.getElementById('ctrl-card-app');
// Define fallback icons to prevent ReferenceError
const ICON = "https://pbs.twimg.com/profile_images/1737904327128489984/Zm_aHco5_400x400.jpg";
const BANNER = "https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-020254.webp";
const items = [
{
name:"Imam & Science",
desc:"I created Imam and Science's Website, an educational website that unites Islamic wisdom with modern science. It features AI-powered Q&A, dark-light mode, and a clean, student-friendly design for better learning.",
icon:ICON,
banner:BANNER,
link:"https://yoursite.com/working-on-writings" // <— updated
},
{
name:"Solora.ai",
desc:"I built Solora, an AI-powered healthcare marketing website that helps clinics automate bookings and fill schedules. The modern gradient design, clean layout, and strong CTAs make it both professional and conversion-focused.",
icon:"https://yoursite.com/wp-content/uploads/2025/06/Asset-5.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-023412.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Tenney Internal Medicine",
desc:"I created Tenny Internal Medicine, a clean and trustworthy medical website focused on patient experience. Its minimal design, bold typography, and clear CTAs make booking and navigation simple for every visitor.",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-024418.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Denali Funding Group",
desc:"I developed Denali Funding Group’s website to simplify mortgage services with a clean, trustworthy design. It highlights clarity, easy navigation, and strong CTAs, helping users explore homeownership with confidence.",
icon:"https://denalifundinggroup.com/wp-content/uploads/2025/01/5-1.svg",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-033143.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Fotros Hotel Karbala",
desc:"I designed Fotros Hotel Karbala, a smooth and elegant booking website for a 54-room hotel near the holy shrine. It features an easy reservation system, secure payments, and a peaceful visual experienc.",
icon:"https://fotroshotelkarbala.com/wp-content/uploads/2023/04/IMG_6533.png",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-033551.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Shia Online Academy",
desc:"Perfect website for the online learning academy.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-034022.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-034036.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"SL Endodontics",
desc:"I built SL Endodontics, a professional dental website for a specialist clinic. The design blends warmth and precision, showcasing expertise with a clean layout, patient trust focus, and modern presentation.",
icon:"https://yoursite.com/wp-content/uploads/2025/08/WhatsApp-Image-2025-08-20-at-1.45.49-PM.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-034155.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Go Strips",
desc:"I designed GoStrips, a bold and modern eCommerce site for oral dissolving peptides. The layout highlights product science, clean visuals, and smooth shopping flow, creating a strong, health-focused brand experience.",
icon:"https://gostrips.com/wp-content/uploads/2021/11/1000149822_imgupscaler.ai_General_4K.jpg-1-1-e1757768657872.png",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-035241.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Wrappin chicken",
desc:"Created fully Restuarant Management System with online tracking.",
icon:"https://s3-media0.fl.yelpcdn.com/bphoto/Z9zvNWA2IRrPdCLT07waqg/348s.jpg",
banner:"https://lh3.googleusercontent.com/gps-cs-s/AC9h4npYG5Bkh89j4ZkAa95IbKChzMvbb8F6kC-2y5ptNI5GTGNXqnzH9f8Zf8svniFfDRatquLesoaVzO_H6ci4eVDYfYD977Ruh_rlHbjdIlaZgZpzvJFNF1I22UpLdJbJxj459GU=s1360-w1360-h1020-rw",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Mir Amir Ali",
desc:"I created Mir Amir Ali’s personal portfolio website to showcase his IT expertise with a modern, professional design. It highlights his skills, experience, and certifications through a clean, tech-inspired layout.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-044504.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-043458.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Islamic Institute of America",
desc:"Fully Religious website with active prayers timings and other sections.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-044228.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-044215.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Revive Joint & Spine",
desc:"Responsive medical site for Joint and Spine treatments.",
icon:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMx3YplS5OZAq1OO6qS5qO96QmRxBPSzuxEg&s",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-045748.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Armstrong Sales Coaching",
desc:"I redesigned Armstrong Sales Coaching, a professional site helping businesses boost sales performance. The layout focuses on clarity, credibility, and user engagement, making training services easy to explore and book.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-044957.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-044251.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Amina Code This",
desc:"I created Amina Iqbal’s personal portfolio site with a minimalist and emotional design. It highlights her creative vision, smooth interactions, and modern layout that makes her brand feel personal and professional.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/pink-flower-icon-free-png.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-045524.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Injurease",
desc:"I built Injurease, a lead-generation website that connects accident victims with legal and medical help. The design focuses on trust, clarity, and fast conversions through a clean layout and high-performing form section.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-050940-1.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-050921.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Debug With Rahul",
desc:"I designed DebugWithRahul, a sleek personal portfolio for a mobile app developer. The dark UI, clean typography, and smooth navigation reflect a tech-focused personality while showcasing projects and skills with clarity.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-051212.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/06/WhatsApp-Image-2024-06-07-at-8.22.08-AM.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Akash Code This",
desc:"I built Akash Kumar’s developer portfolio with a futuristic, tech-inspired UI. It highlights his skills in Python, SQL, and React Native through a sleek dark theme and structured layout that feels both modern and professional.",
icon:"https://yoursite.com/wp-content/uploads/2025/08/WhatsApp-Image-2025-04-02-at-12.35.59-AM-scaled-1.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-051236.webp",
link:"https://yoursite.com/working-on-writings"
},
{
name:"Pulse Intech",
desc:"I designed Pulse InTech, a bold and energetic agency website that blends marketing and technology. The vibrant layout, strong typography, and clear CTAs make it perfect for attracting clients and showcasing digital expertis.",
icon:"https://yoursite.com/wp-content/uploads/2025/09/logo-2048x402-1.webp",
banner:"https://yoursite.com/wp-content/uploads/2025/09/Screenshot-2025-09-17-051717.webp",
link:"https://yoursite.com/working-on-writings"
}
];
// Build icon list dynamically
for (const it of items) {
const d = document.createElement('div');
d.className = 'ico';
d.innerHTML = `<img src="${it.icon}" alt="${it.name}">`;
d.dataset.name = it.name;
d.dataset.desc = it.desc;
d.dataset.banner = it.banner;
d.dataset.icon = it.icon;
list.appendChild(d);
}
let overIcon=false, overCard=false, current=null;
const clamp=(v,min,max)=>Math.max(min,Math.min(max,v));
function openCardFor(el){
current = el;
title.textContent = el.dataset.name || '';
desc.textContent = el.dataset.desc || '';
banner.src = el.dataset.banner || '';
app.src = el.dataset.icon || '';
card.classList.add('show');
positionToIcon(el);
}
function positionToIcon(el){
const r = el.getBoundingClientRect();
const ch = card.offsetHeight;
const center = r.top + r.height/2;
const safe = 12;
const top = clamp(center, safe + ch/2, window.innerHeight - safe - ch/2);
card.style.top = top + 'px';
}
function closeCard(){
card.classList.remove('show');
current=null;
}
list.addEventListener('mouseover', e=>{
const el = e.target.closest('.ico');
if(!el) return;
overIcon = true;
openCardFor(el);
});
list.addEventListener('mouseleave', ()=>{
overIcon = false;
setTimeout(()=>{ if(!overCard) closeCard(); }, 60);
});
card.addEventListener('mouseenter', ()=>{ overCard=true; });
card.addEventListener('mouseleave', ()=>{ overCard=false; if(!overIcon) closeCard(); });
// Sync with Elementor dark/light theme
function applySchemeAttr(){
const host = document.querySelector('.cs-offcanvas');
const scheme = host?.getAttribute('data-scheme');
ROOT.setAttribute('data-scheme', scheme === 'dark' ? 'dark' : 'light');
}
setTimeout(applySchemeAttr, 300);
const target = document.querySelector('.cs-offcanvas');
if(target){
const obs = new MutationObserver(list=>{
for(const m of list){
if(m.attributeName === 'data-scheme') applySchemeAttr();
}
});
obs.observe(target, {attributes:true});
}
})();
</script>
<div class="ctrl-spacer"></div>In short
This sidebar turns browsing your work into exploring it. It's a good fit for designers, agencies and developers who'd rather show their craft through a living interface than a static gallery.
Need something like this built?
I build custom WordPress plugins, websites and web apps. Tell me what you need.