Spanish academy for passionate learners
- 🔧 Getting Started
- 🚪 Introduction
- 💾 Content
- 🔮 Features
- 💄 Style
- 🥳 Immense thanks to them awesome Sponsors
- 🏛 License & Copyright
It's not all about libraries and frameworks. As someone once said, "each day there is a new framework in the JavaScript world". Hell, there is even a dedicated website called Days Since Last JavaScript Framework, which always displays a 0 on screen. We human beings are fascinating creatures, aren't we? However, as surprising as it might sound after my never-ending experiments with different libraries, frameworks, and tools, this project is based upon the essentials: HTML, CSS, and JavaScript. Why? Because the world doesn't have to be so complicated, sometimes.
Maybe due to my latest conversations with one of my best friends, I'm becoming more interested in web standards: the specifications that define the WWW, including best practices for web development and design. In the end, learning more about them helps you understand the foundations of web pages and how the internet works and influences users to stay connected - and the best way to master such basic knowledge is to delve into HTML and CSS as much as possible. I didn't get rid of JavaScript, of course... But we'll eventually get there, no worries.
Also, if for whatever reason you're interested in such a wide-spread language, remember that you can always visit my website, JavaScripted, in order to review and understand some of JavaScript's most important aspects, always accompanied by examples and even code previews. It's not much, but it's honest work!
Did you ever try to create a job while facing the challenges one could expect from living in a foreign country? It's a serious question. "Screw employment, invent your own job!" sounds like a nice motto for today's reality, right? Well, allow me to say that although self-employment alternatives exist for almost any traditional job, it's never easy to find your own voice or know what to do, no matter how awesome you could be at any job you commit yourself to. Planning events, organizing projects, taking on responsibility, building something that's relevant, meaningful, yet stable - no. It's not easy at all.
Some people, however, also rely on the incredible quality of perseverance and the determination of an existing paying market for their services. "Where do potential clients look for solutions?", and boom: they find their way through newspapers, bulletins, and websites they know these hypothetical clients read and pay attention to. "Do I already know anyone in my target demographic?", and they make word of mouth go a long way when in the professional organizer business. "What are their specific concerns and problems, and how can I address them efficiently?"
Tons of questions, right? Being self-employed requires taking action, and no: nobody will do it for you. Clients won't appear out of the blue just because you need them. Confidence requires nurturing, and you have to keep looking at yourself clearly, both your shortcomings and your skills. You don't always know what you're missing, and the struggle, most of the time, is to figure out how we fit in the machine. You do fit in the machine, though, but it's not so easy to understand and accept it fully.
That's why, given this universe of lost and blooming opportunities, I can't admire and respect enough those who navigate the world with such a straightforward and transparent approach. That's also why I can't properly emphasize how proud I am when well-prepared, sensitive, and hardworking people like Estefanía Linuesa Torrijos, decide to leap into "the unknown". Could we call it "the unknown" after so many years of experience, though? I do not think so - and as you'll see if you visit Estefanía Linuesa | Spanisch Sprachschule, you'll probably agree with me. It was just a matter of time!
Note
Although I'm mostly inclined to keep my repositories open to everyone, this is a private project. If you're interested in the codebase or if you would want me to share a template, please feel free to contact me!
Some of you are naturals here, so it won't come as a surprise that I am using my very-well-known "metaphorical floppy disk" in order to illustrate what's inside Estefanía's academy site, right? Let's have a look at it, then:
| Section | Description |
|---|---|
| Introduction | ℹ️ What is this madness about? What's the site's nature? As it's essential these days, the first approach translates into a brief introduction to what the site is: a title, a picture illustrating some aspects of the Spanish culture, and a word of my choice summarizing what should be the essence of learning. Why? Because websites should be attractive and appealing, but it's in our hands to find the best way of graphically explaining what's the purpose of a page without overcommunicating it through words. |
| Features | 🛠️ The core of the academy's methodology and expertise, displayed through Spanish stickers and brief explanations, a graphic for the main teacher's experience in the field, and a marquee containing some of the main institutions Estefanía collaborated with. |
| FAQs | 💼 Do you have some questions regarding what we are offering, where the academy is located, or why you should choose this school and no other? Thanks to a beautiful accordion, you'll find a "Frequently Asked Questions" section diving deeper into the person behind the teacher, Estefanía's many certificates and wide experience, her methodology, the possibility of working with DELE candidates... |
| Contact | ☎️ Although the FAQ section already introduces email addresses and some other ways to contact the academy, we also have... A form! And it works! No, really: I tested it and it does work. You can start calling me Judit Potter from now on. |
Similarly to many other examples that have become as popular as widely used these days, we followed the structure of a landing page. Do they bring you nightmares, too? Do you still think about the days when you were just getting started? Do you remember the multiple times you told yourself you were "unable to do this"? Well, guess what! You could do it, my dear!
As I highlighted many times, however, my first landing pages were everything but functional. Beautiful? Sometimes. Blank page with less logic behind it than the one captured in my cat's brain? Yes. Very yes. That's definitely not the case occupying us today, though.
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. "That's all?" Yes, that's it!
In case you are curious about the implementation itself, and although this is a private project, here are some references that might be useful for you:
/* 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!
Did someone say: "Could I please get a proper German translation of this site?" Well, say no more! As you'll see in the main navigation of the site, there are three available languages:
- EN 🇬🇧
- ES 🇪🇸
- DE 🇩🇪
And all thanks to i18n, a lightweight simple translation module with dynamic JSON storage. In short, you can store your translation files under the locales folder, with each language corresponding to a different JSON file (example: /src/locales/es/es.json). It should look more or less like this:
// en.json
{
"hello": "Hello"
}// es.json
{
"hello": "Hola"
}Remember that you can create either an individual folder for each language, either just the separate JSON files, depending on your project's structure:
├── assets
└── locales
├── en.json
└── de.json
GSAP (GreenSock Animation Platform) allows you to effortlessly animate anything JavaScript can touch. Why is this useful? Well, because you'll be capable of delivering silky-smooth performance and unmatched support so that you can focus on the fun stuff. Whether you're animating UI, SVG, or creating immersive WebGL experiences, GSAP has your back; also, some additional capabilities (like scroll animation or dragging, for instance), are tucked away in plugins, which allows the core to remain relatively small and lets you add features only when you need them.
As an example, here's how we could work on a loading animation sequence combining GSAP and lenis for handling smooth scroll behavior, as we'll see later:
const pageLoad = function () {
const scrollPosition = scrollY;
lenis.scrollTo(scrollPosition + 1);
let tl = gsap.timeline({});
tl.to(loadLogo, {
yPercent: -150,
duration: 0.4,
delay: 0.5,
ease: 'power1.out',
});
tl.to(loadBars, {
height: '0%',
stagger: {
amount: 0.2,
duration: 0.6,
ease: 'power1.out',
from: 'random',
},
onComplete: () => {
gsap.set(loadComponent, { display: 'none' });
},
});
};
pageLoad();Sometimes, we must overcomplicate our lives. Truth said, however, it's not frequently the case, no matter how it looks like. 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 compact, eye-catching, yet minimalist page that could be combined with the many websites Estefanía appears in, such as:
- Academia.edu,
- Classgap,
- Dialnet,
- or Orcid,
to name some. Since my needs were rather simple, and independently of my toxic romance with Next.js or Astro, I chose my coding roots as my best warriors to deliver something that might encapsulate these realities, skills, and experience without looking way too overwhelming or inaccessible. Sometimes, everything's as simple as that, I assume.
As we introduced before, Lenis is a lightweight, robust, and performant smooth scroll library. Designed by @darkroom.engineering to be simple to use and easy to integrate into your projects, it's built with performance in mind and is optimized for modern browsers. Perfect for creating smooth scrolling experiences on your website, such as webgl scroll synching, parallax effects... and much more!
As an example of GSAP ScrollTrigger:
const lenis = new Lenis()
lenis.on('scroll', (e) => {
console.log(e)
})
lenis.on('scroll', ScrollTrigger.update)
gsap.ticker.add((time)=>{
lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)Couldn't be easier and more effective, guys!
And the award goes to...
- Brand - @AuNedelec 🐈
- Code Formatting - Prettier
- Styling - CSS
- UI/UX - Figma
- Visual assets - Remezcla & Pinterest
First and foremost, allow me to thank my dear collaborator, @AuNedelec, for her patience, amazing art, good advice, and overall excitement whenever some new project is being cooked in my questionable kitchen. Although I do miss immensely getting to work hand in hand together, it's still relieving to know that, no matter the distance or the circumstances, we can still manage to find little moments allowing us to share these things. Thank you a lot - and see you very, very soon.
Now, and before closing this chapter, allow me to highlight something. When I worked on María Brio's portfolio, I remember saying what follows:
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 this is an unavoidable reality, things become even tougher when you start anew and follow your dreams, as happens with this upcoming Spanish academy. Today, I woke up thinking that Estefanía Linuesa is not only one of the most talented professionals that I had the pleasure to encounter; she's also an incredible human being, and believe me when I say that this willingness to share, commitment, sense of humor, responsibility, and organization are key features only the greatest teachers stick to.
A new era is about to start while some others did start already (psssst... felicidades de nuevo, querida). I could name many articles and professional references. I could spend hours talking about how much of an outstanding professional Stuttgart people have at reach. I could spend days stressing how much of a great person I had the privilege to work with. For all these reasons, I chose to go with a modern, surprising, minimalist yet clear platform allowing all my Stuttgart guys to get curious about Estefanía Linuesa, her remarkable experience, and the incredible opportunity they have to learn the Spanish language, culture, and human values.
Let's not forget that these words, projects, and general mayhem wouldn't exist without the presence and support of my amazing Sponsor,@Entreprises LEMRHALI.
Los jugadores son mis amigos, indeed. Someone also said: "What doesn't kill you, makes you stronger". I don't know if we all became Zombie Kittens without even realizing it, but assuming it's not the case, I do believe that whatever we're dealing with at the moment will bring us closer to a better state.
Things are quite harsh right now. That's the sad truth. However, there will be a time when we will start seeing, acknowledging, and valuing our inner selves - and you, my dear, are not excluded from this imminent reality. Closer than ever.
No matter the struggles we're dealing with in the present, and for our past and future moments, thank you. From the bottom of my heart.
God save our MIT License and its infinite benevolence! Remember that although I crafted most of this beautiful nonsense, the sources escaping from it have been properly mentioned in the above section; however, I'd still want to thank all the artists providing us with such excellent art, assets, and material! You're amazing!
That said, and only if you enjoyed this beautiful website and the amazing profile making its existence possible, remember that you can make the Dinosaur of the Depths extremely happy if you...
