restructured asteroid landing page

This commit is contained in:
miggymofongo 2024-02-29 00:09:59 -04:00
parent df415b7be6
commit 70cd62453a

View file

@ -9,29 +9,115 @@
<link rel="stylesheet" href="./styles.css"></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="./infinite-scroll-docs.min.js"> </script>
<script src="./scripts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
<script>
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
</script>
<style> <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 { .center {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 50%; width: 50%;
} }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> .photo {
float: left;
}
<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
<script src="./scripts.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<style>
.btn-dark-custom { .btn-dark-custom {
background-color: #343a40; /* Slightly lighter than the default bg-dark */ background-color: #343a40; /* Slightly lighter than the default bg-dark */
@ -43,6 +129,35 @@ $('#myModal').on('shown.bs.modal', function () {
color: white; 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> </style>
</head> </head>
@ -50,32 +165,71 @@ $('#myModal').on('shown.bs.modal', function () {
<body> <body>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top"> <nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="#">Miguel's Asteroid</a> <img src="./img/Highwind1_opt.png" style="transform: scale(0.9);"><a class="navbar-brand quote-banner" href="#">Miguel's Asteroid</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"> <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Menu</h5> <h5 class="offcanvas-title quote-banner" id="offcanvasDarkNavbarLabel">Cockpit</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="text-center">
<div class="d-inline-block text-start">
<img src="./img/headshot.jpg" class="rounded-circle" width="140" height="140" alt="Description of Image"></img>
<rect width="100%" height="100%" fill="#777"/>
<text x="50%" y="50%" fill="#777" dy=".3em">¡Wepa! Soy Miguel!</text>
<h2>Public Interest Communications </h2>
<p>Thanks for visiting my website hosted on an asteroid in uberspace. Find me on Linkedin
and Nostr.
</p>
<p><a class="btn btn-secondary" href="#">View biography &raquo;</a></p>
</div>
</div>
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a> <a class="nav-link active" aria-current="page" href="#">Home</a>
</li> </li>
<li class="nav-item dropdown">
<a class="nav-link" href="https://migs.uber.space/">About</a>
<li class="nav-item">
<a class="nav-link" href="https://library.miguelalmodo.com">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://migs.uber.space/blog">Chronicles</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a> <a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
</li> </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="#">Code</a></li>
<li><a class="dropdown-item" href="#">Campaign Strategy</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Resumes Resumes
@ -85,200 +239,151 @@ $('#myModal').on('shown.bs.modal', function () {
<li><a class="dropdown-item" href="#">Public Interest Communications</a></li> <li><a class="dropdown-item" href="#">Public Interest Communications</a></li>
</ul> </ul>
</li> </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="#">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>
</ul> </ul>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
</header>
<body>
<br>
<section> <section>
<div class="container my-5"> <div class="my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg"> <div class="p-5 text-center bg-body-tertiary">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3"> <div class="container py-5">
<h1 class="display-4 fw-bold lh-1">Miguel Almodóvar</h1> <h1 class="text-body-emphasis">Welcome to my Gummi Ship!</h1>
<p class="lead">
Putting the COMM in C-O-M-M-U-N-I-T-Y!
</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<!-- Button trigger modal 1 -->
<button type="button" class="btn btn-dark-custom" data-bs-toggle="modal" data-bs-target="#exampleModal1">
Who is Miguel?
</button>
<!-- Modal 1 -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Biography</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h4>Current Chapter</h4><p>
I just turned 30 and and live in Puerto Rico with my dog, Kaido.
</p>
<h4>Last Chapter</h4><p>My <p class="col-lg-8 mx-auto lead">
existence is a stew of lived experiences with a unique window into Explore my digital playground in uberspace.
the proliferation of the Internet and it's influence on the way we <a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"> Follow me on Nostr </a>or <a href="mailto:contact@miguelalmodo.com"> send an email.</a> </p>
share information.
</p> <button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">About</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://portfolio.miguelalmodo.com';">Code</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Library</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal 2 -->
<button type="button" class="btn btn-dark-custom" data-bs-toggle="modal" data-bs-target="#exampleModal2">
Let's Work Together
</button>
<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Let's Work Together</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h4>Society at a Crossroads</h4>
<p>The political division we see today is not by accident. In this dystopic society
mired in controversy, tragedy, and a blatant disregard for humanity, movements need
a robust communication strategy and the power of decentralized internet protocols. </p>
<h4>Cocreating Understanding</h4>
<p>The current moment demands that we learn how to talk to each other across political
and cultural divisions must broaden our collective understanding of how communication influences outcomes
beyond "strategic sharing". We
</p>
<p>
<a href="https://github.com/miggymofongo">
Github </a> and have <a href="https://nilfm.cc/"> a few friends in senior software engineer roles that
are helping guide</a> my learning journey. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal 3 -->
<button type="button" class="btn btn-dark-custom" data-bs-toggle="modal" data-bs-target="#exampleModal3">
Blogs
</button>
<!-- Modal 3 -->
<div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel3">I like to write</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>I host my own Bludit instance with blogs from my travels. </p>
<p>Visit <a href="https://chronicles.miguelalmodo.com">my Chronicles page to check them</a>
out!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-dark-custom" data-bs-toggle="modal" data-bs-target="#exampleModal4">
Content Production
</button>
<!-- Modal 3 -->
<div class="modal fade" id="exampleModal4" tabindex="-1" aria-labelledby="exampleModalLabel4" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel3">Captivate your Audience </h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>I've supported advocates and organizations over the years in creating
engaging content for their communities.
</p>
<h1>Videography</h1>
<h1>Photography</h1>
<h1>Audiography</h1>
<p>Check out my portfolio!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
<img class="center" src="./img/headshot.jpg" alt="headshot of Miguel" width="360">
<br><br>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section>
<div class="container-fluid">
<div><div class="card mb-4 text-center mx-auto" style="max-width: 75%;">
<div class="card-body"> <section>
<h5 class="card-title"><b>Kingdom Heart Quote Shuffler</b></h5>
<p class="card-text">I recently built a homemade web scraper in Python to scrape quotes off a database of my favorite video game, Kingdom Hearts.</p>
<p>After scraping the quotes into a json file, I feed them into a small program that fetches and periodically rotates the quotes every 5 seconds.
<br>I then installed a Gummi-themed Kingdom Hearts font from <a href="https://github.com/Televo/kingdom-hearts-recollection">a dope Github repository </a> <div class="container px-4 py-5" style="background-color: #23272b;">
to make it LEGIT! Check it out below this paragraph.</p> <h2 class="pb-2 border-bottom quote-banner">Good Communication fuels Good Relationships.</h2>
<p class="card-text">
<div class="'container-fluid" style="max-width: 800px; margin: auto;"> <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="clearfix"> <div class="d-flex flex-column align-items-start gap-2">
<div id="quoteBanner" class="quote-banner card-footer"> <h3 class="fw-bold" style="color: aliceblue;">Communications for the Public Good</h3>
<blockquote class="blockquote mb-0"> <p style="color: rgb(255, 255, 255);">The current media landscape looks grim.
<p>Quote goes here</p> If you feel like your messaging is not hitting your audience how it needs to.
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> Communication should bring people together.
</blockquote> </p>
<a href="#" class="btn btn-primary btn-lg">Schedule a Consultation</a>
</div> </div>
<a href="https://github.com/miggymofongo" class="card-link">Check it out on Github!</a> <div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Got something to say?</h4>
<p style="color: rgb(255, 255, 255);">Craft engaging content using photo, video,
or audio. Check out my portfolio of past work.
</p> </p>
</div> </div>
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Deploy Web Tools</h4>
<p style="color: rgb(255, 255, 255);">Are you sick of Google subscription fees
and silo'd infrastructure? Build a toolbox of ethical digital
tools for your organization.
</p>
</div>
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Strategize</h4>
<p style="color: rgb(255, 255, 255);">have you decided to change the things you cannot accept? movements need a robust
communication strategy and the power of a decentralized internet.</p>
</div>
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Training</h4>
<p style="color: rgb(255, 255, 255);">It seems like there's a new thing every couple months.
Request a training to stay ahead of the crowd.</p>
</div></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section>
<div class="container my-5">
<footer class="footer">
<div class="container">
<span class="text-muted">© 2024 Miguel Almodóvar</span>
</div> </div>
</footer>
<script src="./scripts.js"></script>
<script src="https://unpkg.com/htmx.org@1.9.10" crossorigin="anonymous"></script>
</body> </body>
</html> </html>