This repository contains the source code for my personal portfolio website: migueldilalla.github.io. It reflects the current state of my technical and creative knowledge, serving as a gateway to both my background and selected projects.
Inspired by top-tier developer portfolios, this site follows a clear, focused structure:
- Bio Section — Featuring an interactive podcast-style introduction generated from my own bio using Google Notebook LM's "text-to-podcast" feature. Two virtual hosts guide the listener through my profile, adding dynamism to the static format.
- Projects Section — Highlighting a curated set of personal and professional experiments.
- Contact Section — For direct outreach and connection.
You're invited to explore the site thoroughly and listen to the podcasted bio for an immersive overview of my current professional journey.
The site adopts a visually bold and playful style, with a vivid color palette (yellows, reds, and blacks), large fonts, and friendly typographic hierarchy. Its layout is mobile-optimized and scroll-guided, encouraging exploration of each section as a standalone experience.
The portfolio emphasizes:
- Simplicity & clarity, both in code and interface.
- Static deployment for maximum accessibility and ease of hosting.
- Clean UX structure inspired by the best beginner-to-intermediate personal sites.
- Audio integration as a unique layer of interactivity.
- HTML5 for structure and semantics
- Tailwind CSS for utility-first styling and responsive design
- Vanilla JavaScript for interactive elements
- Custom animations and scroll-based interactivity
- Markdown-based content blocks
- Audio playback controlled via JavaScript
- GitHub Pages static deployment
You can preview this site locally with any static server. For example:
# In the root folder
npx live-serverOr simply open index.html in your browser.
The project includes modular assets:
/assets: Audio, images, JS, CSS/content: Markdown source files for bio, pitch, and portfolio blocks/projects: Linked HTML documents for in-depth project pages/ideas: Highlights from blog-style thought pieces. Each subpage renders its project's README and includes buttons linking to available demos and repositories.index.html: The landing page
This site is a static foundation, easy to maintain and iterate on. It’s deliberately simple to prioritize clarity over complexity, while integrating just enough interactivity to remain engaging.
You’ll find links to my GitHub, LinkedIn, and other platforms directly on the homepage.
Thanks for visiting — and for listening.