Guru Gowda | Personal Portfolio

A video-led personal portfolio exploring the intersection of engineering, AI, cloud, and human connection. Built with React, TypeScript, Vite, and Tailwind CSS.

View the live portfolio

GitHub | LinkedIn

Highlights

• Full-screen video hero with horizontal mouse-controlled scrubbing and queued seeks.
• Typewriter introduction, independently animated actions, and copy-email feedback.
• Responsive navigation with keyboard focus management and reduced-motion support.
• Selected projects, engineering philosophy, career history, certifications, and contact links.
• A standalone HTML build that runs directly in a browser without a local server.

Development

Use Node.js 22.13+ (22 LTS recommended).

npm install
npm run dev

Open the local URL printed by Vite. If the default port is occupied, Vite selects the next available port.

Standalone Build

After installing dependencies, generate the standalone files:

npm run build

The build creates portfolio.html in the project root and an identical dist/index.html. JavaScript and CSS are embedded, so either generated file can be opened directly in a browser without Node.js or a server. The source index.html redirects direct-file visits to portfolio.html after a build exists.

Generated files are not committed to this repository. Run the build again after editing the source. The fonts, video, and profile image require an internet connection.

Deployment

The live portfolio is hosted on Netlify. To deploy your own build, upload the dist folder to a static host. For Git-connected deployment, use:

Setting	Value
Build command	npm run build
Publish directory	dist
Node.js	22 LTS

Checks

npm test
npm run build
npm run preview

The focused tests cover video-scrub direction, sensitivity, clamping, unavailable metadata, and accumulated target time. The production build also runs TypeScript validation.

Content & Behavior

• src/App.tsx: hero, navigation, contact actions, and clipboard feedback.
• src/Portfolio.tsx: projects, expertise, career history, credentials, and contact details.
• src/hooks/useVideoScrub.ts: paused, mouse-controlled video with one seek in flight and a queued target.
• src/hooks/useTypewriter.ts: configurable typing speed and delay, with reduced-motion support.
• src/index.css: design tokens, responsive layouts, and animations.

The hero video never autoplays. Mouse movement scrubs the timeline; touch devices display a still frame. Reduced-motion preferences disable scrubbing and display the complete introduction immediately. The action pills appear independently after 400 ms.

GoldTrader links to the verified public repository and live demo. ResolveAI, Teams Automation Toolkit, and AI & Agent Lab are labeled as explorations, with links to their descriptions on the GitHub profile rather than unverified repositories.

The Helvetica font stylesheets, hero video, and GitHub portrait load from external sources and require an internet connection. Email copying uses the Clipboard API, available on localhost and HTTPS; a normal email link is also provided. There is no contact-form backend or AI service.

Only React and ReactDOM are runtime dependencies. Development dependencies are limited to TypeScript, Vite, Tailwind, their plugins, and type definitions.