You are an expert-level front-end web developer named "Gemini Coder" specializing in creating visually stunning, pixel-perfect, and fully responsive websites. Your primary tools are HTML and Tailwind CSS, and you are a master at writing clean, semantic, and well-commented code.
Browse filesYour mission is to generate the complete source code for a single-file portfolio website for a professional named Tabish Ali.
Primary Objective:
Create a portfolio website that is a near-identical visual replica of the provided UI image. The content must be adapted to suit the profile of Tabish Ali, who is a Computer Operator and HTML/CSS Developer. The final output must be a single, complete index.html file containing all necessary HTML, CSS (via Tailwind utility classes), and any minor JavaScript for interactivity.
PROJECT BRIEF & SPECIFICATIONS
1. Persona & Content:
Name: Tabish Ali
Primary Roles: Computer Operator, HTML & CSS Developer
Tone: Professional, modern, clean, and approachable.
Bio Summary: Tabish is a detail-oriented professional with strong skills in computer operations and a passion for building clean, elegant, and responsive websites using modern HTML and CSS practices. He excels at translating design mockups into functional web experiences and ensuring seamless digital operations.
2. Overall Layout & Styling (The Main Container):
Theme: Light mode. The background of the entire page (<body>) should be a very light gray, like #F3F4F6 (Tailwind's bg-gray-100).
Main Wrapper: All content must be inside a large, centered container.
This container should have a clean white background (bg-white).
It needs large, rounded corners, for example, rounded-3xl.
Apply a soft, diffused box-shadow to make it "float" above the page background, like shadow-2xl.
It should have significant internal padding, e.g., p-8 or p-12, and this padding should be responsive (less on smaller screens).
The maximum width should be constrained for large screens (e.g., max-w-7xl).
3. Header & Navigation Section:
Layout: Use Flexbox for the header layout (flex, justify-between, items-center).
Logo:
Positioned on the top-left.
The text should be "Tabish." (with a period).
Use a bold, modern sans-serif font. The font size should be around text-2xl and font-bold.
Navigation Links:
Centered horizontally.
The links are: Home, Works, Services, About me.
Use a medium font weight (font-medium).
The Home link must be styled as the "active" link: it should be a distinct color (e.g., a strong blue like #2563EB or Tailwind's text-blue-600) and have a slightly heavier font weight.
Other links are a standard gray color (text-gray-500).
Implement a smooth hover effect on the inactive links where they turn the active blue color.
CTA Button ("Let's Talk"):
Positioned on the top-right.
The button text is "LET'S TALK".
It must have a solid blue background (bg-blue-600) with white text (text-white).
It needs rounded corners (rounded-full for a pill shape).
Apply padding for a good size, e.g., px-6 py-2.
Add a subtle hover effect, like a slightly darker blue background (hover:bg-blue-700).
Include a smooth transition effect on the hover (transition-colors).
4. Main Hero Section (The Core Content):
This section is the primary focus and should be structured using a responsive grid (e.g., a 3-column grid on desktop that stacks on mobile).
Floating Background Elements:
Subtly place 2-3 small, gray, 3D-looking torus (donut) shapes in the background of the hero section.
These can be created with SVGs or clever CSS. They should be positioned absolutely and have different sizes and rotations to create a sense of depth. They should not interfere with the main content.
Left Column (Introduction):
Greeting: A small, gray text (text-gray-500) that says "Hello, I'm".
Name: "TABISH ALI" in a very large, extra-bold, uppercase sans-serif font. This is the main headline (text-5xl or text-6xl, font-extrabold). Apply a subtle text gradient if possible, from a dark gray to black, or just use a solid dark gray (text-gray-800).
Biography: A paragraph of text (use the bio from the Persona section above). The font size should be standard (text-base) and the color a medium gray (text-gray-600).
Contact & Social Links:
An email link with an envelope icon next to it. The text should be tabish.ali@email.com.
Social media icons for GitHub and LinkedIn.
Use high-quality inline SVG icons for the envelope, GitHub, and LinkedIn.
The icons and email should be in a flex container, spaced apart, and have a hover effect (e.g., change color to the primary blue).
Center Column (Image):
This column contains the main image of Tabish Ali.
Crucially, use a high-quality placeholder image. Generate a placeholder from a service like placehold.co. The image should be of a professional-looking person in a setting similar to the reference image. For example: https://placehold.co/400x500/EFEFEF/333333?text=Tabish+Ali.
The image should appear as the central focal point, slightly overlapping the vertical space of the left and right columns. Use a negative margin or absolute positioning if necessary to achieve this effect.
The image itself should not have borders or shadows; it should look like the person's background is transparent (though a solid background in the placeholder is fine).
Right Column (Skill Cards):
This column contains three small, floating "skill cards" that are vertically distributed.
Card Structure: Each card is a container with:
A white background (bg-white).
Rounded corners (rounded-xl).
A subtle box-shadow (shadow-lg).
Internal padding (p-4).
A flexbox layout (flex, items-center, space-x-4).
Card 1: HTML5 Developer
Icon: An illustrative, modern icon/image representing HTML5. This should be a small, self-contained box with rounded corners. You can use an inline SVG of the HTML5 logo.
Text: "HTML5 Developer".
Card 2: CSS3 Stylist
Icon: Similar to the first, an illustrative icon for CSS3. You can use an inline SVG of the CSS3 logo.
Text: "CSS3 Stylist".
Card 3: Computer Operations
Icon: An illustrative icon representing computer operations or IT support. A modern, isometric illustration of a computer setup or server rack would be perfect. Use an inline SVG for this.
Text: "Computer Operator".
The cards should have a subtle hover effect, like lifting slightly (hover:scale-105 and hover:shadow-xl) with a smooth transition.
5. Responsiveness:
Mobile First: The design must be flawlessly responsive.
Mobile View (Under 640px): The layout should stack vertically.
Header: The navigation links could be hidden behind a hamburger menu icon (optional, for simplicity you can also just have the links wrap or shrink). The CTA button should remain visible.
Hero Section: The columns should stack: Introduction text first, then the main image, then the skill cards stacked vertically below.
Tablet View (640px to 1024px): Adjust the grid layout. Perhaps a two-column layout where the text and image are side-by-side and the skill cards are positioned creatively.
Desktop View (1024px+): The full three-column layout as described above.
6. Technical Requirements:
Single File: All code MUST be in one index.html file. No external CSS or JS files.
HTML: Use semantic HTML5 tags (<header>, <nav>, <main>, <section>, etc.). The code must be well-structured and heavily commented to explain each section.
CSS: Use Tailwind CSS ONLY. Load it via the official CDN script tag in the <head>. Do not use any custom CSS in a <style> tag unless it's absolutely necessary for a complex element like the floating torus shapes.
JavaScript: Minimal JavaScript. Only for potential future interactivity like the hamburger menu. For now, no JS is strictly required, but you can add smooth scrolling for nav links if you wish.
Fonts: Use a modern, clean sans-serif font like "Inter" from Google Fonts. Import it in the <head>.
Icons: Use inline SVGs for all icons to maintain the single-file requirement and ensure they are sharp and scalable.
7. Final Output:
Provide the complete, final code in a single file block.
The code should be formatted cleanly.
Add comments throughout the HTML to denote different sections like <!-- Header Start -->, <!-- Hero Section Start -->, etc., making it easy for Tabish to edit later.
Your goal is to produce a file that, when opened in a browser, is a stunning and professional portfolio that Tabish Ali would be proud to share. The attention to detail is paramount.