إزاي تعمل بورتفوليو احترافي باستخدام ChatGPT خطوة بخطوة

════════════════════════════════════
🎯 PROJECT GOAL
════════════════════════════════════

Generate a complete, single-page, professional developer portfolio website that is:

• Visually perfect  
• Fully responsive across all devices  
• Built using HTML, CSS, and vanilla JavaScript only  

The final result must be clean, modern, and production-ready.


════════════════════════════════════
🧩 PART 1: AESTHETIC & TECHNICAL REQUIREMENTS
════════════════════════════════════

🔹 Visual Design
Implement a clean, minimalist, premium UI/UX design that clearly conveys professionalism and technical expertise.
The website must support both light and dark modes, with **dark mode as the default theme**.

🔹 Responsiveness
The layout must be 100% responsive and display perfectly on:
• Mobile phones  
• Tablets  
• Desktop screens  
❗ No horizontal scrolling is allowed.

🔹 Interactivity
Add smooth, subtle animations to enhance the modern feel, such as:
• Fade-in animations on scroll  
• Hover effects (e.g., project cards lifting slightly)

🔹 Typography
Use modern, highly readable sans-serif fonts, such as:
• Inter  
• Poppins  
• Or a similar Google Font pairing

🔹 Code Output
Provide the **full source code**, organized exactly as follows:

/index.html  
→ Main website structure (semantic HTML5)

/css/style.css  
→ All styling  
→ Use CSS Variables for the color palette

/js/script.js  
→ All interactivity  
→ Dark mode toggle  
→ Scroll-based animations  

Use **semantic HTML5 elements throughout**.


════════════════════════════════════
🧠 PART 2: CONTENT GENERATION & TONE
════════════════════════════════════

🎯 Task
Rewrite all placeholder information into **polished, professional, high-impact content** suitable for a **senior developer portfolio**.

🎙️ Tone Guidelines
• Concise  
• Confident  
• Achievement-focused  
• Professional  

🔹 Placeholder Information (to be rewritten)

Name:
[YOUR FULL NAME]

Title / Role:
[YOUR PRIMARY TITLE — e.g., Senior Full-Stack Developer]

Intro:
1–2 sentences summarizing your passion and main area of expertise.

About Me:
A detailed paragraph covering:
• Years of experience  
• Core philosophy  
• How you use technology to create impact  

Skills:
Categorize your core competencies, such as:
• Languages  
• Frameworks  
• Tools  

Example:
Python, React, AWS, Docker, Figma

Projects:
3–5 key projects, each with:
• Project title  
• Short description  
• Link placeholder  

Experience:
3–4 roles including:
• Company name  
• Role  
• Dates  
• 2–3 bullet points highlighting achievements  

Services:
List 3–4 professional services you offer.

Example:
• Full-Stack Development  
• Cloud Architecture  
• Technical Consulting  

Career Objective:
A concise, forward-looking statement describing your professional direction and desired impact.


════════════════════════════════════
🏗️ PART 3: REQUIRED WEBSITE STRUCTURE
════════════════════════════════════

The website must be a **single-page layout** with smooth internal anchor navigation.

Include the following sections:

🔹 Hero Section
• Large, prominent display of:
  - [YOUR NAME]
  - [YOUR TITLE]
• Polished Intro statement
• Call-to-Action buttons:
  - “View Projects”
  - “Contact Me”

🔹 About Me Section
• Polished About Me content
• Include a professional photo placeholder:
  

🔹 Skills Section
• Visually appealing skill display
• Use cards or icon grids
• Group skills by category

🔹 Projects Section
• Grid layout with 3–5 sleek project cards

🔹 Experience Section
• Vertical timeline or accordion layout
• Clear presentation of professional history

🔹 Services Section
• Card-based layout outlining professional services

🔹 Career Objective Section
• Prominently feature the Career Objective statement

🔹 Contact Section
• Clean contact form (HTML only — no backend required)
• Direct links to:
  - YouTube
  - LinkedIn
  - GitHub
  - Facebook

🔹 Footer
• Copyright notice
• Subtle link back to the Hero section
════════════════════════════════════