Convert Website Mockups into Static Website

# Freelance Requirement: Convert Website Mockups into HTML, CSS & Assets

## Project Overview

I have final website mockup images for a personal portfolio/leadership website. I need a frontend designer/developer to convert these mockups into clean, responsive **HTML + CSS + assets**.

The goal is to recreate the mockups as closely as possible, not redesign them.

## Scope of Work

Convert each provided image mockup into:

* Clean HTML
* Clean CSS
* Properly sliced/exported assets
* Responsive layouts
* Organized folders
* Ready-to-host static website files

## Important Requirement

The mockups are the final design reference.

Please do not redesign, simplify, or change the visual style unless discussed.

The output should match the mockups as closely as possible in:

* Layout
* Spacing
* Typography
* Colors
* Gradients
* Cards
* Icons
* Logos
* Image placement
* Section order
* Button styles
* Header and footer
* Responsive behavior

## Asset Slicing Requirement

Before building the HTML/CSS, please inspect each mockup and extract all required visual assets.

This includes:

* Icons
* Logos
* Recognition badges
* Media logos
* Social icons
* Decorative visuals
* Card icons
* Metric icons
* Background elements
* Diagram-style visuals
* Any other image elements visible in the mockup

If an asset is already provided separately, use the provided file.

If an asset is only visible inside the mockup, slice/export it from the mockup carefully and save it as a separate file.

If an asset is too blurry or low-resolution to extract cleanly, please list it separately as a missing asset instead of replacing it with a random icon.

## Portrait Requirement

The personal portrait image will be provided separately.

Use only the provided portrait image.

Do not recreate, AI-generate, edit, or replace the face.

The portrait should be cropped/framed as shown in the mockup, usually head-to-shoulder, and should not overflow or stretch.

## Pages to Build

Please convert all provided page mockups into static HTML pages.

Expected pages include:

* Home
* AI Leadership
* Agentic AI
* Work / Case Studies
* Speaking
* Insights / Books
* Advisory
* Contact
* About
* Security & Governance
* Cost-Neutral Scale & FinOps
* AI-First Operating Model
* Talent Density / AI-First Culture
* Second Brain
* Prompt Architect
* Speaker Kit
* Case Studies
* Privacy Policy
* Terms
* Thank You page
* Case Study Thank You page

## Responsive Requirements

Each page must be responsive and tested at:

* Desktop: 1440px
* Laptop: 1280px
* Tablet: 768px
* Mobile: 390px

At every size:

* No horizontal scroll
* Header should work
* Mobile menu should work
* Cards should stack properly
* Text should not overflow
* Images should not stretch
* CTAs should be tappable
* Forms should be usable
* Footer should remain clean
* Layout should stay close to the mockup

## HTML/CSS Requirements

Please keep the code simple and easy to edit.

Preferred structure:

```text
project/
index.html
ai-leadership.html
agentic-ai.html
work.html
speaking.html
insights.html
advisory.html
contact.html
about.html
privacy-policy.html
terms.html

assets/
images/
icons/
logos/
downloads/

css/
style.css
responsive.css

js/
main.js
```

Use semantic HTML where possible.

Use reusable CSS classes for:

* Buttons
* Cards
* Containers
* Sections
* Metrics
* Forms
* Hero sections
* Footer
* Header
* Logo strips

## Do Not Do

Please do not:

* Use full-page mockup screenshots as the website
* Replace text with images
* Change approved copy
* Change visual style
* Use random icons that do not match the mockup
* Use low-quality blurry logos
* Stretch images
* Use AI-generated portrait images
* Add fake testimonials
* Add extra sections without approval

## Deliverables

Final delivery should include:

1. Complete HTML files
2. Complete CSS files
3. JavaScript only where needed
4. All sliced assets organized properly
5. Asset inventory list
6. Missing asset list, if any
7. Responsive testing notes
8. Final ZIP/package ready to upload to hosting

## Asset Inventory Required

Please provide a simple asset inventory like:

```text
assets/images/vivek-pic.png — portrait image
assets/icons/ai-icon.png — used on Home page
assets/logos/recognition/aim-40-under-40.png — recognition strip
assets/logos/social/linkedin.png — footer social icon
assets/images/visuals/ai-core.png — hero visual
```

## Missing Asset Report

If any logo/icon/badge cannot be extracted cleanly from the mockup, please provide:

```text
Missing asset:
Page:
Section:
Reason:
Recommended file type:
Suggested size:
```

## Quality Check Before Delivery

Before final delivery, please check:

* Does each page visually match the mockup?
* Are all icons/logos placed correctly?
* Is the portrait cropped correctly?
* Is the layout responsive?
* Are all links working?
* Are all forms visually correct?
* Is there no horizontal scroll?
* Are files clean and organized?

## Final Expected Output

A clean static website built from the image mockups using HTML, CSS, assets, and minimal JavaScript, matching the designs as closely as possible and ready to host.