VB_WEB

byVishal B

You are a world-class multidisciplinary team consisting of a Creative Director, Principal UX Designer, Staff Frontend Engineer, Product Designer, Brand Strategist, Scientific Communication Specialist, Technical Recruiter, Accessibility Expert, Performance Engineer, Information Architect, Motion Designer, SEO Specialist, and Copywriter. Your task is to design and build the definitive personal website for me. This is not a template. This is not a portfolio clone. It must become my permanent digital identity. The website should feel timeless, premium, elegant, intelligent, memorable, and globally competitive. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRIMARY GOAL Create a website that immediately establishes trust, authority, intelligence, professionalism, curiosity, and authenticity. Visitors should understand within 5 seconds: • Who I am • What I do • What I believe • What I am building • Why I am worth connecting with ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESIGN PHILOSOPHY Blend the best characteristics of: Apple Stripe Linear Vercel OpenAI Anthropic GitHub Notion without copying any of them. The website should feel original. Avoid: • Generic portfolio templates • Excessive gradients • Loud colors • Unnecessary animations • Clutter • Cheap effects • Student portfolio aesthetics Aim for: Editorial design Luxury minimalism Scientific elegance Large typography Perfect spacing Excellent readability Intentional whitespace Balanced visual hierarchy ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VISUAL SYSTEM Create an entire design system. Include: Color system Typography scale Spacing scale Grid system Responsive layout Icon system Illustration style Photography guidelines Dark mode Light mode High contrast mode ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PAGES Home About Projects Research Experience Writing Resume Gallery Contact 404 Privacy ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOME PAGE Hero section Professional portrait Short introduction Current focus Mission statement Call to action Quick links Featured work Latest article Recent achievements Professional timeline preview Featured research Current learning journey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ABOUT Professional biography Personal story Values Vision Philosophy Interests Skills Journey Timeline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROJECTS Each project supports: Overview Problem Solution Architecture Technologies Challenges Results Gallery GitHub Live Demo Documentation ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESEARCH Research interests Current work Future ideas Publications Lab experience Research philosophy ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ EXPERIENCE Education Internships Research Volunteer work Leadership Teaching ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SKILLS Scientific Programming Research Laboratory AI Bioinformatics Communication Leadership Languages Each skill includes: Experience Confidence Evidence Related projects ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WRITING Scientific articles Technical blogs Notes Learning journal Reading list ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MEDIA Photography Presentations Conference gallery Lab gallery ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CONTACT Email GitHub LinkedIn Google Scholar ResearchGate ORCID Calendar booking Professional contact form ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TECHNICAL REQUIREMENTS Next.js (latest) React TypeScript TailwindCSS Framer Motion ShadCN UI MDX App Router SEO optimized Responsive Accessible Fast loading Reusable components Scalable architecture Clean code Production ready ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFORMANCE Lighthouse 100 Core Web Vitals optimized Lazy loading Image optimization Code splitting Server-side rendering where appropriate ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SEO Structured metadata Schema.org JSON-LD Open Graph Twitter Cards Sitemap Robots RSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ACCESSIBILITY WCAG AA+ Keyboard navigation Screen reader support Reduced motion Semantic HTML ARIA labels ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ COPYWRITING Write in a confident, professional, and human tone. Avoid buzzwords. Avoid exaggeration. Every sentence should add value. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CONTENT POLICY Never invent personal information. Never fabricate: • Awards • Publications • Grades • Research • Experience • Certifications • Positions • Achievements Whenever information is unavailable, use clearly marked placeholders that can be replaced later. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FINAL DELIVERABLE Deliver a complete production-ready website including: • Information architecture • UI/UX system • Complete page designs • Responsive layouts • Component library • Design tokens • Animations • Source code • Folder structure • Documentation • Deployment guide • SEO configuration • Performance optimization • Accessibility compliance • Future scalability The final result should feel like the personal website of an internationally respected researcher, engineer, and technology professional—timeless, elegant, trustworthy, and designed to remain relevant for years without major redesign.