Maria Brió Pérez

<a href="https://mariabrio.vercel.app"> <img src="/assets/favicon/android-chrome-192x192.png" width="70" alt="Portfolio's favicon."> </a> A professional, minimalist portfolio <div align="center"> <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5 badge" title="HTML" /> <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript badge" title="JavaScript" /> <img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white" alt="Sass badge" title="Sass" /> </div> <a href="https:/github.com/JuditKaramazov">🐱 /JuditKaramazov</a> <a href="https://karamazfolio.xyz/">📍 Portfolio</a> <a href="https://karamablog.xyz">☕ Blog</a>

🔧 Getting Started
🚪 Introduction
💾 Content
🔮 Features
💄 Style
🥳 Immense thanks to them awesome Sponsors
🏛 License & Copyright

🔧 Getting Started

As surprising as it might sound after such a long time experimenting with different libraries and frameworks, this project is based upon the essential elements giving our work real sense: HTML, Sass (also known as "CSS with superpowers". Woah!), and minimal usage of JavaScript. Back to the roots, guys.

Undoubtedly (and before someone tries to kill me), CSS is among the core languages of the open web and is standardized across Web browsers, as we all know. When it comes to Sass, it's usually described as the most mature, stable, and powerful professional-grade CSS extension language in the world. Actively supported and developed by a consortium of several tech companies and hundreds of developers, there are an endless number of frameworks built with Sass, like Bootstrap, for instance. Quite an interesting frontend toolkit, in my opinion.

Independently of that, and just in case you are not familiar with Sass, I would highly recommend giving the New Live Sass Compiler a try now that the old one is deprecated. Keep something in mind, though: there is no "best" here. If anything, the "best" option will always be the one that fits your specific needs better, so feel free to give different tools until you find the one for your future project!

🚪 Introduction

Looking for a job should indeed be considered a job in itself. Regardless of how pessimistic the previous statement might sound, I've never experienced something as depressing, draining, and exhausting as trying to find something, whatever it is, wherever it is.

Some months ago, during quite a casual conversation with a senior programmer who allowed me to express my doubts, insecurities, and fears regarding the sector itself, he highlighted the importance of having not only a well-structured curriculum (or LinkedIn page) but an even better organized, clean, and polished portfolio. "Recruiters do not have the time". "Only keywords matter". "Some positions are not truly open, in the end". Although I always kept this portfolio idea in mind (you can find my own one here, in case you are curious), recruiters' minds and behaviors are still a mystery to me - and I am not the only one feeling lost and vulnerable.

Certificates. Trainings. Degrees. We have a huge vested interest in them, partly because it's education that's meant to take us into this future that we can't grasp. I am not denying the inherent truth of it, though; a solid education is a pretty easy thing to carry around, yet our approach to education requires a deep reform. Similarly, the lack of educational and professional opportunities should be discussed and addressed, but that's a story for another night. Today, we'll focus on the importance of portfolios, which may significantly define our success while trying to find an opportunity.

Maria's portfolio.

After admiring the above image, I would definitely hire such a professional, for instance - no matter the barriers to job success we all face.

💾 Content

Some of you are naturals here; don't dare try to fool me. Now, can you guess what's inside this "metaphorical floppy disk", aka the beautiful portfolio I made for Maria Brió Pérez? Fear not: we will keep it as simplified and accessible as usual.

| Section | Description | |-------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | About | ℹ️ Who is this person we have in front of us? As it's simply essential these days, the first sections translate into a brief introduction displaying a profile picture, some crucial information, and different contact and professional platforms: from her LinkedIn to her Orcid account, a site connecting research and researchers. You can even access her doctoral thesis or download her CV from there! | | Skills | 🛠️ Technical expertise, project management, software, languages... you name it! Everything has been organized under the shape of an accordion in order to make information as accessible as readable. | | Experience | 💼 Education? Work? Here, you'll find both options, with the proper experience displayed as a visual timeline. You have no excuse now, recruiters! | | Articles | 📑 Undoubtedly, articles are an essential part of the doctoral process. Although Maria already nailed her oral defense (believe me: I watched it, and it was impeccable), she also published several research articles, just like the ones you can find in Orcid. Here, we're only displaying the most recent ones, but it seemed a great idea to integrate them as visually and interactively as possible. | | Contact | ☎️ Phone numbers, email addresses... and a form! A contact form that actually works! Is this... magic, maybe...? |

🔮 Features

Similarly to many other examples that have become extremely popular these days, I decided to organize this portfolio following the structure of a landing page - and believe me when I say that back in the day, landing pages triggered some of my worst nightmares as someone just getting started!

Those, however, were extremely simple yet not functional at all. Beautiful? Yes. A blank page? Yes, again. That's definitely not the case occupying us today, though.

🌒 Day'n'Nite

Just as it's mandatory these days, I incorporated a theme switcher to enhance the visual appeal for readers and nocturnal creatures of the interwebz, which will hopefully allow users to personalize their viewing experience based on their preferences.

Dark mode.

📬 EmailJS

What makes EmailJS great is the fact that it keeps things simple. This beautiful tool helps to send emails using client-side technologies only. No server is required – just connect EmailJS to one of the supported email services, create an email template, and use one of their SDK libraries to trigger an email. Boom! That's it!

EmailJS integration.

In case you are curious about the implementation itself, don't hesitate to inspect the main.js file:

/* Mail integration */
document.addEventListener("DOMContentLoaded", function() {
  emailjs.init("YOUR_USER_ID")
})

document.getElementById('contact-form').addEventListener('submit', function(event) {
  event.preventDefault()

  emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', this)
    .then(function(response) {
      console.log('Success!', response.status, respon

MariaBrioPortfolio

Install / Use

README