Devora — Professional Web Developer Portfolio Website

Create a complete, production-quality, visually exceptional web developer portfolio website called Devora using only vanilla HTML, CSS, and JavaScript.

The final website must look like a real portfolio for an experienced professional web developer, full-stack developer, or freelance software engineer.

This is NOT a beginner tutorial portfolio.

This is NOT a generic AI-generated developer template.

The final result should feel like a carefully designed professional product portfolio that could realistically be used for:

• Job applications
• Freelance work
• Client acquisition
• Personal branding
• Project showcases
• Technical credibility

The design should communicate:

• Professionalism
• Technical skill
• Modern web expertise
• Product thinking
• Clean engineering
• Confidence
• Reliability
• Creativity

Avoid:

• Excessive neon
• Fake hacker aesthetics
• Overdone gradients
• Huge glass cards everywhere
• Random floating blobs
• Repetitive project cards
• Too much animation
• Generic “Hello, I’m a developer” layouts with no personality

---

1. REQUIRED FILES

Create exactly:

• index.html
• style.css
• script.js

Keep all HTML in:

index.html

Keep all CSS in:

style.css

Keep all JavaScript in:

script.js

Correctly connect the files.

The website must work immediately when these three files are placed in the same directory.

Do not require:

• npm
• package managers
• build tools
• frameworks
• compilers
• backend services

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• Node packages
• external JavaScript libraries
• backend frameworks
• databases
• build tools

Use inline SVG icons where appropriate.

The project must remain a true static website.

---

3. PORTFOLIO IDENTITY

Portfolio name:

DEVORA

Personal identity:

Alex Rowan

Role:

Full-Stack Web Developer

Tagline:

I build fast, useful web products that are designed to last.

Use fictional/sample personal details that are easy to replace later.

The portfolio should feel suitable for someone working with:

• Laravel
• PHP
• JavaScript
• APIs
• PostgreSQL
• Docker
• Linux
• Modern frontend development

---

4. VISUAL DIRECTION

Create a sophisticated modern developer aesthetic.

Suggested palette:

• Deep charcoal
• Near-black
• Soft white
• Cool gray
• One electric blue or indigo accent
• One subtle secondary accent

Use dark mode as the primary visual direction.

The site should feel:

• Clean
• Sharp
• Technical
• Premium
• Calm
• Modern

Use:

• Thin borders
• Soft surfaces
• Crisp typography
• Strong spacing
• Subtle code-inspired details
• Controlled gradients
• Refined hover effects

Avoid:

• Matrix effects
• Excessive glow
• Rainbow gradients
• Heavy glassmorphism
• Huge rounded rectangles everywhere

---

5. TYPOGRAPHY

Use:

• Strong modern sans-serif for primary typography
• Optional monospace accents for technical labels, code, tags, and metadata

Do not make the whole website monospace.

Create hierarchy between:

• Hero headline
• Section labels
• Project titles
• Body copy
• Technology tags
• Statistics
• Buttons

Use responsive clamp() typography.

---

6. NAVIGATION

Create a refined sticky navigation.

Include:

• DEVORA logo
• Home
• About
• Skills
• Work
• Experience
• Services
• Contact

Add a distinct CTA:

Let’s Work Together

After scrolling, transition the navigation into a slightly elevated state with:

• Background opacity
• Thin border
• Subtle shadow
• Light blur if supported

---

7. MOBILE NAVIGATION

Create a polished mobile menu.

Requirements:

• Accessible hamburger button
• Smooth open/close
• Escape closes
• Link click closes
• Body scroll lock
• Proper ARIA state
• Large touch targets

Include:

Let’s Work Together

as a clear mobile CTA.

---

8. HERO SECTION

Create a strong asymmetrical hero.

Left side:

Small label:

FULL-STACK WEB DEVELOPER

Main headline:

Building web products that are fast, clear, and built for real use.

Supporting copy:

“I design and develop modern websites and web applications with a focus on performance, maintainability, and user experience.”

Primary CTA:

View My Work

Secondary CTA:

Contact Me

Add social links:

• GitHub
• LinkedIn
• Email

Add a small availability status:

Available for selected projects

---

9. HERO DEVELOPER VISUAL

On the right side, create a polished developer workspace composition using HTML and CSS.

Include:

• Code editor panel
• Small browser preview
• Technology badges
• Project status card
• Developer profile card

Do not rely on a generic portrait alone.

Example code snippet:

const developer = {
  role: "Full-Stack Developer",
  focus: ["Web Apps", "APIs", "SaaS"],
  status: "Available"
};

Keep the snippet decorative and safe.

---

10. QUICK STATS

Create a compact credibility section below the hero.

Use sample values:

5+ Years Experience

45+ Projects Built

18 Technologies Used

12 Long-Term Clients

Clearly treat them as demo/placeholder values.

Animate numbers subtly on scroll.

---

11. ABOUT SECTION

Create:

About Me

Heading:

I care about what happens after the website looks good.

Write realistic professional copy explaining that the developer focuses on:

• Clean architecture
• User experience
• Performance
• Maintainability
• Security-conscious development
• Clear communication

Include a short personal note:

“Most of my work sits between product thinking and engineering — understanding the problem, shaping the solution, and building it properly.”

Add small metadata:

Location: Southeast Asia

Work: Remote / Worldwide

Focus: Web Apps · SaaS · APIs

---

12. TECHNOLOGY STACK

Create:

Tech Stack

Group technologies.

Frontend

• HTML5
• CSS3
• JavaScript
• TypeScript
• Alpine.js

Backend

• PHP
• Laravel
• Node.js
• REST APIs

Database

• PostgreSQL
• MySQL
• Redis

Infrastructure

• Docker
• Linux
• Git
• Nginx
• Caddy
• Cloudflare

Tools

• VS Code
• GitHub
• Postman
• Figma

Do NOT use fake skill percentages.

Use compact visual tags or grouped rows.

---

13. FEATURED WORK

Create the most important section:

Selected Work

Heading:

Projects built around real problems.

Create 6 fictional projects.

---

14. PROJECT 1 — SITEFORGE

Title:

SiteForge

Category:

SaaS · Website Builder

Description:

“A browser-based platform for creating, editing, and publishing static websites with a fast developer-friendly workflow.”

Technologies:

• Laravel
• JavaScript
• PostgreSQL
• Docker
• Redis

Include:

• Large dashboard mockup
• Problem
• Solution
• Key features
• Live Demo
• Case Study

---

15. PROJECT 2 — CAMPUSFLOW

Title:

CampusFlow

Category:

Education Platform

Description:

“A student and administration platform for managing courses, schedules, assessments, and academic workflows.”

Technologies:

• Laravel
• PostgreSQL
• Livewire
• Redis

---

16. PROJECT 3 — METRICBASE

Title:

MetricBase

Category:

Analytics Dashboard

Description:

“A lightweight analytics platform designed to turn product activity into clear, actionable metrics.”

Technologies:

• JavaScript
• PHP
• PostgreSQL
• Chart UI built without external chart libraries where possible

---

17. PROJECT 4 — WORKGRID

Title:

WorkGrid

Category:

Team Productivity

Description:

“A focused team workspace combining projects, tasks, notes, and lightweight reporting.”

Technologies:

• Laravel
• JavaScript
• Redis
• PostgreSQL

---

18. PROJECT 5 — APILENS

Title:

APILens

Category:

Developer Tool

Description:

“A developer-focused API testing and monitoring interface designed around clarity and fast feedback.”

Technologies:

• JavaScript
• REST APIs
• PHP
• Docker

---

19. PROJECT 6 — STORELINE

Title:

Storeline

Category:

E-Commerce

Description:

“A responsive storefront experience with product filtering, checkout-ready UI, and optimized mobile browsing.”

Technologies:

• HTML
• CSS
• JavaScript
• PHP

---

20. PROJECT LAYOUT

Do NOT show all projects as identical small cards.

Use:

• One large featured project
• One split project
• Two side-by-side projects
• Another wide project
• One compact project

Create visual rhythm.

Each project should contain:

• Project image/mockup
• Title
• Category
• Short description
• Technology tags
• Year
• Demo CTA
• Case Study CTA

---

21. PROJECT FILTERING

Create filters:

• All
• SaaS
• Web Apps
• Developer Tools
• Platforms
• E-Commerce

Implement using vanilla JavaScript.

Use subtle transitions.

---

22. PROJECT QUICK DETAILS

Add a frontend-only quick-detail interaction.

Clicking:

Project Details

should open an accessible modal or panel containing:

• Project title
• Problem
• Solution
• Role
• Technologies
• Key features
• Result
• Demo/source placeholders

Requirements:

• Escape closes
• Outside click closes
• Keyboard accessible
• Background scroll lock

---

23. DEVELOPMENT PHILOSOPHY

Create:

How I Build

Heading:

Simple where possible. Structured where necessary.

Include 4 principles.

Product First

Understand what users actually need before choosing technology.

Maintainable Code

Build systems other developers can understand and extend.

Performance Matters

Treat speed as part of user experience.

Ship, Learn, Improve

Launch useful versions, gather feedback, and iterate.

Use a refined numbered layout.

---

24. EXPERIENCE TIMELINE

Create:

Experience

Use 3 professional fictional roles.

Senior Full-Stack Developer

2025 — Present

Responsibilities:

• Build SaaS applications
• Design backend architecture
• Develop APIs
• Improve performance
• Review code
• Support deployment

Full-Stack Developer

2023 — 2025

Responsibilities:

• Develop web applications
• Build internal tools
• Integrate third-party services
• Maintain databases
• Support production systems

Web Developer

2021 — 2023

Responsibilities:

• Build responsive websites
• Implement frontend interfaces
• Integrate APIs
• Maintain Linux hosting environments

Use fictional company names.

---

25. SERVICES

Create:

What I Can Help With

Services:

Web Application Development

Custom browser-based applications designed around business workflows.

SaaS Development

From MVP to production-ready subscription products.

Backend & API Development

Reliable APIs, authentication, data modeling, and business logic.

Frontend Development

Responsive interfaces with strong UX and performance.

Performance Optimization

Improve page speed, loading behavior, and application efficiency.

Technical Consulting

Architecture, deployment, debugging, and development planning.

Use a sophisticated list or grid.

---

26. DEVELOPMENT PROCESS

Create:

From idea to production.

Steps:

01 — Understand

Define problem, user, scope, and constraints.

02 — Plan

Choose architecture, data model, and development approach.

03 — Build

Develop features in small, testable pieces.

04 — Review

Test functionality, responsiveness, and edge cases.

05 — Launch

Deploy safely and monitor the result.

06 — Improve

Use real feedback to guide the next iteration.

Connect steps visually on desktop.

Stack on mobile.

---

27. CODE QUALITY SECTION

Create a visually distinct section:

Code should be easy to change.

Show a small clean code example.

Example:

final class PublishSite
{
    public function execute(Site $site): void
    {
        $this->validator->validate($site);
        $this->publisher->publish($site);
    }
}

This is decorative sample code only.

Add supporting copy about:

• Clear responsibilities
• Reusable components
• Testing
• Readable naming
• Small focused services

---

28. WORKFLOW / TOOLKIT

Create:

My Toolkit

Show workflow categories:

Code

VS Code · Git · GitHub

Backend

Laravel · PHP · APIs

Data

PostgreSQL · Redis

Infrastructure

Docker · Linux · Cloudflare

Design / Planning

Figma · Documentation · Wireframes

Keep layout compact.

---

29. TESTIMONIALS

Create 3 fictional client testimonials.

Example:

“Alex understood the product problem quickly and turned it into a solution that was easier for both our users and our team to maintain.”

— Product Manager

Keep testimonials believable and concise.

Use an accessible vanilla JavaScript slider.

---

30. OPEN SOURCE / GITHUB SECTION

Create:

Open Source & Experiments

Show 3 fictional/open-source-style projects.

Each should include:

• Repository name
• Description
• Language
• Stars placeholder
• Updated date placeholder

Example:

formkit-lite

Reusable vanilla JavaScript form utilities.

laravel-health-panel

Simple health dashboard patterns for Laravel apps.

static-preview

Lightweight HTML/CSS/JS preview sandbox.

Do not claim actual GitHub popularity.

---

31. CURRENTLY LEARNING

Create a small personal section:

Currently Exploring

Include:

• Application performance
• Distributed systems
• Better developer tooling
• AI-assisted development workflows

Keep it concise.

---

32. BLOG / NOTES

Create:

Developer Notes

Add 4 articles.

Examples:

Designing Better Laravel Service Layers

Backend

What Makes a Good Admin Dashboard?

Product Engineering

Building Responsive Interfaces Without a Framework

Frontend

Lessons From Shipping Small SaaS Products

Engineering

Each includes:

• Category
• Date
• Title
• Short excerpt
• Read Note CTA

---

33. CONTACT SECTION

Create a strong final contact section.

Heading:

Have a project that needs to work, not just look good?

Supporting text:

“Tell me what you’re building, what is currently difficult, and what success should look like.”

Include:

• Email
• GitHub
• LinkedIn
• Location
• Availability

Form fields:

• Name
• Email
• Company
• Project Type
• Budget
• Message

Project types:

• Website
• Web Application
• SaaS
• API / Backend
• Optimization
• Consulting
• Other

Budget options:

• Under $1K
• $1K–$3K
• $3K–$10K
• $10K+
• Not Sure

Use demo values.

Frontend validation only.

After successful validation, show:

“Your project details are ready. This demo form is not connected to a live email service.”

Do not pretend to send the form.

---

34. AVAILABILITY CTA

Create a compact section before the footer.

Status indicator:

Available for selected projects

Text:

“Currently taking on a limited number of web development and SaaS projects.”

CTA:

Start a Conversation

---

35. FOOTER

Create a professional developer footer.

Include:

DEVORA

Tagline:

Web products built with clarity.

Navigation:

• About
• Work
• Experience
• Services
• Notes
• Contact

Social:

• GitHub
• LinkedIn
• Email

Add:

Built with HTML, CSS & JavaScript

Generate the current year dynamically.

Add back-to-top control.

---

36. JAVASCRIPT FUNCTIONALITY

Implement:

• Mobile navigation
• Scrolled navbar state
• Active section highlighting
• Smooth scrolling
• Hero code animation
• Project filtering
• Project details modal
• Animated statistics
• Testimonial slider
• Contact form validation
• Back-to-top
• Dynamic year
• Scroll reveal

Use IntersectionObserver where appropriate.

Use vanilla JavaScript only.

---

37. HERO CODE ANIMATION

Create a small typing sequence in the hero.

Example:

const focus = "building useful products";

Then:

const stack = ["Laravel", "JavaScript", "PostgreSQL"];

Then:

status = "available";

Keep it short and tasteful.

Respect reduced motion.

Do not loop forever.

---

38. PROJECT MOCKUPS

Create realistic product mockups using HTML/CSS where practical.

Examples:

• SaaS dashboard
• Admin panel
• Analytics interface
• Website builder
• API monitor

Do not rely only on random stock photos for web development projects.

Screens should look like actual products.

---

39. RESPONSIVE DESIGN

Design intentionally for:

• 320px mobile
• 375px mobile
• 430px mobile
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Simplify the hero workspace composition
• Keep project imagery large
• Stack project metadata logically
• Make technology tags wrap cleanly
• Keep modal inside viewport
• Make form fields touch-friendly
• Reduce decorative effects
• Maintain comfortable typography

Never allow horizontal overflow.

---

40. MOBILE QUALITY

Mobile should feel like a real designed product.

Ensure:

• Buttons have comfortable tap targets
• Project filters remain usable
• Navigation works correctly
• Code blocks scroll internally if needed
• Project titles do not overflow
• Tags wrap properly
• Forms use sensible spacing
• Images maintain good aspect ratios

Do not rely on hover-only behavior.

---

41. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• One H1
• Logical heading hierarchy
• Accessible navigation
• Alt text
• Keyboard-accessible project filters
• Accessible project modal
• Proper form labels
• Visible focus states
• Good text contrast
• Accessible testimonial controls
• Correct ARIA attributes where needed

Use real buttons for interactions.

---

42. SEO

Create professional portfolio SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add Person structured data using JSON-LD with fictional/sample profile values.

Include:

• Name
• Role
• Website placeholder
• SameAs placeholders

Do not add fake ratings or credentials.

---

43. PERFORMANCE

Keep the website lightweight.

Requirements:

• No frameworks
• No external JavaScript libraries
• No background video
• Lazy-load below-the-fold images
• Use stable aspect ratios
• Avoid layout shift
• Efficient animations
• Efficient filtering
• Minimal event listeners
• No unnecessary animation loops

---

44. CSS QUALITY

Organize CSS logically:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Navigation
7. Hero
8. Stats
9. About
10. Skills
11. Projects
12. Modals
13. Experience
14. Services
15. Process
16. Testimonials
17. Notes
18. Contact
19. Footer
20. Animation
21. Responsive
22. Reduced motion

Use:

• CSS custom properties
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid excessive !important.

---

45. JAVASCRIPT QUALITY

Write clean modern vanilla JavaScript.

Requirements:

• Clear function names
• Reusable helpers
• Missing-element guards
• Minimal global state
• No console errors
• No fake backend calls
• No unnecessary complexity

The essential page content should remain available if JavaScript fails.

---

46. CONTENT QUALITY

Do NOT use Lorem Ipsum.

Write realistic developer-focused content.

Avoid generic phrases such as:

• Passionate developer
• Turning ideas into reality
• Cutting-edge solutions
• Innovative digital experiences
• Coding is my passion
• I love solving problems

Use specific, believable language.

---

47. VISUAL RHYTHM

Do NOT build the website as:

Hero → Cards → Cards → Cards → Footer

Use an intentional sequence:

Professional hero

→ Stats

→ About

→ Technology stack

→ Large featured project

→ Mixed project layouts

→ Development philosophy

→ Experience

→ Services

→ Code quality

→ Testimonials

→ Developer notes

→ Contact

→ Footer

The page should feel like a portfolio, not a dashboard template.

---

48. FINAL QUALITY CHECK

Before returning code, verify:

• All three files connect correctly
• Navigation works
• Mobile menu works
• Hero code animation works
• Project filters work
• Project modal works
• Statistics animate correctly
• Testimonial slider works
• Contact validation works
• Back-to-top works
• All anchors exist
• No undefined variables
• No console errors
• No horizontal overflow
• Mobile layout is polished
• Project UI mockups remain readable
• Keyboard interactions work
• Reduced-motion support works
• No prohibited dependencies are used

Fix all issues before returning the code.

---

49. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the complete HTML.

style.css

Provide the complete CSS.

script.js

Provide the complete JavaScript.

Do NOT use:

“remaining code”

“continue here”

“add more projects”

“same as above”

Do not return pseudo-code.

Do not omit implementation to save response length.

Everything must be complete and immediately usable.

The final Devora website should feel professional, modern, technical, product-focused, responsive, polished, distinctive, and screenshot-worthy enough to look like the real portfolio of an experienced web developer.