المقدمة

هاد الدليل مش نظري.

كل خطوة فيه طبّقتها فعلياً وأنا ببني بورتفوليو باستخدام الـ AI — من الفكرة، لتجهيز البرومبت، لحد ما طلع موقع كامل بصفحات وتأثيرات واحترافية.

الفكرة الأساسية اللي بدي توصلك:

إنت مش لازم تصمّم من الصفر ولا تفتح Figma. الـ AI Agent بيبنيلك 80% من الشغل، وإنت بتفصّل الـ 20% الأهم — اللي هو إنت: مشاريعك، شغلك، وهويتك.

خلينا نمشي خطوة خطوة 👇

الخطوة 1 — اختَر ثيم/موقع عجبك كمرجع

قبل ما تكتب أي إشي للـ AI، لازم يكون عندك مرجع بصري.

  • دوّر على موقع بورتفوليو أو موقع شركة تصميمه عاجبك.

  • مش شرط يكون بورتفوليو — ممكن يكون موقع منتج (زي Linear أو Vercel) وعجبك ستايله.

  • المهم يكون عندك صورة واضحة بذهنك: "بدي شكل زي هيك".

💡 ليش هالخطوة مهمة؟
الـ AI بيعطيك نتيجة أفضل بكتير لما يكون عنده مرجع، بدل ما تقوله "اعملي موقع حلو" وتترك كل إشي مفتوح.

الخطوة 2 — خلي الـ AI يجهّزلك البرومبت الاحترافي

هون الحركة الذكية:

بدل ما تكتب البرومبت بنفسك، خلي الـ AI يكتبه.

روح على أي AI model (أنا استخدمت ChatGPT)، وقوله بالمعنى:

"هاد موقع/ثيم عجبني [أرفق الرابط أو صورة]. جهّزلي برومبت احترافي مفصّل أعطيه لـ AI Agent ليبنيلي بورتفوليو بنفس المستوى والستايل."

الـ AI رح يطلّعلك برومبت مرتّب وطويل يغطّي: الستايل، الألوان، الـ sections، الـ animations، والـ stack.

⚠️ ملاحظة: البرومبت اللي بيطلع منيح، بس اقرأه وعدّل عليه حسب حالتك — لا تاخذه أعمى. (البرومبت الكامل اللي أنا استخدمته موجود بآخر الدليل جاهز تنسخه).

الخطوة 3 — اختَر الـ AI Agent وأعطيه البرومبت

هلق معك البرومبت. بدك AI Agent يبنيلك الموقع فعلياً.

في خيارات كتير — أنا استخدمت Codex من ChatGPT.

  • افتح الـ Agent.

  • الصق البرومبت الكامل.

  • اضغط Enter وخليه يشتغل.

رح تشوفه:

  1. يحلّل البرومبت ويفهم إنك بدك بورتفوليو.

  2. يبدأ يبني الصفحات والـ sections.

  3. يولّد الصور اللي محتاجها بنفسه (نقطة حلوة كتير).

🗣️ من تجربتي: نتيجة Codex بموضوع توليد الصور عجبتني أكثر من Gemini لما جرّبتهم بمشروع سابق. جرّب الاثنين وشوف مين بيناسبك.

الخطوة 4 — استنى وشوف النتيجة

بعد ما يخلّص، رح يطلع معك موقع:

  • صفحات متعددة

  • سكرول وتأثيرات (animations)

  • شكل نظيف واحترافي

  • كل section مشتغل بعناية

هاي خطوة أولية ممتازة — عندك الآن هيكل موقع كامل بدون ما تكتب سطر تصميم واحد.

بس هون ما خلصنا. لسا في الجزء الأهم 👇

الخطوة 5 — فصّل الموقع عليك إنت (الجزء الأهم)

الموقع لحد هون هيكل عام. عشان يصير بورتفوليوك إنت، لازم تغذّيه بداتا حقيقية.

ارجع للـ AI Agent وأعطيه:

  • معلومات عنك — مين إنت، شو بتشتغل، تخصّصك.

  • مشاريعك — روابط، صور، وصف كل مشروع (المشكلة → الحل → النتيجة).

  • صورك — صورة شخصية احترافية، screenshots للمشاريع.

  • شهاداتك وخبرتك — أي إشي بيبني ثقة.

وخليه يفصّل كل section على الداتا الحقيقية تبعتك.

🎯 القاعدة الذهبية:
الـ AI بيعمل الشكل. إنت بتعمل المحتوى الصادق. البورتفوليو اللي بيجيبلك عميل هو اللي فيه شغلك الحقيقي، مش الفورمة الفاضية.

خلاصة سريعة (Checklist)

  • [ ] اختَر ثيم/موقع مرجعي عجبك

  • [ ] خلي الـ AI يكتبلك البرومبت (وعدّل عليه)

  • [ ] أعطِ البرومبت لـ AI Agent (Codex / أو غيره)

  • [ ] راجع النتيجة الأولية

  • [ ] فصّل الموقع على مشاريعك وداتاك الحقيقية

  • [ ] راجع، عدّل، وانشره

🔑 البرومبت الكامل (انسخه واستخدمه)

هاد البرومبت اللي استخدمته فعلياً. الصقه بالـ AI Agent وعدّل قسم CONTENT باسمك وتخصّصك.

You are an award-winning Senior Product Designer, Creative Director, UX Architect, and Principal Full Stack Engineer.

Your task is NOT to create a normal portfolio.

Your task is to create a premium personal brand website that looks like it belongs to a senior engineer working at companies like Vercel, Linear, Stripe, Framer, OpenAI or Apple.

The portfolio must feel expensive, minimal, cinematic and extremely polished.

====================================================
GOAL
====================================================

Build a world-class portfolio website for a Full Stack Software Engineer.

The website should immediately communicate:
• Trust
• Technical excellence
• Premium quality
• Attention to detail
• Strong engineering mindset

Visitors should think:
"This developer builds production-grade software."
NOT
"This is another template portfolio."

====================================================
DESIGN STYLE
====================================================

Mix inspiration from: Linear, Vercel, Stripe, Framer, Apple, Raycast, Resend, Clerk, Supabase, Dub.co

The design language should be: Minimal, Elegant, Large spacing, Beautiful typography, Smooth motion, Modern gradients, Premium cards, Subtle glass effects, Soft shadows, Micro interactions, Professional animations, Dark mode first.

Every section should have purpose. Never use generic portfolio layouts.

====================================================
COLOR SYSTEM
====================================================

Background #050816
Surface    #0F172A
Cards      #111827
Primary    #7C3AED
Secondary  #3B82F6
Accent     #06B6D4
Text       White
Muted text #94A3B8

====================================================
TYPOGRAPHY
====================================================

Headings: Space Grotesk
Body: Inter
Large headlines, perfect hierarchy, comfortable reading.

====================================================
STACK
====================================================

Next.js latest, TypeScript, TailwindCSS, Framer Motion, GSAP where appropriate, Lenis Smooth Scroll, React Icons, Shadcn UI, Lucide Icons, next/image.
SEO optimized, Metadata, Structured Data, OG Images, Dynamic Sitemap, Robots.
Responsive, Performance optimized, Accessibility optimized, Lazy loading, Server Components whenever possible.

====================================================
ANIMATION
====================================================

Extremely polished: Page reveal, Fade, Blur, Scale, Parallax, Magnetic buttons, Cursor interactions, Hover depth, Scroll progress, Animated gradients, Text reveal, Cards reveal, Number counters, Floating objects, Section transitions.
Everything should feel alive. No excessive animation. Smooth and premium.

====================================================
WEBSITE STRUCTURE
====================================================

1. Hero — Large introduction, professional headline, animated background, availability badge, location, CTA buttons (Resume, Contact, Github, LinkedIn)
2. Featured Projects — Large showcase: Image, Description, Problem, Solution, Architecture, Technologies, Role, Challenges, Results, Live Demo, GitHub, Case Study
3. Engineering Skills — Interactive visualization: Backend, Frontend, DevOps, Databases, Cloud, AI, Architecture, Performance, Security
4. Experience Timeline — Companies, Freelance, Achievements
5. Tech Stack — Animated logos, interactive cards
6. Services — Web Applications, SaaS, Dashboards, APIs, Admin Panels, AI Integrations, Automation, Consulting
7. Testimonials — Premium cards
8. Blog — Technical writing
9. Open Source — GitHub contributions, statistics, repositories
10. Contact — Beautiful form, social links, availability, timezone

====================================================
PROJECT CARDS
====================================================

Every project should include: Overview, Business Goal, Problem, Solution, Architecture, Features, Tech Stack, Screenshots, Results, Performance, Lessons Learned.

====================================================
CONTENT
====================================================

Engineer Name: Alsaeyd Alakhras
Title: Senior Full Stack Engineer
Specialization: Laravel, Vue.js, Next.js, PHP, TypeScript, Node.js, MySQL, REST APIs, AI Integration, System Architecture, Dashboard Development, Business Automation
Mission: Building scalable digital products that solve real business problems through clean architecture and thoughtful engineering.

====================================================
SPECIAL SECTIONS
====================================================

Interactive command palette, Keyboard shortcuts, Live Github activity, Tech radar, Current focus, Now page, Terminal section, Code snippets, Statistics (Years experience, Projects completed, Happy clients, Countries worked with).

====================================================
PREMIUM DETAILS
====================================================

Noise texture, Animated grid, Glow effects, Floating gradients, Animated borders, Glassmorphism, Gradient text, Animated buttons, Background blobs, 3D depth, Mouse tracking, Subtle particles.

====================================================
SEO
====================================================

Perfect SEO, Schema.org, OpenGraph, Twitter Cards, Canonical, Metadata, JSON-LD. Lighthouse 100 target.

====================================================
MOBILE
====================================================

Design mobile-first. Do NOT simply stack desktop sections. Create a dedicated mobile experience.

====================================================
QUALITY
====================================================

Do not generate placeholder content. Do not generate lorem ipsum. Do not use generic portfolio sections.
Everything should feel handcrafted. Every spacing, animation and typography choice should look intentional.
The final website should be portfolio-award quality and look significantly better than common portfolio templates.
Generate production-ready code with a scalable folder architecture and reusable components.

جهّزت هالدليل من تجربة فعلية. إذا طبّقته وطلع معك إشي حلو — ابعتلي، بحب أشوف شغلك 🤍
— Alsaeyd · @alsaeyd.tech