<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<header>
<div>
<h1>Álvaro Montoro</h1>
<p>CSS Aficionado</p>
</div>
<a class="more" href="#about" title="About">
<span class="a11y-hidden">Go to about section</span>
</a>
</header>
<main>
<section id="about">
<div class="container mini">
<h2>Hello there!</h2>
<p>
I am a Software Engineer based in Austin, TX, currently working as a
<a href="/work">UI Manager at Visa</a>.</p>
<p>
I have over 15 years of experience in software development, and a passion for Front-End.
I enjoy exploring web technologies and creating sites and web apps.
</p>
<p>
My work involves a lot of HTML, CSS, and JavaScript (with React), but I also have plenty
experience with back-end development and databases.
</p>
<p>
I <a href="/blog">blog about technology</a>,
act as a <a href="https://es.stackoverflow.com/users/250/alvaro-montoro?tab=profile">
moderator in Stack Overflow en Español</a>, and
often engage with the <a href="https://twitter.com/alvaro_montoro">Tech Twitter community</a>.
</p>
</div>
<a class="more" href="#projects" title="Projects">
<span class="a11y-hidden">Go to projects section</span>
</a>
</section>
<section id="projects">
<div class="container left">
<h2>Projects & Demos</h2>
<p>I like building things using Web technologies, and exploring what HTML and CSS have to offer.</p>
<p>
I often share demos on <a href="https://codepen.io/alvaromontoro">CodePen</a>, but I build many other things:
</p>
<ul>
<li><a href="https://codepen.io/collection/AOaOdx">CSS Illustrations</a></li>
<li><a href="https://codepen.io/collection/nvJYmm">CSS Games</a></li>
<li>
<a href="https://github.com/alvaromontoro">JavaScript projects</a>:
<ul>
<li><a href="https://github.com/alvaromontoro/gamecontroller.js">GameController.JS</a></li>
<li><a href="https://github.com/alvaromontoro/gamepad-simulator">Gamepad Simulator</a></li>
<li><a href="https://github.com/alvaromontoro/TourGuide">TourGuide.JS</a></li>
</ul>
</li>
</ul>
</div>
</section>
</main>
<footer>
<p>2021 © <a href="https://alvaromontoro.com">Álvaro Montoro</a></p>
<nav class="social-links" aria-describedby="social-media-links-title">
<h2 id="social-media-links-title" class="a11y-hidden">Social Media Links</h2>
<a href="https://codepen.io/alvaromontoro" rel="external noreferrer">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="CodePen"><path fill="currentcolor" d="m24 7.598c-.044-.264-.08-.47-.36-.641-11.449-6.791-11.287-7.297-12.03-6.848-8.677 5.394-11.092 6.597-11.439 7.017-.315.323-.171.818-.171 8.298-.021.851 7.743 5.462 11.519 8.404.333.237.752.199 1.003-.029 11.224-7.956 11.497-7.636 11.478-8.375 0 0-.012-7.927 0-7.826zm-1.5 6.491-3.876-2.359 3.876-2.697zm-5.277-3.212-4.473-2.722v-6.07l9.126 5.555zm-5.223 3.633-3.876-2.697 3.876-2.359 3.876 2.359zm-.75-12.426v6.074c-1.739 1.079-3.209 1.98-4.451 2.734l-4.675-3.252zm-5.857 9.658c-1.874 1.127-3.098 1.843-3.893 2.32v-5.029zm1.33.924 4.527 3.149v5.999l-9.126-6.349zm6.027 9.149v-5.999l4.527-3.149 4.599 2.799z"></path></svg>
<span class="a11y-hidden">Codepen</span>
</a>
<a href="https://github.com/alvaromontoro" rel="external noreferrer">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Github"><path fill="currentcolor" d="m.184 10.462c-.779 4.906 1.401 10.823 8.123 13.006.12.022.231.032.335.032.782 0 1.32-.582 1.32-1.3-.097-.523.383-2.642-.92-2.357-2.519.536-2.821-.871-3.205-1.607 1.086 1.394 2.718 1.359 3.949.819.683-.3.326-1.064.65-1.343.496-.426.244-1.243-.407-1.314-2.314-.255-4.457-1.001-4.457-4.702 0-2.168 1.505-2.362 1.09-3.269-.015-.033-.333-.754-.045-1.849 1.419.262 2.072 1.28 2.753 1.097 1.687-.46 3.544-.46 5.23 0 .704.189 1.207-.801 2.738-1.103.441 1.654-.473 2.058.103 2.677.632.68.953 1.503.953 2.447 0 5.564-4.717 3.957-5.101 5.22-.088.288.005.599.235.792.61.513.53 1.83.465 2.889-.067 1.098-.125 2.045.482 2.579.214.19.595.393 1.284.253 6.634-2.131 8.83-8.022 8.063-12.917-2.096-13.368-21.526-13.352-23.638-.05zm8.27 10.978.004.505c-.523-.181-1.015-.39-1.475-.623.425.109.913.156 1.471.118zm.37-3.7c-.005.026-.01.053-.015.08-.853.252-1.509.001-1.957-.752 0-.001 0-.001-.001-.002.68.364 1.381.56 1.973.674zm3.176-15.74c11.833 0 14.502 16.267 3.469 19.941-.038-.297-.003-.857.021-1.252.058-.951.126-2.059-.213-2.985 5.088-1.059 5.513-6.646 3.554-9.135.243-.952.145-3.189-.729-3.463-.206-.065-1.305-.304-3.437 1.037-1.741-.416-3.62-.417-5.361 0-1.064-.667-3.462-1.752-3.922-.6-.534 1.342-.407 2.427-.248 3.03-1.739 2.204-1.218 5.894.534 7.626-.993-.475-2.361-.637-2.656.314-.323 1.037.912.911 1.679 2.804.073.236.208.513.415.788-6.811-5.565-3.525-18.105 6.894-18.105z"></path></svg>
<span class="a11y-hidden">Github</span>
</a>
<a href="https://twitter.com/alvaro_montoro" rel="external noreferrer">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Twitter"><path fill="currentcolor" d="m.473 19.595c2.222 1.41 4.808 2.155 7.478 2.155 3.91 0 7.493-1.502 10.09-4.229 2.485-2.61 3.852-6.117 3.784-9.676.942-.806 2.05-2.345 2.05-3.845 0-.575-.624-.94-1.13-.647-.885.52-1.692.656-2.522.423-1.695-1.652-4.218-2-6.344-.854-1.858 1-2.891 2.83-2.798 4.83-3.139-.383-6.039-1.957-8.061-4.403-.332-.399-.962-.352-1.226.1-.974 1.668-.964 3.601-.117 5.162-.403.071-.652.41-.652.777 0 1.569.706 3.011 1.843 3.995-.212.204-.282.507-.192.777.5 1.502 1.632 2.676 3.047 3.264-1.539.735-3.241.98-4.756.794-.784-.106-1.171.948-.494 1.377zm7.683-1.914c.561-.431.263-1.329-.441-1.344-1.24-.026-2.369-.637-3.072-1.598.339-.022.69-.074 1.024-.164.761-.206.725-1.304-.048-1.459-1.403-.282-2.504-1.304-2.917-2.62.377.093.761.145 1.144.152.759.004 1.046-.969.427-1.376-1.395-.919-1.99-2.542-1.596-4.068 2.436 2.468 5.741 3.955 9.237 4.123.501.031.877-.44.767-.917-.475-2.059.675-3.502 1.91-4.167 1.222-.66 3.184-.866 4.688.712.447.471 1.955.489 2.722.31-.344.648-.873 1.263-1.368 1.609-.211.148-.332.394-.319.651.161 3.285-1.063 6.551-3.358 8.96-2.312 2.427-5.509 3.764-9.004 3.764-1.39 0-2.753-.226-4.041-.662 1.54-.298 3.003-.95 4.245-1.906z"></path></svg>
<span class="a11y-hidden">Twitter</span>
</a>
<a href="https://www.youtube.com/c/AlvaroMontoroCSS" rel="external noreferrer">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Youtube"><path fill="currentcolor" d="m9.939 7.856c-.497-.297-1.134.062-1.134.644v7c0 .585.638.939 1.134.645l5.869-3.495c.488-.291.487-.997.001-1.289zm.366 6.325v-4.36l3.655 2.183z"></path><path fill="currentcolor" d="m19.904 3.271c-4.653-.691-11.153-.691-15.808 0-1.862.276-3.329 1.738-3.649 3.636-.596 3.523-.596 6.664 0 10.186.32 1.899 1.787 3.36 3.649 3.636 2.332.346 5.124.519 7.915.519 2.786 0 5.571-.172 7.894-.518 1.86-.276 3.326-1.737 3.648-3.636.596-3.523.596-6.665 0-10.188-.32-1.897-1.787-3.359-3.649-3.635zm2.17 13.573c-.213 1.256-1.173 2.222-2.39 2.402-4.518.671-10.838.671-15.368-.001-1.218-.181-2.179-1.146-2.391-2.402-.574-3.394-.574-6.291 0-9.687.213-1.256 1.173-2.22 2.392-2.402 2.262-.335 4.973-.503 7.682-.503 2.711 0 5.422.168 7.684.503 1.218.181 2.179 1.146 2.391 2.402.574 3.396.574 6.293 0 9.688z"></path></svg>
<span class="a11y-hidden">Youtube</span>
</a>
<a href="https://www.linkedin.com/in/alvaromontoro/" rel="external noreferrer">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" title="Linkedin"><path fill="currentcolor" d="m18.59 24c.103 0 4.762-.001 4.66-.001.414 0 .75-.336.75-.75-.35-7.857 1.842-16.148-6.338-16.148-1.573 0-2.826.537-3.729 1.247 0-1.461-1.579-.653-5.224-.87-.414 0-.75.336-.75.75.302 14.166-.674 15.771.75 15.771h4.66c1.353 0 .492-1.908.75-8.188 0-2.594.75-3.102 2.046-3.102 1.434 0 1.675.996 1.675 3.228.257 6.167-.598 8.063.75 8.063zm-2.425-12.791c-4.491 0-3.546 4.938-3.546 11.29h-3.16v-13.521h2.974v1.298c0 .72 1.097 1.074 1.479.35.492-.934 1.77-2.025 3.75-2.025 3.527 0 4.838 1.733 4.838 6.396v7.503h-3.16c0-7.144.756-11.291-3.175-11.291z"></path><path fill="currentcolor" d="m1.122 7.479c-1.42 0-.448 1.585-.75 15.771 0 .414.336.75.75.75h4.665c1.42 0 .448-1.585.75-15.771 0-1.295-1.881-.531-5.415-.75zm3.915 15.021h-3.165v-13.521h3.165z"></path><path fill="currentcolor" d="m3.452 0c-4.576 0-4.548 6.929 0 6.929 4.545 0 4.581-6.929 0-6.929zm0 5.429c-2.568 0-2.592-3.929 0-3.929 2.597 0 2.564 3.929 0 3.929z"></path></svg>
<span class="a11y-hidden">Linkedin</span>
</a>
</nav>
</footer>:root {
--main: 215deg;
--bg: hsl(var(--main), 50%, 20%);
--c1: hsl(var(--main), 50%, 50%);
--c2: #fff;
--c3: hsl(var(--main), 50%, 90%);;
/*
--bg: #1d3557;
--c1: #457b9d;
--c2: #fff;
--c3: #a8dadc;
--bg: #112;
--c1: blue;
--c2: white;
--c3: #eef;
*/
}
html, body {
background: var(--bg);
font-family: Montserrat, Oswald, Arial, sans-serif;
color: #dde;
margin: 0;
padding: 0;
font-size: 1.125em;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
font-family: Oswald, Montserrat, arial, sans-serif;
margin: 0;
color: var(--c2);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p, li {
color: var(--c3);
margin: 0;
font-size: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
line-height: 1.5;
max-width: 60ch;
}
li {
margin-bottom: 0.25rem;
}
a, a:link, a:visited {
color: var(--c2);
}
a:hover, a:focus {
text-decoration: none;
}
section {
min-height: 100vh;
display: flex;
align-items: center;
scroll-snap-align: start;
position: relative;
}
.container {
width: 80%;
max-width: 1000px;
margin: auto auto;
padding: 2rem 0;
box-sizing: border-box;
}
.container.mini {
max-width: 500px;
}
.container.left {
padding-right: 10vw;
}
.more {
width: 2vmin;
height: 2vmin;
border: 0;
border-bottom: 2px solid var(--c3);
border-left: 2px solid var(--c3);
position: absolute;
bottom: 2rem;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
margin: 0;
animation: none;
opacity: 1;
overflow: hidden;
}
.a11y-hidden {
display: block;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
left: -10000in;
clip: rect(0, 0, 0, 0);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
footer {
scroll-snap-align: start;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
padding: 14vh 1rem 3rem 1rem;
background-repeat: no-repeat;
background-size: 70% 5%;
background-image:
linear-gradient(var(--c1),var(--c1)),
linear-gradient(var(--c2),var(--c2));
background-position: 0% 5%, 100% 15%;
}
footer > div {
margin-bottom: 1rem;
}
footer nav {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
flex: 1;
}
footer nav a {
margin-right: 1rem;
}
footer nav a:hover {
color: var(--c1);
}
footer svg {
width: 3rem;
height: 3rem;
display: inline-block;
}
/* HEADER - START */
header {
height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
background-color: var(--bg);
scroll-snap-align: start;
}
@keyframes showBars {
0% { opacity: 0; background-position: -400% 7%, 500% 21%, -400% 35%, 500% 49%, -400% 63%, 500% 77%, -400% 91% ; }
14% { background-position: 0% 7%, 500% 21%, -400% 35%, 500% 49%, -400% 63%, 500% 77%, -400% 91% ; }
28% { background-position: 0% 7%, 100% 21%, -400% 35%, 500% 49%, -400% 63%, 500% 77%, -400% 91% ; }
42% { background-position: 0% 7%, 100% 21%, 0% 35%, 500% 49%, -400% 63%, 500% 77%, -400% 91% ; }
56% { background-position: 0% 7%, 100% 21%, 0% 35%, 100% 49%, -400% 63%, 500% 77%, -400% 91% ; }
70% { background-position: 0% 7%, 100% 21%, 0% 35%, 100% 49%, 0% 63%, 500% 77%, -400% 91% ; }
84% { background-position: 0% 7%, 100% 21%, 0% 35%, 100% 49%, 0% 63%, 100% 77%, -400% 91% ; }
98%, 100% { opacity: 1; background-position: 0% 7%, 100% 21%, 0% 35%, 100% 49%, 0% 63%, 100% 77%, 0% 91%; }
}
header::after {
content: "";
width: 100%;
height: 20vh;
position: absolute;
top: 0;
left: 0;
background-color: inherit;
background-repeat: no-repeat;
background-size: 70% 7%;
background-image:
linear-gradient(var(--c1),var(--c1)),
linear-gradient(var(--c2),var(--c2)),
linear-gradient(var(--c1),var(--c1)),
linear-gradient(var(--c2),var(--c2)),
linear-gradient(var(--c1),var(--c1)),
linear-gradient(var(--c2),var(--c2)),
linear-gradient(var(--c1),var(--c1));
background-position: 0% 7%, 100% 21%, 0% 35%, 100% 49%, 0% 63%, 100% 77%, 0% 91%;
animation: showBars 3.5s;
}
@keyframes showText {
0% { opacity: 0; transform: translate(0, -100%); }
20% { opacity: 0; }
100% { opacity: 1; transform: translate(0, 0); }
}
header > div {
position: relative;
transform: translate(-100%, 0);
opacity: 0;
animation: showText 2s 1;
animation-fill-mode: forwards;
animation-delay: 3.5s;
text-align: center;
}
header h1 {
font-size: 10vw;
}
header p {
font-size: 5vw;
}
/* HEADER - END */
@media all and (min-width: 768px) {
html, body {
font-size: 1.25em;
}
footer {
justify-content: space-between;
flex-direction: row;
align-items: center;
padding: 10vh 1rem 3rem 1rem;
background-size: 70% 7%;
background-position: 0% 7%, 100% 21%;
}
@keyframes showBarsBig {
0% { background-position: 7% -400%, 21% 500%, 35% -400%, 49% 500%, 63% -400%, 77% 500%, 91% -400%; }
14% { background-position: 7% 0%, 21% 500%, 35% -400%, 49% 500%, 63% -400%, 77% 500%, 91% -400%; }
28% { background-position: 7% 0%, 21% 100%, 35% -400%, 49% 500%, 63% -400%, 77% 500%, 91% -400%; }
42% { background-position: 7% 0%, 21% 100%, 35% 0%, 49% 500%, 63% -400%, 77% 500%, 91% -400%; }
56% { background-position: 7% 0%, 21% 100%, 35% 0%, 49% 100%, 63% -400%, 77% 500%, 91% -400%; }
70% { background-position: 7% 0%, 21% 100%, 35% 0%, 49% 100%, 63% 0%, 77% 500%, 91% -400%; }
84% { background-position: 7% 0%, 21% 100%, 35% 0%, 49% 100%, 63% 0%, 77% 100%, 91% -400%; }
98%, 100% { background-position: 7% 0%, 21% 100%, 35% 0%, 49% 100%, 63% 0%, 77% 100%, 91% 0%; }
}
@keyframes showTextBig {
0% { opacity: 0; transform: translate(-100%, 0); }
20% { opacity: 0; }
100% { opacity: 1; transform: translate(0vw, 0); }
}
header {
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
header::after {
width: 20vw;
height: 100%;
background-size: 7% 70%;
background-position:
7% 0%, 21% 100%, 35% 0%, 49% 100%, 63% 0%, 77% 100%, 91% 0%;
animation-name: showBarsBig;
}
header > div {
animation-name: showTextBig;
margin-left: 22vw;
text-align: left;
}
header h1 {
font-size: 8vw;
}
header p {
font-size: 4vw;
margin-bottom: 0;
}
#about {
position: relative;
}
#about::before,
#about::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20vw;
height: 100%;
background-image:
linear-gradient(var(--c2),var(--c2)),
linear-gradient(var(--c2),var(--c2)),
linear-gradient(var(--c2),var(--c2));
background-size: 7% 21%, 7% 14%, 7% 7%;
background-position: 21% 0%, 49% 0%, 77% 0%;
background-repeat: no-repeat;
pointer-events: none;
}
#about::after {
left: auto;
right: 0;
background-size: 7% 41%, 7% 34%, 7% 27%;
background-position: 21% 100%, 49% 100%, 77% 100%;
transform: translate(0, 20%);
}
}
@media (prefers-reduced-motion) {
html, body {
scroll-behavior: auto;
scroll-snap-type: none;
}
header::after {
animation: none !important;
}
@keyframes showTextReduced {
0% { opacity: 0; }
100% { opacity: 1; }
}
header > div {
transform: translate(0,0);
animation-name: showTextReduced;
animation-delay: 0.5s !important;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.