Introduction

This guide isn't theory.

Every step here I actually did while building a portfolio using AI — from the idea, to crafting the prompt, all the way to a full site with pages, effects, and a professional feel.

The core idea I want you to take away:

You don't need to design from scratch or open Figma. The AI Agent builds ~80% of the work, and you handle the most important 20% — which is you: your projects, your work, your identity.

Let's go step by step 👇

Step 1 — Pick a theme/site you like as a reference

Before writing anything to the AI, you need a visual reference.

  • Find a portfolio or company site whose design you like.

  • It doesn't have to be a portfolio — it can be a product site (like Linear or Vercel) with a style you admire.

  • What matters is having a clear picture in mind: "I want something like this."

💡 Why this matters:
AI gives you a far better result when it has a reference, instead of telling it "make a nice site" and leaving everything open.

Step 2 — Let the AI write the professional prompt for you

Here's the smart move:

Instead of writing the prompt yourself, let the AI write it.

Go to any AI model (I used ChatGPT) and say something like:

"Here's a site/theme I like [attach the link or an image]. Write me a detailed, professional prompt I can give to an AI Agent to build a portfolio at the same level and style."

The AI will produce a long, well-structured prompt covering: style, colors, sections, animations, and stack.

⚠️ Note: The generated prompt is good, but read it and tweak it to fit your case — don't take it blindly. (The full prompt I used is at the end of this guide, ready to copy.)

Step 3 — Choose your AI Agent and give it the prompt

Now you have the prompt. You need an AI Agent to actually build the site.

There are many options — I used Codex from ChatGPT.

  • Open the Agent.

  • Paste the full prompt.

  • Hit Enter and let it work.

You'll watch it:

  1. Analyze the prompt and understand you want a portfolio.

  2. Start building the pages and sections.

  3. Generate the images it needs on its own (a really nice touch).

🗣️ From my experience: Codex's image generation impressed me more than Gemini when I tested them on a previous project. Try both and see which fits you.

Step 4 — Wait and review the result

Once it finishes, you'll get a site with:

  • Multiple pages

  • Scroll effects and animations

  • A clean, professional look

  • Every section built with care

This is an excellent starting point — you now have a full site structure without writing a single line of design.

But we're not done. The most important part is next 👇

Step 5 — Tailor the site to you (the most important part)

So far the site is a generic structure. To make it your portfolio, you need to feed it real data.

Go back to the AI Agent and give it:

  • Info about you — who you are, what you do, your specialization.

  • Your projects — links, images, a description of each (problem → solution → result).

  • Your images — a professional photo, project screenshots.

  • Your certificates and experience — anything that builds trust.

Then have it tailor each section around your real data.

🎯 The golden rule:
AI does the look. You do the honest content. The portfolio that lands you a client is the one with your real work in it — not an empty template.

Quick Checklist

  • [ ] Pick a reference theme/site you like

  • [ ] Let the AI write the prompt (then tweak it)

  • [ ] Give the prompt to an AI Agent (Codex / or others)

  • [ ] Review the initial result

  • [ ] Tailor the site with your real projects and data

  • [ ] Review, refine, and publish

🔑 The Full Prompt (copy and use it)

This is the exact prompt I used. Paste it into the AI Agent and edit the CONTENT section with your name and specialization.

(Same prompt as the Arabic version above — see the code block in the Arabic section, or copy it here:)

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.

I built this guide from real experience. If you apply it and make something cool — send it to me, I'd love to see your work 🤍
— Alsaeyd · @alsaeyd.tech