Professional AI Prompt — Premium Developer Portfolio

Create a complete, production-quality, visually exceptional personal portfolio website for a professional Full-Stack Developer using only vanilla HTML, CSS, and JavaScript.

The finished website must look like it was designed and developed by an experienced product designer and senior frontend developer.

This is NOT a basic tutorial portfolio.

Do NOT create a generic AI-generated layout with repetitive cards, excessive gradients, random glowing effects, huge empty spaces, or unnecessary animations.

The final website should be realistic enough that a professional developer could replace the placeholder information with their own details and publish it immediately.

---

1. REQUIRED FILE STRUCTURE

Create exactly these three files:

index.html

style.css

script.js

Keep responsibilities separated:

• All HTML → index.html
• All CSS → style.css
• All JavaScript → script.js

The three files must work together immediately when placed in the same directory.

In index.html, correctly include:

style.css

and

script.js

Do not require installation, compilation, npm, package managers, build commands, or a development server.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• TypeScript
• npm
• Node packages
• GSAP
• external JavaScript libraries
• icon JavaScript libraries
• backend code
• databases
• APIs that require authentication
• build tools

The website must be a true static website.

If icons are needed, use lightweight inline SVG icons.

---

3. DESIGN QUALITY

Create a premium modern developer portfolio with a sophisticated dark visual identity.

The design should communicate:

• Professional
• Technical
• Confident
• Modern
• Minimal
• Premium
• Creative
• Trustworthy

Use a polished visual system rather than styling every section differently.

Suggested visual direction:

• Near-black / charcoal primary background
• Slightly lighter elevated surfaces
• Warm white primary text
• Muted gray secondary text
• One distinctive accent color
• Very subtle secondary accent where useful
• Thin low-contrast borders
• Soft shadows
• Carefully controlled gradients
• Large confident typography
• Generous but balanced whitespace

Use CSS variables for the design system.

For example, define variables for:

• Background
• Surface
• Elevated surface
• Primary text
• Secondary text
• Border
• Accent
• Accent hover
• Border radius
• Shadows
• Container width

Do not use excessive neon.

Do not put a gradient on every card.

Do not make everything glow.

The website should remain elegant after the visual effects are removed.

---

4. TYPOGRAPHY

Typography is extremely important.

Create strong hierarchy between:

• Display headings
• Section titles
• Body text
• Labels
• Metadata
• Buttons

Use responsive typography with CSS clamp() where appropriate.

The hero headline should be visually powerful without occupying the entire screen.

Keep paragraphs readable with sensible line lengths.

Use appropriate line-height and letter-spacing.

---

5. PAGE CONTAINER

Use a consistent centered content container.

The site should look excellent at large desktop widths without content stretching excessively.

Use responsive horizontal padding.

Maintain consistent spacing between sections.

---

6. NAVIGATION

Create a premium sticky navigation bar.

Desktop navigation should contain:

• Developer logo / initials
• Home
• About
• Skills
• Work
• Experience
• Contact

Add a visually distinct:

“Let’s Talk”

CTA.

The navbar should initially blend naturally into the page.

After scrolling, give it a slightly elevated appearance using:

• Background transparency
• Blur where supported
• Thin border
• Subtle shadow

Do not overdo glassmorphism.

Highlight the active section while scrolling.

---

7. MOBILE NAVIGATION

Create a polished mobile menu.

Requirements:

• Hamburger button
• Smooth open/close animation
• Proper ARIA attributes
• Close when a navigation link is selected
• Close when Escape is pressed
• Prevent awkward page overflow
• Large touch-friendly navigation items

Do not simply squeeze desktop navigation onto mobile.

---

8. HERO SECTION

The hero must be the strongest visual section.

Use an asymmetrical desktop composition.

Left side:

Small availability indicator:

“Available for selected projects”

Main headline:

“Building digital products that feel as good as they perform.”

Supporting text explaining that the developer builds thoughtful, fast, accessible web experiences.

Add two CTA buttons:

Primary: “Explore My Work”

Secondary: “Contact Me”

Add social links:

• GitHub
• LinkedIn
• Email

Right side:

Create a premium developer visual instead of simply displaying a circular profile image.

For example, create a layered developer workspace/profile composition containing:

• Portrait placeholder
• Small code window
• Technology badges
• Floating status card
• Experience indicator

Keep the composition elegant.

Do not make the floating elements excessive.

---

9. HERO MICRO-DETAILS

Add subtle visual details such as:

• Small grid pattern
• Soft radial glow
• Tiny decorative dots
• Code-inspired lines
• Very slow floating elements

These should support the composition rather than dominate it.

Respect:

prefers-reduced-motion

---

10. TRUST / QUICK STATS

Below the hero, create a compact credibility strip.

Include:

• 5+ Years Experience
• 40+ Projects Delivered
• 20+ Technologies
• Available Worldwide

Use realistic typography and separators.

Do not make this section look like a generic dashboard.

---

11. ABOUT SECTION

Create a strong About section.

Use a two-column desktop layout.

Include a section label:

“About Me”

Heading:

“I turn complex problems into simple digital experiences.”

Write realistic placeholder copy describing a full-stack developer who cares about:

• Product quality
• Performance
• Maintainable architecture
• User experience
• Accessibility

Include a few personal facts such as:

• Based in Southeast Asia
• Working globally
• Interested in SaaS and developer tools

Add a small visual or code-inspired element alongside the content.

---

12. TECHNOLOGY STACK

Create a professional technology section.

Do NOT use fake percentage skill bars.

Organize technologies into meaningful groups.

Frontend:

• HTML
• CSS
• JavaScript
• TypeScript

Backend:

• PHP
• Laravel
• Node.js
• REST APIs

Data:

• PostgreSQL
• MySQL
• Redis

Infrastructure:

• Docker
• Linux
• Git
• Cloudflare

Each technology can have a small inline SVG/icon-style mark.

Create refined interactive states.

Avoid turning every technology into a huge card.

---

13. FEATURED PROJECTS

This is one of the most important sections.

Section label:

“Selected Work”

Heading:

“Projects built to solve real problems.”

Create 6 realistic projects.

Examples:

1. SaaS Website Builder
2. Analytics Dashboard
3. Learning Management Platform
4. AI Productivity Workspace
5. E-Commerce Experience
6. Developer API Platform

Each project should contain:

• Large project image/mockup
• Project title
• Category
• Short problem statement
• Short solution description
• Technology tags
• Year
• Live Project button
• Case Study button

Make the first 1–2 projects visually larger than the others.

Avoid six identical cards.

Create an editorial project layout with visual rhythm.

---

14. PROJECT FILTERING

Add project filters:

• All
• SaaS
• Web Apps
• Platforms
• Experiments

Implement filtering with vanilla JavaScript.

Animate transitions subtly.

Maintain accessibility.

---

15. PROJECT IMAGE INTERACTION

Add restrained image interactions such as:

• Slight scale
• Subtle overlay
• Cursor movement effect on desktop
• Arrow movement

Do not make images aggressively zoom.

Disable inappropriate hover effects on touch devices.

---

16. EXPERIENCE

Create a professional career timeline.

Use 3–4 positions.

Example:

Senior Full-Stack Developer 2025 — Present

Full-Stack Developer 2023 — 2025

Frontend Developer 2021 — 2023

Each entry should include:

• Company placeholder
• Location / Remote
• Responsibilities
• Key achievement
• Technology list

The timeline must collapse cleanly on mobile.

---

17. SERVICES

Create a compact services section.

Services:

01 — Full-Stack Development

02 — SaaS Product Development

03 — API & Backend Development

04 — Performance Optimization

Each service should include a concise professional explanation.

Use a sophisticated list/grid rather than generic colorful cards.

---

18. DEVELOPMENT PROCESS

Create a section explaining how the developer works.

Steps:

01 Discover Understand the problem, users, and business requirements.

02 Plan Define architecture, technology, scope, and milestones.

03 Build Develop the product with clean, maintainable code.

04 Refine Test, optimize, improve accessibility, and polish UX.

05 Launch Deploy, monitor, and iterate.

Connect the steps visually on desktop.

Make them stack naturally on mobile.

---

19. TESTIMONIALS

Create 3 realistic testimonials.

Each should contain:

• Short quote
• Person name
• Position
• Company
• Avatar placeholder

Keep testimonials concise and believable.

Add a lightweight slider using vanilla JavaScript.

Support:

• Previous
• Next
• Keyboard navigation
• Touch-friendly controls

---

20. CONTACT SECTION

Make the contact section visually memorable.

Heading:

“Have an idea? Let’s build something useful.”

Include:

• Email
• Location
• Availability
• GitHub
• LinkedIn

Add a contact form with:

• Name
• Email
• Project Type
• Budget Range
• Message

The form is frontend-only.

Implement client-side validation.

Show useful inline validation messages.

After valid submission, show a demo success state explaining that the static demo does not actually send email.

Do not pretend the form has sent a real message.

---

21. FOOTER

Create a clean premium footer.

Include:

• Developer name/logo
• Short statement
• Navigation links
• GitHub
• LinkedIn
• Email
• Current year generated using JavaScript

Include a back-to-top control.

---

22. JAVASCRIPT INTERACTIONS

Implement all necessary interactions in script.js.

Include:

• Mobile navigation
• Sticky/scrolled navbar state
• Active navigation section
• Smooth scrolling
• Project filtering
• Scroll reveal
• Animated statistics
• Testimonial slider
• Contact form validation
• Back-to-top button
• Dynamic copyright year

Use IntersectionObserver where appropriate.

Avoid expensive scroll handlers.

Do not create animation loops that waste CPU.

---

23. SCROLL ANIMATIONS

Use subtle reveal animations.

Examples:

• Fade upward
• Slight horizontal reveal
• Staggered cards

Animations should be fast and professional.

Do NOT animate every individual text element.

Do NOT create long delays that make users wait for content.

Respect:

prefers-reduced-motion: reduce

When reduced motion is enabled, important content must remain immediately visible.

---

24. RESPONSIVE DESIGN

The website must be intentionally designed for:

• 320px phones
• 375px phones
• 430px phones
• Tablets
• Small laptops
• Standard desktops
• Large desktops

Do not design desktop first and simply shrink everything.

At smaller breakpoints:

• Convert multi-column layouts appropriately
• Stack content logically
• Reduce decorative effects
• Simplify the hero visual
• Keep project cards readable
• Keep navigation usable
• Adjust heading sizes
• Maintain comfortable spacing

No element may cause horizontal scrolling.

---

25. MOBILE QUALITY

Mobile should feel like a designed experience, not a fallback.

Ensure:

• Buttons are easy to tap
• Forms are easy to complete
• Text is readable
• Cards fit naturally
• Images maintain appropriate ratios
• Navigation works correctly
• No hover-dependent functionality
• No clipped text
• No overflowing tags
• No overlapping elements

---

26. ACCESSIBILITY

Use semantic HTML5 elements.

Use:

• header
• nav
• main
• section
• article
• footer

Ensure:

• Correct heading hierarchy
• Alt text
• Form labels
• Keyboard navigation
• Visible focus states
• Accessible buttons
• ARIA attributes where necessary
• Good color contrast

Never remove outlines without providing an accessible replacement.

---

27. SEO

Create professional SEO metadata.

Include:

• <title>
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card metadata
• Theme color

Use a logical heading structure with only one primary H1.

Add basic Person structured data using JSON-LD with clearly placeholder values.

---

28. PERFORMANCE

Keep the website lightweight.

Requirements:

• No unnecessary dependencies
• No huge scripts
• Lazy-load below-the-fold images
• Specify image dimensions/aspect ratios where possible
• Avoid layout shifts
• Use efficient CSS
• Use efficient DOM queries
• Avoid excessive animations
• Avoid unnecessary event listeners

---

29. IMAGE HANDLING

Use professional remote placeholder images when necessary.

Choose imagery appropriate for:

• Developer workspace
• Product dashboard
• SaaS projects
• Technology interfaces

Do not use random unrelated images.

Every image must have meaningful alt text.

Structure the code so image URLs can easily be replaced later.

If a remote image becomes unavailable, the layout should remain visually stable.

---

30. CSS QUALITY

Write organized CSS.

Suggested structure:

1. Variables
2. Reset
3. Base styles
4. Typography
5. Layout
6. Navigation
7. Hero
8. Individual sections
9. Components
10. Forms
11. Footer
12. Animations
13. Responsive breakpoints
14. Reduced-motion rules

Use modern CSS features appropriately:

• CSS Grid
• Flexbox
• clamp()
• min()
• max()
• aspect-ratio
• CSS custom properties

Avoid excessive !important.

---

31. JAVASCRIPT QUALITY

Use clean modern vanilla JavaScript.

Requirements:

• No global pollution where practical
• Reusable functions
• Clear naming
• Guard against missing elements
• No console errors
• No fake backend calls
• No unnecessary complexity

The website must still display its essential content if JavaScript fails.

---

32. CONTENT QUALITY

Do not fill the page with Lorem Ipsum.

Write realistic professional placeholder content.

The content should sound like an actual developer.

Avoid repetitive AI phrases such as:

• “innovative solutions”
• “cutting-edge technology”
• “passionate developer” repeated everywhere
• “transforming ideas into reality”

Use concise, believable professional language.

---

33. VISUAL CONSISTENCY

Maintain the same design language throughout the website.

Buttons, cards, typography, borders, spacing, shadows, and colors should feel like parts of one design system.

Do not make every section look like a separate template.

---

34. QUALITY CHECK BEFORE RETURNING CODE

Before returning the final answer, mentally review the implementation.

Verify:

• All navigation anchors point to real sections
• All three files reference each other correctly
• JavaScript selectors match HTML
• Project filters work
• Mobile navigation works
• Testimonial controls work
• Contact validation works
• No horizontal overflow
• No obvious broken layouts
• No missing closing tags
• No undefined JavaScript variables
• No framework dependencies
• No fake backend functionality
• Reduced-motion behavior works
• Mobile layout is intentional

Fix any issues you identify before returning the code.

---

35. FINAL OUTPUT FORMAT

Return the finished website as exactly three clearly separated code sections:

index.html

Complete HTML.

style.css

Complete CSS.

script.js

Complete JavaScript.

Do not omit sections with comments such as:

“rest of CSS here”

or:

“add remaining projects”

Everything must be complete.

Do not provide pseudo-code.

Do not provide partial implementations.

Do not require me to manually finish components.

The website should work immediately after copying the three files into a static website editor.

The final result must be polished enough to use as:

• A real professional portfolio
• A portfolio template
• A social-media website-building demonstration
• A screenshot-worthy showcase

Prioritize design quality, visual hierarchy, responsiveness, usability, accessibility, performance, and professional polish over adding unnecessary features.