| Item | Code / Library | Key Config |
|------|----------------|-----------|
| Carousel | Swiper.js (modern, touch‑friendly) | slidesPerView: 1.2 on mobile, 3 on desktop; loop:true; autoplay:delay:5000 |
| Filtering | Vanilla JS + data‑attributes (data-category) | On button click: hide all slides, then swiper.update() after applying filter |
| Lightbox | GLightbox or Micromodal | Opens high‑res image + project description |
| Lazy Loading | Native loading="lazy" + IntersectionObserver for background images | Reduces initial payload |
| CMS Integration | Contentful / Strapi / WordPress REST API | Store title, slug, category, imageUrl, excerpt, detailUrl |
| SEO | Each project card gets <h3> title, <a rel="noopener" href="detailUrl"> and alt attribute on images | Use schema.org CreativeWork JSON‑LD for each project if you want rich snippets |
Sample HTML (simplified)
<section id="featured-projects" class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<div class="flex space-x-4 mb-6">
<button class="filter-btn active" data-filter="*">All</button>
<button class="filter-btn" data-filter="design">Design</button>
<button class="filter-btn" data-filter="development">Development</button>
<button class="filter-btn" data-filter="photography">Photography</button>
</div>
<div class="swiper featured-swiper">
<div class="swiper-wrapper">
<!-- Example slide – repeat for each project -->
<article class="swiper-slide" data-category="design">
<figure class="relative overflow-hidden rounded-lg shadow-lg">
<img src="thumb1.webp"
alt="Modern UI for fintech app"
class="w-full h-48 object-cover transition-transform duration-300 hover:scale-105"
loading="lazy">
<figcaption class="p-4 bg-white">
<h3 class="text-lg font-semibold">FinTech Dashboard</h3>
<p class="text-sm text-gray-600">Design</p>
<a href="/projects/fintech-dashboard"
class="mt-2 inline-block text-primary hover:underline">View Details →</a>
</figcaption>
</figure>
</article>
<!-- …more slides -->
</div>
<!-- Navigation arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
Sample JS
// Initialize Swiper
const swiper = new Swiper('.featured-swiper',
slidesPerView: 1.2,
spaceBetween: 16,
loop: true,
navigation:
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
,
breakpoints:
640: slidesPerView: 1.5 ,
1024: slidesPerView: 3 ,
,
);
// Filtering
document.querySelectorAll('.filter-btn').forEach(btn =>
btn.addEventListener('click', () =>
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.dataset.filter;
document.querySelectorAll('.swiper-slide').forEach(slide => slide.dataset.category === filter;
slide.style.display = match ? '' : 'none';
);
swiper.update(); // re‑calculate widths after hiding/showing
);
);
+--------------------------------------------------------------+
| [All] [Design] [Development] [Photography] |
+--------------------------------------------------------------+
| ◀︎ [Project #1] [Project #2] [Project #3] ▶︎ |
| ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ |
| │ IMAGE │ │ IMAGE │ │ IMAGE │ |
| │ (lazy) │ │ (lazy) │ │ (lazy) │ |
| │ Title │ │ Title │ │ Title │ |
| │ Category │ │ Category │ │ Category │ |
| │ → Details │ │ → Details │ │ → Details │ |
| └───────────────┘ └───────────────┘ └───────────────┘ |
+--------------------------------------------------------------+
As a visitor, I want to quickly browse the most impressive work of AT Khairy, filter by category, and see a larger preview without leaving the page, so I can decide whether to explore deeper. www atkhairy com
| # | Feature | Why it matters | Core Components | Typical Tech Stack | |---|---------|----------------|-----------------|-------------------| | 1 | Responsive Hero Section | First impression & SEO | Full‑width background (image/video), headline, sub‑headline, primary CTA button, secondary CTA (scroll cue) | HTML5, CSS Grid/Flexbox, JavaScript (or a lightweight library like Alpine.js) | | 2 | Featured Projects / Portfolio Slider | Showcases expertise, builds credibility | Auto‑playing carousel, filter tabs (All / Design / Development / Photography …), lightbox preview, “View Details” links | Swiper.js / Flickity, lazy‑loaded images, optional CMS entries | | 3 | About / Bio Block | Humanizes the brand | Photo, short bio, timeline / milestones, downloadable resume/CV, social icons | Semantic HTML, CSS animation, optional JSON‑LD for structured data | | 4 | Services / Offerings Grid | Clearly communicates what you do | 3‑4 cards, icon + title + 1‑2‑sentence description, “Learn More” link to dedicated service page | CSS Grid, SVG icons, micro‑copy | | 5 | Latest Blog Posts / News Feed | Improves SEO, shows thought leadership | 3‑post preview cards, featured image, date, category tag, “Read More” button | WordPress/Strapi/Contentful API, RSS feed | | 6 | Testimonials Carousel | Social proof → higher conversion | Rotating quotes, client name + photo + company, star rating (optional) | Swiper.js, JSON data, optional schema.org Review markup | | 7 | Call‑to‑Action (CTA) Bar | Drives the primary conversion (contact, quote, sign‑up) | Sticky bottom bar or in‑page banner, concise copy, primary button, secondary link | CSS position: sticky, analytics event tracking | | 8 | Contact Form + Live Chat | Low‑friction way for prospects to reach you | Name, email, phone (optional), message, reCAPTCHA, success toast, email notification, optional CRM webhook | Formspree / Netlify Forms / custom PHP/Node endpoint, Intercom / Tawk.to widget | | 9 | SEO & Structured Data | Better organic visibility | Meta titles/descriptions, Open Graph / Twitter Card tags, JSON‑LD for Person, Organization, Breadcrumbs, FAQ | Next.js Head component or static HTML meta tags, schema.org | |10| Performance Optimizations | Faster load → better UX & SEO | Image compression (WebP), lazy loading, CSS critical path, HTTP/2, CDN, pre‑connect to Google Fonts | ImageOptim / Squoosh, Lighthouse audit, Cloudflare or Netlify CDN | |11| Analytics & Conversion Tracking | Data‑driven decisions | Google Analytics 4, Google Tag Manager, heat‑map (Hotjar), event tracking on CTA clicks | GA4, GTM, custom dataLayer pushes | |12| Accessibility (a11y) Compliance | Legal & inclusive | Keyboard navigation, ARIA roles, color contrast, alt text, skip‑to‑content link | axe DevTools, WAI‑ARIA guidelines | | Item | Code / Library | Key