Something went wrong. Try again.
Personal static website fabricio.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283*,*::after,*::before { box-sizing: border-box; margin: 0; padding: 0;}
:root,:root.light { --background: #eee; --text: #222; --highlight: rgba(255, 0, 0, 0.3);}
@media (prefers-color-scheme: dark) { :root, :root.dark { --background: #111; --text: #ddd; --highlight: rgba(0, 255, 255, 0.4); }}
html { background: var(--background); color: var(--text); font-size: 16px;}
body { font: 400 1rem/1.25 "Roboto", sans-serif; min-height: 100vh; min-height: 100dvh; display: flex;}
a { color: inherit; position: relative;}
a::after { content: ""; display: block; position: absolute; z-index: -1; bottom: -0.0625rem; right: 0; height: 0.4em; max-width: 75%; width: 0; background: var(--highlight);}
a:hover::after { width: 100%;}
main { --padding: 1.25rem;
width: 100%; margin: auto; max-width: 35rem; padding: var(--padding);}
.header { display: flex; flex-wrap: wrap; align-items: flex-end;}
.profile-picture { width: 8rem; height: 8rem; border-radius: 100%; overflow: hidden; background: var(--text);}
.profile-picture img { object-fit: contain; width: 100%; height: 100%;}
.title { flex: 0 16.25rem; margin-left: auto; text-align: right; position: relative;}
.title::after,.title::before { content: ""; position: absolute; z-index: -1; display: block; bottom: 0; right: 0; width: 100%;}
.title::before { bottom: 0.1875rem; height: 0.0625rem; max-width: 100%; background: var(--text);}
.title::after { height: 0.4em; max-width: 80%; background: var(--highlight);}
.about { margin: calc(var(--padding) * 3) 0;}
.about p,.about footer { position: relative; margin-bottom: var(--padding);}
.about address { font-style: normal;}
.footer { display: flex; justify-content: flex-end; text-transform: lowercase;}
.footer ul { list-style-type: "/"; display: flex; gap: var(--padding);}
@media (prefers-reduced-motion: no-preference) { a::after { transition: width ease-in-out 0.15s; }
.profile-picture { opacity: 0; transform: scale(0.2); animation: 0.5s ease-in-out 1.25s profile-picture-show forwards; }
.profile-picture img { opacity: 0; transform: scale(1.1); animation: 0.15s ease-in 1.75s profile-picture-fade forwards; }
.title span { display: inline-block; opacity: 0; transform: translateY(65%); animation: 0.25s ease-out 0.5s title-slide-text forwards; }
.title::after { width: 0; animation: 0.45s ease-in-out 0.25s title-slide-bar forwards; }
.title::before { width: 0; animation: 0.45s ease-in-out 0.1s title-slide-bar forwards; }
.about p::after, .about footer::after { content: ""; position: absolute; display: block; width: 100%; background: var(--text); animation: 0.6s ease-in-out 1s about-text-mask forwards; }
.about p, .about footer { color: transparent; animation: 0s step-end 1.325s about-text forwards; }
.footer li { transform: translateX(-50%); opacity: 0; animation: 0.2s ease-in 1.5s footer-slide forwards; } .footer li:nth-of-type(2) { animation-delay: 1.75s; } .footer li:nth-of-type(3) { animation-delay: 2s; }}
@keyframes profile-picture-show { 10% { opacity: 1; } 20% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: 0; } 50% { opacity: 1; transform: scale(0.2); } 100% { opacity: 1; transform: scale(1); }}
@keyframes profile-picture-fade { 100% { opacity: 1; transform: scale(1); }}
@keyframes title-slide-text { 100% { opacity: 1; transform: translateY(0); }}
@keyframes title-slide-bar { 100% { width: 100%; }}
@keyframes about-text { 100% { color: inherit; }}
@keyframes about-text-mask { 0% { top: 0; bottom: 100%; } 25% { top: 0; bottom: 0; } 75% { top: 0; bottom: 0; } 100% { top: 100%; bottom: 0; }}
@keyframes footer-slide { 100% { opacity: 1; transform: translateX(0); }}