I'll build a stunning dark-themed portfolio website with smooth Framer Motion animations. Let me first save your photo and then create all the components.
Now let me update the theme and create all the portfolio components:
Now let me create all the portfolio components:
Now let me assemble everything in the main page:
Now let me update the tailwind config to include the custom fonts:
Your portfolio website is now live! Here's what I built:
- Navbar — Fixed header with smooth scroll navigation and an animated mobile hamburger menu
- Hero Section — Striking intro with your profile photo, animated floating "Available for work" badge, and a subtle grid background pattern
- About Section — Bio text with animated stat cards (years of experience, projects, etc.)
- Skills Section — Three skill category cards with animated progress bars that fill on scroll
- Projects Section — 2x2 grid of project cards with tech tags, numbered overlays, and hover effects
- Experience Section — Alternating timeline layout with role details and skill tags
- Contact Section — Centered CTA with social media links
- Footer — Clean minimal footer
The dark theme uses a deep navy background (hsl(217, 33%, 7%)) with a teal/cyan accent color (hsl(166, 100%, 70%)), and all sections animate smoothly into view using Framer Motion's useInView hook. You can customize the placeholder text, links, and project details to match your actual information.
The code returns the following error:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<HotReload globalError={[...]} webSocket={WebSocket} staticIndicatorState={{pathname:null, ...}}>
<AppDevOverlayErrorBoundary globalError={[...]}>
<ReplaySsrOnlyErrors>
<DevRootHTTPAccessFallbackBoundary>
<HTTPAccessFallbackBoundary notFound={<NotAllowedRootHTTPFallbackError>}>
<HTTPAccessFallbackErrorBoundary pathname="/" notFound={<NotAllowedRootHTTPFallbackError>} ...>
<RedirectBoundary>
<RedirectErrorBoundary router={{...}}>
<Head>
<__next_root_layout_boundary__>
<SegmentViewNode type="layout" pagePath="layout.tsx">
<SegmentTrieNode>
<link>
<script>
<RootLayout>
<html lang="en" className="scroll-smooth">
<body
className="font-sans antialiased"
- data-new-gr-c-s-check-loaded="14.1271.0"
- data-gr-ext-installed=""
>
...
at body (<anonymous>)
at RootLayout (app/layout.tsx:22:7)
20 | return (
21 | <html lang="en" className="scroll-smooth">
> 22 | <body className="font-sans antialiased">{children}</body>
| ^
23 | </html>
24 | )
25 | } (<anonymous>)
Revise the code to address the error.
I was previewing: /
The hydration mismatch is caused by a browser extension (Grammarly) injecting extra attributes onto the <body> tag. The fix is to add suppressHydrationWarning to both the <html> and <body> elements.
The hydration error was caused by the Grammarly browser extension injecting data-new-gr-c-s-check-loaded and data-gr-ext-installed attributes onto the <body> tag after server rendering. Adding suppressHydrationWarning to both <html> and <body> tells React to ignore attribute mismatches on those elements, which is the standard fix for browser-extension-related hydration issues.
Name: Zuhaib Ahmed
Email: shoaibmahar347@gmail.com
github: https://github.com/zuhaibahmed7
linkedin : https://www.linkedin.com/in/zuhaib-ahmed-69951a39a/
peeelist: Zuhaib Ahmed • Peerlist
instagram: https://www.instagram.com/yaa.itszuhaibahmed?igsh=NjE0b3A4a2l3Y2Fl
X : https://x.com/ZohaibAhmedMah2
whatsapp: 03088398277
include the projects of the github
include the intro as the AI/ML and Data Science engineer and include some other content about me of 4 to 5 lines