Compare commits

..

No commits in common. "8ca4f95344213179518417469a96cda00899f300" and "54a17c582533ae532153843979f109f94e126484" have entirely different histories.

16 changed files with 792 additions and 2508 deletions

View file

@ -1,6 +0,0 @@
{"names":
{"miggymofongo":"ec965405e11a6a6186b27fa451a2ffc1396ede7883d2ea11c32fbd2c63996966",
"_":"ec965405e11a6a6186b27fa451a2ffc1396ede7883d2ea11c32fbd2c63996966"}
}

View file

@ -1,18 +0,0 @@
{
"version": "1.2.0",
"chapters":
[
{
"startTime": 0,
"title": "Intro"
},
{
"startTime": 42,
"title": "Meet Isaac"
}
]
}

View file

@ -1,16 +0,0 @@
{{if .Success}}
<p>Your message has been sent!</p>
{{else}}
<p>Contact</p>
<form action="/contact" method="POST">
<label>Name:</label><br />
<input type="text" name="name"><br />
<label>Email:</label><br />
<input type="text" name="email"><br />
<label>Subject:</label><br />
<input type="text" name="subject"><br />
<label>Message:</label><br />
<textarea name="message"></textarea><br /><br />
<input type="submit">
</form>
{{end}}

1586
css/main.css Normal file → Executable file

File diff suppressed because one or more lines are too long

58
css/scroll_gall.css Normal file
View file

@ -0,0 +1,58 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
html, body, #app {
width:100%;
height:100%;
margin:0;
padding:0;
font-size:0;
font-family: 'Montserrat', sans-serif;
}
#app {
opacity:0;
height:auto;
background:radial-gradient(#ccc, #999);
}
#app img {
display:block;
}
#detail {
position:absolute;
width:100%;
height:100%;
background:#111;
top:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-evenly;
}
#detailImg {
width:85%;
height:85%;
}
#detailTxt {
color:#ccc;
font-size:20px;
letter-spacing:1px;
}
svg {
pointer-events:none;
position:absolute;
top:0;
left:0;
}
#headlines {
max-width:800px;
min-width:450px;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}

405
css/style2.css Normal file
View file

@ -0,0 +1,405 @@
/**
* ===================================================================
*
* ResumeTemplate v1.0 ClearCareer
* url: clearcareer.ca
* Design by: Iskender Piyale-Sheard
* website: izzydoesizzy.com
* Created 06-27-2016
* Last Updated: 03-19-2017
* ------------------------------------------------------------------
* Table of Contents:
* 01. Global Styles
* 02. Intro
* 03. Social Icons
* 04. Icon Fonts
* 05. Section Styles
* 06. Timeline Styles
* 05. Footer
EXTRAS
* ===================================================================
*/
/* 01. Basic Styles
* =================================================================== */
html {
overflow-x: hidden;
}
body {
font-family: 'Source Sans Pro', sans-serif;
}
h1 {
font-weight: bold;
}
h2 {
}
h5 {
font-weight: 600;
}
a {
cursor: pointer;
color: #1abc9c;
text-decoration: none;
}
a:hover {
text-decoration:none;
color: #1abc9c;
opacity: 0.9;
}
hr {
border-top: 5px solid #1abc9c;
width: 80px;
padding-bottom: 20px;
}
.colour-splash {
color: #1abc9c;
}
.section-primary span {
color: #1abc9c;
font-weight: bolder;
opacity: 1;
}
/* 02. Intro
* =================================================================== */
.section-image {
background: #151515 url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=1199&h=799&q=80) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
text-align: center;
color: #fff;
display:table;
}
.img-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #111111;
opacity: .7;
}
.intro {
vertical-align: middle;
text-align: center;
display:table-cell;
-webkit-transform: translateY(-2.1rem);
-ms-transform: translateY(-2.1rem);
transform: translateY(-2.1rem);
}
.intro .row {
margin-right: 0;
margin-left:0;
}
.intro h1 {
font-size: 84px;
}
.intro h5 {
color: #1abc9c;
font-size: 2.3rem;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: .3rem;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.section-image span {
text-transform: uppercase;
font-size: 1.4em;
padding: 0 10px;
font-weight: 100;
}
.section-image h1 {
margin-top: 0;
}
.section-image p {
font-weight: lighter;
opacity: 0.9;
}
/* 03. Social Icons
* =================================================================== */
.social {
margin: 0 10px;
padding-top: 1.3em;
text-align: center;
color: #fff;
font-size: 0.9em;
}
.social a {
color: white;
text-decoration:none;
padding: 2em;
}
.social a:hover{
opacity: 0.6;
}
.social-footer {
position: block;
padding: 15px;
}
.social-footer a {
color: white;
text-decoration: none;
padding: 0.6em;
font-size: 1.7em;
}
/* 04. Icon Font
* =================================================================== */
.lnr {
font-size: 4em !important;
color:#fff;
}
/* 05. Section Styles
* =================================================================== */
section {
padding-top: 100px;
padding-bottom: 100px;
}
.profilepic {
height: 150px;
width: auto;
border-radius: 300px;
}
.section-primary p {
text-align: justify;
}
.section-primary {
border: #1abc9c;
}
.section-colour {
background-color: #1abc9c;
color: #fff;
}
.section-colour p {
text-align: justify;
}
.section-heading .lead, .section-heading h2 {
text-align: center;
}
.section-colour {
border: #fff;
}
.section-colour hr {
border-top: 5px solid #fff;
}
/* 01. Timeline Styles
* =================================================================== */
.timeline-icon .fa {
color: white;
margin: 14px;
font-size: 1.7em;
}
#skills {
background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
height: auto;
}
/* 05. Footer
* =================================================================== */
footer {
display: block;
position: static;
bottom: 0;
background-color: black;
color: #fff;
padding: 50px 0;
}
footer p {
padding: 15px;
opacity: 0.8;
}
/* EXTRAS
* =================================================================== */
/* Mouse Icon
* =================================================================== */
.mouse-icon {
border: 2px solid #fff;
border-radius: 16px;
display: block;
height: 50px;
margin: 100px auto;
position: absolute;
left: 0;
right: 0;
width: 30px;
z-index: 10;
}
.mouse-icon .scroll {
animation-delay: 0s;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: scrolling;
animation-play-state: running;
animation-timing-function: linear;
}
.mouse-icon .scroll {
background: #fff none repeat scroll 0 0;
border-radius: 10px;
height: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
top: 4px;
width: 4px;
}
@keyframes scrolling {
0% {
opacity: 0;
top: 5px;
}
30% {
opacity: 1;
top: 10px;
}
100% {
opacity: 0;
top: 25px;
}
}
.pad-xl {
padding: 200px 0px;
}
.pad-lg {
padding: 160px 0px;
}
.pad-sm {
padding: 80px 0px;
}
.pad-xs {
padding: 30px 0px;
}
/* /Mouse Icon
* =================================================================== */
/* Media Queries
* =================================================================== */
@media (max-width: 480px) {
.social a {
padding: 0.4em;
font-size: 0.9em;
}
.social-footer {
text-align: center;
position:block;
text-align: center;
}
.social-footer a {
padding: 0.3em;
font-size: 1.6em;
}
.intro-desc {
font-size: 0.7em;
}
.section-image span {
font-size: 1em;
padding: 0 1px;
}
.intro h1 {
font-size: 50px;
padding-top: 15px;
}
footer {
text-align: center;
padding-bottom: 100px;
}
#skills {
background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
background-position: top center;
}
}
@media (max-width: 991px) {
.social-footer {
text-align: center;
}
footer p {
text-align: center;
}
}

232
css/timeline.css Normal file
View file

@ -0,0 +1,232 @@
/**
* ===================================================================
*
* ResumeTemplate v1.0 Main ClearCareer
* url: clearcareer.ca
* 06-27-2016
* ------------------------------------------------------------------
*
* Timeline Tempalte by Bruno Rodriguez
*
* https://github.com/itbruno
* http://itbruno.com.br
* http://www.twitter.com/_brunoweb
*
* ===================================================================
*/
header:after, #timeline .timeline-item:after, header:before, #timeline .timeline-item:before {
content: '';
display: block;
width: 100%;
clear: both;
}
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
background: #f9f9f9;
background-size: cover;
margin: 0;
padding: 0;
font-family: helvetica, arial, tahoma, verdana;
line-height: 20px;
font-size: 14px;
color: #726f77;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
.container {
max-width: 1100px;
margin: 0 auto;
}
h1, h2, h3, h4 {
font-family: "Dosis", arial, tahoma, verdana;
font-weight: 500;
}
.project-name {
text-align: center;
padding: 10px 0;
}
header {
background: #1abc9c;
padding: 10px;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
}
header .logo {
color: #1abc9c;
float: left;
font-family: "Dosis", arial, tahoma, verdana;
font-size: 22px;
font-weight: 500;
}
header .logo > span {
color: #f7aaaa;
font-weight: 300;
}
header .social {
float: right;
}
header .social .btn {
font-family: "Dosis";
font-size: 14px;
margin: 10px 5px;
}
.timelinedot {
margin: 13px;
color:white;
}
#timeline {
width: 100%;
margin: 30px auto;
position: relative;
padding: 0 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#timeline:before {
content: "";
width: 3px;
height: 100%;
background: #1abc9c;
left: 50%;
top: 0;
position: absolute;
}
#timeline:after {
content: "";
clear: both;
display: table;
width: 100%;
}
#timeline .timeline-item {
margin-bottom: 50px;
position: relative;
}
#timeline .timeline-item .timeline-icon {
background: #1abc9c;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 50%;
overflow: hidden;
margin-left: -23px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
#timeline .timeline-item .timeline-icon svg {
position: relative;
top: 14px;
left: 14px;
}
#timeline .timeline-item .timeline-content {
width: 45%;
background: #fff;
padding: 20px;
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#timeline .timeline-item .timeline-content h2 {
padding: 15px;
background: #1abc9c;
color: #fff;
margin: -20px -20px 0 -20px;
font-weight: 300;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-ms-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#timeline .timeline-item .timeline-content p {
padding-top: 15px;
}
#timeline .timeline-item .timeline-content:before {
content: '';
position: absolute;
left: 45%;
top: 20px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #1abc9c;
}
#timeline .timeline-item .timeline-content.right {
float: right;
}
#timeline .timeline-item .timeline-content.right:before {
content: '';
right: 45%;
left: inherit;
border-left: 0;
border-right: 7px solid #1abc9c;
}
@media screen and (max-width: 768px) {
#timeline {
margin: 30px;
padding: 0px;
width: 90%;
}
#timeline:before {
left: 0;
}
#timeline .timeline-item .timeline-content {
width: 90%;
float: right;
}
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
left: 10%;
margin-left: -6px;
border-left: 0;
border-right: 7px solid #1abc9c;
}
#timeline .timeline-item .timeline-icon {
left: 0;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9 KiB

BIN
img/favicon.ico Normal file → Executable file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View file

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 98 KiB

View file

@ -5,77 +5,49 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Miguel's Landing Page"> <meta name="description" content="HTML5 website template">
<meta name="keywords" content="global, template, html, sass, jquery"> <meta name="keywords" content="global, template, html, sass, jquery">
<link rel="stylesheet" href="css/main.css"> <meta name="author" content="Bucky Maler">
<link rel="icon" type="image/x-icon" href="/img/Menu_Light.png"> <link rel="stylesheet" href="/asteroid/css/main.css">
</head> </head>
<body> <body>
<!-- notification for small viewports and landscape oriented smartphones --> <!-- notification for small viewports and landscape oriented smartphones -->
<div class="device-notification"> <div class="device-notification">
<a class="device-notification--logo" href="https://library.miguelalmodo.com"> <a class="device-notification--logo" href="#0">
<img src="img/Highwind1_opt.png" alt="gummi ship"> <img src="assets/img/Highwind1_opt.png" alt="Global">
<p>Miguel's Asteroid</p> <p>Miguel's Asteroid</p>
</a> </a>
<p class="device-notification--message">Try viewing on a bigger screen or clicking <p class="device-notification--message">Try viewing on a bigger screen.</p>
on the gummi ship to blast off to my bookshelf.
</p>
</div> </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="perspective effect-rotate-left">
<div class="container"><div class="outer-nav--return"></div> <div class="container"><div class="outer-nav--return"></div>
<div id="viewport" class="l-viewport"> <div id="viewport" class="l-viewport">
<div class="l-wrapper"> <div class="l-wrapper">
<header class="header"> <header class="header">
<!-- <button class="header--cta cta">Work with Me</button>--> <!-- <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"> <div class="header--nav-toggle">
<span></span> <span></span>
</div> </div>
</header> </header>
<!-- The beginning of the side nav bar -->
<nav class="l-side-nav"> <nav class="l-side-nav">
<!-- The left side nav buttons -->
<ul class="side-nav"> <ul class="side-nav">
<li class="is-active"><span>Home</span></li> <li class="is-active"><span>Home</span></li>
<li><span>Interests</span></li> <li><span>Interests</span></li>
<li><span>About</span></li> <li><span>About</span></li>
<li><span>Contact</span></li> <li><span>Contact</span></li>
<!--Here I am commenting out a menu item from the vertical side nav, reducing from 4 to 5-->
<!--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>--> <!--<li><span>Work with Me</span></li>-->
</ul> </ul>
</nav> </nav>
<!-- The side nav bar ends here -->
<!-- The sections/nav items are an unordered list -->
<ul class="l-main-content main-content"> <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"> <li class="l-section section section--is-active">
<div class="intro"> <div class="intro">
<div class="intro--banner"> <div class="intro--banner">
<h1>Welcome<br>to my<br>asteroid.</h1> <h1>Welcome<br>to my<br>asteroid.</h1>
<!-- Blocking out the ribbon buttons
<a href="https://library.miguelalmodo.com/"> <a href="https://library.miguelalmodo.com/">
<button class="cta">Check out a book <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"> <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">
@ -96,85 +68,61 @@
</svg> </svg>
<span class="btn-background"></span> <span class="btn-background"></span>
</button> </button>
</a> --> </a>
<img src="img/spaceman.png" alt="Welcome"> <img src="img/introduction-visual.png" alt="Welcome">
</div> </div>
<div class="intro--options"> <div class="intro--options">
<a href="https://uberspace.de"> <a href="https://uberspace.de">
<h3>Explore my asteroid!</h3> <h3>Deploying Web Apps in Space
<p>This site is hosted on asteroids </h3>
with Uberspace. I'm learning basic web development to <p>This website is hosted on Uberspace, a cool worker owned business that rents out server space.</p>
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>
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs"> <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
<h3>Creator Residency</h3> <h3>Creator Residency</h3>
<p>I'm in the Content Creator Residency with nos.social. <p>I'm in the Content Creator Residency with nos.social. Find me on Nostr!</p>
Nostr is social media that you control. Find me on nostr
miggymofongo@miguelalmodo.com Ask me to learn
more!</p>
</a> </a>
<a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9"> <a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
<h3>Organizer</h3> <h3>#CubaSIBloqeuoNO</h3>
<p>Read about my recent trips to Cuba where I attended <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
this year's May Day celebrations in Havana with the world.
organizers and union members from around
the world. #CubaSIBoqueoNO
</p> </p>
</a> </a>
</div> </div>
</div> </div>
</li>
</li> <!--End of the first section -->
<!-- Beginning of the second section -->
<li class="l-section section"> <li class="l-section section">
<div class="work"> <div class="work">
<h2>Build your organization's power with protocols. <h2>Public Interest Communications</h2>
</h2>
<div class="work--lockup"> <div class="work--lockup">
<ul class="slider"> <ul class="slider">
<li class="slider--item slider--item-left"> <li class="slider--item slider--item-left">
<a href="https://gitfitcode.com/"> <a href="https://forge.lightcrystal.systems/migs">
<div class="slider--item-image"> <div class="slider--item-image">
<img src="img/gfc-logo-12@2x_transp.png" style="size: 50%; padding-top: 5em" alt="gitfitcode logo"></a> <img src="img/light_crystal.svg" alt="light crystal systems logo">
</div> </div>
<p class="slider--item-title">Web Development</p> <p class="slider--item-title">Web Development</p>
<p class="slider--item-description">I'm learning to code with professionals like <p class="slider--item-description">Weilding open source protocols in the battle for the Internet</p>
<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> </a>
</li> </li>
<li class="slider--item slider--item-center"> <li class="slider--item slider--item-center">
<a href="https://podcasting2.org/"> <a href="https://podcastindex-org.github.io/docs-api/#overview--example-code">
<div class="slider--item-image"> <div class="slider--item-image">
<img src="img/pci_avatar.svg" alt="Podcasting Index logo"> <img src="img/pci_avatar.svg" alt="Podcasting Index logo">
</div> </div>
<p class="slider--item-title">Podcast 2.0</p></a> <p class="slider--item-title">Podcast 2.0</p>
<p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast <p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast index and RSS.</p>
index and RSS. <a href="https://podcast.miguelalmodo.com">Click here to check out my podcast, How to Change the World. </a></p> </a>
</li> </li>
<li class="slider--item slider--item-right"> <li class="slider--item slider--item-right">
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs"> <a href="https://nostrmeet.me/_@migs.uber.space">
<div class="slider--item-image"> <div class="slider--item-image">
<img src="img/nostr-icon-white-256x256.png" alt="Nostr Logo"> <img src="img/nostr-icon-white-256x256.png" alt="Alex Nowak">
</div> </div>
<a href="https://nostr.com/#why-we-need-nostr"> <p class="slider--item-title">Social Media</p>
<p class="slider--item-title">Social Media Revolution</p></a> <p class="slider--item-description">Social Media is evolving. Ask me about alternative social media
<p class="slider--item-description"> protocols.</p>
</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> </a>
</li> </li>
</ul> </ul>
@ -198,15 +146,10 @@
</div> </div>
</div> </div>
</li> </li>
<!-- End of the second section -->
<!-- Beginning of the third section -->
<li class="l-section section"> <li class="l-section section">
<div class="about"> <div class="about">
<div class="about--banner"> <div class="about--banner">
<h2>¡Cuba si, bloqueo no!</h2> <h2>Communications for the <br> public interest.</h2>
<a href="https://migs.uber.space/resumes/PIC.pdf">Resume <a href="https://migs.uber.space/resumes/PIC.pdf">Resume
<span> <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"> <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">
@ -216,7 +159,17 @@
</svg> </svg>
</span> </span>
</a><br> </a><br>
<a href="https://ifcaseattle.org/boardofdirectors.html">Board of Directors <a href="https://migs.uber.space/resumes/PIC.pdf">In the news
<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://migs.uber.space/portfolio">Portfolio
<span> <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"> <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)"> <g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
@ -226,43 +179,30 @@
</span> </span>
</a> </a>
<video src="https://v.nostr.build/xE7Vl.webm" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="70%" height="70%" controls>
<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>
<div class="about--options"> <div class="about--options">
<a href="https://miguelalmodo.com/about.html"> <a href="#0">
<h3>Who is Miguel?</h3> <h3>Philosophy</h3>
</a> </a>
<a href="https://pinstr.app/p/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs/My%20Dog"> <a href="#0">
<h3>My dog, Kaido!</h3> <h3>Who is Miguel</h3>
</a> </a>
<a href="https://miguelalmodo.com/portfolio"> <a href="#0">
<h3>Portfolio</h3> <h3>Garden</h3>
</a> </a>
</div> </div>
</div> </div>
</li> </li>
<!--End of the third section-->
<!-- Beginning of the fourth section -->
<li class="l-section section"> <li class="l-section section">
<div class="hire"> <div class="hire">
<div id="result"></div> <h2>Got an idea? I want to hear about it.</h2>
<!-- checkout formspree.io for easy form setup -->
<form class="work-request">
<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"> <div class="work-request--options">
<!-- First row of subject line options -->
<span class="options-a"> <span class="options-a">
<input id="opt-1" name="subject" type="checkbox" value="Organize"> <input id="opt-1" type="checkbox" value="app design">
<label for="opt-1"> <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" <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"> viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
@ -270,10 +210,9 @@
<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"/> <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> </g>
</svg> </svg>
Organize Content Creation
</label> </label>
<input id="opt-2" type="checkbox" value="graphic design">
<input id="opt-2" name="subject" type="checkbox" value="Just sayin hi!">
<label for="opt-2"> <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" <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"> viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
@ -281,11 +220,9 @@
<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"/> <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> </g>
</svg> </svg>
Just sayin hi! Training
</label> </label>
<input id="opt-3" type="checkbox" value="motion design">
<input id="opt-3" name="subject" type="checkbox" value="Consultation">
<label for="opt-3"> <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" <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"> viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
@ -293,15 +230,11 @@
<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"/> <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> </g>
</svg> </svg>
Consultation Tech Consultation
</label> </label>
</span> </span>
<!-- end first row of subject line options -->
<!-- second row of subject line options
<span class="options-b"> <span class="options-b">
<input id="opt-4" type="checkbox" value="ux design">
<input id="opt-4" name="subject" type="checkbox" value="Cooking">
<label for="opt-4"> <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" <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"> viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
@ -311,7 +244,7 @@
</svg> </svg>
Cooking Cooking
</label> </label>
<input id="opt-5" name="subject" type="checkbox" value="Communication Strategy"> <input id="opt-5" type="checkbox" value="webdesign">
<label for="opt-5"> <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" <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"> viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
@ -321,9 +254,7 @@
</svg> </svg>
Communication Strategy Communication Strategy
</label> </label>
End second row of subject line options <input id="opt-6" type="checkbox" value="marketing">
Begin third row of subject line options
<input id="opt-6" name="subject" type="checkbox" value="Just sayin hi">
<label for="opt-6"> <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" <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"> viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
@ -331,56 +262,33 @@
<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"/> <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> </g>
</svg> </svg>
Just saying hi Marketing
</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>
Just sayin hi
</label> </label>
</span> </span>
End third row of subject line options-->
</div> </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="work-request--information">
<div class="information-name"> <div class="information-name">
<input id="name" name="name" type="text" required> <input id="name" type="text" spellcheck="false">
<label for="name">Name</label> <label for="name">Name</label>
</div> </div>
<div class="information-email"> <div class="information-email">
<input id="email" type="email" name="email" required> <input id="email" type="email" spellcheck="false">
<label for="email">Email</label> <label for="email">Email</label>
</div> </div>
<div class="information-message">
<input name="message" type="text" required></input>
<label for="message">Message</label>
</div> </div>
<input type="submit" value="Send Request">
</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> </form>
</div> </div>
@ -404,7 +312,7 @@
</div> </div>
--> -->
</li>
<!-- <li class="l-section section"> <!-- <li class="l-section section">
<div class="hire"> <div class="hire">
<h2>Available for hire</h2> <h2>Available for hire</h2>
@ -480,7 +388,6 @@
<div class="work-request--information"> <div class="work-request--information">
<div class="information-name"> <div class="information-name">
<input id="name" type="text" spellcheck="false"> <input id="name" type="text" spellcheck="false">
<label for="name">Name</label> <label for="name">Name</label>
@ -494,124 +401,25 @@
</form> </form>
</div> </div>
-->
</li> -->
<!-- End of the four sections of the nav -->
</li>
</ul> </ul>
<!--End of main content -->
</div> </div>
</div> </div>
</div> </div>
<!-- Here is the outer navbar -->
<ul class="outer-nav"> <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> <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 class="is-active">Home</li>
<li>Interests</li> <li>Interests</li>
<li>About</li> <li>About</li>
<li>Contact</li> <li>Contact</li>
</ul>
<!-- <li>Work with Me</li> --> <!-- <li>Work with Me</li> -->
</ul> </ul>
<!-- Outer nav bar ends -->
</div> </div>
<script>
const form = document.getElementById('form');
const result = document.getElementById('result');
form.addEventListener('submit', function(e) { <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
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>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
<script src="js/functions-min.js"></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> </body>
</html> </html>

View file

@ -1,595 +0,0 @@
<!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>
<!-- Blocking out the ribbon buttons
<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>
<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>Build your organization's power with protocols.
</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 learning to code with professionals like
<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/PIC.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" required>
<label for="name">Name</label>
</div>
<div class="information-email">
<input id="email" type="email" name="email" required>
<label for="email">Email</label>
</div>
<div class="information-message">
<input name="message" type="text" required></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>