Compare commits

...

5 commits

Author SHA1 Message Date
8ca4f95344 practice 2024-05-28 15:35:03 -04:00
db4a561018 git practice 2024-05-28 15:35:03 -04:00
d9ab45b344 cleaned up contact form
- left only 3 checkboxes for the subject line
- added scripts to reset fields after form submission
- redirected success landing page to a custom alert confirmation
- edited video on about page
2024-05-28 15:35:03 -04:00
aaad257374 added Menu_Light.png to img folder to use as a favicon. 2024-05-28 15:35:03 -04:00
2d8b3f4122 did I just link my existing about page to the landing? 2024-05-28 15:35:03 -04:00
16 changed files with 2512 additions and 796 deletions

6
.well-known/nostr.json Normal file
View file

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

18
chapters.json Normal file
View file

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

16
contact.html Normal file
View file

@ -0,0 +1,16 @@
{{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 Executable file → Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,58 +0,0 @@
@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%);
}

View file

@ -1,405 +0,0 @@
/**
* ===================================================================
*
* 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;
}
}

View file

@ -1,232 +0,0 @@
/**
* ===================================================================
*
* 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;
}
}

BIN
img/Menu_Light.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

BIN
img/badge_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9 KiB

BIN
img/favicon.ico Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/gfc-logo-12@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/kaido.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 98 KiB

View file

Before

Width:  |  Height:  |  Size: 220 KiB

After

Width:  |  Height:  |  Size: 220 KiB

View file

@ -5,49 +5,77 @@
<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="HTML5 website template"> <meta name="description" content="Miguel's Landing Page">
<meta name="keywords" content="global, template, html, sass, jquery"> <meta name="keywords" content="global, template, html, sass, jquery">
<meta name="author" content="Bucky Maler"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="/asteroid/css/main.css"> <link rel="icon" type="image/x-icon" href="/img/Menu_Light.png">
</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="#0"> <a class="device-notification--logo" href="https://library.miguelalmodo.com">
<img src="assets/img/Highwind1_opt.png" alt="Global"> <img src="img/Highwind1_opt.png" alt="gummi ship">
<p>Miguel's Asteroid</p> <p>Miguel's Asteroid</p>
</a> </a>
<p class="device-notification--message">Try viewing on a bigger screen.</p> <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> </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">
@ -68,61 +96,85 @@
</svg> </svg>
<span class="btn-background"></span> <span class="btn-background"></span>
</button> </button>
</a> </a> -->
<img src="img/introduction-visual.png" alt="Welcome"> <img src="img/spaceman.png" alt="Welcome">
</div> </div>
<div class="intro--options"> <div class="intro--options">
<a href="https://uberspace.de"> <a href="https://uberspace.de">
<h3>Deploying Web Apps in Space <h3>Explore my asteroid!</h3>
</h3> <p>This site is hosted on asteroids
<p>This website is hosted on Uberspace, a cool worker owned business that rents out server space.</p> 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>
<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. Find me on Nostr!</p> <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>
<a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9"> <a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
<h3>#CubaSIBloqeuoNO</h3> <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 <p>Read about my recent trips to Cuba where I attended
the world. this year's May Day celebrations in Havana with
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>Public Interest Communications</h2> <h2>Build your organization's power with protocols.
</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://forge.lightcrystal.systems/migs"> <a href="https://gitfitcode.com/">
<div class="slider--item-image"> <div class="slider--item-image">
<img src="img/light_crystal.svg" alt="light crystal systems logo"> <img src="img/gfc-logo-12@2x_transp.png" style="size: 50%; padding-top: 5em" alt="gitfitcode logo"></a>
</div> </div>
<p class="slider--item-title">Web Development</p> <p class="slider--item-title">Web Development</p>
<p class="slider--item-description">Weilding open source protocols in the battle for the Internet</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> </a>
</li> </li>
<li class="slider--item slider--item-center"> <li class="slider--item slider--item-center">
<a href="https://podcastindex-org.github.io/docs-api/#overview--example-code"> <a href="https://podcasting2.org/">
<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> <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.</p> <p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast
</a> 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>
<li class="slider--item slider--item-right"> <li class="slider--item slider--item-right">
<a href="https://nostrmeet.me/_@migs.uber.space"> <a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
<div class="slider--item-image"> <div class="slider--item-image">
<img src="img/nostr-icon-white-256x256.png" alt="Alex Nowak"> <img src="img/nostr-icon-white-256x256.png" alt="Nostr Logo">
</div> </div>
<p class="slider--item-title">Social Media</p> <a href="https://nostr.com/#why-we-need-nostr">
<p class="slider--item-description">Social Media is evolving. Ask me about alternative social media <p class="slider--item-title">Social Media Revolution</p></a>
protocols.</p> <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> </a>
</li> </li>
</ul> </ul>
@ -146,10 +198,15 @@
</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>Communications for the <br> public interest.</h2> <h2>¡Cuba si, bloqueo no!</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">
@ -159,17 +216,7 @@
</svg> </svg>
</span> </span>
</a><br> </a><br>
<a href="https://migs.uber.space/resumes/PIC.pdf">In the news <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><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)">
@ -179,30 +226,43 @@
</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="#0"> <a href="https://miguelalmodo.com/about.html">
<h3>Philosophy</h3> <h3>Who is Miguel?</h3>
</a> </a>
<a href="#0"> <a href="https://pinstr.app/p/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs/My%20Dog">
<h3>Who is Miguel</h3> <h3>My dog, Kaido!</h3>
</a> </a>
<a href="#0"> <a href="https://miguelalmodo.com/portfolio">
<h3>Garden</h3> <h3>Portfolio</h3>
</a> </a>
</div> </div>
</div> </div>
</li> </li>
<li class="l-section section"> <!--End of the third section-->
<div class="hire">
<h2>Got an idea? I want to hear about it.</h2>
<!-- checkout formspree.io for easy form setup -->
<form class="work-request">
<!-- 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"> <div class="work-request--options">
<!-- First row of subject line options -->
<span class="options-a"> <span class="options-a">
<input id="opt-1" type="checkbox" value="app design"> <input id="opt-1" name="subject" type="checkbox" value="Organize">
<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">
@ -210,9 +270,10 @@
<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>
Content Creation Organize
</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">
@ -220,9 +281,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>
Training Just sayin hi!
</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">
@ -230,11 +293,15 @@
<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>
Tech Consultation 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">
@ -244,7 +311,7 @@
</svg> </svg>
Cooking Cooking
</label> </label>
<input id="opt-5" type="checkbox" value="webdesign"> <input id="opt-5" name="subject" type="checkbox" value="Communication Strategy">
<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">
@ -254,7 +321,9 @@
</svg> </svg>
Communication Strategy Communication Strategy
</label> </label>
<input id="opt-6" type="checkbox" value="marketing"> 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"> <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">
@ -262,33 +331,56 @@
<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>
Marketing Just saying hi
</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" type="text" spellcheck="false"> <input id="name" name="name" type="text" required>
<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" spellcheck="false"> <input id="email" type="email" name="email" required>
<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>
@ -312,7 +404,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>
@ -388,6 +480,7 @@
<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>
@ -401,25 +494,124 @@
</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>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- 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>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>

595
index2.html Normal file
View file

@ -0,0 +1,595 @@
<!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>