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

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 النتيجة النهائيه