Live site: hemalsingh.framer.website

I needed a personal portfolio that did more than list projects. It had to work as a conversion tool — get visitors from "who is this person" to "I want to work with them" in a single scroll. No subpages, no friction, no fluff.

The constraint: ship it in 4 days, fully designed and built in Framer.

I went with a dark theme with subtle gradient accents. Dark backgrounds let the work screenshots pop, and the overall feel reads premium without being heavy. Typography does most of the heavy lifting — large, confident headings paired with clean body text so everything is scannable in seconds.

The entire site lives on a single landing page. Every section flows into the next: hero, about, work, services, FAQ, contact. No navigation clicks required. The idea is that a founder lands here, scrolls once, and has everything they need to make a decision.

This wasn't a static page. I built layered interactions throughout to make the experience feel alive:

Scroll-triggered animations — sections fade and slide into view as the user scrolls, creating a guided reveal effect rather than dumping everything at once

Hover states — project cards, service cards, and CTAs all respond to hover with scale shifts and color transitions for tactile feedback

Marquee tickers — continuous horizontal scrolling strips for roles (Website Design, Brand Design, UI/UX Designer) and tools (Product Designer, Framer Expert, No-code Web Builder) that add visual energy without taking up vertical space

FAQ accordion — smooth expand/collapse transitions so users can browse questions without page jumps

Hero carousel — auto-rotating image showcase with manual navigation, featuring dashboard and product screenshots

Every animation is intentional. Nothing moves just to move — each interaction either guides attention, provides feedback, or reinforces the premium feel.

Two key integrations turn this from a portfolio into a lead generation tool:

Embedded directly in the contact section. Visitors pick a 30-minute discovery call slot without leaving the page. Cal.com handles confirmation emails, calendar sync, and reminders automatically. Zero manual scheduling on my end.

An AI-powered chat widget sits in the bottom corner. It answers common visitor questions in real time — what I do, how I work, pricing ballpark, availability. This catches visitors who aren't ready to book a call but still want answers. It runs 24/7 without me being online.

Platform: Framer (design + build + publish)

Layout: Single-page responsive design, mobile-first approach

Animations: Framer's native scroll and hover animation system, no external libraries

Integrations: Cal.com embed, Chatbase script injection

Performance: Optimized image loading, minimal external dependencies

Hero — headline, subtext, two CTAs (View Work / Start a Project), rotating dashboard screenshot carousel

About — three cards covering what I do, my background, and my approach

Skill Marquees — two rows of continuously scrolling role and tool tags

Work Section — three featured project cards (Ownly, Goory, TrackifyAsset) with cover images, descriptions, year, role, and services. Each links to the full Contra case study.

Stats Strip — 4 full MVP products, 800+ user interfaces designed, 5 user types in one platform, 1+ years of experience

Tools Grid — icon grid showing the full toolkit

Services — five productized service cards pulled from Contra, each with pricing and a direct hire link

FAQ — six accordion items covering turnaround, audits, sprint length, no-code/code tools, pricing, and how to start

Contact — embedded Cal.com widget for instant booking

AI Chat — Chatbase widget for real-time visitor support

4 days, start to finish. July 15–18, 2026.

Day 1: Layout structure, typography system, color palette, hero section Day 2: Work showcase, services section, about cards, skill marquees Day 3: All interactions — scroll animations, hover states, carousel, accordion Day 4: Cal.com integration, Chatbase setup, responsive polish, launch

A single-page portfolio that converts. Visitors land, scroll through the work, see the services with real pricing, and can either book a call or chat with AI — all without clicking away. Built entirely in Framer with no external code dependencies.

Click here to visit the site