Site Navigation Map
Complete linking structure for Raghvendra Singh portfolio
All Pages
Current HTML files in this portfolio directory
-
Homepageportfolio-homepage.html
Main landing page with dual verticals, impact section, work teaser, and inquiry CTAs.
-
Selected Workselected-work.html
Project portfolio with category filters and case-study entry points.
-
Servicesservices.html
B2B consulting offerings and product comparison.
-
Inquiryinquiry.html
Primary contact form for leads and project discussions.
-
Aboutabout.html
Bio, role context, and personal narrative.
-
Archivejournal.html
Long-form writing and thought pieces.
-
Major Case Studiescase-study-porsche.html / case-study-verizon.html / case-study-rapipay.html / case-study-shuttl.html / case-study-crowley.html / case-study-hempel.html / case-study-nagarro.html / case-study-omf.html / case-study-iiad.html
Deep-dive project pages linked from selected work and impact blocks, each with direct inquiry CTAs.
Navigation Structure
Primary navigation pattern
- Logo:
portfolio-homepage.html - Work:
selected-work.html - Services:
services.html - About:
about.html - Archive:
journal.html - Contact CTA:
inquiry.html
Footer links
- External site: raghvendrasingh.com
- LinkedIn: linkedin.com/in/raghvendrasingh23
- Work:
selected-work.html - Services:
services.html - Contact:
inquiry.html - Site Map:
site-navigation-map.html
Responsive Design Implementation
Breakpoints and behavior
| Breakpoint | Target Device | Key Changes |
|---|---|---|
| Desktop (1100px+) | Desktop, large tablets | Full multi-column layout, richer hover behavior, full motion profile. |
| Tablet (680px - 1100px) | iPad, Android tablets | Stacked sections, denser spacing, simplified grids. |
| Mobile (up to 680px) | Phones | Single-column layouts, compressed typography, reduced paddings. |
| Reduced Motion | Accessibility preference | Animation effects can be minimized or disabled. |
Mobile-specific features
Touch targetsInteractive areas stay large enough for touch accuracy.
PerformanceComplex visuals and motion are reduced on smaller screens.
Layout adaptationMulti-column content collapses to single-column flow.
AccessibilityKeyboard focus and semantic HTML are preserved across breakpoints.
Deployment Checklist
Status
- Complete: Added dedicated
site-navigation-map.htmlpage. - Complete: Added map link in key page footers.
- Complete: Aligned map links to local file naming.
- Complete: End-to-end click-through path connected from homepage to selected work, case studies, services/about, and inquiry.
- Complete: Inquiry page now includes front-end form validation and local success state (no backend dependency).
File Structure
portfolio/ |- portfolio-homepage.html |- selected-work.html |- services.html |- inquiry.html (form workflow) |- about.html |- journal.html |- case-study-porsche.html |- case-study-verizon.html |- case-study-iiad.html |- case-study-rapipay.html |- case-study-shuttl.html |- case-study-crowley.html |- case-study-hempel.html |- case-study-nagarro.html |- case-study-omf.html |- site-navigation-map.html <- this page
Key Technical Specifications
Design tokens used in portfolio pages
- Display font: Bebas Neue
- Body font: Roboto Condensed
- Mono font: IBM Plex Mono
- Core colors: Ink #000000, Paper #ffffff, Red #ff3000, Blue #1b4fe4, Gray #888888