MariaBrioPortfolio is a professional, minimalist single-page portfolio template built on plain HTML, Sass, and JavaScript, created to present a researcher's career to recruiters. This MIT-licensed project by GitHub user JuditKaramazov was built for Chemical Engineer and PhD Maria Brió Pérez, and the live demo runs at mariabrio.vercel.app.
What is MariaBrioPortfolio?
MariaBrioPortfolio is a static portfolio template that turns profile information, skills, work history, research articles, and contact details into a clean, single-page landing site. It accepts content written directly into the HTML and uses Sass for styling and minimal JavaScript for interaction, producing a fast, framework-free webpage that can be deployed on Vercel, GitHub Pages, or any static host. No build step is required beyond compiling Sass to CSS.
Key Features
- Single-page landing layout — The entire portfolio fits on one scrollable page with sections for About, Skills, Experience, Articles, and Contact, giving recruiters a complete overview at a glance.
- Day'n'Nite theme switcher — A built-in dark/light mode toggle lets visitors choose their preferred appearance, with colors defined in Sass for easy customization.
- EmailJS contact form — The contact form sends email using client-side JavaScript only, with no server needed; the repository includes sample
emailjs.initandsendFormcode that must be configured with your own EmailJS user, service, and template IDs. - Swiper slider — Recent works are displayed in an interactive slider powered by Swiper, a free and open-source mobile touch slider with hardware-accelerated transitions; it can be loaded from CDN.
- Accordion skills section — Skills are grouped into collapsible accordion panels for technical expertise, project management, software, and languages, keeping the page compact.
- Visual timeline experience — Education and employment history are presented as a visual timeline, so career progression is easy to scan.
- Research and CV links — The About section links to Maria's LinkedIn, ORCID profile, her doctoral thesis, and a downloadable PDF CV, showing how academic assets can be integrated.
- MIT License — The repository is free to reuse and adapt under the permissive MIT License.
Who is MariaBrioPortfolio for?
MariaBrioPortfolio is aimed at job-seeking researchers, PhD graduates, and early-career professionals who want a keyword-rich online resume without learning a JavaScript framework. Developers can also use it as a clean starting point for a personal site, since the codebase is plain HTML, Sass, and JavaScript with a documented EmailJS integration.
What can you do with MariaBrioPortfolio?
- Researchers: display recent publications and link out to ORCID and a doctoral thesis to strengthen academic credibility.
- Chemical and materials engineers: use the accordion and timeline sections to highlight technical skills, project management, and industrial experience.
- Creative professionals: replace the Swiper content with images of recent work to build a visual portfolio section.
- Web developers: fork the repository to study the EmailJS integration, theme switcher, and Sass architecture, or adapt the design for a client.
How does MariaBrioPortfolio work?
To use the template, edit the HTML content in the About, Skills, and Experience sections, then replace the placeholder profile picture, CV file, and social links. Compile the Sass files with an extension like the Live Sass Compiler for Visual Studio Code, and commit the resulting CSS. For the contact form to work, create an EmailJS account, connect a supported email service, and replace the placeholder user ID, service ID, and template ID in the js/main.js file. The author also recommends checking Swiper's official documentation if you load the slider from CDN.
