// portfolio.jsx — the main portfolio app (glass/liquid futuristic). const PROFILE = { name: 'Viswa Mihir Pannala', firstName: 'Viswa Mihir', lastName: 'Pannala', role: 'Senior Product Manager', tagline: 'Vision. Execution. Scale.', bio: 'Building enterprise products at the intersection of AI and business.', email: 'viswamihir.p@gmail.com', phone: '+91 63045 27296', whatsapp: '+91 63045 27296', linkedin: 'https://www.linkedin.com/in/viswamihirpannala/', instagram: 'viswamihir_p', snapchat: 'viswamihir_p', photo: 'assets/viswa.png', }; // ── SVG icons ─────────────────────────────────────────────────────────────── const Icon = { linkedin: ( ), instagram: ( ), snapchat: ( ), whatsapp: ( ), mail: ( ), download: ( ), copy: ( ), check: ( ), arrow: ( ), }; // ── Palettes ──────────────────────────────────────────────────────────────── const PALETTES = { vision: { name: 'Vision', bg: '#08070b', primary: '#E63DB6', secondary: '#F2902B', accent: '#2BBFC9', ink: '#F7F1F5', orbs: ['#E63DB6', '#F2902B', '#2BBFC9'] }, cyanViolet: { name: 'Cyan / Violet', bg: '#06041a', primary: '#5BE7FF', secondary: '#B57BFF', accent: '#FF6BD6', ink: '#EAF2FF', orbs: ['#5BE7FF', '#B57BFF', '#FF6BD6'] }, warmMagenta: { name: 'Magenta / Amber', bg: '#170614', primary: '#FF7AC6', secondary: '#FFB45A', accent: '#FF4D7E', ink: '#FFEEF5', orbs: ['#FF7AC6', '#FFB45A', '#FF4D7E'] }, greenLime: { name: 'Lime / Aqua', bg: '#04140d', primary: '#7CFF9F', secondary: '#3FE0C2', accent: '#D8FF5E', ink: '#E8FFE8', orbs: ['#7CFF9F', '#3FE0C2', '#D8FF5E'] }, iridescent: { name: 'Iridescent', bg: '#0a0822', primary: '#9AD8FF', secondary: '#FFB1F4', accent: '#FFE08A', ink: '#F4F0FF', orbs: ['#9AD8FF', '#FFB1F4', '#FFE08A'] }, mono: { name: 'Mono', bg: '#0a0a0c', primary: '#FFFFFF', secondary: '#BBBBBB', accent: '#888888', ink: '#FFFFFF', orbs: ['#FFFFFF', '#AAAAAA', '#666666'] }, }; const FONT_STACKS = { instrument: { name: 'Instrument Serif', display: '"Instrument Serif", Georgia, serif', mono: '"JetBrains Mono", ui-monospace, monospace', google: 'Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500' }, spaceGrotesk: { name: 'Space Grotesk', display: '"Space Grotesk", system-ui, sans-serif', mono: '"JetBrains Mono", ui-monospace, monospace', google: 'Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500' }, manrope: { name: 'Manrope', display: '"Manrope", system-ui, sans-serif', mono: '"IBM Plex Mono", ui-monospace, monospace', google: 'Manrope:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500' }, }; // ── vCard generation ──────────────────────────────────────────────────────── function buildVCard() { const v = [ 'BEGIN:VCARD', 'VERSION:3.0', `N:${PROFILE.lastName};${PROFILE.firstName};;;`, `FN:${PROFILE.name}`, `TITLE:${PROFILE.role}`, `EMAIL;TYPE=INTERNET:${PROFILE.email}`, `TEL;TYPE=CELL,VOICE:${PROFILE.phone}`, `URL;TYPE=LinkedIn:${PROFILE.linkedin}`, `URL;TYPE=Instagram:https://instagram.com/${PROFILE.instagram}`, `URL;TYPE=Snapchat:https://snapchat.com/add/${PROFILE.snapchat}`, `NOTE:${PROFILE.bio}`, 'END:VCARD', ].join('\n'); return v; } function downloadVCard() { const blob = new Blob([buildVCard()], { type: 'text/vcard;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'Viswa-Mihir-Pannala.vcf'; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 1500); } // ── Reactive pointer parallax ─────────────────────────────────────────────── function usePointer() { const [p, setP] = React.useState({ x: 0.5, y: 0.5 }); React.useEffect(() => { const onMove = (e) => { const t = e.touches ? e.touches[0] : e; setP({ x: t.clientX / window.innerWidth, y: t.clientY / window.innerHeight }); }; window.addEventListener('mousemove', onMove); window.addEventListener('touchmove', onMove, { passive: true }); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('touchmove', onMove); }; }, []); return p; } // ── Live clock in IST ────────────────────────────────────────────────────── function useISTClock() { const [now, setNow] = React.useState(() => new Date()); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const fmt = new Intl.DateTimeFormat('en-GB', { timeZone: 'Asia/Kolkata', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, }); return fmt.format(now); } // ── Photo orb (with morph shape + liquid blob outline) ────────────────────── const PhotoOrb = ({ shape, palette, pointer }) => { const clock = useISTClock(); // Rotation amount based on pointer (subtle 3D tilt) const tiltX = (pointer.y - 0.5) * -10; const tiltY = (pointer.x - 0.5) * 10; const clip = shape === 'circle' ? 'circle(50% at 50% 50%)' : shape === 'hex' ? 'polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)' : 'url(#blobClip)'; return (

{/* Corner ticks framing the whole composition */} {/* Concentric guide rings + orbital text */} {/* Animated glow halo */}

{/* SVG defs for blob clip path */}

{/* (decorative plates removed at user's request) */}

); }; // ── Social card ───────────────────────────────────────────────────────────── const SocialCard = ({ icon, label, handle, href, color }) => { const open = (e) => { e.preventDefault(); // Force a new top-level window so preview iframes (which block embedding // of LinkedIn / Instagram / etc.) don't try to load the site inline. window.open(href, '_blank', 'noopener,noreferrer'); }; return ( {icon} {label} {handle} {Icon.arrow} ); }; // ── Defaults the user can tweak (parsed and rewritten on disk) ───────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "paletteKey": "vision", "background": "orbs", "photoShape": "circle", "motion": 35, "density": "regular", "fontKey": "instrument" }/*EDITMODE-END*/; // ── App root ──────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [copied, setCopied] = React.useState(null); const pointer = usePointer(); const palette = PALETTES[t.paletteKey] || PALETTES.vision; const fonts = FONT_STACKS[t.fontKey] || FONT_STACKS.instrument; const intensity = t.motion / 100; // load chosen google font React.useEffect(() => { const id = 'gfont-' + t.fontKey; if (document.getElementById(id)) return; const link = document.createElement('link'); link.id = id; link.rel = 'stylesheet'; link.href = `https://fonts.googleapis.com/css2?family=${fonts.google}&display=swap`; document.head.appendChild(link); }, [t.fontKey]); // density mapping const density = t.density === 'compact' ? 0.85 : t.density === 'comfy' ? 1.15 : 1; // copy helper const copyToClipboard = (key, text) => (e) => { e.preventDefault(); navigator.clipboard?.writeText(text); setCopied(key); setTimeout(() => setCopied(null), 1400); }; // CSS variable bag const rootStyle = { '--bg': palette.bg, '--ink': palette.ink, '--primary': palette.primary, '--secondary': palette.secondary, '--accent': palette.accent, '--font-display': fonts.display, '--font-mono': fonts.mono, '--density': density, }; return (

{/* fixed grain + scanlines for texture */}

{/* pointer-following spotlight */}

VMP.

{PROFILE.tagline}

Viswa Mihir Pannala

{PROFILE.bio}

{Icon.mail} Email me

LET'S CATCH UP

{/* Toast */} {copied && (

{Icon.check}{copied === 'phone' ? 'Phone' : 'Email'} copied

)} {/* Tweaks panel */} [PALETTES[k].primary, PALETTES[k].secondary, PALETTES[k].accent])} onChange={(arr) => { const idx = Object.keys(PALETTES).findIndex(k => PALETTES[k].primary === arr[0]); if (idx >= 0) setTweak('paletteKey', Object.keys(PALETTES)[idx]); }} /> setTweak('background', v)} /> setTweak('motion', v)} /> setTweak('photoShape', v)} /> setTweak('density', v)} /> ({ value: k, label: FONT_STACKS[k].name }))} onChange={(v) => setTweak('fontKey', v)} />

); } window.PortfolioApp = App;