Habib Ur Rehman Portfolio

1. Introduction

This document outlines the system requirements for creating a premium, modern, and highly professional personal portfolio website for Habib ur Rehman, a Meta Certified Digital Marketing Associate and Facebook/Meta Ads Specialist. The website aims to showcase Habib's expertise in digital marketing and attract freelance clients, agencies, and businesses seeking Facebook & Instagram advertising services.

2. System Overview

The portfolio website will be designed with a modern luxury theme, utilizing a dark and gold premium color palette. It will feature a clean, agency-style design with strong visual hierarchy and trust-building layout. The website will be fully responsive, SEO-friendly, and optimized for fast loading speeds.

3. Functional Requirements

As a Meta Ads Specialist, I want to:

• Showcase my expertise in Meta Ads, including Facebook & Instagram Ads, Lead Generation, Performance Marketing, Conversion Campaigns, E-commerce Advertising, Traffic Campaigns, Messaging Campaigns, Sales Funnel Optimization, Audience Research & Targeting, and Campaign Scaling.
• Display my best campaign results, including ROAS, CPC, reach, impressions, conversations, purchases, and other performance metrics.
• Highlight my experience in managing campaigns across various niches such as Visa & Immigration, Travel & Tourism, E-commerce, Electronics & Tech, Hospitality, Lead Generation, and Brand Engagement.
• Present the best ROAS achieved in my campaigns to demonstrate effectiveness.
• Include the number of link clicks achieved in various campaigns to show engagement.
• Highlight the lowest CPC achieved to demonstrate cost efficiency.
• List the niches covered in my advertising work to showcase versatility.
• Provide details on the total spend for campaigns to offer transparency.
• Showcase website conversions to highlight successful outcomes.

As a website visitor, I want to:

• View a Hero Section that introduces Habib ur Rehman with a personal profile picture.
• Learn about Habib's background and expertise in the About Me section.
• Explore Habib's Skills & Expertise in digital marketing.
• Display "2+ years" of experience in the Hero Section.
• Verify Habib's credentials through the Meta Certification section.
• Review detailed Campaign Results showcasing performance metrics.
• Read Case Studies that provide insights into successful campaigns.
• Understand the Niches Served by Habib in his advertising work.
• Read Testimonials from previous clients (placeholder).
• Easily contact Habib through a Contact Section.
• Be encouraged to take action through a Call-to-Action section.

As a website developer, I want to:

• Implement professional animations and smooth scrolling for an engaging user experience.
• Ensure the website is mobile responsive across all devices.
• Use only the images/screenshots provided by Habib, including his personal profile picture, and optimize them for fast loading.
• Create a professional gallery/case-study section using only provided campaign screenshots.
• Avoid using stock photos, AI-generated images, or random internet images.

4. User Personas

• Habib ur Rehman: The primary user, a Meta Certified Digital Marketing Associate and Facebook Ads Specialist, seeking to showcase his expertise and attract clients.
• Potential Clients: Businesses, agencies, and individuals looking for Facebook & Instagram advertising services.
• Website Visitors: General audience interested in learning about Habib's services and expertise.

5. Core User Flows

Habib ur Rehman

1. Upload personal profile picture and campaign screenshots.
2. Input detailed campaign results and case studies.
3. Update sections with personal information and expertise.
4. Ensure the Hero Section uses the provided personal profile picture.

Potential Clients

1. Visit the website and view the Hero Section.
2. Navigate through sections to learn about Habib's expertise and campaign results.
3. Use the Contact Section to reach out for services.

6. Visuals Colors and Theme

• Color Palette:
  • Primary: #0a0a0a (Deep Black)
  • Primary Light: #111111 (Slightly Lighter Black)
  • Secondary: #d4af37 (Gold)
  • Accent: #ffcc00 (Bright Yellow)
  • Highlight: #ff9900 (Orange)
  • Bg: #0a0a0a
  • Surface: rgba(17, 17, 17, 0.8)
  • Text: #ffffff (White)
  • Text Muted: #cccccc (Light Gray)
  • Border: rgba(212, 175, 55, 0.2)

7. Signature Design Concept

• Interactive Galaxy Map: The homepage will feature an interactive galaxy map where each star represents a different section of the portfolio. Users can click on stars to navigate to sections like Skills, Campaign Results, and Case Studies. The map will rotate and zoom with user interaction, creating an engaging and memorable experience. This will be implemented using @react-three/fiber and @react-three/drei for 3D effects.

8. Interaction Model & Motion Direction

• Parallax: The landing page will use a parallax interaction model, with layered depth via scroll. Decorative elements will translate at different speeds, while content scrolls naturally. This will create a visually rich first impression.

9. Non-Functional Requirements

• SEO-friendly structure.
• Fast loading speed.
• Fully responsive on mobile, tablet, and desktop.

10. Tech Stack

• Frontend: React.js
• Backend: Python + FastAPI
• Database: MySQL with Alembic migrations

11. Assumptions and Constraints

• Only images/screenshots provided by Habib will be used.
• The website must maintain a professional and premium appearance.
• The design must be suitable for attracting high-profile clients and agencies.

12. Glossary

• ROAS: Return on Ad Spend
• CPC: Cost Per Click
• CTR: Click-Through Rate
• SEO: Search Engine Optimization
• Meta Ads: Advertising on Facebook and Instagram platforms.