Скачать или смотреть Firebase AI Studio بدون ما أكتب كود وفي 5 خطوات بس بنيت البورتفوليو بتاعي كامل بإستخدام الـ

🔥 كل الأدوات والخطوات اللي استخدمتها في الفيديو لبناء بورتفوليو بدون كود! 👇

🧠 روابط وأدوات هتفيدك وانت بتبني البورتفوليو بتاعك:
----------------------------------------------------------------
🎥 فيديوهات مهمة:
شرح ليه ما استخدمتش Flutter Web:
   • Flutter Web vs HTML, CSS & JS: Performance...  

الفرق بين Web App و Website في أقل من دقيقة:
   • Flutter Google Expert Says don't use Flutt...  
----------------------------------------------------------------
🎨 اختيار الألوان:
موقع لاختيار الـ Color Palette:
https://coolors.co
----------------------------------------------------------------
💻 الـ Vibe Code (Prompt المستخدم في Firebase Studio):

Create a fully responsive personal portfolio website using Next.js.
The website should include smooth animations, support for both light and dark themes, and be optimized for performance.
Use the following dark theme color palette:

Primary: `#اللون اللي أخترته`
Background: `# `
Secondary: `#`
Accent: `#`
Highlight: `#`

📄 Website Sections:

1. Home – Hero section with name, role (Flutter Developer), short introduction, and a CTA.
2. About – Overview of background, experience, and Flutter development journey.
3. Projects – A filterable gallery of Flutter projects. Each item should include:
Title, description, tech stack tags
Embed GIF or video preview
GitHub and live demo links
4. Skills – Display technical skills in categories (Frontend, Backend, Tools).
5. Testimonials – Carousel or cards of quotes from colleagues or clients.
6. Contact – Links to email, LinkedIn, and GitHub.
7. Footer – Copyright + social media icons.
8. Downloadable CV Section – Button to download a PDF CV.

🌐 Features to Include:

Light/Dark theme toggle with animation
Animations on scroll using AOS or similar
Smooth transitions and responsiveness for all devices

----------------------------------------------------------------
📦 Prompt مخصص لتعديل كل بيانات الموقع من ملف واحد في Firebase Studio:

I am a beginner in Next.js. I need to change all the data of this portfolio from one global file in the lib folder.

----------------------------------------------------------------
🔧 متطلبات أساسية:
قبل ما تبدأ، تأكد إنك مثبت الأدوات دي على جهازك:

✅ Node.js:
https://nodejs.org/en

✅ Git:
https://git-scm.com/downloads

----------------------------------------------------------------
🚀 نشر الموقع على Firebase Hosting:
الموضوع أسهل مما تتخيل بفضل Firebase Hosting. كل اللي هتعمله هو:
1. عدّل في ملف next.config.ts وحط:
output: 'export'

2. شغّل الأمر:
npm run build

3. ثبّت أدوات Firebase:
npm install -g firebase-tools

4. فعّل Firebase Hosting (لو أول مرة):
firebase init hosting

واختار المشروع من Firebase وحدد مجلد out أو .next حسب النوع.
5. وأخيرًا انشر الموقع:
firebase deploy
----------------------------------------------------------------
🌍 أدوات إضافية ممكن تفيدك:

🧪 لمعاينة شكل الموقع على مختلف الأجهزة:
https://www.responsinator.com

📸 لمعاينة الموقع كصورة أو فيديو Mockup:
https://previewed.app

🚀 جرب البورتفوليو بنفسك!
لو عايز تشوف الشكل النهائي للبورتفوليو اللي عملته، تقدر تزور الرابط ده:

🔗 https://abdallh-mostafa-portfolio.web...

❤️ لو عجبك الشرح:
متنساش تعمل 👍 Like للفيديو
واشترك في القناة وفعل الجرس 🔔 علشان توصلك فيديوهات عن Flutter، Next.js، والذكاء الاصطناعي أول بأول!

وسيبلي رأيك أو أي سؤال في الكومنتات ✍️👇
وصلى الله وسلم على محمد وعلأله أجمعين


00:00 Portfolio الشكل النهائي للـ
01:30 هنعرف الفديو هيمشي اذاي
01:55 مقدمة لابد منها
04:35 Vibe Coding معني الـ
05:16 Flutter Web لية مش
07:50 Color Palette أختيار الـ
08:40 Prompt يكتب الـ chat GPT هنخلي
09:15 Firebase Studio
30:46 VS Code & GitHub
39:09 Run npm to build out the Folder
40:12 Create a Firebase project
41:20 Install and set up Firebase services
44:09 Firebase deploy
45:35 Push code to GitHub and fix the error
50:28 Build and deploy again to Firebase
51:54 النتيجة النهائيه