my site looking tight!!

This commit is contained in:
miggymofongo 2024-02-29 22:11:42 -04:00
parent 12f6e89370
commit 85d80bba14
2 changed files with 440 additions and 29 deletions

402
about.html Normal file
View file

@ -0,0 +1,402 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>El Asteroide De Miguel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></link>
<link rel="stylesheet" href="./styles.css"></link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./scripts.js"></script>
<script>
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
</script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.btn-bd-primary {
--bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.photo {
float: left;
}
.btn-dark-custom {
background-color: #343a40; /* Slightly lighter than the default bg-dark */
color: white;
}
.btn-dark-custom:hover {
background-color: #23272b; /* Darken on hover for interaction feedback */
color: white;
}
/* CSS used here will be applied after bootstrap.css */
.jumbotron{
position: relative;
z-index:-2;
}
#namecard{
align-content: center;
}
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
width:100%;
}
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
.white-bold-text {
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a href="https://migs.uber.space">
<img src="./img/Highwind1_opt.png" alt="GummiShip" style="transform: scale(0.9);">
</a>
<h4 class="navbar-brand" style="font-family: KHGummi;">
<a href="https://migs.uber.space" style="color: aliceblue; text-decoration: none;">Miguel's Asteroid</a>
</h4>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="text-center">
<div class="d-inline-block text-center">
<img src="./img/headshot website.png" class="rounded-circle" style="width: 160px; height: 160px; object-fit: cover;" alt="Headshot of Miguel"></img>
<br>
<br>
<h2>Public Interest Communications </h2>
<a href="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
<a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
<a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
<img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
<br><br>
<h6>Zap me Bitcoin!ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
<div style= "text-align: end;">
</div>
<!--
<button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
-->
</div>
</div>
<br>
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="https://migs.uber.space/about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Collaborate
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
<li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>
<!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Resumes
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
<li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Garden
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Library</a></li>
<li><a class="dropdown-item" href="https://migs.uber.space/blog">Chronicles</a></li>
<li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<section>
<div class="my-5">
<div class="p-5 text-center bg-body-tertiary">
<div class="container py-5">
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!" style="width: 160px; height: 160px; object-fit: cover;">
<h2 class="text-center text-uppercase mb-0">About Me</h2>
<p class="col-lg-8 mx-auto lead">
Let's change the world! This page is under construction so check back
for updates!
</p>
<button class="btn btn-dark-custom btn-lg" type="button" disabled>About</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://github.com/miggymofongo';">Code</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Library</button>
</div>
</div>
</div>
</section>
<section>
<!-- About Section -->
<section id="about" class="text-secondary">
<div class="container">
<div class="row">
<div class="col">
<hr class="star-dark mb-5">
</div>
</div>
<div class="row lead">
<div class="col-sm">
<h3>Some things I'm currently working on are:</h3>
<ul>
<li>
Migrating my <a href="https://migs.uber.space/blog">my blog from a Bludit
instance</a> to
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw">
Nostr</a>
</li>
<br>
<li>
Elevating my consumer consciousness.
</li>
<br>
<li>
Deploying web services on
<a target="_blank" href="http://uberspace.de">
this asteroid in uberspace.
</a>
</li>
</ul>
</div>
<div class="col-sm">
<h4 style="font-weight: bold;">International Culture Exchanges</h4>
<p>I just got back from Cuba with a delegation of activists and organizers.
Read about it and other cultural exchanges I've organized with systems-
involved youth for organizations serving children and families
around the world on my <a href="https://migs.uber.space/blog">blog</a> or <a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw">
Nostr</a> yakihonne.</p>
<h4 style="font-weight: bold;">Community Service</h4>
<p>I organized fundraisers and step performances with schools
and I crossed <a href="https://iotaphitheta.org/"> spring 19' into Iota
Phi Theta Fraternity, inc.</a> at CSU East Bay in Hayward,
California. </p>
<h4 style="font-weight: bold;">International Foster Care Alliance<a href="https://ifcaseattle.org">
</a></h4>
<p>I'm a board director at the <a href="https://migs.uber.space/">international foster care alliance
</a>where i collaborate with local groups championing family centered systems change.</p>
</div>
</div>
</div>
</section>
</section>
<footer class="footer">
<div class="container">
<span class="text-muted">© 2024 Miguel Almodóvar</span> <span style="font-weight: bolder;"><a href="https://uberspace.de/en/about/";>This website is hosted on an asteroid in uberspace!</a></span>
</p>
</div>
</footer>
</body>
</html>

View file

@ -178,7 +178,7 @@ font-weight:400;
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<img src="./img/Highwind1_opt.png" alt="GummiShip" style="transform: scale(0.9)";>
<img src="./img/Highwind1_opt.png" href="index.html" alt="GummiShip" style="transform: scale(0.9)";>
<h4 class="navbar-brand" href="#" style="color: aliceblue; font-family: KHGummi;">Miguel's Asteroid</h4>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
@ -188,7 +188,7 @@ font-weight:400;
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title quote-banner" id="offcanvasDarkNavbarLabel">Cockpit</h5>
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@ -202,20 +202,26 @@ font-weight:400;
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!"
style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
<br>
<br>
<h2>Public Interest Communications </h2>
<a href="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
<a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
<a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
<img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
<br><br>
<p>This website is hosted on an asteroid in uberspace!
Explore my digital playground and find ways we can
collaborate.
</p>
<h6>Zap me Bitcoin!ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
<div style= "text-align: end;">
<button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
</div>
</div>
<!--
<button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
-->
</div>
</div>
<br>
@ -243,9 +249,9 @@ font-weight:400;
Collaborate
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Content Production</a></li>
<li><a class="dropdown-item" href="#">Code</a></li>
<li><a class="dropdown-item" href="#">Campaign Strategy</a></li>
<!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
<li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>
<!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->
</ul>
</li>
@ -254,8 +260,8 @@ font-weight:400;
Resumes
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Hospitality</a></li>
<li><a class="dropdown-item" href="#">Public Interest Communications</a></li>
<!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
<li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>
</ul>
</li>
@ -265,9 +271,9 @@ font-weight:400;
Garden
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">Library</a></li>
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Library</a></li>
<li><a class="dropdown-item" href="https://migs.uber.space/blog">Chronicles</a></li>
<li><a class="dropdown-item" href="">Quote Shuffler</a></li>
<li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li>
</ul>
</li>
@ -292,11 +298,11 @@ font-weight:400;
<h1 class="text-body-emphasis quote-banner">All aboard the Gummi Ship!</h1>
<p class="col-lg-8 mx-auto lead">
Thanks for visiting my webpage. Check out a book, my projects,
or download a resume from my asteroid!
Thanks for visiting my asteroid. Explore the depths of uberspace
while we battle space pirates and save worlds from corporate tech!
</p>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://migs.uber.space/about.html';" disabled>About</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://migs.uber.space/about.html';">About</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://github.com/miggymofongo';">Code</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Library</button>
@ -326,15 +332,17 @@ font-weight:400;
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold" style="color: aliceblue;">Communications for the Public Good</h3>
<p style="color: rgb(255, 255, 255);">The corporate social media landscape looks grim.
<p style="color: rgb(255, 255, 255);">The <a
href="https://migs.uber.space/blog/corporate-social-media-is-killing-us">
corporate social media landscape looks grim.</a>
They privatize our means of communication over the Internet and tear our society
apart with the constant bombardment of adverrtising and antagonizing algoriths.
apart with the constant bombardment of adverrtising and antagonizing algorithms.
Movements in 2024 need a robust communication strategy and the power of a
decentralized internet. It's on us to take back the digital commons once and for all.
</a></p>
<div class="container">
<!-- <div class="container">
<!-- <form onsubmit="sendEmail()" style="color: rgb(255, 255, 255);">
<form onsubmit="sendEmail()" style="color: rgb(255, 255, 255);">
<h4 style="color: rgb(255, 255, 255);">Send me an email and get a response back
within 48 hours! </h4>
<label for="text">Your Name:</label>
@ -368,14 +376,13 @@ font-weight:400;
</script>
-->
</div>
class="btn btn-dark-custom btn-lg"
</div>-->
<a href="mailto:contact@miguelalmodo.com" class="btn btn-dark-custom btn-lg">
<a href="mailto:contact@miguelalmodo.com" class="btn btn-light btn-lg">
Click to open a self - addressed email message in your favorite
client.</a>
@ -446,7 +453,9 @@ font-weight:400;
<footer class="footer">
<div class="container">
<span class="text-muted">© 2024 Miguel Almodóvar</span>
<span class="text-muted">© 2024 Miguel Almodóvar</span><p>This website is <a href ="https://uberspace.de/">hosted on an asteroid in uberspace!</a>
</p>
</div>
</footer>