A professional, minimalist portfolio
- 🔧 Getting Started
- 🚪 Introduction
- 💾 Content
- 🔮 Features
- 💄 Style
- 🥳 Immense thanks to them awesome Sponsors
- 🏛 License & Copyright
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!
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.
After admiring the above image, I would definitely hire such a professional, for instance - no matter the barriers to job success we all face.
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...? |
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.
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.
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!
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, response.text)
alert('Email sent successfully!')
document.getElementById('contact-form').reset()
}, function(error) {
console.log('Failed...', error)
alert('Email sending failed.')
})
})Note
Needless to say, the original documentation is worth your time, guys - but as you can see, integrating EmailJS into your project couldn't be easier!
Truth said, one of the factors allowing me to realize that I'm indeed evolving into the Lola Flores of the coding sector is that now, I can tell when I should (or shouldn't) overcomplicate my life. As programmers, our main goal is solving problems - and not all issues require the same tools, not even intricate ones.
In this case, the idea I had in mind was simple: a clean, minimalist, compact portfolio allowing users to get a clear insight into who Maria is as a professional. That's why, independently of my toxic relationship with React, NextJS, or Astro, I chose my best warriors: the tools that started it all. My coding roots, so to speak.
Swiper is considered one of the most modern free and open-source mobile touch slider with hardware-accelerated transitions - websites, web apps, and mobile native/hybrid apps are no exception!
In this case, I found it to be an extremely useful tool to display some of Maria's most recent works instead of listing them:
Note
If you don't want to include Swiper files in your project, remember that you may use it from CDN instead. For more information, here's the link to Swiper's docs.
As stated in the previous sections, what inspired the creation of this project was, on the one hand, the importance and weight that these websites gained in recent times, as no one would dare doubt that a career portfolio can help illustrate our professional accomplishments, talents, abilities, and attitudes to prospective employers. However, that's definitely not the entire story.
Job searching puts you in a dark place. Day in and day out, you find yourself going through postings and getting asked to do some online assessments, but you rarely get any calls for interviews. We all know the theory: "Take care of your physical, mental, and emotional needs". "Seek support". "Separate your identity from your job status". We all try, yet it feels we are somehow failing at staying focused, as this vicious cycle of constant silence and rejection doesn't truly allow us to see the light at the end of the tunnel.
Although these thoughts never leave my mind, today I woke up thinking of the incredibly talented professionals I have around - and Maria was the first example that came to mind. In all honesty, I highly doubt any employer could find someone as devoted, rigorous, attentive, and capable as she is.
After having my coffee, I thought of her incredible curriculum. Many articles and professional successes came to mind, too. For whatever reason, I imagined a clean, simple, and minimalist platform allowing recruiters to find some useful keywords, then jumping into her CV and finding the woman I see. The professional that I know. A simple portfolio built on HTML, Sass, and JavaScript seemed to be the ideal way of expressing not only achievements but also attitudes and intentions. "Green, green... sounds 'sustainable' enough. How about green, then? And her articles... I would love people to see them in the most direct way possible!" Immediately after my coffee, I started working. Why? Oh, my, my...
This person, who happens to be the main protagonist of today's repository, is an outstanding professional, indeed. She's even better as a person, though - and if this little "gift" can bring a smile to her face, I can consider myself more than satisfied. She does not deserve less. If anything, she deserves to be seen and valued.
Now that I irremediably entered the emotional zone, let's not forget that these words, projects, and general mayhem wouldn't exist without the presence, help, and patience of my amazing Sponsor,@Entreprises LEMRHALI - the one who gave me an opportunity when others didn't. Funnily enough, I just mentioned that my dear Doctor Maria deserves to be seen and valued, yet I am not quite good at paying attention to my own words and advice.
As you surely know by now, that's only part of the process; eventually, we will all start seeing, understanding, and appreciating the real value inside of us - you included. Because you don't deserve less, either.
For the past, present, and future moments, thank you. You are an extremely beautiful human being.
God save our MIT License and its infinite benevolence! It burns! That said, and only if you enjoyed the beautiful portfolio you found here, remember that you can make the Dinosaur of the Depths extremely happy if you...
