PROCESS NOTES
Sources and inspiration
Where I pulled ideas, tools, and references from while building this project.
Design inspiration
- The color scheme was inspired by LCD terminal design, especially the high-contrast green-on-dark feeling of old monochrome screens translated into a cleaner portfolio palette.
- Devstarter inspired the layout template for this portfolio, especially the one-page developer portfolio structure, simple navigation, project cards, tags, and light/dark visual system.
Tutorials and docs
- Tailwind CSS for utility-first layout and responsive styling decisions across the portfolio.
- Web3Forms for the contact form backend used on the portfolio site.
- Google Fonts for Space Grotesk, Inter, and IBM Plex Mono across the site.
- Tailwind CSS dark mode docs for the class-based light and dark theme behavior.
Accessibility and layout references
- WebAIM: Skip Navigation Links for the keyboard-accessible skip link pattern.
- MDN: The Main element for using a clear main content landmark.
- MDN: object-fit for cropping responsive project and profile images.
- MDN: Flexbox and MDN: CSS Grid for the mobile-first page and project layouts.
Browser APIs and platform references
- MDN: Intersection Observer API for the scroll-triggered reveal behavior on the portfolio.
- MDN: matchMedia() for reduced-motion checks and theme preference detection.
- MDN: localStorage for saving the user's theme choice between visits.
- MDN: Fetch API for loading contact-form requests.