{"id":17,"date":"2019-10-20T02:04:34","date_gmt":"2019-10-20T02:04:34","guid":{"rendered":"https:\/\/demo.wpoperation.com\/arrival-me\/?page_id=17"},"modified":"2026-03-16T16:35:44","modified_gmt":"2026-03-16T16:35:44","slug":"home","status":"publish","type":"page","link":"https:\/\/wanchamehtadesign.in\/","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n Wancha Mehta \u2014 Interaction & Visual Designer<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400&family=Syne:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --ink: #0e0d0c;\r\n --cream: #f5f0e8;\r\n --warm: #e8dece;\r\n --rust: #c84b2f;\r\n --gold: #c9a84c;\r\n --muted: #7a7168;\r\n --light-muted: #b5ac9e;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: var(--cream);\r\n color: var(--ink);\r\n font-family: 'DM Mono', monospace;\r\n font-weight: 300;\r\n overflow-x: hidden;\r\n cursor: none;\r\n }\r\n\r\n \/* CUSTOM CURSOR *\/\r\n .cursor {\r\n position: fixed; top: 0; left: 0; z-index: 9999;\r\n pointer-events: none;\r\n }\r\n .cursor-dot {\r\n width: 8px; height: 8px;\r\n background: var(--rust);\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.1s;\r\n }\r\n .cursor-ring {\r\n position: fixed; top: 0; left: 0;\r\n width: 36px; height: 36px;\r\n border: 1px solid var(--rust);\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.18s ease, width 0.2s, height 0.2s, opacity 0.2s;\r\n pointer-events: none; z-index: 9998;\r\n opacity: 0.5;\r\n }\r\n\r\n \/* NOISE OVERLAY *\/\r\n body::before {\r\n content: '';\r\n position: fixed; inset: 0;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\r\n background-size: 200px 200px;\r\n pointer-events: none; z-index: 1000; opacity: 0.6;\r\n }\r\n\r\n \/* NAV *\/\r\n nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 500;\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 24px 48px;\r\n mix-blend-mode: multiply;\r\n }\r\n .nav-logo {\r\n font-family: 'Syne', sans-serif;\r\n font-weight: 800; font-size: 13px;\r\n letter-spacing: 0.15em; text-transform: uppercase;\r\n color: var(--ink); text-decoration: none;\r\n }\r\n .nav-links { display: flex; gap: 32px; }\r\n .nav-links a {\r\n font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;\r\n color: var(--muted); text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n .nav-links a:hover { color: var(--rust); }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-rows: 1fr auto;\r\n padding: 0 48px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-bg-number {\r\n position: absolute;\r\n right: -40px; top: 50%;\r\n transform: translateY(-50%);\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(200px, 28vw, 400px);\r\n font-weight: 300; color: var(--warm);\r\n line-height: 1; user-select: none;\r\n animation: fadeSlideIn 1.2s ease 0.3s both;\r\n }\r\n\r\n .hero-left {\r\n display: flex; flex-direction: column;\r\n justify-content: center;\r\n padding-top: 80px;\r\n animation: fadeSlideUp 0.9s ease 0.1s both;\r\n }\r\n\r\n .hero-eyebrow {\r\n font-size: 11px; letter-spacing: 0.2em;\r\n text-transform: uppercase; color: var(--rust);\r\n margin-bottom: 24px;\r\n display: flex; align-items: center; gap: 12px;\r\n }\r\n .hero-eyebrow::before {\r\n content: '';\r\n display: inline-block; width: 40px; height: 1px;\r\n background: var(--rust);\r\n }\r\n\r\n h1 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(56px, 7vw, 100px);\r\n font-weight: 300; line-height: 0.95;\r\n letter-spacing: -0.02em;\r\n }\r\n h1 em {\r\n font-style: italic; color: var(--rust);\r\n }\r\n\r\n .hero-desc {\r\n margin-top: 32px;\r\n max-width: 420px;\r\n font-size: 13px; line-height: 1.8;\r\n color: var(--muted);\r\n }\r\n\r\n .hero-cta {\r\n margin-top: 48px;\r\n display: flex; gap: 20px; align-items: center;\r\n }\r\n .btn-primary {\r\n background: var(--ink); color: var(--cream);\r\n padding: 14px 32px;\r\n font-family: 'DM Mono', monospace;\r\n font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;\r\n text-decoration: none; border: none; cursor: none;\r\n transition: background 0.25s, transform 0.2s;\r\n display: inline-block;\r\n }\r\n .btn-primary:hover { background: var(--rust); transform: translateY(-2px); }\r\n .btn-secondary {\r\n font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;\r\n color: var(--ink); text-decoration: none;\r\n border-bottom: 1px solid var(--light-muted);\r\n padding-bottom: 2px;\r\n transition: color 0.2s, border-color 0.2s;\r\n }\r\n .btn-secondary:hover { color: var(--rust); border-color: var(--rust); }\r\n\r\n .hero-right {\r\n display: flex; flex-direction: column;\r\n justify-content: center; align-items: flex-end;\r\n padding-top: 80px;\r\n animation: fadeSlideUp 0.9s ease 0.25s both;\r\n position: relative; z-index: 2;\r\n }\r\n\r\n .hero-stats {\r\n display: flex; flex-direction: column; gap: 32px;\r\n align-items: flex-end;\r\n }\r\n .stat {\r\n text-align: right;\r\n }\r\n .stat-number {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 56px; font-weight: 300; line-height: 1;\r\n color: var(--ink);\r\n }\r\n .stat-label {\r\n font-size: 10px; letter-spacing: 0.18em;\r\n text-transform: uppercase; color: var(--muted);\r\n margin-top: 4px;\r\n }\r\n .stat-divider {\r\n width: 1px; height: 40px;\r\n background: var(--warm); align-self: flex-end;\r\n }\r\n\r\n .hero-footer {\r\n grid-column: 1 \/ -1;\r\n display: flex; justify-content: space-between; align-items: flex-end;\r\n padding: 32px 0 40px;\r\n border-top: 1px solid var(--warm);\r\n animation: fadeIn 1s ease 0.6s both;\r\n }\r\n .hero-tags {\r\n display: flex; gap: 12px; flex-wrap: wrap;\r\n }\r\n .tag {\r\n font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;\r\n padding: 6px 14px;\r\n border: 1px solid var(--light-muted);\r\n color: var(--muted);\r\n }\r\n .hero-location {\r\n font-size: 11px; color: var(--light-muted);\r\n letter-spacing: 0.1em;\r\n }\r\n\r\n \/* MARQUEE *\/\r\n .marquee-wrap {\r\n overflow: hidden;\r\n background: var(--ink); color: var(--cream);\r\n padding: 18px 0;\r\n position: relative; z-index: 2;\r\n }\r\n .marquee-track {\r\n display: flex; gap: 60px;\r\n animation: marquee 20s linear infinite;\r\n width: max-content;\r\n }\r\n .marquee-track span {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 20px; font-weight: 300; font-style: italic;\r\n white-space: nowrap; color: var(--cream);\r\n flex-shrink: 0;\r\n }\r\n .marquee-track .dot {\r\n font-family: 'DM Mono', monospace;\r\n font-style: normal; font-size: 14px;\r\n color: var(--rust); flex-shrink: 0;\r\n }\r\n\r\n \/* \u2500\u2500 ABOUT \u2500\u2500 *\/\r\n .about {\r\n display: grid;\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: 0;\r\n padding: 120px 48px;\r\n position: relative;\r\n }\r\n .about-left {\r\n padding-right: 80px;\r\n border-right: 1px solid var(--warm);\r\n }\r\n .section-label {\r\n font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;\r\n color: var(--rust); margin-bottom: 48px;\r\n display: flex; align-items: center; gap: 12px;\r\n }\r\n .section-label::before {\r\n content: '';\r\n display: inline-block; width: 24px; height: 1px; background: var(--rust);\r\n }\r\n\r\n h2 {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(36px, 4vw, 56px);\r\n font-weight: 300; line-height: 1.1;\r\n }\r\n h2 em { font-style: italic; color: var(--rust); }\r\n\r\n .about-text {\r\n margin-top: 32px;\r\n font-size: 13px; line-height: 1.9; color: var(--muted);\r\n }\r\n .about-text p + p { margin-top: 16px; }\r\n\r\n .about-right {\r\n padding-left: 80px;\r\n }\r\n .timeline { display: flex; flex-direction: column; gap: 0; }\r\n .timeline-item {\r\n display: grid; grid-template-columns: 100px 1fr;\r\n gap: 24px; padding: 28px 0;\r\n border-bottom: 1px solid var(--warm);\r\n opacity: 0; transform: translateX(20px);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n .timeline-item.visible { opacity: 1; transform: none; }\r\n .timeline-year {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 15px; color: var(--light-muted);\r\n padding-top: 3px;\r\n }\r\n .timeline-role {\r\n font-family: 'Syne', sans-serif;\r\n font-weight: 600; font-size: 13px; margin-bottom: 6px;\r\n }\r\n .timeline-co {\r\n font-size: 11px; letter-spacing: 0.1em;\r\n text-transform: uppercase; color: var(--rust);\r\n margin-bottom: 8px;\r\n }\r\n .timeline-desc { font-size: 12px; color: var(--muted); line-height: 1.7; }\r\n\r\n \/* \u2500\u2500 SKILLS \u2500\u2500 *\/\r\n .skills {\r\n padding: 120px 48px;\r\n background: var(--ink);\r\n color: var(--cream);\r\n position: relative; overflow: hidden;\r\n }\r\n .skills-bg {\r\n position: absolute; right: -100px; top: -100px;\r\n width: 600px; height: 600px;\r\n border: 1px solid rgba(255,255,255,0.04);\r\n border-radius: 50%;\r\n }\r\n .skills-bg::before {\r\n content: '';\r\n position: absolute; inset: 60px;\r\n border: 1px solid rgba(255,255,255,0.04);\r\n border-radius: 50%;\r\n }\r\n .skills-bg::after {\r\n content: '';\r\n position: absolute; inset: 120px;\r\n border: 1px solid rgba(255,255,255,0.04);\r\n border-radius: 50%;\r\n }\r\n\r\n .skills-header {\r\n display: flex; justify-content: space-between; align-items: flex-end;\r\n margin-bottom: 80px;\r\n }\r\n .skills-header .section-label { color: var(--gold); }\r\n .skills-header .section-label::before { background: var(--gold); }\r\n\r\n .skills-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1px;\r\n background: rgba(255,255,255,0.07);\r\n position: relative; z-index: 2;\r\n }\r\n .skill-card {\r\n background: var(--ink);\r\n padding: 40px 36px;\r\n transition: background 0.3s;\r\n opacity: 0; transform: translateY(24px);\r\n transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s;\r\n }\r\n .skill-card.visible { opacity: 1; transform: none; }\r\n .skill-card:hover { background: #1a1915; }\r\n\r\n .skill-card-icon {\r\n font-size: 28px; margin-bottom: 20px;\r\n }\r\n .skill-card-title {\r\n font-family: 'Syne', sans-serif;\r\n font-weight: 700; font-size: 15px;\r\n margin-bottom: 12px; color: var(--cream);\r\n }\r\n .skill-card-list {\r\n font-size: 11px; line-height: 2;\r\n color: rgba(245,240,232,0.5);\r\n list-style: none;\r\n }\r\n .skill-card-list li::before {\r\n content: '\u2014 ';\r\n color: var(--gold);\r\n }\r\n\r\n \/* \u2500\u2500 TOOLS \u2500\u2500 *\/\r\n .tools {\r\n padding: 80px 48px;\r\n border-top: 1px solid rgba(255,255,255,0.07);\r\n background: var(--ink);\r\n position: relative; z-index: 2;\r\n }\r\n .tools-inner {\r\n display: flex; align-items: center; gap: 60px;\r\n }\r\n .tools-label {\r\n font-size: 10px; letter-spacing: 0.2em;\r\n text-transform: uppercase; color: var(--gold);\r\n white-space: nowrap;\r\n }\r\n .tools-list {\r\n display: flex; flex-wrap: wrap; gap: 12px;\r\n }\r\n .tool-pill {\r\n padding: 8px 18px;\r\n border: 1px solid rgba(245,240,232,0.15);\r\n font-size: 11px; letter-spacing: 0.1em;\r\n text-transform: uppercase; color: rgba(245,240,232,0.6);\r\n transition: border-color 0.2s, color 0.2s;\r\n }\r\n .tool-pill:hover { border-color: var(--gold); color: var(--gold); }\r\n .tool-pill.highlight {\r\n border-color: var(--gold); color: var(--gold);\r\n }\r\n\r\n \/* \u2500\u2500 WORK \u2500\u2500 *\/\r\n .work {\r\n padding: 120px 48px;\r\n }\r\n .work-header {\r\n display: flex; justify-content: space-between; align-items: flex-end;\r\n margin-bottom: 64px;\r\n }\r\n .work-grid {\r\n display: grid;\r\n grid-template-columns: 1.4fr 1fr;\r\n grid-template-rows: auto auto;\r\n gap: 2px;\r\n }\r\n .work-card {\r\n background: var(--warm);\r\n padding: 48px;\r\n display: flex; flex-direction: column;\r\n justify-content: space-between;\r\n min-height: 280px;\r\n position: relative; overflow: hidden;\r\n transition: background 0.3s;\r\n opacity: 0; transform: translateY(20px);\r\n transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s;\r\n }\r\n .work-card.visible { opacity: 1; transform: none; }\r\n .work-card:hover { background: #dfd8c8; }\r\n .work-card.dark { background: var(--ink); color: var(--cream); }\r\n .work-card.dark:hover { background: #1e1d1b; }\r\n .work-card.rust { background: var(--rust); color: var(--cream); }\r\n .work-card.rust:hover { background: #b84425; }\r\n\r\n .work-card-num {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 13px; color: var(--light-muted);\r\n letter-spacing: 0.1em;\r\n }\r\n .work-card.dark .work-card-num,\r\n .work-card.rust .work-card-num { color: rgba(255,255,255,0.4); }\r\n\r\n .work-card-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 28px; font-weight: 300; line-height: 1.2;\r\n }\r\n .work-card-meta {\r\n font-size: 10px; letter-spacing: 0.15em;\r\n text-transform: uppercase; color: var(--muted);\r\n margin-top: 8px;\r\n }\r\n .work-card.dark .work-card-meta,\r\n .work-card.rust .work-card-meta { color: rgba(255,255,255,0.5); }\r\n\r\n .work-card-arrow {\r\n position: absolute; bottom: 32px; right: 36px;\r\n font-size: 20px; color: var(--light-muted);\r\n transition: transform 0.2s;\r\n }\r\n .work-card.dark .work-card-arrow,\r\n .work-card.rust .work-card-arrow { color: rgba(255,255,255,0.4); }\r\n .work-card:hover .work-card-arrow { transform: translate(4px, -4px); }\r\n\r\n .work-card-tag {\r\n display: inline-block;\r\n padding: 4px 10px;\r\n background: rgba(0,0,0,0.08);\r\n font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;\r\n margin-bottom: 16px;\r\n align-self: flex-start;\r\n }\r\n .work-card.dark .work-card-tag,\r\n .work-card.rust .work-card-tag { background: rgba(255,255,255,0.12); }\r\n\r\n \/* \u2500\u2500 CERTIFICATIONS \u2500\u2500 *\/\r\n .certs {\r\n padding: 80px 48px;\r\n background: var(--warm);\r\n }\r\n .certs-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 2px; margin-top: 48px;\r\n }\r\n .cert-item {\r\n background: var(--cream);\r\n padding: 32px 28px;\r\n opacity: 0; transform: translateY(16px);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n .cert-item.visible { opacity: 1; transform: none; }\r\n .cert-icon { font-size: 24px; margin-bottom: 16px; }\r\n .cert-name {\r\n font-family: 'Syne', sans-serif;\r\n font-weight: 600; font-size: 13px; line-height: 1.4;\r\n }\r\n .cert-issuer {\r\n font-size: 10px; letter-spacing: 0.12em;\r\n text-transform: uppercase; color: var(--rust);\r\n margin-top: 8px;\r\n }\r\n\r\n \/* \u2500\u2500 CONTACT \u2500\u2500 *\/\r\n .contact {\r\n padding: 120px 48px;\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 80px; align-items: center;\r\n }\r\n .contact-left h2 {\r\n font-size: clamp(48px, 6vw, 80px);\r\n }\r\n .contact-left p {\r\n margin-top: 24px; font-size: 13px;\r\n line-height: 1.8; color: var(--muted);\r\n }\r\n .contact-right {\r\n display: flex; flex-direction: column; gap: 24px;\r\n }\r\n .contact-item {\r\n display: flex; flex-direction: column; gap: 4px;\r\n padding-bottom: 24px;\r\n border-bottom: 1px solid var(--warm);\r\n }\r\n .contact-item-label {\r\n font-size: 10px; letter-spacing: 0.2em;\r\n text-transform: uppercase; color: var(--rust);\r\n }\r\n .contact-item-value {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 22px; font-weight: 300;\r\n color: var(--ink); text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n .contact-item-value:hover { color: var(--rust); }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--ink); color: var(--cream);\r\n padding: 32px 48px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n footer p { font-size: 11px; color: rgba(245,240,232,0.4); letter-spacing: 0.08em; }\r\n\r\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\r\n @keyframes fadeSlideUp {\r\n from { opacity: 0; transform: translateY(32px); }\r\n to { opacity: 1; transform: none; }\r\n }\r\n @keyframes fadeSlideIn {\r\n from { opacity: 0; transform: translateY(-50%) translateX(40px); }\r\n to { opacity: 1; transform: translateY(-50%) translateX(0); }\r\n }\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n @keyframes marquee {\r\n from { transform: translateX(0); }\r\n to { transform: translateX(-50%); }\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (max-width: 900px) {\r\n nav { padding: 20px 24px; }\r\n .hero { grid-template-columns: 1fr; padding: 0 24px; }\r\n .hero-right { display: none; }\r\n .hero-bg-number { display: none; }\r\n .about { grid-template-columns: 1fr; padding: 80px 24px; }\r\n .about-left { border-right: none; border-bottom: 1px solid var(--warm); padding-right: 0; padding-bottom: 60px; }\r\n .about-right { padding-left: 0; padding-top: 60px; }\r\n .skills-grid { grid-template-columns: 1fr; }\r\n .certs-grid { grid-template-columns: repeat(2, 1fr); }\r\n .work-grid { grid-template-columns: 1fr; }\r\n .contact { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; }\r\n .tools-inner { flex-direction: column; align-items: flex-start; }\r\n footer { flex-direction: column; gap: 12px; text-align: center; }\r\n .skills, .tools, .work, .certs { padding-left: 24px; padding-right: 24px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- CURSOR -->\r\n <div class=\"cursor cursor-dot\" id=\"cursorDot\"><\/div>\r\n <div class=\"cursor-ring\" id=\"cursorRing\"><\/div>\r\n\r\n <!-- NAV -->\r\n <nav>\r\n <a href=\"#\" class=\"nav-logo\">Wancha Mehta<\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#skills\">Skills<\/a>\r\n <a href=\"#work\">Work<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- HERO -->\r\n <section class=\"hero\">\r\n <div class=\"hero-left\">\r\n <div class=\"hero-eyebrow\">Interaction & Visual Designer<\/div>\r\n <h1>\r\n Crafting<br>\r\n <em>Experiences<\/em><br>\r\n That Think\r\n <\/h1>\r\n <p class=\"hero-desc\">\r\n 15 years in design, engineering, and product \u2014 distilled into work that clarifies complexity, guides decisions, and makes technology feel human.\r\n <\/p>\r\n <div class=\"hero-cta\">\r\n <a href=\"https:\/\/wanchamehtadesign.in\" class=\"btn-primary\" target=\"_blank\">View Portfolio<\/a>\r\n <a href=\"#contact\" class=\"btn-secondary\">Let's Talk<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-right\">\r\n <div class=\"hero-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">15<\/div>\r\n <div class=\"stat-label\">Years of IT Experience<\/div>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">9+<\/div>\r\n <div class=\"stat-label\">Years in UX \/ UI Design<\/div>\r\n <\/div>\r\n <div class=\"stat-divider\"><\/div>\r\n <div class=\"stat\">\r\n <div class=\"stat-number\">5<\/div>\r\n <div class=\"stat-label\">Core Design Disciplines<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"hero-footer\">\r\n <div class=\"hero-tags\">\r\n <span class=\"tag\">UX Strategy<\/span>\r\n <span class=\"tag\">Interaction Design<\/span>\r\n <span class=\"tag\">Visualization<\/span>\r\n <span class=\"tag\">Design Systems<\/span>\r\n <span class=\"tag\">Figma<\/span>\r\n <span class=\"tag\">Visual Design<\/span>\r\n <\/div>\r\n <div class=\"hero-location\">\ud83d\udccd Chandigarh, India  \u00b7  Infosys Limited<\/div>\r\n <\/div>\r\n <div class=\"hero-bg-number\">9+<\/div>\r\n <\/section>\r\n\r\n <!-- MARQUEE -->\r\n <div class=\"marquee-wrap\" aria-hidden=\"true\">\r\n <div class=\"marquee-track\">\r\n <span>Interaction Design<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Visual Storytelling<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Data Visualization<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Design Systems<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>User Research<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Figma Prototyping<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Enterprise UX<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Brand Identity<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Interaction Design<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Visual Storytelling<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Data Visualization<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Design Systems<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>User Research<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Figma Prototyping<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Enterprise UX<\/span><span class=\"dot\">\u25c6<\/span>\r\n <span>Brand Identity<\/span><span class=\"dot\">\u25c6<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- ABOUT -->\r\n <section class=\"about\" id=\"about\">\r\n <div class=\"about-left\">\r\n <div class=\"section-label\">About<\/div>\r\n <h2>A designer who <em>builds bridges<\/em> between data and people<\/h2>\r\n <div class=\"about-text\">\r\n <p>I'm Wancha \u2014 a visualization-led interaction designer with roots in software engineering and project management. That unusual journey means I think in systems, speak both design and engineering, and obsess over how decisions get made at the interface of human and machine.<\/p>\r\n <p>At Infosys, I lead strategic UX initiatives for enterprise-scale products, turning complex data into clear, compelling visual narratives. I don't just design screens \u2014 I design the thinking behind them.<\/p>\r\n <p>Certified by Don Norman, Google, and RISD, and powered by curiosity about what design can do next.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"about-right\">\r\n <div class=\"section-label\">Experience<\/div>\r\n <div class=\"timeline\">\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-year\">2017 \u2013 Now<\/div>\r\n <div>\r\n <div class=\"timeline-role\">Visualization Design Consultant<\/div>\r\n <div class=\"timeline-co\">Infosys \u00b7 Chandigarh<\/div>\r\n <div class=\"timeline-desc\">Leading UX, interaction design, and visualization for enterprise digital products. Building design systems, Figma component libraries, and design-to-code workflows.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-year\">2017 \u2013 Now<\/div>\r\n <div>\r\n <div class=\"timeline-role\">Graphic Designer<\/div>\r\n <div class=\"timeline-co\">Infosys \u00b7 Chandigarh<\/div>\r\n <div class=\"timeline-desc\">Brand identity, print, digital creatives, infographics, presentations, and UI design for web and mobile applications.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-year\">2016 \u2013 2017<\/div>\r\n <div>\r\n <div class=\"timeline-role\">Project Management Office<\/div>\r\n <div class=\"timeline-co\">Infosys \u00b7 London<\/div>\r\n <div class=\"timeline-desc\">End-to-end project lifecycle management in a global delivery environment; executive dashboards and stakeholder reporting.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-year\">2010 \u2013 2015<\/div>\r\n <div>\r\n <div class=\"timeline-role\">Software Engineer<\/div>\r\n <div class=\"timeline-co\">Infosys \u00b7 Pune<\/div>\r\n <div class=\"timeline-desc\">Oracle E-Business Suite developer \u2014 Oracle Forms, customization, production support, and SDLC delivery.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SKILLS -->\r\n <section class=\"skills\" id=\"skills\">\r\n <div class=\"skills-bg\"><\/div>\r\n <div class=\"skills-header\">\r\n <div>\r\n <div class=\"section-label\">Core Skills<\/div>\r\n <h2 style=\"color: var(--cream)\">What I <em style=\"color: var(--gold)\">bring<\/em><br>to every project<\/h2>\r\n <\/div>\r\n <\/div>\r\n <div class=\"skills-grid\">\r\n <div class=\"skill-card\">\r\n <div class=\"skill-card-icon\">\u25c8<\/div>\r\n <div class=\"skill-card-title\">Interaction Design<\/div>\r\n <ul class=\"skill-card-list\">\r\n <li>UX Strategy & Research<\/li>\r\n <li>Wireframing & User Flows<\/li>\r\n <li>Prototyping & Usability Testing<\/li>\r\n <li>Personas & Journey Mapping<\/li>\r\n <li>Heuristic Evaluation<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"skill-card\">\r\n <div class=\"skill-card-icon\">\u25a6<\/div>\r\n <div class=\"skill-card-title\">Visual & Information Design<\/div>\r\n <ul class=\"skill-card-list\">\r\n <li>Data Visualization<\/li>\r\n <li>Visual Storytelling<\/li>\r\n <li>Information Architecture<\/li>\r\n <li>High-Fidelity UI Design<\/li>\r\n <li>Graphic Design (Print & Digital)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"skill-card\">\r\n <div class=\"skill-card-icon\">\u2b21<\/div>\r\n <div class=\"skill-card-title\">Design Systems<\/div>\r\n <ul class=\"skill-card-list\">\r\n <li>Component Libraries in Figma<\/li>\r\n <li>Auto Layout & Variants<\/li>\r\n <li>UI Standards & Guidelines<\/li>\r\n <li>Accessibility Compliance<\/li>\r\n <li>Developer Handoff Workflows<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"skill-card\">\r\n <div class=\"skill-card-icon\">\u25ce<\/div>\r\n <div class=\"skill-card-title\">Branding & Identity<\/div>\r\n <ul class=\"skill-card-list\">\r\n <li>Logo Design<\/li>\r\n <li>Brand Guideline Development<\/li>\r\n <li>Marketing Collateral<\/li>\r\n <li>Presentation Design<\/li>\r\n <li>Social Media Creatives<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"skill-card\">\r\n <div class=\"skill-card-icon\">\u2b1c<\/div>\r\n <div class=\"skill-card-title\">Design-to-Code<\/div>\r\n <ul class=\"skill-card-list\">\r\n <li>HTML & CSS (Responsive)<\/li>\r\n <li>Figma + Locofy Workflow<\/li>\r\n <li>React Component Export<\/li>\r\n <li>Cross-functional Collaboration<\/li>\r\n <li>Stakeholder Management<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"skill-card\">\r\n <div class=\"skill-card-icon\">\u2726<\/div>\r\n <div class=\"skill-card-title\">AI-Augmented Design<\/div>\r\n <ul class=\"skill-card-list\">\r\n <li>Locofy (Design-to-Code)<\/li>\r\n <li>Photoshop Firefly<\/li>\r\n <li>Copilot & ChatGPT<\/li>\r\n <li>Claude for Research<\/li>\r\n <li>AI-assisted Prototyping<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- TOOLS -->\r\n <section class=\"tools\">\r\n <div class=\"tools-inner\">\r\n <div class=\"tools-label\">Tools &<br>Technologies<\/div>\r\n <div class=\"tools-list\">\r\n <span class=\"tool-pill highlight\">Figma<\/span>\r\n <span class=\"tool-pill\">Adobe Photoshop<\/span>\r\n <span class=\"tool-pill\">Adobe Illustrator<\/span>\r\n <span class=\"tool-pill\">Adobe InDesign<\/span>\r\n <span class=\"tool-pill\">Adobe After Effects<\/span>\r\n <span class=\"tool-pill highlight\">Locofy<\/span>\r\n <span class=\"tool-pill\">HTML & CSS<\/span>\r\n <span class=\"tool-pill\">React (via Locofy)<\/span>\r\n <span class=\"tool-pill highlight\">Copilot<\/span>\r\n <span class=\"tool-pill\">Photoshop Firefly<\/span>\r\n <span class=\"tool-pill\">ChatGPT<\/span>\r\n <span class=\"tool-pill highlight\">Claude<\/span>\r\n <span class=\"tool-pill\">Oracle E-Business Suite<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- WORK -->\r\n <section class=\"work\" id=\"work\">\r\n <div class=\"work-header\">\r\n <div>\r\n <div class=\"section-label\">Portfolio<\/div>\r\n <h2>Selected <em>Work<\/em><\/h2>\r\n <\/div>\r\n <a href=\"https:\/\/wanchamehtadesign.in\" class=\"btn-secondary\" target=\"_blank\">View Full Portfolio \u2192<\/a>\r\n <\/div>\r\n <div class=\"work-grid\">\r\n <div class=\"work-card dark\">\r\n <div>\r\n <div class=\"work-card-num\">01<\/div>\r\n <span class=\"work-card-tag\">UX Design<\/span>\r\n <div class=\"work-card-title\">Enterprise UX & Interaction Design<\/div>\r\n <div class=\"work-card-meta\">Infosys \u00b7 Figma \u00b7 Visualization<\/div>\r\n <\/div>\r\n <a href=\"https:\/\/wanchamehtadesign.in\/?page_id=1830\" target=\"_blank\" class=\"work-card-arrow\" style=\"text-decoration: none; color: inherit;\">\u2197<\/a>\r\n <\/div>\r\n <div class=\"work-card rust\">\r\n <div>\r\n <div class=\"work-card-num\">02<\/div>\r\n <span class=\"work-card-tag\">Branding<\/span>\r\n <div class=\"work-card-title\">Brand Identity & Visual Systems<\/div>\r\n <div class=\"work-card-meta\">Logo \u00b7 Guidelines \u00b7 Collateral<\/div>\r\n <\/div>\r\n <a href=\"https:\/\/wanchamehtadesign.in\/?page_id=2025\" target=\"_blank\" class=\"work-card-arrow\" style=\"text-decoration: none; color: inherit;\">\u2197<\/a>\r\n <\/div>\r\n <div class=\"work-card\">\r\n <div>\r\n <div class=\"work-card-num\">03<\/div>\r\n <span class=\"work-card-tag\">Website Redesign<\/span>\r\n <div class=\"work-card-title\">Web Redesign & Digital Experience<\/div>\r\n <div class=\"work-card-meta\">UX Research \u00b7 Visual Design \u00b7 Prototype<\/div>\r\n <\/div>\r\n\r\n <a href=\"https:\/\/wanchamehtadesign.in\/?page_id=1507\" target=\"_blank\" class=\"work-card-arrow\" style=\"text-decoration: none; color: inherit;\">\u2197<\/a>\r\n <\/div>\r\n <div class=\"work-card\">\r\n <div>\r\n <div class=\"work-card-num\">04<\/div>\r\n <span class=\"work-card-tag\">Illustration & Motion<\/span>\r\n <div class=\"work-card-title\">Illustration, Video & Visual Narratives<\/div>\r\n <div class=\"work-card-meta\">After Effects \u00b7 Infographics \u00b7 Storytelling<\/div>\r\n <\/div>\r\n <a href=\"https:\/\/wanchamehtadesign.in\/?page_id=1831\" target=\"_blank\" class=\"work-card-arrow\" style=\"text-decoration: none; color: inherit;\">\u2197<\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CERTIFICATIONS -->\r\n <section class=\"certs\" id=\"certifications\">\r\n <div class=\"section-label\">Credentials<\/div>\r\n <h2>Education & <em>Certifications<\/em><\/h2>\r\n <div class=\"certs-grid\">\r\n <div class=\"cert-item\">\r\n <div class=\"cert-icon\">\u2b21<\/div>\r\n <div class=\"cert-name\">Design for the 21st Century<\/div>\r\n <div class=\"cert-issuer\">Don Norman<\/div>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-icon\">\u25c8<\/div>\r\n <div class=\"cert-name\">UX Design Professional Certificate<\/div>\r\n <div class=\"cert-issuer\">Google<\/div>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-icon\">\u25a6<\/div>\r\n <div class=\"cert-name\">Strategic Design Program<\/div>\r\n <div class=\"cert-issuer\">RISD Centre for Complexity<\/div>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-icon\">\u2726<\/div>\r\n <div class=\"cert-name\">Design Thinking<\/div>\r\n <div class=\"cert-issuer\">Professional Certification<\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--warm);\">\r\n <div style=\"font-size: 12px; color: var(--muted);\">\r\n <span style=\"font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--ink);\">B.Tech \u2014 Instrumentation & Control<\/span>\r\n  \u00b7  Graphic Era Institute of Technology, Dehradun  \u00b7  2010\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CONTACT -->\r\n <section class=\"contact\" id=\"contact\">\r\n <div class=\"contact-left\">\r\n <div class=\"section-label\">Contact<\/div>\r\n <h2>Let's create something <em>remarkable<\/em><\/h2>\r\n <p>Open to design consulting, collaboration, and conversations about complex challenges worth solving.<\/p>\r\n <\/div>\r\n <div class=\"contact-right\">\r\n <div class=\"contact-item\">\r\n <span class=\"contact-item-label\">Email<\/span>\r\n <a href=\"mailto:wanchamehta@gmail.com\" class=\"contact-item-value\">wanchamehta@gmail.com<\/a>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <span class=\"contact-item-label\">Phone<\/span>\r\n <a href=\"tel:+917983269889\" class=\"contact-item-value\">+91 79832 69889<\/a>\r\n <\/div>\r\n <div class=\"contact-item\">\r\n <span class=\"contact-item-label\">Portfolio<\/span>\r\n <a href=\"https:\/\/wanchamehtadesign.in\" class=\"contact-item-value\" target=\"_blank\">wanchamehtadesign.in<\/a>\r\n <\/div>\r\n <div class=\"contact-item\" style=\"border-bottom: none;\">\r\n <span class=\"contact-item-label\">Based in<\/span>\r\n <span class=\"contact-item-value\" style=\"cursor: default;\">Chandigarh, India<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- FOOTER -->\r\n <footer>\r\n <p>\u00a9 2025 Wancha Mehta. All rights reserved.<\/p>\r\n <p>Interaction & Visual Designer \u00b7 Infosys Limited<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ CURSOR\r\n const dot = document.getElementById('cursorDot');\r\n const ring = document.getElementById('cursorRing');\r\n let mx = 0, my = 0, rx = 0, ry = 0;\r\n document.addEventListener('mousemove', e => {\r\n mx = e.clientX; my = e.clientY;\r\n dot.style.left = mx + 'px';\r\n dot.style.top = my + 'px';\r\n });\r\n (function animateRing() {\r\n rx += (mx - rx) * 0.12;\r\n ry += (my - ry) * 0.12;\r\n ring.style.left = rx + 'px';\r\n ring.style.top = ry + 'px';\r\n requestAnimationFrame(animateRing);\r\n })();\r\n document.querySelectorAll('a, button, .work-card, .skill-card').forEach(el => {\r\n el.addEventListener('mouseenter', () => {\r\n ring.style.width = '56px'; ring.style.height = '56px'; ring.style.opacity = '0.8';\r\n });\r\n el.addEventListener('mouseleave', () => {\r\n ring.style.width = '36px'; ring.style.height = '36px'; ring.style.opacity = '0.5';\r\n });\r\n });\r\n\r\n \/\/ SCROLL REVEAL\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach((entry, i) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => entry.target.classList.add('visible'), 80 * i);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n document.querySelectorAll('.timeline-item, .skill-card, .work-card, .cert-item').forEach(el => {\r\n observer.observe(el);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Wancha Mehta \u2014 Interaction & Visual Designer Wancha Mehta About Skills Work Contact Interaction & Visual Designer Crafting Experiences That Think 15 years in design, engineering, and product \u2014 distilled into work that clarifies complexity, guides decisions, and makes technology feel human. View Portfolio Let’s Talk 15 Years of IT Experience 9+ Years in UX […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":true,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=\/wp\/v2\/pages\/17"}],"collection":[{"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":585,"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":2235,"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/2235"}],"wp:attachment":[{"href":"https:\/\/wanchamehtadesign.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}