Concept · built with AI tools
Forward Deployed Engineer Portfolio A keyboard-driven portfolio for a Forward Deployed Engineer
A personal portfolio website Srini designed and built for Sriram, a Forward Deployed Engineer. The home page is a no-scroll 'keyboard command centre': each key on an on-screen keyboard opens a slide about his work, with sound and an auto-tour. Five supporting pages cover client deployments, methodology, technical stack, career history and an engagement enquiry form.
- Status
- Concept · built with AI tools
- Type
- Website
- Category
- Portfolio
- Version
- 0.6
- Built with
- HTML5, CSS3, Vanilla JavaScript …
This is a self-initiated concept, designed and built by Srini with AI tools. It is not a real company or client project.
The problem
A Forward Deployed Engineer's work sits between consulting and engineering, and a plain CV page struggles to show both the business outcomes and the technical depth. The portfolio needed to let a hiring manager or client skim the headline story in seconds, then drill into case-study detail only when they want it.
Who it is for
Hiring managers, recruiters and enterprise clients evaluating a senior Forward Deployed Engineer.
Features
- Keyboard command centre home page: 12 slides, each opened by pressing or tapping a key
- Arrow-key navigation, Esc to reset, Space for auto-play, plus an Auto-Tour button
- Optional key-press sounds via the Web Audio API
- Deployments page with sector filters (Banking, Healthcare, Pharma, Crisis Recovery)
- Slide-over 'field dossier' drawer for each case study, with previous/next navigation
- Methodology page with an FDE vs consultant vs traditional engineer comparison and an interactive diagnostic
- Stack & Radar page grouping tools by capability area
- Experience page as an expandable career timeline with résumé download
- Engagement enquiry form on the Contact page
- Dark/light theme toggle, remembered between visits
- Responsive layouts with a mobile navigation drawer
Pages & screens
- Overview (keyboard command centre)
- Deployments & case studies
- Case-study dossier drawer
- Methodology
- Stack & Radar
- Experience / career dossier
- Contact / engagement enquiry
Stack
- HTML5
- CSS3 (custom properties, backdrop-filter)
- Vanilla JavaScript
- Web Audio API
- Google Fonts (Plus Jakarta Sans, JetBrains Mono)
- AI-generated visuals and moodboard
How I built it with AI
Srini built the site with AI tools, iterating through versions to v0.6 (an earlier index.backup.html is kept in the source). The folder includes a moodboard of AI-generated reference images and the generated tech visuals (chip, keyboard, cloud, security, AI) used on the slides. No prompt file was included with this project.
Design highlights
- Highlight 01 — Replaced the usual scrolling hero with a 100vh keyboard metaphor that suits an engineer audience and keeps the headline story on one screen
- Highlight 02 — Progressive disclosure: case-study cards stay short and full detail opens in a slide-over drawer, so the page never becomes a wall of text
- Highlight 03 — Every slide pairs a short narrative with three outcome metrics and a single call to action
- Highlight 04 — Dark technical aesthetic (navy, cyan accents, monospace labels) with a light-mode option for readability