new asteroid theme. will migrate main domain here.

This commit is contained in:
miggymofongo2 2024-05-15 23:16:39 -07:00
parent f937a6b9d9
commit bcde87039e
84 changed files with 5625 additions and 467 deletions

8
css/base/_body-element.sass Executable file
View file

@ -0,0 +1,8 @@
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%

33
css/base/_fonts.scss Normal file
View file

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

221
css/base/_normalize.scss Executable file
View file

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

14
css/base/_selection-colors.sass Executable file
View file

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

5
css/base/_vars.sass Executable file
View file

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

7
css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

BIN
css/fonts/Montserrat-Black.eot Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Black.svg Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Black.ttf Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Black.woff Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Bold.eot Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Bold.svg Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Bold.ttf Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Bold.woff Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Light.eot Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Light.svg Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Light.ttf Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Light.woff Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Regular.eot Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Regular.svg Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Regular.ttf Executable file

Binary file not shown.

BIN
css/fonts/Montserrat-Regular.woff Executable file

Binary file not shown.

50
css/layouts/_grid.sass Normal file
View file

@ -0,0 +1,50 @@
.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%

1
css/main.css Executable file

File diff suppressed because one or more lines are too long

26
css/main.sass Executable file
View file

@ -0,0 +1,26 @@
// 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'

189
css/modules/_about.sass Normal file
View file

@ -0,0 +1,189 @@
.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

75
css/modules/_contact.sass Normal file
View file

@ -0,0 +1,75 @@
// 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

@ -0,0 +1,44 @@
// 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

76
css/modules/_header.sass Normal file
View file

@ -0,0 +1,76 @@
.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

167
css/modules/_hire.sass Normal file
View file

@ -0,0 +1,167 @@
.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

175
css/modules/_intro.sass Normal file
View file

@ -0,0 +1,175 @@
.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

113
css/modules/_outer-nav.sass Normal file
View file

@ -0,0 +1,113 @@
// 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

19
css/modules/_section.sass Normal file
View file

@ -0,0 +1,19 @@
// 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

@ -0,0 +1,65 @@
.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

178
css/modules/_work.sass Normal file
View file

@ -0,0 +1,178 @@
.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

58
css/scroll_gall.css Normal file
View file

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

405
css/style2.css Normal file
View file

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

42
css/styles.css Executable file
View file

@ -0,0 +1,42 @@
@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;
}

232
css/timeline.css Normal file
View file

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

BIN
fonts/KHGummi.otf Executable file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
img/Github.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
img/Highwind1_opt.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/LinkedIN.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

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

Before

Width:  |  Height:  |  Size: 416 KiB

After

Width:  |  Height:  |  Size: 416 KiB

BIN
img/about-history.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/about-philosophy.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/about-visual.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB

BIN
img/about-winners.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/beach.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

BIN
img/code.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/codeblog.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
img/contact-visual.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

BIN
img/email.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

BIN
img/favicon.ico Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
img/forsite.webp Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
img/hall.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

BIN
img/havana.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

BIN
img/headshot website.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 930 KiB

BIN
img/headshot.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
img/headshot_website.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 930 KiB

BIN
img/introduction-visual.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

BIN
img/japan.JPG Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
img/kevinhart.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

BIN
img/leroy_opt.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

87
img/light_crystal.svg Normal file
View file

@ -0,0 +1,87 @@
<?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>

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
img/lightning.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4 KiB

BIN
img/mail.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 B

BIN
img/mc.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

BIN
img/nebula.png Executable file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

5
img/pci_avatar.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
img/pr_map.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 KiB

BIN
img/running-nostr.gif Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
img/work-alex-nowak.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
img/work-metiew-smith.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
img/work-victory.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View file

@ -1,490 +1,425 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>El Asteroide De Miguel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></link>
<link rel="stylesheet" href="./styles.css"></link>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="./scripts.js"></script>
<script>
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
</script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.btn-bd-primary {
--bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.photo {
float: left;
}
.btn-dark-custom {
background-color: #343a40; /* Slightly lighter than the default bg-dark */
color: white;
}
.btn-dark-custom:hover {
background-color: #23272b; /* Darken on hover for interaction feedback */
color: white;
}
/* CSS used here will be applied after bootstrap.css */
.jumbotron{
position: relative;
z-index:-2;
}
#namecard{
align-content: center;
}
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
width:100%;
}
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
.white-bold-text {
color: white;
font-weight: bold;
}
@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>
<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">
</head>
<body>
<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)";>
<!-- 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>
<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>
<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>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
<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>
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="text-center">
<div class="d-inline-block text-center">
<img src="./img/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;">
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
<button class="cta">Bookmarks
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
</g>
</svg>
<span class="btn-background"></span>
</button>
</a>
<img src="img/introduction-visual.png" alt="Welcome">
</div>
<!--
<button class="btn btn-secondary" href="#" disabled>View biography &raquo;</button>
-->
<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>
<br>
<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>
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
</div>
<!--
<div class="contact">
<div class="contact--lockup">
<div class="modal">
<div class="modal--information">
<p>Aguadilla, Puerto Rico</p>
<a href="mailto:contact@miguelalmodo.com">contact@miguelalmodo.com</a>
</div>
<ul class="modal--options">
<li><a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">Nostr</a></li>
<li><a href="https://linkedin/in/miguelalmodo">LinkedIn</a></li>
<li><a href="mailto:contact@miguelalmodo.com">Send me an email</a></li>
</ul>
</div>
</div>
</div>
-->
</li>
<!-- <li class="l-section section">
<div class="hire">
<h2>Available for hire</h2>
checkout formspree.io for easy form setup
<form class="work-request">
<div class="work-request--options">
<span class="options-a">
<input id="opt-1" type="checkbox" value="app design">
<label for="opt-1">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
</g>
</svg>
Content Creation
</label>
<input id="opt-2" type="checkbox" value="graphic design">
<label for="opt-2">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
</g>
</svg>
Web Development
</label>
<input id="opt-3" type="checkbox" value="motion design">
<label for="opt-3">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
</g>
</svg>
Tech Consultation
</label>
</span>
<span class="options-b">
<input id="opt-4" type="checkbox" value="ux design">
<label for="opt-4">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
</g>
</svg>
Cooking
</label>
<input id="opt-5" type="checkbox" value="webdesign">
<label for="opt-5">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
</g>
</svg>
Communication Strategy
</label>
<input id="opt-6" type="checkbox" value="marketing">
<label for="opt-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
</g>
</svg>
Marketing
</label>
</span>
</div>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="https://migs.uber.space/about.html">About</a>
<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>
</li>
<li class="nav-item">
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Collaborate
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
<li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>
<!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Resumes
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
<li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Garden
</a>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">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>
</li> -->
</ul>
</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>
<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>
<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>
<!-- <li>Work with Me</li> -->
</ul>
</div>
</section>
<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>
<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>
</html>

1
js/functions-min.js vendored Normal file

File diff suppressed because one or more lines are too long

280
js/functions.js Executable file
View file

@ -0,0 +1,280 @@
// @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();
});

2643
js/vendor/hammer-2.0.8.js vendored Normal file

File diff suppressed because it is too large Load diff

4
js/vendor/jquery-2.2.4.min.js vendored Normal file

File diff suppressed because one or more lines are too long