Compare commits

..

No commits in common. "f5b227b456846d31380f9b434061966b7e1ce4be" and "f937a6b9d9a0b68fb4ff667d86119a8b36755d72" have entirely different histories.

85 changed files with 470 additions and 5632 deletions

View file

@ -1,4 +0,0 @@
This repository represents the set up for my uberspace asteroid. I am in the process of pointing my main domain to this page.
I used this theme https://github.com/BuckyMaler/global

View file

@ -1,8 +0,0 @@
body
background-color: $black
font-size: 14px
line-height: 1.6
font-family: "Montserrat", sans-serif
color: $white
-webkit-font-smoothing: antialiased
-webkit-text-size-adjust: 100%

View file

@ -1,33 +0,0 @@
// https://www.fontsquirrel.com/fonts/montserrat
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Black.eot');
src: local(''), url('fonts/Montserrat-Black.woff') format('woff'), url('fonts/Montserrat-Black.ttf') format('truetype'), url('fonts/Montserrat-Black.svg') format('svg');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Bold.eot');
src: local(''), url('fonts/Montserrat-Bold.woff') format('woff'), url('fonts/Montserrat-Bold.ttf') format('truetype'), url('fonts/Montserrat-Bold.svg') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.eot');
src: local(''), url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf') format('truetype'), url('fonts/Montserrat-Regular.svg') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Light.eot');
src: local(''), url('fonts/Montserrat-Light.woff') format('woff'), url('fonts/Montserrat-Light.ttf') format('truetype'), url('fonts/Montserrat-Light.svg') format('svg');
font-weight: 300;
font-style: normal;
}

View file

@ -1,221 +0,0 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}

View file

@ -1,14 +0,0 @@
::selection
background: #FFF498
::-moz-selection
background: #FFF498
img::selection
background: transparent
img::-moz-selection
background: transparent
body
-webkit-tap-highlight-color: #FFF498

View file

@ -1,5 +0,0 @@
// Colors
$white: #fff
$black: #0c0c0c
$highlight: #0f33ff
$muted-gray: #282828

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,50 +0,0 @@
.l-viewport
position: relative
width: 100%
height: 100vh
box-shadow: 0 0 45px 5px rgba(0,0,0,.85)
overflow: hidden
.l-wrapper
position: relative
width: 1440px
max-width: 90%
height: 100%
margin: 0 auto
.l-side-nav
position: absolute
left: 0
display: flex
height: 100%
align-items: center
// placed on layout class due to firefox bug
&::before
content: ""
position: absolute
top: 50%
left: 0
transform: translateY(-50%)
width: 2px
height: 70%
max-height: 750px
background-color: #555
opacity: .35
z-index: 10
@media (max-width: 1180px)
display: none
.l-main-content
position: relative
width: 100%
height: 100%
margin: 0
padding: 0
list-style: none
.l-section
position: absolute
width: 100%
height: 100%

File diff suppressed because one or more lines are too long

View file

@ -1,26 +0,0 @@
// This is the single file output by sass. It is intended to ONLY @import other files.
// BASE
@import 'base/fonts'
@import 'base/normalize'
@import 'base/vars'
@import 'base/selection-colors'
@import 'base/body-element'
// LAYOUTS
@import 'layouts/grid'
// MODULES
@import 'modules/device-notification'
@import 'modules/section'
@import 'modules/header'
@import 'modules/side-nav'
@import 'modules/intro'
@import 'modules/work'
@import 'modules/about'
@import 'modules/contact'
@import 'modules/hire'
@import 'modules/outer-nav'

View file

@ -1,189 +0,0 @@
.about
position: relative
display: flex
width: 900px
max-width: 75%
height: 100%
flex-direction: column
justify-content: center
margin: 0 auto
@media (max-width: 1180px)
max-width: 100%
&--banner
position: relative
height: 475px
&::before
content: ""
position: absolute
top: 20px
left: 200px
transform: rotate(-25deg)
border: 5px solid $highlight
border-right-color: transparent
border-bottom-color: transparent
&::after
content: ""
position: absolute
top: 75px
left: 400px
transform: rotate(45deg)
width: 10px
height: 10px
background-color: $highlight
h2
position: relative
margin-top: 35px
font-size: 68px
font-weight: 900
line-height: 1
z-index: 1
&::before
content: ""
position: absolute
top: 60px
left: 268px
width: 30px
height: 30px
background-color: $highlight
border-radius: 50%
&::after
content: ""
position: absolute
top: 255px
left: 255px
width: 10px
height: 10px
background-color: $highlight
a
padding: 5px 17px 5px 0
text-decoration: none
color: $white
font-weight: 700
text-transform: uppercase
background-color: transparent
&:hover
svg
left: 10px
svg
position: relative
left: 5px
width: 15px
fill: $white
transition: left .2s ease-in-out
img
position: absolute
bottom: -90px
right: -12px
&--options
display: flex
max-width: 600px
justify-content: space-between
margin: 0
padding: 0
list-style: none
& > a
position: relative
width: 150px
height: 75px
text-decoration: none
color: $white
border: 10px solid $highlight
background:
position: center
size: cover
repeat: no-repeat
&:nth-child(1)
background-image: url("../img/about-winners.jpg")
&:nth-child(2)
background-image: url("../img/about-philosophy.jpg")
&:nth-child(3)
background-image: url("../img/about-history.jpg")
&:hover
h3
bottom: -50px
h3
position: absolute
bottom: -38px
left: 10px
font-size: 16px
text-transform: uppercase
transition: bottom .2s ease-in-out, left .2s ease-in-out
@media (max-width: 767px)
.about
&--banner
height: 305px
&::before
top: 0
left: 125px
&::after
top: 35px
left: 260px
h2
margin-top: 10px
font-size: 44px
&::before
top: 28px
left: 168px
&::after
top: 163px
left: 163px
img
width: 315px
@media (max-width: 600px)
.about
&--banner
height: auto
&::before
left: 155px
&::after
left: 310px
h2
margin-top: 0
font-size: 55px
&::before
top: 43px
left: 214px
&::after
top: 205px
left: 205px
img
display: none
&--options
display: none

View file

@ -1,75 +0,0 @@
// position fixed in order to escape the 1440px wrapper
.contact
position: fixed
top: 0
left: 0
width: 100%
height: 100%
background:
image: url("../img/contact-visual.png")
position: center
size: cover
repeat: no-repeat
&--lockup
position: relative
display: flex
width: 900px
max-width: 75%
height: 100%
align-items: center
justify-content: flex-end
margin: 0 auto
@media (max-width: 1180px)
max-width: 90%
@media (max-width: 767px)
justify-content: center
.modal
padding: 45px 45px
text-align: center
background-color: $black
box-shadow: 0 0 30px 0 rgba(0,0,0,.75)
&--information
p,
a
display: block
margin: 14px 0
text-decoration: none
color: $white
font-weight: 700
p
margin-top: 0
&--options
margin: 0
padding: 0
list-style: none
& > li
width: 130px
margin: 0 auto 25px auto
li:nth-child(1)
background-color: #1769ff
li:nth-child(2)
background-color: #ea4c89
li:nth-child(3)
margin-bottom: 0
background-color: $highlight
text-transform: uppercase
a
display: block
width: 100%
padding: 8px 0
text-decoration: none
color: $white
font-weight: 700

View file

@ -1,44 +0,0 @@
// reference media queries at the bottom of this file
.device-notification
display: none
position: fixed
top: 0
left: 0
width: 100%
height: 100%
flex-direction: column
align-items: center
justify-content: center
background-color: $black
z-index: 12
&--logo
display: flex
align-items: center
text-decoration: none
color: $white
p
margin: 0 0 0 10px
font-size: 16px
font-weight: 700
text-transform: uppercase
&--message
width: 70%
margin: 30px 0 0 0
font-weight: 700
text-align: center
// based on personal content these may need to be adjusted slighlty
@media (max-width: 767px) and (min-width: 601px) and (max-height: 680px)
display: flex
@media (max-width: 600px) and (min-width: 480px) and (max-height: 580px)
display: flex
@media (max-width: 736px) and (min-width: 360px) and (orientation: landscape)
display: flex
@media(max-width: 359px)
display: flex

View file

@ -1,76 +0,0 @@
.header
position: absolute
top: 0
left: 0
display: flex
width: 100%
height: 70px
align-items: center
justify-content: space-between
z-index: 10
&--logo
display: flex
align-items: center
text-decoration: none
color: $white
p
margin: 0 0 0 10px
font-size: 16px
font-weight: 700
text-transform: uppercase
&--nav-toggle
display: flex
width: 50px
height: 50px
flex-direction: column
align-items: center
justify-content: center
cursor: pointer
span,
&::before,
&::after
content: ""
position: relative
width: 16px
height: 2px
background-color: $white
&::before
bottom: 5px
width: 23px
&::after
top: 5px
width: 23px
&--cta
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
padding: 0 20px
line-height: 30px
text-decoration: none
color: $white
font-weight: 700
text-transform: uppercase
background-color: $highlight
border: none
opacity: 0
visibility: hidden
transition: opacity .4s ease-in-out, visibility 0s .4s
&:focus
outline: none
&.is-active
opacity: 1
visibility: visible
transition: opacity .4s ease-in-out .4s
@media (max-width: 767px)
display: none

View file

@ -1,167 +0,0 @@
.hire
position: relative
display: flex
width: 700px
max-width: 75%
height: 100%
flex-direction: column
justify-content: center
margin: 0 auto
@media (max-width: 1180px)
max-width: 100%
h2
margin: 0 0 20px 0
font-size: 30px
text-align: center
.work-request
display: flex
width: 100%
flex-direction: column
align-items: center
color: $white
input[type="submit"]
width: 400px
max-width: 100%
line-height: 50px
font-size: 16px
font-weight: 700
text-transform: uppercase
background-color: $highlight
border: none
border-radius: 0
&:focus
outline: none
&--options
display: flex
width: 100%
flex-direction: column
align-items: center
margin: 30px 0
.options-a
display: flex
width: 100%
justify-content: space-between
.options-b
display: flex
width: 72%
flex-wrap: wrap
justify-content: space-around
label
display: block
width: 200px
margin-bottom: 30px
line-height: 50px
font-size: 16px
font-weight: 700
text-align: center
border: 2px solid $white
cursor: pointer
transition: background-color .2s ease-in-out, border-color .2s ease-in-out
svg
position: relative
left: -5px
width: 0
fill: $white
transition: width .2s ease-in-out
input[type="checkbox"]
display: none
&:checked + label
background-color: $highlight
border-color: $highlight
& svg
width: 15px
&--information
display: flex
width: 100%
justify-content: space-between
margin-bottom: 60px
.information-name,
.information-email
position: relative
width: 45%
height: 50px
font-size: 30px
font-weight: 300
input[type="text"],
input[type="email"]
width: 100%
padding: 0 0 5px 0
background-color: transparent
border: none
border-bottom: 1px solid $white
border-radius: 0
&:focus
outline: none
background-color: $black
label
position: absolute
top: 0
left: 0
pointer-events: none
transition: top .2s ease-in-out, font-size .2s ease-in-out
input:focus + label,
input.has-value + label
top: -15px
font-size: 14px
@media (max-width: 767px)
.work-request
&--options
flex-direction: row
justify-content: space-around
.options-a,
.options-b
display: block
width: auto
@media (max-width: 600px)
.work-request
&--options
margin: 20px 0
@media (max-width: 415px)
justify-content: space-between
label
width: 150px
margin-bottom: 15px
font-size: 14px
input[type="checkbox"]
&:checked + label
& svg
width: 12px
&--information
margin-bottom: 30px
.information-name,
.information-email
height: 40px
font-size: 24px

View file

@ -1,175 +0,0 @@
.intro
position: relative
display: flex
width: 900px
max-width: 75%
height: 100%
flex-direction: column
justify-content: center
margin: 0 auto
@media (max-width: 1180px)
max-width: 100%
&--banner
position: relative
height: 475px
&::before
content: ""
position: absolute
bottom: 20px
left: -15px
right: 0
height: 2px
background-color: $muted-gray
&::after
content: ""
position: absolute
bottom: 18px
left: 0
width: 30px
height: 4px
background-color: $highlight
h1
position: relative
font-size: 68px
font-weight: 900
line-height: 1
z-index: 1
button
position: relative
padding: 5px 17px 5px 12px
font-weight: 700
text-transform: uppercase
background-color: transparent
border: none
.btn-background
position: absolute
top: 0
left: 23px
right: 0
height: 100%
background-color: $highlight
z-index: -1
transition: left .2s ease-in-out
&:hover
.btn-background
left: 0
&:focus
outline: none
svg
position: relative
left: 5px
width: 15px
fill: $white
img
position: absolute
bottom: 21px
right: -12px
&--options
display: flex
justify-content: space-between
margin: 0
padding: 0
list-style: none
& > a
max-width: 250px
text-decoration: none
color: $muted-gray
transition: color .2s ease-in-out
&:hover
color: $white
h3
font-size: 16px
text-transform: uppercase
p
margin-bottom: 0
@media (max-width: 900px)
.intro
&--banner
height: 380px
h1
font-size: 55px
img
width: 430px
&--options
& > a
margin-right: 30px
&:last-child
margin-right: 0
@media (max-width: 767px)
.intro
&--banner
height: 305px
h1
font-size: 44px
img
width: 330px
&--options
display: block
& > a
display: block
max-width: 100%
margin: 0 0 30px 0
&:last-child
margin-bottom: 0
@media (max-width: 600px)
.intro
&--banner
height: 360px
h1
font-size: 55px
img
display: none
@media (max-width: 600px) and (max-height: 750px)
.intro
&--banner
height: auto
&::before,
&::after
display: none
h1
margin-top: 0
&--options
display: none

View file

@ -1,113 +0,0 @@
// tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
.perspective
position: relative
width: 100%
height: 100%
overflow: hidden
&--modalview
position: fixed
perspective: 1500px
.container
position: relative
transform: translateZ(0) translateX(0) rotateY(0deg)
min-height: 100%
outline: 30px solid $highlight
transition: transform .4s
.modalview
.container
position: absolute
width: 100%
height: 100%
overflow: hidden
backface-visibility: hidden
.effect-rotate-left
.container
transform-origin: 0% 50%
transition: transform .4s
&--animate
.container
transform: translateZ(-1800px) translateX(-50%) rotateY(45deg)
outline: 30px solid $highlight
.outer-nav
position: absolute
top: 50%
left: 55%
transform: translateY(-50%)
transform-style: preserve-3d
margin: 0
padding: 0
list-style: none
text-align: center
visibility: hidden
transition: visibility 0s .2s
&.is-vis
visibility: visible
&--return
position: absolute
top: 0
left: 0
width: 100%
height: 100%
display: none
cursor: pointer
z-index: 11
&.is-vis
display: block
& > li
transform-style: preserve-3d
transform: translateX(350px) translateZ(-1000px)
font-size: 55px
font-weight: 900
opacity: 0
cursor: pointer
transition: transform .2s, opacity .2s
&.is-vis
transform: translateX(0) translateZ(0)
opacity: 1
transition: transform .4s, opacity .4s
&::before
content: ""
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -25%)
width: 110%
height: 15px
opacity: 0
background-color: $highlight
&.is-active::before
opacity: 1
@media (max-width: 767px)
font-size: 44px
@media (max-width: 600px)
font-size: 34px
li.is-vis:nth-child(2)
transition-delay: .04s
li.is-vis:nth-child(3)
transition-delay: .08s
li.is-vis:nth-child(4)
transition-delay: .12s
li.is-vis:nth-child(5)
transition-delay: .16s

View file

@ -1,19 +0,0 @@
// section transition styles
.section
opacity: 0
visibility: hidden
transition: opacity .4s ease-in-out, visibility 0s .4s
&--is-active
opacity: 1
visibility: visible
z-index: 1
transition: opacity .4s ease-in-out .4s
&--next
transform: translateY(-45px)
transition: transform .4s ease-in-out
&--prev
transform: translateY(45px)
transition: transform .4s ease-in-out

View file

@ -1,65 +0,0 @@
.side-nav
position: relative
display: flex
width: 100px
height: 70%
max-height: 750px
flex-direction: column
justify-content: space-around
margin: 0
padding: 0
list-style-position: inside
z-index: 10
& > li
position: relative
top: -5px
color: $white
font-size: 6px
cursor: pointer
span
position: relative
top: 3px
left: 10px
color: $white
font-size: 14px
font-weight: 300
opacity: 0
visibility: hidden
&::before
position: absolute
top: 3px
left: 10px
color: #555
font-size: 14px
font-weight: 300
li:nth-child(1)::before
content: "01"
li:nth-child(2)::before
content: "02"
li:nth-child(3)::before
content: "03"
li:nth-child(4)::before
content: "04"
li:nth-child(5)::before
content: "05"
li.is-active
color: $highlight
transition: color .4s ease-in-out
span
opacity: 1
visibility: visible
transition: opacity .4s ease-in-out
&::before
left: -33px
color: $white

View file

@ -1,178 +0,0 @@
.work
position: relative
display: flex
width: 960px
max-width: 80%
height: 100%
flex-direction: column
justify-content: center
margin: 0 auto
@media (max-width: 1180px)
max-width: 100%
h2
margin: 0 0 20px 0
font-size: 30px
text-align: center
&--lockup
position: relative
.slider
position: relative
display: flex
width: 80%
margin: 0 auto
padding: 0
list-style: none
&--item
position: absolute
display: none
text-align: center
a
text-decoration: none
color: #858585
&-title
margin-top: 10px
font-size: 12px
font-weight: 700
text-transform: uppercase
&-description
display: none
max-width: 250px
margin: 0 auto
&-image
width: 150px
height: 150px
margin: 0 auto
border-radius: 50%
overflow: hidden
img
width: 100%
&-left
top: 50%
left: 0
transform: translateY(-50%)
display: block
&-right
top: 50%
right: 0
transform: translateY(-50%)
display: block
&-center
position: relative
top: 30px
left: 50%
transform: translateX(-50%)
display: block
a
color: $white
.slider--item-title
margin-top: 25px
font-size: 16px
.slider--item-description
display: block
.slider--item-image
width: 300px
height: 300px
.slider--next,
.slider--prev
position: absolute
top: 160px
display: flex
width: 50px
height: 50px
align-items: center
justify-content: center
background-color: $muted-gray
border-radius: 50%
cursor: pointer
svg
width: 20px
fill: $white
.slider--next
right: 0
.slider--prev
left: 0
@media (max-width: 900px)
.work
&--lockup
.slider
&--item
&-image
width: 120px
height: 120px
&-center
.slider--item-image
width: 240px
height: 240px
.slider--next,
.slider--prev
top: 130px
@media (max-width: 767px)
.work
&--lockup
.slider
width: 75%
&--item
&-image
width: 90px
height: 90px
&-center
.slider--item-image
width: 190px
height: 190px
.slider--next,
.slider--prev
top: 105px
@media (max-width: 600px)
.work
&--lockup
.slider
width: auto
&--item
&-left,
&-right
display: none

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,42 +0,0 @@
@font-face {
font-family: 'KHGummi';
src: url('./fonts/KHGummi.otf') format('opentype');
}
.gummi {
font-family: 'KHGummi';
}
.quote-banner {
color: #e2e2e2;
padding: 20px;
font-family: 'KHGummi';
}
.card-footer {
background: transparent;
border-top: 0;
}
.card-link {
display: block;
margin-top: 15px;
text-align: center;
color: #007bff;
}
/* Additional styling for the blockquote */
.blockquote {
font-style: italic;
color: #6c757d;
}
.blockquote-footer {
color: #6c757d;
}

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;
}
}

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

0
img/WEPA.png Executable file → Normal file
View file

Before

Width:  |  Height:  |  Size: 416 KiB

After

Width:  |  Height:  |  Size: 416 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 197 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 930 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 930 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 220 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

View file

@ -1,87 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512.89404"
height="353.55396"
viewBox="0 0 512.89404 353.55396"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="lightcrystal_ng.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
inkscape:document-units="px"
showgrid="false"
inkscape:zoom="0.75199792"
inkscape:cx="104.38859"
inkscape:cy="195.47926"
inkscape:window-width="1600"
inkscape:window-height="876"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="layer2" />
<defs
id="defs2" />
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
transform="translate(-266.32157,-312.56322)">
<rect
style="fill:none;stroke:#115750;stroke-width:13.7126;stroke-linecap:round;stroke-dasharray:13.7126, 27.4252;stroke-dashoffset:0;stroke-opacity:1"
id="rect840-3"
width="236.28738"
height="236.28741"
x="661.17816"
y="-204.5117"
transform="rotate(45)" />
<ellipse
style="fill:#008080;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path1086-6"
cx="614.85327"
cy="486.15881"
rx="36.700439"
ry="38.554924" />
</g>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-266.32157,-312.56322)">
<rect
style="fill:none;stroke:#1f9b92;stroke-width:13.713;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:49.3668"
id="rect840"
width="236.28738"
height="236.28741"
x="541.19006"
y="-85.445923"
transform="rotate(45)" />
<ellipse
style="fill:#00ffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path1086"
cx="448.12054"
cy="486.8222"
rx="36.700439"
ry="38.554924" />
<ellipse
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path1086-7"
cx="532.58795"
cy="486.43533"
rx="36.700439"
ry="38.554924" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 111 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

View file

@ -1,5 +0,0 @@
<svg width="261.12" height="246.72" version="1.1" viewBox="0 0 69.088 65.278" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-174.1 -145.01)">
<path d="m174.1 177.65v-32.639h69.088v65.278h-69.088zm34.246 28.13c0.024-0.10478 0.15638-1.0668 0.29418-2.1378 0.21965-1.707 0.94032-7.2036 1.9094-14.563 0.16556-1.2573 0.52785-4.0196 0.80509-6.1383 0.27724-2.1188 0.52896-4.0333 0.55937-4.2545l0.0553-0.40217h-6.5185l-0.18248 1.3758c-0.50988 3.8444-1.9841 15.002-2.2122 16.743-0.14337 1.0943-0.46785 3.5708-0.72108 5.5033-0.25322 1.9325-0.482 3.6375-0.50841 3.7888l-0.048 0.27517h6.5238zm24.716-18.606c3.3379-3.9084 5.4177-8.681 6.1167-14.036 0.17198-1.3176 0.19855-4.6675 0.0468-5.9026-0.32589-2.6529-1.0286-5.3782-1.9596-7.6-1.1171-2.6658-3.0475-5.6301-5.0591-7.7684l-0.6472-0.68797-3.77 3.7672 0.61193 0.6836c0.95608 1.0681 1.2814 1.4867 2.0504 2.6382 1.6043 2.4024 2.7495 5.3112 3.2638 8.2901 0.25226 1.461 0.31337 4.4139 0.12354 5.969-0.54929 4.4999-2.5727 8.85-5.5824 12.002l-0.50538 0.5292 1.8973 1.9106 1.8973 1.9106 0.45054-0.49249c0.24779-0.27086 0.72711-0.81633 1.0652-1.2122zm-45.38-0.24704 1.8543-1.8557-0.61237-0.66313c-2.767-2.9964-4.6339-6.8607-5.3515-11.077-0.22317-1.3113-0.30461-3.9462-0.16506-5.3399 0.4529-4.5231 2.3622-8.882 5.3358-12.182 0.25382-0.28167 0.534-0.59499 0.62261-0.69626l0.16111-0.18414-3.7852-3.7408-0.61426 0.64323c-2.4773 2.5941-4.5952 6.1413-5.7596 9.6465-0.99952 3.0088-1.3953 5.4374-1.3934 8.5513 1e-3 2.4858 0.28501 4.6518 0.90981 6.9507 1.1123 4.0926 3.4445 8.2653 6.254 11.189 0.32439 0.33761 0.61226 0.61384 0.63971 0.61384 0.0275 0 0.88434-0.83507 1.9042-1.8557zm8.007-8.136c5.9e-4 -0.0238-0.2534-0.34768-0.56435-0.71967-1.4452-1.7289-2.3476-3.6184-2.7909-5.8441-0.20797-1.044-0.20976-3.344-3e-3 -4.3783 0.48288-2.4204 1.6614-4.7945 3.132-6.3095l0.35091-0.36149-3.691-3.6797-0.54882 0.59267c-2.4635 2.6603-4.0548 6.1357-4.5154 9.8614-0.13158 1.0644-0.10887 3.323 0.0444 4.4223 0.50881 3.6481 2.1306 7.0467 4.6547 9.7543l0.30888 0.33134 1.811-1.813c0.99603-0.99715 1.8114-1.8325 1.812-1.8563zm30.396 2.7315c2.519-2.9428 3.9175-6.3526 4.2425-10.345 0.3735-4.5873-1.4096-9.6838-4.5676-13.055l-0.56439-0.6025-1.852 1.8265-1.852 1.8265 0.52806 0.57547c1.394 1.5192 2.4638 3.6848 2.9403 5.9518 0.23237 1.1056 0.20682 3.6337-0.0487 4.8223-0.44548 2.072-1.3965 3.9927-2.7972 5.6496l-0.5142 0.60822 1.7868 1.826c0.98276 1.0043 1.8166 1.826 1.8531 1.826 0.0364 0 0.41686-0.40958 0.84537-0.91017zm-26.942-6.2251 1.0368-1.0392-0.46552-0.92925c-0.59961-1.1969-0.73239-1.7077-0.78366-3.0147-0.0641-1.6335 0.20895-2.7422 1.0054-4.0828l0.34635-0.58299-1.046-1.0485c-0.5753-0.57669-1.0845-1.0363-1.1316-1.0214-0.0471 0.0149-0.27115 0.29128-0.49792 0.61415-1.8748 2.6693-2.2919 6.424-1.0628 9.5681 0.40445 1.0347 1.3065 2.5759 1.5076 2.5759 0.0301 0 0.52126-0.46767 1.0915-1.0393zm20.567 0.48237c1.1344-1.6034 1.7577-3.6628 1.7535-5.7931-4e-3 -2.2003-0.62198-4.1696-1.8729-5.9716-0.17604-0.25359-0.35874-0.46152-0.406-0.46207-0.0473-5.9e-4 -0.55586 0.47005-1.1302 1.0458l-1.0442 1.0468 0.2097 0.3322c1.6087 2.5483 1.6062 5.5512-7e-3 8.054-0.11989 0.18604-0.0878 0.22963 0.92091 1.2499 0.57482 0.58143 1.0847 1.0442 1.133 1.0284 0.0484-0.0159 0.24757-0.25446 0.44269-0.53026zm-9.352-0.03c1.1785-0.30141 2.1343-0.90161 2.9733-1.8671 0.54006-0.6215 1.0938-1.6626 1.2824-2.4109 0.17186-0.68192 0.16775-2.2777-8e-3 -2.9545-0.52923-2.0425-2.198-3.708-4.2679-4.2594-0.74352-0.19808-2.2216-0.1978-2.9633 5.9e-4 -2.0768 0.55538-3.7414 2.2181-4.2937 4.289-0.19697 0.73844-0.1925 2.2167 9e-3 2.956 0.54543 2.002 2.2575 3.7257 4.2077 4.2364 0.85937 0.22504 2.2024 0.22945 3.0602 0.0101z" style="fill:#aa0000;stroke-width:.084667"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

View file

@ -1,425 +1,490 @@
<!DOCTYPE html>
<!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="HTML5 website template">
<meta name="keywords" content="global, template, html, sass, jquery">
<meta name="author" content="Bucky Maler">
<link rel="stylesheet" href="/asteroid/css/main.css">
<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;
}
@font-face {
font-family: KHGummi;
src: url(./fonts/KHGummi.otf);
font-weight:400;
}
video {
max-width: 100%; /* Ensure video doesn't exceed the container width */
height: auto; /* Maintain aspect ratio */
}
.video-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.video-container video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- notification for small viewports and landscape oriented smartphones -->
<div class="device-notification">
<a class="device-notification--logo" href="#0">
<img src="assets/img/Highwind1_opt.png" alt="Global">
<p>Miguel's Asteroid</p>
</a>
<p class="device-notification--message">Try viewing on a bigger screen.</p>
</div>
<header>
<nav class="navbar navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<img src="./img/Highwind1_opt.png" href="index.html" alt="GummiShip" style="transform: scale(0.9)";>
<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>-->
<div class="header--nav-toggle">
<span></span>
</div>
</header>
<nav class="l-side-nav">
<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 side nav, reducing from 4 to 5-->
<!--<li><span>Work with Me</span></li>-->
</ul>
</nav>
<ul class="l-main-content main-content">
<li class="l-section section section--is-active">
<div class="intro">
<div class="intro--banner">
<h1>Welcome<br>to my<br>asteroid.</h1>
<a href="https://library.miguelalmodo.com/">
<button class="cta">Check out a book
<svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
<span class="btn-background"></span>
</button></a>
<br><br>
<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>
<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">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<img src="img/introduction-visual.png" alt="Welcome">
</div>
<div class="intro--options">
<a href="https://uberspace.de">
<h3>Deploying Web Apps in Space
</h3>
<p>This website is hosted on Uberspace, a cool worker owned business that rents out server space.</p>
</a>
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
<h3>Creator Residency</h3>
<p>I'm in the Content Creator Residency with nos.social. Find me on Nostr!</p>
</a>
<a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
<h3>#CubaSIBloqeuoNO</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.
</p>
</a>
</div>
</div>
</li>
<li class="l-section section">
<div class="work">
<h2>Public Interest Communications</h2>
<div class="work--lockup">
<ul class="slider">
<li class="slider--item slider--item-left">
<a href="https://forge.lightcrystal.systems/migs">
<div class="slider--item-image">
<img src="img/light_crystal.svg" alt="light crystal systems logo">
</div>
<p class="slider--item-title">Web Development</p>
<p class="slider--item-description">Weilding open source protocols in the battle for the Internet</p>
</a>
</li>
<li class="slider--item slider--item-center">
<a href="https://podcastindex-org.github.io/docs-api/#overview--example-code">
<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>
<p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast index and RSS.</p>
</a>
</li>
<li class="slider--item slider--item-right">
<a href="https://nostrmeet.me/_@migs.uber.space">
<div class="slider--item-image">
<img src="img/nostr-icon-white-256x256.png" alt="Alex Nowak">
</div>
<p class="slider--item-title">Social Media</p>
<p class="slider--item-description">Social Media is evolving. Ask me about alternative social media
protocols.</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>
<li class="l-section section">
<div class="about">
<div class="about--banner">
<h2>Communications for the <br> public interest.</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://migs.uber.space/resumes/PIC.pdf">In the news
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
</span>
</a><br>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
<a href="https://migs.uber.space/portfolio">Portfolio
<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/xE7Vl.webm" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="70%" height="70%" controls>
</div>
<div class="about--options">
<a href="#0">
<h3>Philosophy</h3>
</a>
<a href="#0">
<h3>Who is Miguel</h3>
</a>
<a href="#0">
<h3>Garden</h3>
</a>
</div>
</div>
</li>
<li class="l-section 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">
<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>
Training
</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>
<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>
</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>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</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 class="offcanvas-body">
<div class="text-center">
<div class="d-inline-block text-center">
<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>
<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!<br>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="l-section section">
<div class="hire">
<h2>Available for hire</h2>
checkout formspree.io for easy form setup
<form class="work-request">
<li class="nav-item dropdown">
<a class="nav-link" href="https://migs.uber.space/about.html">About</a>
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
</li>
<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>
</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>
</div>
</div>
</div>
<ul class="outer-nav">
<a href="https://uberspace.de/en"><img src="https://dashboard.uberspace.de/static/img/badge_dark.png"></a>
<li class="is-active">Home</li>
<li>Interests</li>
<li>About</li>
<li>Contact</li>
</li>
<!-- <li>Work with Me</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/#">Bookshelf</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">
<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 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';">About</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://github.com/miggymofongo';">Git</button>
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Bookshelf</button>
</div>
</div>
</div>
</section>
<section>
<h1> Carta de Presentacion para PlenitudPR </h1>
<div class="video-container">
<video src="https://v.nostr.build/7GeB3.mp4" style="align-items: center;" controls>
Carta de Presentacion para PlenitudPR
</video>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></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>
</body>
<section style="background-color: #23272b;">
<div class="container px-4 py-5" style="background-color: #23272b;">
<h2 class="pb-2 border-bottom" style="color: aliceblue; font-family: KHGummi;">Let's collaborate.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&#160;&#160;&#160;&#160;
&nbsp;&nbsp;&nbsp;&#160;&#160;&#160;&#160;
<img src="img/leroy_opt.png" alt="pic of leroy from the movie leroy and stich"> </h2>
<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 <a
href="https://migs.uber.space/blog/corporate-social-media-is-killing-us">
corporate social media landscape looks grim.</a>
They are tearing our society apart apart with the constant
bombardment of advertising 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">
<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>
<input type="text" id="name" placeholder="Your name" required>
<label for="email">Email ID:</label>
<input type="email" id="email" placeholder="Email id" required>
<label for="message">Your Message:</label>
<textarea id="message" rows="4" placeholder="What are your thoughts?" required></textarea>
<button type="submit">Send Message</button>
</form>
<script src="./smtp.js"></script>
<script>
function sendEmail(){
Email.sendEmail({
Host: "smtppro.zoho.com",
Username : "contact@miguelalmodo.com",
Password : "EUfnEQ47d7iM",
To : "recipient@example.com",
From : document.getElementById("email").value,
Subject: "We met at the protest",
Body : "Free Palestine!"
}).then(
message => alert(message)
);
}
</script>
</div>-->
<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>
</div>
<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);">Move beyond strategic sharing.</h4>
<p style="color: rgb(255, 255, 255);">
Craft your message with intention and authenticity. Find
the right medium and multiply its impact with tech.
</div>
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Open source strategy.</h4>
<p style="color: rgb(255, 255, 255);">Break the tech monopoly with open source software.
Power map your "big bosses" and chart your path to sustainable change.
</p>
</div>
<div class="d-flex flex-column gap-2">
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Cocreate meaning with your community.</h4>
<p style="color: rgb(255, 255, 255);">Rally your
community around shared values using a VPSA (Values, Problem, Solution, Action)
framework.</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.
Have questions about crypto or decentralized social media?
Request a training to stay ahead of the curve.</p>
</div></div>
</div>
</div>
</div>
</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>

1
js/functions-min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -1,280 +0,0 @@
// @codekit-prepend "/vendor/hammer-2.0.8.js";
$( document ).ready(function() {
// DOMMouseScroll included for firefox support
var canScroll = true,
scrollController = null;
$(this).on('mousewheel DOMMouseScroll', function(e){
if (!($('.outer-nav').hasClass('is-vis'))) {
e.preventDefault();
var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20;
if (delta > 50 && canScroll) {
canScroll = false;
clearTimeout(scrollController);
scrollController = setTimeout(function(){
canScroll = true;
}, 800);
updateHelper(1);
}
else if (delta < -50 && canScroll) {
canScroll = false;
clearTimeout(scrollController);
scrollController = setTimeout(function(){
canScroll = true;
}, 800);
updateHelper(-1);
}
}
});
$('.side-nav li, .outer-nav li').click(function(){
if (!($(this).hasClass('is-active'))) {
var $this = $(this),
curActive = $this.parent().find('.is-active'),
curPos = $this.parent().children().index(curActive),
nextPos = $this.parent().children().index($this),
lastItem = $(this).parent().children().length - 1;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
});
$('.cta').click(function(){
var curActive = $('.side-nav').find('.is-active'),
curPos = $('.side-nav').children().index(curActive),
lastItem = $('.side-nav').children().length - 1,
nextPos = lastItem;
updateNavs(lastItem);
updateContent(curPos, nextPos, lastItem);
});
// swipe support for touch devices
var targetElement = document.getElementById('viewport'),
mc = new Hammer(targetElement);
mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
mc.on('swipeup swipedown', function(e) {
updateHelper(e);
});
$(document).keyup(function(e){
if (!($('.outer-nav').hasClass('is-vis'))) {
e.preventDefault();
updateHelper(e);
}
});
// determine scroll, swipe, and arrow key direction
function updateHelper(param) {
var curActive = $('.side-nav').find('.is-active'),
curPos = $('.side-nav').children().index(curActive),
lastItem = $('.side-nav').children().length - 1,
nextPos = 0;
if (param.type === "swipeup" || param.keyCode === 40 || param > 0) {
if (curPos !== lastItem) {
nextPos = curPos + 1;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
else {
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
}
else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){
if (curPos !== 0){
nextPos = curPos - 1;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
else {
nextPos = lastItem;
updateNavs(nextPos);
updateContent(curPos, nextPos, lastItem);
}
}
}
// sync side and outer navigations
function updateNavs(nextPos) {
$('.side-nav, .outer-nav').children().removeClass('is-active');
$('.side-nav').children().eq(nextPos).addClass('is-active');
$('.outer-nav').children().eq(nextPos).addClass('is-active');
}
// update main content area
function updateContent(curPos, nextPos, lastItem) {
$('.main-content').children().removeClass('section--is-active');
$('.main-content').children().eq(nextPos).addClass('section--is-active');
$('.main-content .section').children().removeClass('section--next section--prev');
if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) {
$('.main-content .section').children().removeClass('section--next section--prev');
}
else if (curPos < nextPos) {
$('.main-content').children().eq(curPos).children().addClass('section--next');
}
else {
$('.main-content').children().eq(curPos).children().addClass('section--prev');
}
if (nextPos !== 0 && nextPos !== lastItem) {
$('.header--cta').addClass('is-active');
}
else {
$('.header--cta').removeClass('is-active');
}
}
function outerNav() {
$('.header--nav-toggle').click(function(){
$('.perspective').addClass('perspective--modalview');
setTimeout(function(){
$('.perspective').addClass('effect-rotate-left--animate');
}, 25);
$('.outer-nav, .outer-nav li, .outer-nav--return').addClass('is-vis');
});
$('.outer-nav--return, .outer-nav li').click(function(){
$('.perspective').removeClass('effect-rotate-left--animate');
setTimeout(function(){
$('.perspective').removeClass('perspective--modalview');
}, 400);
$('.outer-nav, .outer-nav li, .outer-nav--return').removeClass('is-vis');
});
}
function workSlider() {
$('.slider--prev, .slider--next').click(function() {
var $this = $(this),
curLeft = $('.slider').find('.slider--item-left'),
curLeftPos = $('.slider').children().index(curLeft),
curCenter = $('.slider').find('.slider--item-center'),
curCenterPos = $('.slider').children().index(curCenter),
curRight = $('.slider').find('.slider--item-right'),
curRightPos = $('.slider').children().index(curRight),
totalWorks = $('.slider').children().length,
$left = $('.slider--item-left'),
$center = $('.slider--item-center'),
$right = $('.slider--item-right'),
$item = $('.slider--item');
$('.slider').animate({ opacity : 0 }, 400);
setTimeout(function(){
if ($this.hasClass('slider--next')) {
if (curLeftPos < totalWorks - 1 && curCenterPos < totalWorks - 1 && curRightPos < totalWorks - 1) {
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
}
else {
if (curLeftPos === totalWorks - 1) {
$item.removeClass('slider--item-left').first().addClass('slider--item-left');
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
}
else if (curCenterPos === totalWorks - 1) {
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
$item.removeClass('slider--item-center').first().addClass('slider--item-center');
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
}
else {
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
$item.removeClass('slider--item-right').first().addClass('slider--item-right');
}
}
}
else {
if (curLeftPos !== 0 && curCenterPos !== 0 && curRightPos !== 0) {
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
}
else {
if (curLeftPos === 0) {
$item.removeClass('slider--item-left').last().addClass('slider--item-left');
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
}
else if (curCenterPos === 0) {
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
$item.removeClass('slider--item-center').last().addClass('slider--item-center');
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
}
else {
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
$item.removeClass('slider--item-right').last().addClass('slider--item-right');
}
}
}
}, 400);
$('.slider').animate({ opacity : 1 }, 400);
});
}
function transitionLabels() {
$('.work-request--information input').focusout(function(){
var textVal = $(this).val();
if (textVal === "") {
$(this).removeClass('has-value');
}
else {
$(this).addClass('has-value');
}
// correct mobile device window position
window.scrollTo(0, 0);
});
}
outerNav();
workSlider();
transitionLabels();
});

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long