mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-21 20:50:27 +00:00
new asteroid theme. will migrate main domain here.
This commit is contained in:
parent
f937a6b9d9
commit
bcde87039e
84 changed files with 5625 additions and 467 deletions
8
css/base/_body-element.sass
Executable file
8
css/base/_body-element.sass
Executable 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
33
css/base/_fonts.scss
Normal 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
221
css/base/_normalize.scss
Executable 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
14
css/base/_selection-colors.sass
Executable 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
5
css/base/_vars.sass
Executable file
|
|
@ -0,0 +1,5 @@
|
|||
// Colors
|
||||
$white: #fff
|
||||
$black: #0c0c0c
|
||||
$highlight: #0f33ff
|
||||
$muted-gray: #282828
|
||||
7
css/bootstrap.min.css
vendored
Normal file
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
BIN
css/fonts/Montserrat-Black.eot
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Black.svg
Executable file
BIN
css/fonts/Montserrat-Black.svg
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Black.ttf
Executable file
BIN
css/fonts/Montserrat-Black.ttf
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Black.woff
Executable file
BIN
css/fonts/Montserrat-Black.woff
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Bold.eot
Executable file
BIN
css/fonts/Montserrat-Bold.eot
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Bold.svg
Executable file
BIN
css/fonts/Montserrat-Bold.svg
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Bold.ttf
Executable file
BIN
css/fonts/Montserrat-Bold.ttf
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Bold.woff
Executable file
BIN
css/fonts/Montserrat-Bold.woff
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Light.eot
Executable file
BIN
css/fonts/Montserrat-Light.eot
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Light.svg
Executable file
BIN
css/fonts/Montserrat-Light.svg
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Light.ttf
Executable file
BIN
css/fonts/Montserrat-Light.ttf
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Light.woff
Executable file
BIN
css/fonts/Montserrat-Light.woff
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Regular.eot
Executable file
BIN
css/fonts/Montserrat-Regular.eot
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Regular.svg
Executable file
BIN
css/fonts/Montserrat-Regular.svg
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Regular.ttf
Executable file
BIN
css/fonts/Montserrat-Regular.ttf
Executable file
Binary file not shown.
BIN
css/fonts/Montserrat-Regular.woff
Executable file
BIN
css/fonts/Montserrat-Regular.woff
Executable file
Binary file not shown.
50
css/layouts/_grid.sass
Normal file
50
css/layouts/_grid.sass
Normal 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
1
css/main.css
Executable file
File diff suppressed because one or more lines are too long
26
css/main.sass
Executable file
26
css/main.sass
Executable 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
189
css/modules/_about.sass
Normal 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
75
css/modules/_contact.sass
Normal 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
|
||||
44
css/modules/_device-notification.sass
Normal file
44
css/modules/_device-notification.sass
Normal 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
76
css/modules/_header.sass
Normal 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
167
css/modules/_hire.sass
Normal 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
175
css/modules/_intro.sass
Normal 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
113
css/modules/_outer-nav.sass
Normal 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
19
css/modules/_section.sass
Normal 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
|
||||
65
css/modules/_side-nav.sass
Normal file
65
css/modules/_side-nav.sass
Normal 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
178
css/modules/_work.sass
Normal 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
58
css/scroll_gall.css
Normal 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
405
css/style2.css
Normal 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
42
css/styles.css
Executable 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
232
css/timeline.css
Normal 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
BIN
fonts/KHGummi.otf
Executable file
Binary file not shown.
BIN
img/50314726_00201_0471_XLarge.jpg
Executable file
BIN
img/50314726_00201_0471_XLarge.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
img/Github.png
Executable file
BIN
img/Github.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
img/Highwind1_opt.png
Executable file
BIN
img/Highwind1_opt.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
img/LinkedIN.png
Executable file
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
0
img/WEPA.png
Normal file → Executable file
|
Before Width: | Height: | Size: 416 KiB After Width: | Height: | Size: 416 KiB |
BIN
img/about-history.jpg
Normal file
BIN
img/about-history.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
img/about-philosophy.jpg
Normal file
BIN
img/about-philosophy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
img/about-visual.png
Normal file
BIN
img/about-visual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
BIN
img/about-winners.jpg
Normal file
BIN
img/about-winners.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
img/beach.jpeg
Normal file
BIN
img/beach.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
BIN
img/code.png
Executable file
BIN
img/code.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/codeblog.png
Executable file
BIN
img/codeblog.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
img/contact-visual.png
Normal file
BIN
img/contact-visual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
img/email.png
Executable file
BIN
img/email.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
img/favicon.ico
Executable file
BIN
img/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/forsite.webp
Executable file
BIN
img/forsite.webp
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
img/hall.jpg
Executable file
BIN
img/hall.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
img/havana.jpg
Executable file
BIN
img/havana.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
img/headshot website.png
Executable file
BIN
img/headshot website.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 930 KiB |
BIN
img/headshot.jpg
Executable file
BIN
img/headshot.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
img/headshot_website.png
Executable file
BIN
img/headshot_website.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 930 KiB |
BIN
img/introduction-visual.png
Normal file
BIN
img/introduction-visual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
BIN
img/japan.JPG
Executable file
BIN
img/japan.JPG
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
BIN
img/kevinhart.jpg
Executable file
BIN
img/kevinhart.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
img/leroy_opt.png
Executable file
BIN
img/leroy_opt.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
87
img/light_crystal.svg
Normal file
87
img/light_crystal.svg
Normal 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
BIN
img/lightning.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
BIN
img/mail.png
Executable file
BIN
img/mail.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 187 B |
BIN
img/mc.jpg
Executable file
BIN
img/mc.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
img/nebula.png
Executable file
BIN
img/nebula.png
Executable file
Binary file not shown.
BIN
img/nostr-icon-white-256x256.png
Normal file
BIN
img/nostr-icon-white-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/nostr-logo-purple-transparent-928x363.png
Normal file
BIN
img/nostr-logo-purple-transparent-928x363.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
5
img/pci_avatar.svg
Normal file
5
img/pci_avatar.svg
Normal 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
BIN
img/pr_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
img/running-nostr.gif
Executable file
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
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
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
BIN
img/work-victory.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
869
index.html
869
index.html
|
|
@ -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 */
|
||||
}
|
||||
<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">
|
||||
|
||||
|
||||
.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>
|
||||
|
||||
<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)";>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
|
||||
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
|
||||
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="offcanvas-body">
|
||||
|
||||
<div class="text-center">
|
||||
<div class="d-inline-block text-center">
|
||||
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!"
|
||||
style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
|
||||
<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>
|
||||
|
||||
<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://library.miguelalmodo.com/">
|
||||
<button class="cta">Check out a book
|
||||
<svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="btn-background"></span>
|
||||
</button></a>
|
||||
<br><br>
|
||||
|
||||
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
|
||||
<button class="cta">Bookmarks
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="btn-background"></span>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
|
||||
<img src="img/introduction-visual.png" alt="Welcome">
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<button class="btn btn-secondary" href="#" disabled>View biography »</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>
|
||||
|
||||
<br>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="https://migs.uber.space/about.html">About</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Collaborate
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
|
||||
<li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>
|
||||
<!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Resumes
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
|
||||
<li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Garden
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">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>
|
||||
<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>
|
||||
|
||||
<!--
|
||||
<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>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</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>
|
||||
|
||||
<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>
|
||||
<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>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.
|
||||
|
||||
    
|
||||
    
|
||||
|
||||
<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>
|
||||
<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
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
280
js/functions.js
Executable 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
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
4
js/vendor/jquery-2.2.4.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue