<!DOCTYPE html> <html lang="en"> <head> <title>Miguel's Asteroid</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content="Miguel's Landing Page"> <meta name="keywords" content="global, template, html, sass, jquery"> <link rel="stylesheet" href="css/main.css"> <link rel="icon" type="image/x-icon" href="/img/Menu_Light.png"> </head> <body> <!-- notification for small viewports and landscape oriented smartphones --> <div class="device-notification"> <a class="device-notification--logo" href="https://library.miguelalmodo.com"> <img src="img/Highwind1_opt.png" alt="gummi ship"> <p>Miguel's Asteroid</p> </a> <p class="device-notification--message">Try viewing on a bigger screen or clicking on the gummi ship to blast off to my bookshelf. </p> </div> <!-- This is what shows up on my pocket.The gummi ship takes you to the about page --> <div class="perspective effect-rotate-left"> <div class="container"><div class="outer-nav--return"></div> <div id="viewport" class="l-viewport"> <div class="l-wrapper"> <header class="header"> <!-- <button class="header--cta cta">Work with Me</button>--> <a class="header--logo" href="https://uberspace.de"> <img src="img/badge_dark.png" width="50%" height="50%" alt="uberspace asteroid logo"></a> <div class="header--nav-toggle"> <span></span> </div> </header> <!-- The beginning of the side nav bar --> <nav class="l-side-nav"> <!-- The left side nav buttons --> <ul class="side-nav"> <li class="is-active"><span>Home</span></li> <li><span>Interests</span></li> <li><span>About</span></li> <li><span>Contact</span></li> <!--Here I am commenting out a menu item from the vertical left side nav, reducing from 4 to 5--> <!--<li><span>Work with Me</span></li>--> </ul> </nav> <!-- The side nav bar ends here --> <!-- The sections/nav items are an unordered list --> <ul class="l-main-content main-content"> <!-- Each section is a list item --> <!-- This is the beginning of the first section --> <li class="l-section section section--is-active"> <div class="intro"> <div class="intro--banner"> <h1>Welcome<br>to my<br>asteroid.</h1> <a href="https://library.miguelalmodo.com/"> <button class="cta">Check out a book <svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)"> <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/> </g> </svg> <span class="btn-background"></span> </button></a> <br><br> <!-- Blocking out the ribbon buttons <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs"> <button class="cta">Bookmarks <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)"> <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/> </g> </svg> <span class="btn-background"></span> </button> </a> --> <img src="img/spaceman.png" alt="Welcome"> </div> <div class="intro--options"> <a href="https://uberspace.de"> <h3>Explore my asteroid!</h3> <p>This site is hosted on asteroids with Uberspace. I'm learning basic web development to be able to make a better impact with my digital presence. If you are curious about how to set up your own, just reach out and ask so we can talk about it. </p> </a> <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs"> <h3>Creator Residency</h3> <p>I'm in the Content Creator Residency with nos.social. Nostr is social media that you control. Find me on nostr miggymofongo@miguelalmodo.com Ask me to learn more!</p> </a> <a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9"> <h3>Organizer</h3> <p>Read about my recent trips to Cuba where I attended this year's May Day celebrations in Havana with organizers and union members from around the world. #CubaSIBoqueoNO </p> </a> </div> </div> </li> <!--End of the first section --> <!-- Beginning of the second section --> <li class="l-section section"> <div class="work"> <h2>Rebuilding the digital public commons.</h2> <div class="work--lockup"> <ul class="slider"> <li class="slider--item slider--item-left"> <a href="https://gitfitcode.com/"> <div class="slider--item-image"> <img src="img/gfc-logo-12@2x_transp.png" style="size: 50%; padding-top: 5em" alt="gitfitcode logo"></a> </div> <p class="slider--item-title">Web Development</p> <p class="slider--item-description">I'm building user-centric web experiences with the likes of <a href="https://hacklab.nilfm.cc/felt">NilX </a>and <a href="https://giI am in community withthub.com/gitfitbro">GitFitBro.</a> Find my code on <a href="https://github.com/miggymofongo">Github</a> or <a href="https://forge.lightcrystal.systems/migs"> Light Crystal Systems.</a></p> </a> </li> <li class="slider--item slider--item-center"> <a href="https://podcasting2.org/"> <div class="slider--item-image"> <img src="img/pci_avatar.svg" alt="Podcasting Index logo"> </div> <p class="slider--item-title">Podcast 2.0</p></a> <p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast index and RSS. <a href="https://podcast.miguelalmodo.com">Click here to check out my podcast, How to Change the World. </a></p> </li> <li class="slider--item slider--item-right"> <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs"> <div class="slider--item-image"> <img src="img/nostr-icon-white-256x256.png" alt="Nostr Logo"> </div> <a href="https://nostr.com/#why-we-need-nostr"> <p class="slider--item-title">Social Media Revolution</p></a> <p class="slider--item-description"> </a> Find me on Nostr by searching miggymofongo@miguelalmodo.com on any nostr client. Ask me about Nostr, an alternative social media protocol.</p> </a> </li> </ul> <div class="slider--prev"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)"> <path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29 c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180 c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/> </g> </svg> </div> <div class="slider--next"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)"> <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/> </g> </svg> </div> </div> </div> </li> <!-- End of the second section --> <!-- Beginning of the third section --> <li class="l-section section"> <div class="about"> <div class="about--banner"> <h2>¡Cuba si, bloqueo no!</h2> <a href="https://migs.uber.space/resumes/plenitudresume.pdf">Resume <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)"> <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/> </g> </svg> </span> </a><br> <a href="https://ifcaseattle.org/boardofdirectors.html">Board of Directors <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)"> <path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/> </g> </svg> </span> </a> <video src="https://v.nostr.build/5G0eZ.mp4" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="50%" height="50%" controls> </div> <div class="about--options"> <a href="https://miguelalmodo.com/about.html"> <h3>Who is Miguel?</h3> </a> <a href="https://pinstr.app/p/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs/My%20Dog"> <h3>My dog, Kaido!</h3> </a> <a href="https://miguelalmodo.com/portfolio"> <h3>Portfolio</h3> </a> </div> </div> </li> <!--End of the third section--> <!-- Beginning of the fourth section --> <li class="l-section section"> <div class="hire"> <div id="result"></div> <form class="work-request" action="https://api.web3forms.com/submit" method="POST" id="form"> <input type="hidden" name="access_key" value="da5f4169-2fa6-4632-86ce-a5dca3cd85eb"> <input type="hidden" name="from_name" value="Asteroid"> <div class="work-request--options"> <!-- First row of subject line options --> <span class="options-a"> <input id="opt-1" name="subject" type="checkbox" value="Organize"> <label for="opt-1"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Organize </label> <input id="opt-2" name="subject" type="checkbox" value="Just sayin hi!"> <label for="opt-2"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Just sayin hi! </label> <input id="opt-3" name="subject" type="checkbox" value="Consultation"> <label for="opt-3"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Consultation </label> </span> <!-- end first row of subject line options --> <!-- second row of subject line options <span class="options-b"> <input id="opt-4" name="subject" type="checkbox" value="Cooking"> <label for="opt-4"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Cooking </label> <input id="opt-5" name="subject" type="checkbox" value="Communication Strategy"> <label for="opt-5"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Communication Strategy </label> End second row of subject line options Begin third row of subject line options <input id="opt-6" name="subject" type="checkbox" value="Just sayin hi"> <label for="opt-6"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Just saying hi </label> </span> End third row of subject line options--> </div> <h2>Drop me a line! Selecting topics above will add it to the subject line. I'll respond within a few days!</h2> <div class="work-request--information"> <div class="information-name"> <input id="name" name="name" type="text" autocomplete="your name" required> <label for="name">Name</label> </div> <div class="information-email"> <input id="email" type="email" name="email" autocomplete="your email" required> <label for="email">Email</label> </div> <div class="information-message"> <input id="message" name="message" type="text" autocomplete="short message"></input> <label for="message">Message</label> </div> </div> <!-- <div class="work-request--information"> <div class="information-message"> <label for="name">Message</label> <textarea id="message" type="text" name="message" required></textarea> </div> </div> --> <div class="h-captcha" data-captcha="true" required></div> <input type="submit" value="Submit Form"> <!-- <input type="hidden" name="redirect" value="https://web3forms.com/success"> --> </form> </div> <!-- <div class="contact"> <div class="contact--lockup"> <div class="modal"> <div class="modal--information"> <p>Aguadilla, Puerto Rico</p> <a href="mailto:contact@miguelalmodo.com">contact@miguelalmodo.com</a> </div> <ul class="modal--options"> <li><a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">Nostr</a></li> <li><a href="https://linkedin/in/miguelalmodo">LinkedIn</a></li> <li><a href="mailto:contact@miguelalmodo.com">Send me an email</a></li> </ul> </div> </div> </div> --> <!-- <li class="l-section section"> <div class="hire"> <h2>Available for hire</h2> checkout formspree.io for easy form setup <form class="work-request"> <div class="work-request--options"> <span class="options-a"> <input id="opt-1" type="checkbox" value="app design"> <label for="opt-1"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Content Creation </label> <input id="opt-2" type="checkbox" value="graphic design"> <label for="opt-2"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Web Development </label> <input id="opt-3" type="checkbox" value="motion design"> <label for="opt-3"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Tech Consultation </label> </span> <span class="options-b"> <input id="opt-4" type="checkbox" value="ux design"> <label for="opt-4"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Cooking </label> <input id="opt-5" type="checkbox" value="webdesign"> <label for="opt-5"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Communication Strategy </label> <input id="opt-6" type="checkbox" value="marketing"> <label for="opt-6"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve"> <g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)"> <path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/> </g> </svg> Marketing </label> </span> </div> <div class="work-request--information"> <div class="information-name"> <input id="name" type="text" spellcheck="false"> <label for="name">Name</label> </div> <div class="information-email"> <input id="email" type="email" spellcheck="false"> <label for="email">Email</label> </div> </div> <input type="submit" value="Send Request"> </form> </div> --> <!-- End of the four sections of the nav --> </li> </ul> <!--End of main content --> </div> </div> </div> <!-- Here is the outer navbar --> <ul class="outer-nav"> <!--Uberspace Asteroid Logo <a href="https://uberspace.de/en"><img src="https://dashboard.uberspace.de/static/img/badge_dark.png"></a> --> <!--Menu items for the outer navbar --> <li class="is-active">Home</li> <li>Interests</li> <li>About</li> <li>Contact</li> </ul> <!-- <li>Work with Me</li> --> </ul> <!-- Outer nav bar ends --> </div> <script> const form = document.getElementById('form'); const result = document.getElementById('result'); form.addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(form); const object = Object.fromEntries(formData); const json = JSON.stringify(object); /*taking out the result text that initially appeared in the empty div block. /*result.innerHTML = "Please wait..." */ fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: json }) .then(async (response) => { const json = await response.json(); if (response.status == 200) { let custMess = json.message; if (custMess === "Email sent successfully!") { custMess = "Keep an eye out for a response soon. I'll be in touch!" } alert(custMess); } else { console.log(response); alert(json.message); } }) .catch(error => { console.log(error); alert("Something went wrong!"); }) .finally(() => { form.reset(); }); }); </script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script> <script src="js/functions-min.js"></script> <script>window.onload = function() { // Reset the form fields when the page loads document.getElementById("form").reset(); }; </script> <script src="https://web3forms.com/client/script.js" async defer></script> </body> </html>