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.

See the screensBuild something like this
Forward Deployed Engineer Portfolio: cover screen
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.

01The 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.

02Who it is for

Hiring managers, recruiters and enterprise clients evaluating a senior Forward Deployed Engineer.

03Features

  • 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

04Pages & screens

  • Overview (keyboard command centre)
  • Deployments & case studies
  • Case-study dossier drawer
  • Methodology
  • Stack & Radar
  • Experience / career dossier
  • Contact / engagement enquiry

05Stack

HTML5
CSS3 (custom properties, backdrop-filter)
Vanilla JavaScript
Web Audio API
Google Fonts (Plus Jakarta Sans, JetBrains Mono)
AI-generated visuals and moodboard

06How 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.

07Design 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