mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-10-18 13:41:47 +00:00
Compare commits
No commits in common. "f5b227b456846d31380f9b434061966b7e1ce4be" and "f937a6b9d9a0b68fb4ff667d86119a8b36755d72" have entirely different histories.
f5b227b456
...
f937a6b9d9
85 changed files with 470 additions and 5632 deletions
|
|
@ -1,4 +0,0 @@
|
||||||
This repository represents the set up for my uberspace asteroid. I am in the process of pointing my main domain to this page.
|
|
||||||
|
|
||||||
I used this theme https://github.com/BuckyMaler/global
|
|
||||||
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
body
|
|
||||||
background-color: $black
|
|
||||||
font-size: 14px
|
|
||||||
line-height: 1.6
|
|
||||||
font-family: "Montserrat", sans-serif
|
|
||||||
color: $white
|
|
||||||
-webkit-font-smoothing: antialiased
|
|
||||||
-webkit-text-size-adjust: 100%
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
// https://www.fontsquirrel.com/fonts/montserrat
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Montserrat';
|
|
||||||
src: url('fonts/Montserrat-Black.eot');
|
|
||||||
src: local('☺'), url('fonts/Montserrat-Black.woff') format('woff'), url('fonts/Montserrat-Black.ttf') format('truetype'), url('fonts/Montserrat-Black.svg') format('svg');
|
|
||||||
font-weight: 900;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Montserrat';
|
|
||||||
src: url('fonts/Montserrat-Bold.eot');
|
|
||||||
src: local('☺'), url('fonts/Montserrat-Bold.woff') format('woff'), url('fonts/Montserrat-Bold.ttf') format('truetype'), url('fonts/Montserrat-Bold.svg') format('svg');
|
|
||||||
font-weight: 700;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Montserrat';
|
|
||||||
src: url('fonts/Montserrat-Regular.eot');
|
|
||||||
src: local('☺'), url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf') format('truetype'), url('fonts/Montserrat-Regular.svg') format('svg');
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Montserrat';
|
|
||||||
src: url('fonts/Montserrat-Light.eot');
|
|
||||||
src: local('☺'), url('fonts/Montserrat-Light.woff') format('woff'), url('fonts/Montserrat-Light.ttf') format('truetype'), url('fonts/Montserrat-Light.svg') format('svg');
|
|
||||||
font-weight: 300;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
@ -1,221 +0,0 @@
|
||||||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: sans-serif;
|
|
||||||
-ms-text-size-adjust: 100%;
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
details,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
main,
|
|
||||||
menu,
|
|
||||||
nav,
|
|
||||||
section,
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
progress,
|
|
||||||
video {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
audio:not([controls]) {
|
|
||||||
display: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden],
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dfn {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 1em 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
pre,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
color: inherit;
|
|
||||||
font: inherit;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button,
|
|
||||||
html input[type="button"],
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="submit"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[disabled],
|
|
||||||
html input[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
input::-moz-focus-inner {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"]::-webkit-inner-spin-button,
|
|
||||||
input[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-appearance: textfield;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
|
||||||
input[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid #c0c0c0;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
optgroup {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
::selection
|
|
||||||
background: #FFF498
|
|
||||||
|
|
||||||
::-moz-selection
|
|
||||||
background: #FFF498
|
|
||||||
|
|
||||||
img::selection
|
|
||||||
background: transparent
|
|
||||||
|
|
||||||
img::-moz-selection
|
|
||||||
background: transparent
|
|
||||||
|
|
||||||
body
|
|
||||||
-webkit-tap-highlight-color: #FFF498
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// Colors
|
|
||||||
$white: #fff
|
|
||||||
$black: #0c0c0c
|
|
||||||
$highlight: #0f33ff
|
|
||||||
$muted-gray: #282828
|
|
||||||
7
css/bootstrap.min.css
vendored
7
css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,50 +0,0 @@
|
||||||
.l-viewport
|
|
||||||
position: relative
|
|
||||||
width: 100%
|
|
||||||
height: 100vh
|
|
||||||
box-shadow: 0 0 45px 5px rgba(0,0,0,.85)
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
.l-wrapper
|
|
||||||
position: relative
|
|
||||||
width: 1440px
|
|
||||||
max-width: 90%
|
|
||||||
height: 100%
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.l-side-nav
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
display: flex
|
|
||||||
height: 100%
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
// placed on layout class due to firefox bug
|
|
||||||
&::before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 0
|
|
||||||
transform: translateY(-50%)
|
|
||||||
width: 2px
|
|
||||||
height: 70%
|
|
||||||
max-height: 750px
|
|
||||||
background-color: #555
|
|
||||||
opacity: .35
|
|
||||||
z-index: 10
|
|
||||||
|
|
||||||
@media (max-width: 1180px)
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.l-main-content
|
|
||||||
position: relative
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
.l-section
|
|
||||||
position: absolute
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,26 +0,0 @@
|
||||||
// This is the single file output by sass. It is intended to ONLY @import other files.
|
|
||||||
|
|
||||||
|
|
||||||
// BASE
|
|
||||||
@import 'base/fonts'
|
|
||||||
@import 'base/normalize'
|
|
||||||
@import 'base/vars'
|
|
||||||
@import 'base/selection-colors'
|
|
||||||
@import 'base/body-element'
|
|
||||||
|
|
||||||
|
|
||||||
// LAYOUTS
|
|
||||||
@import 'layouts/grid'
|
|
||||||
|
|
||||||
|
|
||||||
// MODULES
|
|
||||||
@import 'modules/device-notification'
|
|
||||||
@import 'modules/section'
|
|
||||||
@import 'modules/header'
|
|
||||||
@import 'modules/side-nav'
|
|
||||||
@import 'modules/intro'
|
|
||||||
@import 'modules/work'
|
|
||||||
@import 'modules/about'
|
|
||||||
@import 'modules/contact'
|
|
||||||
@import 'modules/hire'
|
|
||||||
@import 'modules/outer-nav'
|
|
||||||
|
|
@ -1,189 +0,0 @@
|
||||||
.about
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 900px
|
|
||||||
max-width: 75%
|
|
||||||
height: 100%
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
@media (max-width: 1180px)
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
position: relative
|
|
||||||
height: 475px
|
|
||||||
|
|
||||||
&::before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 20px
|
|
||||||
left: 200px
|
|
||||||
transform: rotate(-25deg)
|
|
||||||
border: 5px solid $highlight
|
|
||||||
border-right-color: transparent
|
|
||||||
border-bottom-color: transparent
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 75px
|
|
||||||
left: 400px
|
|
||||||
transform: rotate(45deg)
|
|
||||||
width: 10px
|
|
||||||
height: 10px
|
|
||||||
background-color: $highlight
|
|
||||||
|
|
||||||
h2
|
|
||||||
position: relative
|
|
||||||
margin-top: 35px
|
|
||||||
font-size: 68px
|
|
||||||
font-weight: 900
|
|
||||||
line-height: 1
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
&::before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 60px
|
|
||||||
left: 268px
|
|
||||||
width: 30px
|
|
||||||
height: 30px
|
|
||||||
background-color: $highlight
|
|
||||||
border-radius: 50%
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 255px
|
|
||||||
left: 255px
|
|
||||||
width: 10px
|
|
||||||
height: 10px
|
|
||||||
background-color: $highlight
|
|
||||||
|
|
||||||
a
|
|
||||||
padding: 5px 17px 5px 0
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
background-color: transparent
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
svg
|
|
||||||
left: 10px
|
|
||||||
|
|
||||||
svg
|
|
||||||
position: relative
|
|
||||||
left: 5px
|
|
||||||
width: 15px
|
|
||||||
fill: $white
|
|
||||||
transition: left .2s ease-in-out
|
|
||||||
|
|
||||||
img
|
|
||||||
position: absolute
|
|
||||||
bottom: -90px
|
|
||||||
right: -12px
|
|
||||||
|
|
||||||
&--options
|
|
||||||
display: flex
|
|
||||||
max-width: 600px
|
|
||||||
justify-content: space-between
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
& > a
|
|
||||||
position: relative
|
|
||||||
width: 150px
|
|
||||||
height: 75px
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
border: 10px solid $highlight
|
|
||||||
background:
|
|
||||||
position: center
|
|
||||||
size: cover
|
|
||||||
repeat: no-repeat
|
|
||||||
|
|
||||||
&:nth-child(1)
|
|
||||||
background-image: url("../img/about-winners.jpg")
|
|
||||||
|
|
||||||
&:nth-child(2)
|
|
||||||
background-image: url("../img/about-philosophy.jpg")
|
|
||||||
|
|
||||||
&:nth-child(3)
|
|
||||||
background-image: url("../img/about-history.jpg")
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
h3
|
|
||||||
bottom: -50px
|
|
||||||
|
|
||||||
h3
|
|
||||||
position: absolute
|
|
||||||
bottom: -38px
|
|
||||||
left: 10px
|
|
||||||
font-size: 16px
|
|
||||||
text-transform: uppercase
|
|
||||||
transition: bottom .2s ease-in-out, left .2s ease-in-out
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
|
|
||||||
.about
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
height: 305px
|
|
||||||
|
|
||||||
&::before
|
|
||||||
top: 0
|
|
||||||
left: 125px
|
|
||||||
|
|
||||||
&::after
|
|
||||||
top: 35px
|
|
||||||
left: 260px
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin-top: 10px
|
|
||||||
font-size: 44px
|
|
||||||
|
|
||||||
&::before
|
|
||||||
top: 28px
|
|
||||||
left: 168px
|
|
||||||
|
|
||||||
&::after
|
|
||||||
top: 163px
|
|
||||||
left: 163px
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 315px
|
|
||||||
|
|
||||||
@media (max-width: 600px)
|
|
||||||
|
|
||||||
.about
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
&::before
|
|
||||||
left: 155px
|
|
||||||
|
|
||||||
&::after
|
|
||||||
left: 310px
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin-top: 0
|
|
||||||
font-size: 55px
|
|
||||||
|
|
||||||
&::before
|
|
||||||
top: 43px
|
|
||||||
left: 214px
|
|
||||||
|
|
||||||
&::after
|
|
||||||
top: 205px
|
|
||||||
left: 205px
|
|
||||||
|
|
||||||
img
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&--options
|
|
||||||
display: none
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
// position fixed in order to escape the 1440px wrapper
|
|
||||||
.contact
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
background:
|
|
||||||
image: url("../img/contact-visual.png")
|
|
||||||
position: center
|
|
||||||
size: cover
|
|
||||||
repeat: no-repeat
|
|
||||||
|
|
||||||
&--lockup
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 900px
|
|
||||||
max-width: 75%
|
|
||||||
height: 100%
|
|
||||||
align-items: center
|
|
||||||
justify-content: flex-end
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
@media (max-width: 1180px)
|
|
||||||
max-width: 90%
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
justify-content: center
|
|
||||||
|
|
||||||
.modal
|
|
||||||
padding: 45px 45px
|
|
||||||
text-align: center
|
|
||||||
background-color: $black
|
|
||||||
box-shadow: 0 0 30px 0 rgba(0,0,0,.75)
|
|
||||||
|
|
||||||
&--information
|
|
||||||
|
|
||||||
p,
|
|
||||||
a
|
|
||||||
display: block
|
|
||||||
margin: 14px 0
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
font-weight: 700
|
|
||||||
|
|
||||||
p
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
&--options
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
& > li
|
|
||||||
width: 130px
|
|
||||||
margin: 0 auto 25px auto
|
|
||||||
|
|
||||||
li:nth-child(1)
|
|
||||||
background-color: #1769ff
|
|
||||||
|
|
||||||
li:nth-child(2)
|
|
||||||
background-color: #ea4c89
|
|
||||||
|
|
||||||
li:nth-child(3)
|
|
||||||
margin-bottom: 0
|
|
||||||
background-color: $highlight
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
a
|
|
||||||
display: block
|
|
||||||
width: 100%
|
|
||||||
padding: 8px 0
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
font-weight: 700
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
// reference media queries at the bottom of this file
|
|
||||||
.device-notification
|
|
||||||
display: none
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
background-color: $black
|
|
||||||
z-index: 12
|
|
||||||
|
|
||||||
&--logo
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0 0 0 10px
|
|
||||||
font-size: 16px
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
&--message
|
|
||||||
width: 70%
|
|
||||||
margin: 30px 0 0 0
|
|
||||||
font-weight: 700
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
// based on personal content these may need to be adjusted slighlty
|
|
||||||
@media (max-width: 767px) and (min-width: 601px) and (max-height: 680px)
|
|
||||||
display: flex
|
|
||||||
|
|
||||||
@media (max-width: 600px) and (min-width: 480px) and (max-height: 580px)
|
|
||||||
display: flex
|
|
||||||
|
|
||||||
@media (max-width: 736px) and (min-width: 360px) and (orientation: landscape)
|
|
||||||
display: flex
|
|
||||||
|
|
||||||
@media(max-width: 359px)
|
|
||||||
display: flex
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
.header
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
height: 70px
|
|
||||||
align-items: center
|
|
||||||
justify-content: space-between
|
|
||||||
z-index: 10
|
|
||||||
|
|
||||||
&--logo
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
p
|
|
||||||
margin: 0 0 0 10px
|
|
||||||
font-size: 16px
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
&--nav-toggle
|
|
||||||
display: flex
|
|
||||||
width: 50px
|
|
||||||
height: 50px
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
span,
|
|
||||||
&::before,
|
|
||||||
&::after
|
|
||||||
content: ""
|
|
||||||
position: relative
|
|
||||||
width: 16px
|
|
||||||
height: 2px
|
|
||||||
background-color: $white
|
|
||||||
|
|
||||||
&::before
|
|
||||||
bottom: 5px
|
|
||||||
width: 23px
|
|
||||||
|
|
||||||
&::after
|
|
||||||
top: 5px
|
|
||||||
width: 23px
|
|
||||||
|
|
||||||
&--cta
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
transform: translate(-50%, -50%)
|
|
||||||
padding: 0 20px
|
|
||||||
line-height: 30px
|
|
||||||
text-decoration: none
|
|
||||||
color: $white
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
background-color: $highlight
|
|
||||||
border: none
|
|
||||||
opacity: 0
|
|
||||||
visibility: hidden
|
|
||||||
transition: opacity .4s ease-in-out, visibility 0s .4s
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
&.is-active
|
|
||||||
opacity: 1
|
|
||||||
visibility: visible
|
|
||||||
transition: opacity .4s ease-in-out .4s
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
display: none
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
.hire
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 700px
|
|
||||||
max-width: 75%
|
|
||||||
height: 100%
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
@media (max-width: 1180px)
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 0 0 20px 0
|
|
||||||
font-size: 30px
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.work-request
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
input[type="submit"]
|
|
||||||
width: 400px
|
|
||||||
max-width: 100%
|
|
||||||
line-height: 50px
|
|
||||||
font-size: 16px
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
background-color: $highlight
|
|
||||||
border: none
|
|
||||||
border-radius: 0
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
&--options
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
margin: 30px 0
|
|
||||||
|
|
||||||
.options-a
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
justify-content: space-between
|
|
||||||
|
|
||||||
.options-b
|
|
||||||
display: flex
|
|
||||||
width: 72%
|
|
||||||
flex-wrap: wrap
|
|
||||||
justify-content: space-around
|
|
||||||
|
|
||||||
label
|
|
||||||
display: block
|
|
||||||
width: 200px
|
|
||||||
margin-bottom: 30px
|
|
||||||
line-height: 50px
|
|
||||||
font-size: 16px
|
|
||||||
font-weight: 700
|
|
||||||
text-align: center
|
|
||||||
border: 2px solid $white
|
|
||||||
cursor: pointer
|
|
||||||
transition: background-color .2s ease-in-out, border-color .2s ease-in-out
|
|
||||||
|
|
||||||
svg
|
|
||||||
position: relative
|
|
||||||
left: -5px
|
|
||||||
width: 0
|
|
||||||
fill: $white
|
|
||||||
transition: width .2s ease-in-out
|
|
||||||
|
|
||||||
input[type="checkbox"]
|
|
||||||
display: none
|
|
||||||
|
|
||||||
&:checked + label
|
|
||||||
background-color: $highlight
|
|
||||||
border-color: $highlight
|
|
||||||
|
|
||||||
& svg
|
|
||||||
width: 15px
|
|
||||||
|
|
||||||
&--information
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
justify-content: space-between
|
|
||||||
margin-bottom: 60px
|
|
||||||
|
|
||||||
.information-name,
|
|
||||||
.information-email
|
|
||||||
position: relative
|
|
||||||
width: 45%
|
|
||||||
height: 50px
|
|
||||||
font-size: 30px
|
|
||||||
font-weight: 300
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="email"]
|
|
||||||
width: 100%
|
|
||||||
padding: 0 0 5px 0
|
|
||||||
background-color: transparent
|
|
||||||
border: none
|
|
||||||
border-bottom: 1px solid $white
|
|
||||||
border-radius: 0
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
background-color: $black
|
|
||||||
|
|
||||||
label
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
pointer-events: none
|
|
||||||
transition: top .2s ease-in-out, font-size .2s ease-in-out
|
|
||||||
|
|
||||||
input:focus + label,
|
|
||||||
input.has-value + label
|
|
||||||
top: -15px
|
|
||||||
font-size: 14px
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
|
|
||||||
.work-request
|
|
||||||
|
|
||||||
&--options
|
|
||||||
flex-direction: row
|
|
||||||
justify-content: space-around
|
|
||||||
|
|
||||||
.options-a,
|
|
||||||
.options-b
|
|
||||||
display: block
|
|
||||||
width: auto
|
|
||||||
|
|
||||||
@media (max-width: 600px)
|
|
||||||
|
|
||||||
.work-request
|
|
||||||
|
|
||||||
&--options
|
|
||||||
margin: 20px 0
|
|
||||||
|
|
||||||
@media (max-width: 415px)
|
|
||||||
justify-content: space-between
|
|
||||||
|
|
||||||
label
|
|
||||||
width: 150px
|
|
||||||
margin-bottom: 15px
|
|
||||||
font-size: 14px
|
|
||||||
|
|
||||||
input[type="checkbox"]
|
|
||||||
|
|
||||||
&:checked + label
|
|
||||||
|
|
||||||
& svg
|
|
||||||
width: 12px
|
|
||||||
|
|
||||||
&--information
|
|
||||||
margin-bottom: 30px
|
|
||||||
|
|
||||||
.information-name,
|
|
||||||
.information-email
|
|
||||||
height: 40px
|
|
||||||
font-size: 24px
|
|
||||||
|
|
@ -1,175 +0,0 @@
|
||||||
.intro
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 900px
|
|
||||||
max-width: 75%
|
|
||||||
height: 100%
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
@media (max-width: 1180px)
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
position: relative
|
|
||||||
height: 475px
|
|
||||||
|
|
||||||
&::before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
bottom: 20px
|
|
||||||
left: -15px
|
|
||||||
right: 0
|
|
||||||
height: 2px
|
|
||||||
background-color: $muted-gray
|
|
||||||
|
|
||||||
&::after
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
bottom: 18px
|
|
||||||
left: 0
|
|
||||||
width: 30px
|
|
||||||
height: 4px
|
|
||||||
background-color: $highlight
|
|
||||||
|
|
||||||
h1
|
|
||||||
position: relative
|
|
||||||
font-size: 68px
|
|
||||||
font-weight: 900
|
|
||||||
line-height: 1
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
button
|
|
||||||
position: relative
|
|
||||||
padding: 5px 17px 5px 12px
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
background-color: transparent
|
|
||||||
border: none
|
|
||||||
|
|
||||||
.btn-background
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 23px
|
|
||||||
right: 0
|
|
||||||
height: 100%
|
|
||||||
background-color: $highlight
|
|
||||||
z-index: -1
|
|
||||||
transition: left .2s ease-in-out
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
.btn-background
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
svg
|
|
||||||
position: relative
|
|
||||||
left: 5px
|
|
||||||
width: 15px
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
img
|
|
||||||
position: absolute
|
|
||||||
bottom: 21px
|
|
||||||
right: -12px
|
|
||||||
|
|
||||||
&--options
|
|
||||||
display: flex
|
|
||||||
justify-content: space-between
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
& > a
|
|
||||||
max-width: 250px
|
|
||||||
text-decoration: none
|
|
||||||
color: $muted-gray
|
|
||||||
transition: color .2s ease-in-out
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
h3
|
|
||||||
font-size: 16px
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
p
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
@media (max-width: 900px)
|
|
||||||
|
|
||||||
.intro
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
height: 380px
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 55px
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 430px
|
|
||||||
|
|
||||||
&--options
|
|
||||||
|
|
||||||
& > a
|
|
||||||
margin-right: 30px
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
margin-right: 0
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
|
|
||||||
.intro
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
height: 305px
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 44px
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 330px
|
|
||||||
|
|
||||||
&--options
|
|
||||||
display: block
|
|
||||||
|
|
||||||
& > a
|
|
||||||
display: block
|
|
||||||
max-width: 100%
|
|
||||||
margin: 0 0 30px 0
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
@media (max-width: 600px)
|
|
||||||
|
|
||||||
.intro
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
height: 360px
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 55px
|
|
||||||
|
|
||||||
img
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media (max-width: 600px) and (max-height: 750px)
|
|
||||||
|
|
||||||
.intro
|
|
||||||
|
|
||||||
&--banner
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after
|
|
||||||
display: none
|
|
||||||
|
|
||||||
h1
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
&--options
|
|
||||||
display: none
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
// tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
|
|
||||||
.perspective
|
|
||||||
position: relative
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
&--modalview
|
|
||||||
position: fixed
|
|
||||||
perspective: 1500px
|
|
||||||
|
|
||||||
.container
|
|
||||||
position: relative
|
|
||||||
transform: translateZ(0) translateX(0) rotateY(0deg)
|
|
||||||
min-height: 100%
|
|
||||||
outline: 30px solid $highlight
|
|
||||||
transition: transform .4s
|
|
||||||
|
|
||||||
.modalview
|
|
||||||
|
|
||||||
.container
|
|
||||||
position: absolute
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
overflow: hidden
|
|
||||||
backface-visibility: hidden
|
|
||||||
|
|
||||||
.effect-rotate-left
|
|
||||||
|
|
||||||
.container
|
|
||||||
transform-origin: 0% 50%
|
|
||||||
transition: transform .4s
|
|
||||||
|
|
||||||
&--animate
|
|
||||||
|
|
||||||
.container
|
|
||||||
transform: translateZ(-1800px) translateX(-50%) rotateY(45deg)
|
|
||||||
outline: 30px solid $highlight
|
|
||||||
|
|
||||||
.outer-nav
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 55%
|
|
||||||
transform: translateY(-50%)
|
|
||||||
transform-style: preserve-3d
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
text-align: center
|
|
||||||
visibility: hidden
|
|
||||||
transition: visibility 0s .2s
|
|
||||||
|
|
||||||
&.is-vis
|
|
||||||
visibility: visible
|
|
||||||
|
|
||||||
&--return
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
display: none
|
|
||||||
cursor: pointer
|
|
||||||
z-index: 11
|
|
||||||
|
|
||||||
&.is-vis
|
|
||||||
display: block
|
|
||||||
|
|
||||||
& > li
|
|
||||||
transform-style: preserve-3d
|
|
||||||
transform: translateX(350px) translateZ(-1000px)
|
|
||||||
font-size: 55px
|
|
||||||
font-weight: 900
|
|
||||||
opacity: 0
|
|
||||||
cursor: pointer
|
|
||||||
transition: transform .2s, opacity .2s
|
|
||||||
|
|
||||||
&.is-vis
|
|
||||||
transform: translateX(0) translateZ(0)
|
|
||||||
opacity: 1
|
|
||||||
transition: transform .4s, opacity .4s
|
|
||||||
|
|
||||||
&::before
|
|
||||||
content: ""
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
transform: translate(-50%, -25%)
|
|
||||||
width: 110%
|
|
||||||
height: 15px
|
|
||||||
opacity: 0
|
|
||||||
background-color: $highlight
|
|
||||||
|
|
||||||
&.is-active::before
|
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
font-size: 44px
|
|
||||||
|
|
||||||
@media (max-width: 600px)
|
|
||||||
font-size: 34px
|
|
||||||
|
|
||||||
li.is-vis:nth-child(2)
|
|
||||||
transition-delay: .04s
|
|
||||||
|
|
||||||
li.is-vis:nth-child(3)
|
|
||||||
transition-delay: .08s
|
|
||||||
|
|
||||||
li.is-vis:nth-child(4)
|
|
||||||
transition-delay: .12s
|
|
||||||
|
|
||||||
li.is-vis:nth-child(5)
|
|
||||||
transition-delay: .16s
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
// section transition styles
|
|
||||||
.section
|
|
||||||
opacity: 0
|
|
||||||
visibility: hidden
|
|
||||||
transition: opacity .4s ease-in-out, visibility 0s .4s
|
|
||||||
|
|
||||||
&--is-active
|
|
||||||
opacity: 1
|
|
||||||
visibility: visible
|
|
||||||
z-index: 1
|
|
||||||
transition: opacity .4s ease-in-out .4s
|
|
||||||
|
|
||||||
&--next
|
|
||||||
transform: translateY(-45px)
|
|
||||||
transition: transform .4s ease-in-out
|
|
||||||
|
|
||||||
&--prev
|
|
||||||
transform: translateY(45px)
|
|
||||||
transition: transform .4s ease-in-out
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
.side-nav
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 100px
|
|
||||||
height: 70%
|
|
||||||
max-height: 750px
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: space-around
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
list-style-position: inside
|
|
||||||
z-index: 10
|
|
||||||
|
|
||||||
& > li
|
|
||||||
position: relative
|
|
||||||
top: -5px
|
|
||||||
color: $white
|
|
||||||
font-size: 6px
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
span
|
|
||||||
position: relative
|
|
||||||
top: 3px
|
|
||||||
left: 10px
|
|
||||||
color: $white
|
|
||||||
font-size: 14px
|
|
||||||
font-weight: 300
|
|
||||||
opacity: 0
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
&::before
|
|
||||||
position: absolute
|
|
||||||
top: 3px
|
|
||||||
left: 10px
|
|
||||||
color: #555
|
|
||||||
font-size: 14px
|
|
||||||
font-weight: 300
|
|
||||||
|
|
||||||
li:nth-child(1)::before
|
|
||||||
content: "01"
|
|
||||||
|
|
||||||
li:nth-child(2)::before
|
|
||||||
content: "02"
|
|
||||||
|
|
||||||
li:nth-child(3)::before
|
|
||||||
content: "03"
|
|
||||||
|
|
||||||
li:nth-child(4)::before
|
|
||||||
content: "04"
|
|
||||||
|
|
||||||
li:nth-child(5)::before
|
|
||||||
content: "05"
|
|
||||||
|
|
||||||
li.is-active
|
|
||||||
color: $highlight
|
|
||||||
transition: color .4s ease-in-out
|
|
||||||
|
|
||||||
span
|
|
||||||
opacity: 1
|
|
||||||
visibility: visible
|
|
||||||
transition: opacity .4s ease-in-out
|
|
||||||
|
|
||||||
&::before
|
|
||||||
left: -33px
|
|
||||||
color: $white
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
.work
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 960px
|
|
||||||
max-width: 80%
|
|
||||||
height: 100%
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
@media (max-width: 1180px)
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
h2
|
|
||||||
margin: 0 0 20px 0
|
|
||||||
font-size: 30px
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
&--lockup
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.slider
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
width: 80%
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 0
|
|
||||||
list-style: none
|
|
||||||
|
|
||||||
&--item
|
|
||||||
position: absolute
|
|
||||||
display: none
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
a
|
|
||||||
text-decoration: none
|
|
||||||
color: #858585
|
|
||||||
|
|
||||||
&-title
|
|
||||||
margin-top: 10px
|
|
||||||
font-size: 12px
|
|
||||||
font-weight: 700
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
&-description
|
|
||||||
display: none
|
|
||||||
max-width: 250px
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
&-image
|
|
||||||
width: 150px
|
|
||||||
height: 150px
|
|
||||||
margin: 0 auto
|
|
||||||
border-radius: 50%
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
&-left
|
|
||||||
top: 50%
|
|
||||||
left: 0
|
|
||||||
transform: translateY(-50%)
|
|
||||||
display: block
|
|
||||||
|
|
||||||
&-right
|
|
||||||
top: 50%
|
|
||||||
right: 0
|
|
||||||
transform: translateY(-50%)
|
|
||||||
display: block
|
|
||||||
|
|
||||||
&-center
|
|
||||||
position: relative
|
|
||||||
top: 30px
|
|
||||||
left: 50%
|
|
||||||
transform: translateX(-50%)
|
|
||||||
display: block
|
|
||||||
|
|
||||||
a
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
.slider--item-title
|
|
||||||
margin-top: 25px
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
.slider--item-description
|
|
||||||
display: block
|
|
||||||
|
|
||||||
.slider--item-image
|
|
||||||
width: 300px
|
|
||||||
height: 300px
|
|
||||||
|
|
||||||
.slider--next,
|
|
||||||
.slider--prev
|
|
||||||
position: absolute
|
|
||||||
top: 160px
|
|
||||||
display: flex
|
|
||||||
width: 50px
|
|
||||||
height: 50px
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
background-color: $muted-gray
|
|
||||||
border-radius: 50%
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
svg
|
|
||||||
width: 20px
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
.slider--next
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
.slider--prev
|
|
||||||
left: 0
|
|
||||||
|
|
||||||
@media (max-width: 900px)
|
|
||||||
|
|
||||||
.work
|
|
||||||
|
|
||||||
&--lockup
|
|
||||||
|
|
||||||
.slider
|
|
||||||
|
|
||||||
&--item
|
|
||||||
|
|
||||||
&-image
|
|
||||||
width: 120px
|
|
||||||
height: 120px
|
|
||||||
|
|
||||||
&-center
|
|
||||||
|
|
||||||
.slider--item-image
|
|
||||||
width: 240px
|
|
||||||
height: 240px
|
|
||||||
|
|
||||||
.slider--next,
|
|
||||||
.slider--prev
|
|
||||||
top: 130px
|
|
||||||
|
|
||||||
@media (max-width: 767px)
|
|
||||||
|
|
||||||
.work
|
|
||||||
|
|
||||||
&--lockup
|
|
||||||
|
|
||||||
.slider
|
|
||||||
width: 75%
|
|
||||||
|
|
||||||
&--item
|
|
||||||
|
|
||||||
&-image
|
|
||||||
width: 90px
|
|
||||||
height: 90px
|
|
||||||
|
|
||||||
&-center
|
|
||||||
|
|
||||||
.slider--item-image
|
|
||||||
width: 190px
|
|
||||||
height: 190px
|
|
||||||
|
|
||||||
.slider--next,
|
|
||||||
.slider--prev
|
|
||||||
top: 105px
|
|
||||||
|
|
||||||
@media (max-width: 600px)
|
|
||||||
|
|
||||||
.work
|
|
||||||
|
|
||||||
&--lockup
|
|
||||||
|
|
||||||
.slider
|
|
||||||
width: auto
|
|
||||||
|
|
||||||
&--item
|
|
||||||
|
|
||||||
&-left,
|
|
||||||
&-right
|
|
||||||
display: none
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
|
|
||||||
|
|
||||||
html, body, #app {
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
font-size:0;
|
|
||||||
font-family: 'Montserrat', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
opacity:0;
|
|
||||||
height:auto;
|
|
||||||
background:radial-gradient(#ccc, #999);
|
|
||||||
}
|
|
||||||
|
|
||||||
#app img {
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detail {
|
|
||||||
position:absolute;
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
background:#111;
|
|
||||||
top:100%;
|
|
||||||
display:flex;
|
|
||||||
flex-direction:column;
|
|
||||||
align-items:center;
|
|
||||||
justify-content:space-evenly;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detailImg {
|
|
||||||
width:85%;
|
|
||||||
height:85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#detailTxt {
|
|
||||||
color:#ccc;
|
|
||||||
font-size:20px;
|
|
||||||
letter-spacing:1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
pointer-events:none;
|
|
||||||
position:absolute;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#headlines {
|
|
||||||
max-width:800px;
|
|
||||||
min-width:450px;
|
|
||||||
left:50%;
|
|
||||||
top:50%;
|
|
||||||
transform:translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
405
css/style2.css
405
css/style2.css
|
|
@ -1,405 +0,0 @@
|
||||||
/**
|
|
||||||
* ===================================================================
|
|
||||||
*
|
|
||||||
* ResumeTemplate v1.0 ClearCareer
|
|
||||||
* url: clearcareer.ca
|
|
||||||
* Design by: Iskender Piyale-Sheard
|
|
||||||
* website: izzydoesizzy.com
|
|
||||||
* Created 06-27-2016
|
|
||||||
* Last Updated: 03-19-2017
|
|
||||||
* ------------------------------------------------------------------
|
|
||||||
* Table of Contents:
|
|
||||||
|
|
||||||
* 01. Global Styles
|
|
||||||
* 02. Intro
|
|
||||||
* 03. Social Icons
|
|
||||||
* 04. Icon Fonts
|
|
||||||
* 05. Section Styles
|
|
||||||
* 06. Timeline Styles
|
|
||||||
* 05. Footer
|
|
||||||
EXTRAS
|
|
||||||
|
|
||||||
* ===================================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* 01. Basic Styles
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
html {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
cursor: pointer;
|
|
||||||
color: #1abc9c;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration:none;
|
|
||||||
color: #1abc9c;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
border-top: 5px solid #1abc9c;
|
|
||||||
width: 80px;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.colour-splash {
|
|
||||||
color: #1abc9c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-primary span {
|
|
||||||
color: #1abc9c;
|
|
||||||
font-weight: bolder;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 02. Intro
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
.section-image {
|
|
||||||
background: #151515 url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=1199&h=799&q=80) no-repeat center center;
|
|
||||||
-webkit-background-size: cover;
|
|
||||||
-moz-background-size: cover;
|
|
||||||
background-size: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
display:table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #111111;
|
|
||||||
opacity: .7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
display:table-cell;
|
|
||||||
-webkit-transform: translateY(-2.1rem);
|
|
||||||
-ms-transform: translateY(-2.1rem);
|
|
||||||
transform: translateY(-2.1rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro .row {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro h1 {
|
|
||||||
font-size: 84px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro h5 {
|
|
||||||
color: #1abc9c;
|
|
||||||
font-size: 2.3rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: .3rem;
|
|
||||||
text-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-image span {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1.4em;
|
|
||||||
padding: 0 10px;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-image h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-image p {
|
|
||||||
font-weight: lighter;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 03. Social Icons
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
.social {
|
|
||||||
margin: 0 10px;
|
|
||||||
padding-top: 1.3em;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social a {
|
|
||||||
color: white;
|
|
||||||
text-decoration:none;
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social a:hover{
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-footer {
|
|
||||||
position: block;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-footer a {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: 0.6em;
|
|
||||||
font-size: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 04. Icon Font
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
.lnr {
|
|
||||||
font-size: 4em !important;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 05. Section Styles
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
section {
|
|
||||||
padding-top: 100px;
|
|
||||||
padding-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profilepic {
|
|
||||||
height: 150px;
|
|
||||||
width: auto;
|
|
||||||
border-radius: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-primary p {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-primary {
|
|
||||||
border: #1abc9c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-colour {
|
|
||||||
background-color: #1abc9c;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-colour p {
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-heading .lead, .section-heading h2 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-colour {
|
|
||||||
border: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-colour hr {
|
|
||||||
border-top: 5px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* 01. Timeline Styles
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
.timeline-icon .fa {
|
|
||||||
color: white;
|
|
||||||
margin: 14px;
|
|
||||||
font-size: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills {
|
|
||||||
background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* 05. Footer
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
footer {
|
|
||||||
display: block;
|
|
||||||
position: static;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: black;
|
|
||||||
color: #fff;
|
|
||||||
padding: 50px 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
footer p {
|
|
||||||
padding: 15px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* EXTRAS
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Mouse Icon
|
|
||||||
* =================================================================== */
|
|
||||||
.mouse-icon {
|
|
||||||
border: 2px solid #fff;
|
|
||||||
border-radius: 16px;
|
|
||||||
display: block;
|
|
||||||
height: 50px;
|
|
||||||
margin: 100px auto;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 30px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.mouse-icon .scroll {
|
|
||||||
animation-delay: 0s;
|
|
||||||
animation-duration: 1s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-name: scrolling;
|
|
||||||
animation-play-state: running;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
|
||||||
.mouse-icon .scroll {
|
|
||||||
background: #fff none repeat scroll 0 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
position: relative;
|
|
||||||
top: 4px;
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
@keyframes scrolling {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
top: 5px;
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
opacity: 1;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
top: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pad-xl {
|
|
||||||
padding: 200px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pad-lg {
|
|
||||||
padding: 160px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pad-sm {
|
|
||||||
padding: 80px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pad-xs {
|
|
||||||
padding: 30px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* /Mouse Icon
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
|
|
||||||
/* Media Queries
|
|
||||||
* =================================================================== */
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.social a {
|
|
||||||
padding: 0.4em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-footer {
|
|
||||||
text-align: center;
|
|
||||||
position:block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-footer a {
|
|
||||||
padding: 0.3em;
|
|
||||||
font-size: 1.6em;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-desc {
|
|
||||||
font-size: 0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-image span {
|
|
||||||
font-size: 1em;
|
|
||||||
padding: 0 1px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro h1 {
|
|
||||||
font-size: 50px;
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
text-align: center;
|
|
||||||
padding-bottom: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#skills {
|
|
||||||
background: #151515 url(https://images.unsplash.com/photo-1456983933114-c22026990f4b?dpr=2&auto=format&crop=entropy&fit=crop&w=1280&h=720&q=80) no-repeat center center;
|
|
||||||
background-position: top center;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.social-footer {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'KHGummi';
|
|
||||||
src: url('./fonts/KHGummi.otf') format('opentype');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.gummi {
|
|
||||||
|
|
||||||
font-family: 'KHGummi';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.quote-banner {
|
|
||||||
color: #e2e2e2;
|
|
||||||
padding: 20px;
|
|
||||||
font-family: 'KHGummi';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer {
|
|
||||||
background: transparent;
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-link {
|
|
||||||
display: block;
|
|
||||||
margin-top: 15px;
|
|
||||||
text-align: center;
|
|
||||||
color: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Additional styling for the blockquote */
|
|
||||||
.blockquote {
|
|
||||||
font-style: italic;
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blockquote-footer {
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
232
css/timeline.css
232
css/timeline.css
|
|
@ -1,232 +0,0 @@
|
||||||
/**
|
|
||||||
* ===================================================================
|
|
||||||
*
|
|
||||||
* ResumeTemplate v1.0 Main ClearCareer
|
|
||||||
* url: clearcareer.ca
|
|
||||||
* 06-27-2016
|
|
||||||
* ------------------------------------------------------------------
|
|
||||||
*
|
|
||||||
* Timeline Tempalte by Bruno Rodriguez
|
|
||||||
*
|
|
||||||
* https://github.com/itbruno
|
|
||||||
* http://itbruno.com.br
|
|
||||||
* http://www.twitter.com/_brunoweb
|
|
||||||
*
|
|
||||||
* ===================================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
header:after, #timeline .timeline-item:after, header:before, #timeline .timeline-item:before {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
*, *:before, *:after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body, html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #f9f9f9;
|
|
||||||
background-size: cover;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: helvetica, arial, tahoma, verdana;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #726f77;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 1100px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4 {
|
|
||||||
font-family: "Dosis", arial, tahoma, verdana;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-name {
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: #1abc9c;
|
|
||||||
padding: 10px;
|
|
||||||
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
||||||
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
||||||
-ms-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
||||||
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
header .logo {
|
|
||||||
color: #1abc9c;
|
|
||||||
float: left;
|
|
||||||
font-family: "Dosis", arial, tahoma, verdana;
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
header .logo > span {
|
|
||||||
color: #f7aaaa;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
header .social {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
header .social .btn {
|
|
||||||
font-family: "Dosis";
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 10px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.timelinedot {
|
|
||||||
margin: 13px;
|
|
||||||
color:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#timeline {
|
|
||||||
width: 100%;
|
|
||||||
margin: 30px auto;
|
|
||||||
position: relative;
|
|
||||||
padding: 0 10px;
|
|
||||||
-webkit-transition: all 0.4s ease;
|
|
||||||
-moz-transition: all 0.4s ease;
|
|
||||||
-ms-transition: all 0.4s ease;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
}
|
|
||||||
#timeline:before {
|
|
||||||
content: "";
|
|
||||||
width: 3px;
|
|
||||||
height: 100%;
|
|
||||||
background: #1abc9c;
|
|
||||||
left: 50%;
|
|
||||||
top: 0;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
#timeline:after {
|
|
||||||
content: "";
|
|
||||||
clear: both;
|
|
||||||
display: table;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-icon {
|
|
||||||
background: #1abc9c;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-left: -23px;
|
|
||||||
-webkit-border-radius: 50%;
|
|
||||||
-moz-border-radius: 50%;
|
|
||||||
-ms-border-radius: 50%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-icon svg {
|
|
||||||
position: relative;
|
|
||||||
top: 14px;
|
|
||||||
left: 14px;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-content {
|
|
||||||
width: 45%;
|
|
||||||
background: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
-ms-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-ms-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
-webkit-transition: all 0.3s ease;
|
|
||||||
-moz-transition: all 0.3s ease;
|
|
||||||
-ms-transition: all 0.3s ease;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-content h2 {
|
|
||||||
padding: 15px;
|
|
||||||
background: #1abc9c;
|
|
||||||
color: #fff;
|
|
||||||
margin: -20px -20px 0 -20px;
|
|
||||||
font-weight: 300;
|
|
||||||
-webkit-border-radius: 3px 3px 0 0;
|
|
||||||
-moz-border-radius: 3px 3px 0 0;
|
|
||||||
-ms-border-radius: 3px 3px 0 0;
|
|
||||||
border-radius: 3px 3px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline .timeline-item .timeline-content p {
|
|
||||||
padding-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timeline .timeline-item .timeline-content:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 45%;
|
|
||||||
top: 20px;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-top: 7px solid transparent;
|
|
||||||
border-bottom: 7px solid transparent;
|
|
||||||
border-left: 7px solid #1abc9c;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-content.right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-content.right:before {
|
|
||||||
content: '';
|
|
||||||
right: 45%;
|
|
||||||
left: inherit;
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 7px solid #1abc9c;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
#timeline {
|
|
||||||
margin: 30px;
|
|
||||||
padding: 0px;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
#timeline:before {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-content {
|
|
||||||
width: 90%;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
|
|
||||||
left: 10%;
|
|
||||||
margin-left: -6px;
|
|
||||||
border-left: 0;
|
|
||||||
border-right: 7px solid #1abc9c;
|
|
||||||
}
|
|
||||||
#timeline .timeline-item .timeline-icon {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
img/Github.png
BIN
img/Github.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
img/LinkedIN.png
BIN
img/LinkedIN.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
0
img/WEPA.png
Executable file → Normal file
0
img/WEPA.png
Executable file → Normal file
|
Before Width: | Height: | Size: 416 KiB After Width: | Height: | Size: 416 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
BIN
img/beach.jpeg
BIN
img/beach.jpeg
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
BIN
img/code.png
BIN
img/code.png
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
BIN
img/codeblog.png
BIN
img/codeblog.png
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 246 KiB |
BIN
img/email.png
BIN
img/email.png
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
BIN
img/favicon.ico
BIN
img/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
img/forsite.webp
BIN
img/forsite.webp
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 MiB |
BIN
img/hall.jpg
BIN
img/hall.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
BIN
img/havana.jpg
BIN
img/havana.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 930 KiB |
BIN
img/headshot.jpg
BIN
img/headshot.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 930 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
BIN
img/japan.JPG
BIN
img/japan.JPG
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,87 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="512.89404"
|
|
||||||
height="353.55396"
|
|
||||||
viewBox="0 0 512.89404 353.55396"
|
|
||||||
version="1.1"
|
|
||||||
id="svg5"
|
|
||||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
|
||||||
sodipodi:docname="lightcrystal_ng.svg"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg">
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="namedview7"
|
|
||||||
pagecolor="#505050"
|
|
||||||
bordercolor="#ffffff"
|
|
||||||
borderopacity="1"
|
|
||||||
inkscape:showpageshadow="0"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pagecheckerboard="1"
|
|
||||||
inkscape:deskcolor="#505050"
|
|
||||||
inkscape:document-units="px"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="0.75199792"
|
|
||||||
inkscape:cx="104.38859"
|
|
||||||
inkscape:cy="195.47926"
|
|
||||||
inkscape:window-width="1600"
|
|
||||||
inkscape:window-height="876"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="24"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="layer2" />
|
|
||||||
<defs
|
|
||||||
id="defs2" />
|
|
||||||
<g
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer2"
|
|
||||||
inkscape:label="Layer 2"
|
|
||||||
transform="translate(-266.32157,-312.56322)">
|
|
||||||
<rect
|
|
||||||
style="fill:none;stroke:#115750;stroke-width:13.7126;stroke-linecap:round;stroke-dasharray:13.7126, 27.4252;stroke-dashoffset:0;stroke-opacity:1"
|
|
||||||
id="rect840-3"
|
|
||||||
width="236.28738"
|
|
||||||
height="236.28741"
|
|
||||||
x="661.17816"
|
|
||||||
y="-204.5117"
|
|
||||||
transform="rotate(45)" />
|
|
||||||
<ellipse
|
|
||||||
style="fill:#008080;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
|
||||||
id="path1086-6"
|
|
||||||
cx="614.85327"
|
|
||||||
cy="486.15881"
|
|
||||||
rx="36.700439"
|
|
||||||
ry="38.554924" />
|
|
||||||
</g>
|
|
||||||
<g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-266.32157,-312.56322)">
|
|
||||||
<rect
|
|
||||||
style="fill:none;stroke:#1f9b92;stroke-width:13.713;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:49.3668"
|
|
||||||
id="rect840"
|
|
||||||
width="236.28738"
|
|
||||||
height="236.28741"
|
|
||||||
x="541.19006"
|
|
||||||
y="-85.445923"
|
|
||||||
transform="rotate(45)" />
|
|
||||||
<ellipse
|
|
||||||
style="fill:#00ffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
|
||||||
id="path1086"
|
|
||||||
cx="448.12054"
|
|
||||||
cy="486.8222"
|
|
||||||
rx="36.700439"
|
|
||||||
ry="38.554924" />
|
|
||||||
<ellipse
|
|
||||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:20;stroke-linecap:round;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
|
||||||
id="path1086-7"
|
|
||||||
cx="532.58795"
|
|
||||||
cy="486.43533"
|
|
||||||
rx="36.700439"
|
|
||||||
ry="38.554924" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 111 KiB |
BIN
img/logo.png
BIN
img/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 4 KiB |
BIN
img/mail.png
BIN
img/mail.png
Binary file not shown.
|
Before Width: | Height: | Size: 187 B |
BIN
img/mc.jpg
BIN
img/mc.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB |
BIN
img/nebula.png
BIN
img/nebula.png
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
|
|
@ -1,5 +0,0 @@
|
||||||
<svg width="261.12" height="246.72" version="1.1" viewBox="0 0 69.088 65.278" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g transform="translate(-174.1 -145.01)">
|
|
||||||
<path d="m174.1 177.65v-32.639h69.088v65.278h-69.088zm34.246 28.13c0.024-0.10478 0.15638-1.0668 0.29418-2.1378 0.21965-1.707 0.94032-7.2036 1.9094-14.563 0.16556-1.2573 0.52785-4.0196 0.80509-6.1383 0.27724-2.1188 0.52896-4.0333 0.55937-4.2545l0.0553-0.40217h-6.5185l-0.18248 1.3758c-0.50988 3.8444-1.9841 15.002-2.2122 16.743-0.14337 1.0943-0.46785 3.5708-0.72108 5.5033-0.25322 1.9325-0.482 3.6375-0.50841 3.7888l-0.048 0.27517h6.5238zm24.716-18.606c3.3379-3.9084 5.4177-8.681 6.1167-14.036 0.17198-1.3176 0.19855-4.6675 0.0468-5.9026-0.32589-2.6529-1.0286-5.3782-1.9596-7.6-1.1171-2.6658-3.0475-5.6301-5.0591-7.7684l-0.6472-0.68797-3.77 3.7672 0.61193 0.6836c0.95608 1.0681 1.2814 1.4867 2.0504 2.6382 1.6043 2.4024 2.7495 5.3112 3.2638 8.2901 0.25226 1.461 0.31337 4.4139 0.12354 5.969-0.54929 4.4999-2.5727 8.85-5.5824 12.002l-0.50538 0.5292 1.8973 1.9106 1.8973 1.9106 0.45054-0.49249c0.24779-0.27086 0.72711-0.81633 1.0652-1.2122zm-45.38-0.24704 1.8543-1.8557-0.61237-0.66313c-2.767-2.9964-4.6339-6.8607-5.3515-11.077-0.22317-1.3113-0.30461-3.9462-0.16506-5.3399 0.4529-4.5231 2.3622-8.882 5.3358-12.182 0.25382-0.28167 0.534-0.59499 0.62261-0.69626l0.16111-0.18414-3.7852-3.7408-0.61426 0.64323c-2.4773 2.5941-4.5952 6.1413-5.7596 9.6465-0.99952 3.0088-1.3953 5.4374-1.3934 8.5513 1e-3 2.4858 0.28501 4.6518 0.90981 6.9507 1.1123 4.0926 3.4445 8.2653 6.254 11.189 0.32439 0.33761 0.61226 0.61384 0.63971 0.61384 0.0275 0 0.88434-0.83507 1.9042-1.8557zm8.007-8.136c5.9e-4 -0.0238-0.2534-0.34768-0.56435-0.71967-1.4452-1.7289-2.3476-3.6184-2.7909-5.8441-0.20797-1.044-0.20976-3.344-3e-3 -4.3783 0.48288-2.4204 1.6614-4.7945 3.132-6.3095l0.35091-0.36149-3.691-3.6797-0.54882 0.59267c-2.4635 2.6603-4.0548 6.1357-4.5154 9.8614-0.13158 1.0644-0.10887 3.323 0.0444 4.4223 0.50881 3.6481 2.1306 7.0467 4.6547 9.7543l0.30888 0.33134 1.811-1.813c0.99603-0.99715 1.8114-1.8325 1.812-1.8563zm30.396 2.7315c2.519-2.9428 3.9175-6.3526 4.2425-10.345 0.3735-4.5873-1.4096-9.6838-4.5676-13.055l-0.56439-0.6025-1.852 1.8265-1.852 1.8265 0.52806 0.57547c1.394 1.5192 2.4638 3.6848 2.9403 5.9518 0.23237 1.1056 0.20682 3.6337-0.0487 4.8223-0.44548 2.072-1.3965 3.9927-2.7972 5.6496l-0.5142 0.60822 1.7868 1.826c0.98276 1.0043 1.8166 1.826 1.8531 1.826 0.0364 0 0.41686-0.40958 0.84537-0.91017zm-26.942-6.2251 1.0368-1.0392-0.46552-0.92925c-0.59961-1.1969-0.73239-1.7077-0.78366-3.0147-0.0641-1.6335 0.20895-2.7422 1.0054-4.0828l0.34635-0.58299-1.046-1.0485c-0.5753-0.57669-1.0845-1.0363-1.1316-1.0214-0.0471 0.0149-0.27115 0.29128-0.49792 0.61415-1.8748 2.6693-2.2919 6.424-1.0628 9.5681 0.40445 1.0347 1.3065 2.5759 1.5076 2.5759 0.0301 0 0.52126-0.46767 1.0915-1.0393zm20.567 0.48237c1.1344-1.6034 1.7577-3.6628 1.7535-5.7931-4e-3 -2.2003-0.62198-4.1696-1.8729-5.9716-0.17604-0.25359-0.35874-0.46152-0.406-0.46207-0.0473-5.9e-4 -0.55586 0.47005-1.1302 1.0458l-1.0442 1.0468 0.2097 0.3322c1.6087 2.5483 1.6062 5.5512-7e-3 8.054-0.11989 0.18604-0.0878 0.22963 0.92091 1.2499 0.57482 0.58143 1.0847 1.0442 1.133 1.0284 0.0484-0.0159 0.24757-0.25446 0.44269-0.53026zm-9.352-0.03c1.1785-0.30141 2.1343-0.90161 2.9733-1.8671 0.54006-0.6215 1.0938-1.6626 1.2824-2.4109 0.17186-0.68192 0.16775-2.2777-8e-3 -2.9545-0.52923-2.0425-2.198-3.708-4.2679-4.2594-0.74352-0.19808-2.2216-0.1978-2.9633 5.9e-4 -2.0768 0.55538-3.7414 2.2181-4.2937 4.289-0.19697 0.73844-0.1925 2.2167 9e-3 2.956 0.54543 2.002 2.2575 3.7257 4.2077 4.2364 0.85937 0.22504 2.2024 0.22945 3.0602 0.0101z" style="fill:#aa0000;stroke-width:.084667"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.6 KiB |
BIN
img/pr_map.png
BIN
img/pr_map.png
Binary file not shown.
|
Before Width: | Height: | Size: 362 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
859
index.html
859
index.html
|
|
@ -1,425 +1,490 @@
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Miguel's Asteroid</title>
|
<meta charset="UTF-8" />
|
||||||
<meta charset="utf-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<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">
|
<title>El Asteroide De Miguel</title>
|
||||||
<meta name="keywords" content="global, template, html, sass, jquery">
|
|
||||||
<meta name="author" content="Bucky Maler">
|
|
||||||
<link rel="stylesheet" href="/asteroid/css/main.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></link>
|
||||||
|
<link rel="stylesheet" href="./styles.css"></link>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||||
|
<script src="./scripts.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$('.container').infiniteScroll({
|
||||||
|
// options
|
||||||
|
path: '.pagination__next',
|
||||||
|
append: '.post',
|
||||||
|
history: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bd-placeholder-img {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-anchor: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-placeholder-img-lg {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-example-divider {
|
||||||
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
|
background-color: rgba(0, 0, 0, .1);
|
||||||
|
border: solid rgba(0, 0, 0, .15);
|
||||||
|
border-width: 1px 0;
|
||||||
|
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.b-example-vr {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bi {
|
||||||
|
vertical-align: -.125em;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-scroller {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
height: 2.75rem;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-scroller .nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-top: -1px;
|
||||||
|
overflow-x: auto;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-bd-primary {
|
||||||
|
--bd-violet-bg: #712cf9;
|
||||||
|
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||||
|
|
||||||
|
--bs-btn-font-weight: 600;
|
||||||
|
--bs-btn-color: var(--bs-white);
|
||||||
|
--bs-btn-bg: var(--bd-violet-bg);
|
||||||
|
--bs-btn-border-color: var(--bd-violet-bg);
|
||||||
|
--bs-btn-hover-color: var(--bs-white);
|
||||||
|
--bs-btn-hover-bg: #6528e0;
|
||||||
|
--bs-btn-hover-border-color: #6528e0;
|
||||||
|
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||||
|
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||||
|
--bs-btn-active-bg: #5a23c8;
|
||||||
|
--bs-btn-active-border-color: #5a23c8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-mode-toggle {
|
||||||
|
z-index: 1500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-dark-custom {
|
||||||
|
background-color: #343a40; /* Slightly lighter than the default bg-dark */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-dark-custom:hover {
|
||||||
|
background-color: #23272b; /* Darken on hover for interaction feedback */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS used here will be applied after bootstrap.css */
|
||||||
|
.jumbotron{
|
||||||
|
position: relative;
|
||||||
|
z-index:-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#namecard{
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#video-background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: -1;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item { width: 200px; }
|
||||||
|
.grid-item--width2 { width: 400px; }
|
||||||
|
|
||||||
|
.white-bold-text {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
|
||||||
|
font-family: KHGummi;
|
||||||
|
src: url(./fonts/KHGummi.otf);
|
||||||
|
font-weight:400;
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
max-width: 100%; /* Ensure video doesn't exceed the container width */
|
||||||
|
height: auto; /* Maintain aspect ratio */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container video {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- notification for small viewports and landscape oriented smartphones -->
|
<header>
|
||||||
<div class="device-notification">
|
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||||
<a class="device-notification--logo" href="#0">
|
<div class="container-fluid">
|
||||||
<img src="assets/img/Highwind1_opt.png" alt="Global">
|
<img src="./img/Highwind1_opt.png" href="index.html" alt="GummiShip" style="transform: scale(0.9)";>
|
||||||
<p>Miguel's Asteroid</p>
|
|
||||||
</a>
|
|
||||||
<p class="device-notification--message">Try viewing on a bigger screen.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="perspective effect-rotate-left">
|
<h4 class="navbar-brand" href="#" style="color: aliceblue; font-family: KHGummi;">Miguel's Asteroid</h4>
|
||||||
<div class="container"><div class="outer-nav--return"></div>
|
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
|
||||||
<div id="viewport" class="l-viewport">
|
<span class="navbar-toggler-icon"></span>
|
||||||
<div class="l-wrapper">
|
|
||||||
<header class="header">
|
|
||||||
<!-- <button class="header--cta cta">Work with Me</button>-->
|
|
||||||
<div class="header--nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<nav class="l-side-nav">
|
|
||||||
<ul class="side-nav">
|
|
||||||
<li class="is-active"><span>Home</span></li>
|
|
||||||
<li><span>Interests</span></li>
|
|
||||||
<li><span>About</span></li>
|
|
||||||
<li><span>Contact</span></li>
|
|
||||||
<!--Here I am commenting out a menu item from the vertical side nav, reducing from 4 to 5-->
|
|
||||||
<!--<li><span>Work with Me</span></li>-->
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<ul class="l-main-content main-content">
|
|
||||||
<li class="l-section section section--is-active">
|
|
||||||
<div class="intro">
|
|
||||||
<div class="intro--banner">
|
|
||||||
<h1>Welcome<br>to my<br>asteroid.</h1>
|
|
||||||
|
|
||||||
<a href="https://library.miguelalmodo.com/">
|
|
||||||
<button class="cta">Check out a book
|
|
||||||
<svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<span class="btn-background"></span>
|
|
||||||
</button></a>
|
|
||||||
<br><br>
|
|
||||||
|
|
||||||
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
|
|
||||||
<button class="cta">Bookmarks
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<span class="btn-background"></span>
|
|
||||||
</button>
|
</button>
|
||||||
</a>
|
|
||||||
|
|
||||||
|
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
|
||||||
|
|
||||||
<img src="img/introduction-visual.png" alt="Welcome">
|
<div class="offcanvas-header">
|
||||||
</div>
|
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
|
||||||
<div class="intro--options">
|
|
||||||
<a href="https://uberspace.de">
|
|
||||||
<h3>Deploying Web Apps in Space
|
|
||||||
</h3>
|
|
||||||
<p>This website is hosted on Uberspace, a cool worker owned business that rents out server space.</p>
|
|
||||||
</a>
|
|
||||||
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
|
|
||||||
<h3>Creator Residency</h3>
|
|
||||||
<p>I'm in the Content Creator Residency with nos.social. Find me on Nostr!</p>
|
|
||||||
</a>
|
|
||||||
<a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
|
|
||||||
<h3>#CubaSIBloqeuoNO</h3>
|
|
||||||
<p>Read about my recent trips to Cuba, where I attended this year's May Day celebrations in Havana with organizers and union members from around
|
|
||||||
the world.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="l-section section">
|
|
||||||
<div class="work">
|
|
||||||
<h2>Public Interest Communications</h2>
|
|
||||||
<div class="work--lockup">
|
|
||||||
<ul class="slider">
|
|
||||||
<li class="slider--item slider--item-left">
|
|
||||||
<a href="https://forge.lightcrystal.systems/migs">
|
|
||||||
<div class="slider--item-image">
|
|
||||||
<img src="img/light_crystal.svg" alt="light crystal systems logo">
|
|
||||||
</div>
|
|
||||||
<p class="slider--item-title">Web Development</p>
|
|
||||||
<p class="slider--item-description">Weilding open source protocols in the battle for the Internet</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="slider--item slider--item-center">
|
|
||||||
<a href="https://podcastindex-org.github.io/docs-api/#overview--example-code">
|
|
||||||
<div class="slider--item-image">
|
|
||||||
<img src="img/pci_avatar.svg" alt="Podcasting Index logo">
|
|
||||||
</div>
|
|
||||||
<p class="slider--item-title">Podcast 2.0</p>
|
|
||||||
<p class="slider--item-description">The next generation of podcasts is here. Learn about the podcast index and RSS.</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li class="slider--item slider--item-right">
|
|
||||||
<a href="https://nostrmeet.me/_@migs.uber.space">
|
|
||||||
<div class="slider--item-image">
|
|
||||||
<img src="img/nostr-icon-white-256x256.png" alt="Alex Nowak">
|
|
||||||
</div>
|
|
||||||
<p class="slider--item-title">Social Media</p>
|
|
||||||
<p class="slider--item-description">Social Media is evolving. Ask me about alternative social media
|
|
||||||
protocols.</p>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<div class="slider--prev">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M561,1169C525,1155,10,640,3,612c-3-13,1-36,8-52c8-15,134-145,281-289C527,41,562,10,590,10c22,0,41,9,61,29
|
|
||||||
c55,55,49,64-163,278L296,510h575c564,0,576,0,597,20c46,43,37,109-18,137c-19,10-159,13-590,13l-565,1l182,180
|
|
||||||
c101,99,187,188,193,199c16,30,12,57-12,84C631,1174,595,1183,561,1169z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="slider--next">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="l-section section">
|
|
||||||
<div class="about">
|
|
||||||
<div class="about--banner">
|
|
||||||
<h2>Communications for the <br> public interest.</h2>
|
|
||||||
<a href="https://migs.uber.space/resumes/PIC.pdf">Resume
|
|
||||||
<span>
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</a><br>
|
|
||||||
<a href="https://migs.uber.space/resumes/PIC.pdf">In the news
|
|
||||||
<span>
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</a><br>
|
|
||||||
|
|
||||||
<a href="https://migs.uber.space/portfolio">Portfolio
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
<span>
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<video src="https://v.nostr.build/xE7Vl.webm" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="70%" height="70%" controls>
|
|
||||||
</div>
|
|
||||||
<div class="about--options">
|
|
||||||
<a href="#0">
|
|
||||||
<h3>Philosophy</h3>
|
|
||||||
</a>
|
|
||||||
<a href="#0">
|
|
||||||
<h3>Who is Miguel</h3>
|
|
||||||
</a>
|
|
||||||
<a href="#0">
|
|
||||||
<h3>Garden</h3>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="l-section section">
|
|
||||||
<div class="hire">
|
|
||||||
<h2>Got an idea? I want to hear about it.</h2>
|
|
||||||
<!-- checkout formspree.io for easy form setup -->
|
|
||||||
<form class="work-request">
|
|
||||||
|
|
||||||
<div class="work-request--options">
|
|
||||||
<span class="options-a">
|
|
||||||
<input id="opt-1" type="checkbox" value="app design">
|
|
||||||
<label for="opt-1">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Content Creation
|
|
||||||
</label>
|
|
||||||
<input id="opt-2" type="checkbox" value="graphic design">
|
|
||||||
<label for="opt-2">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Training
|
|
||||||
</label>
|
|
||||||
<input id="opt-3" type="checkbox" value="motion design">
|
|
||||||
<label for="opt-3">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Tech Consultation
|
|
||||||
</label>
|
|
||||||
</span>
|
|
||||||
<span class="options-b">
|
|
||||||
<input id="opt-4" type="checkbox" value="ux design">
|
|
||||||
<label for="opt-4">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Cooking
|
|
||||||
</label>
|
|
||||||
<input id="opt-5" type="checkbox" value="webdesign">
|
|
||||||
<label for="opt-5">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Communication Strategy
|
|
||||||
</label>
|
|
||||||
<input id="opt-6" type="checkbox" value="marketing">
|
|
||||||
<label for="opt-6">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Marketing
|
|
||||||
</label>
|
|
||||||
<input id="opt-6" type="checkbox" value="marketing">
|
|
||||||
<label for="opt-6">
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
|
||||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
|
||||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Just sayin hi
|
|
||||||
</label>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="work-request--information">
|
|
||||||
<div class="information-name">
|
|
||||||
<input id="name" type="text" spellcheck="false">
|
|
||||||
<label for="name">Name</label>
|
|
||||||
</div>
|
|
||||||
<div class="information-email">
|
|
||||||
<input id="email" type="email" spellcheck="false">
|
|
||||||
<label for="email">Email</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input type="submit" value="Send Request">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
|
||||||
<div class="contact">
|
|
||||||
<div class="contact--lockup">
|
|
||||||
|
|
||||||
<div class="modal">
|
<div class="offcanvas-body">
|
||||||
<div class="modal--information">
|
|
||||||
<p>Aguadilla, Puerto Rico</p>
|
<div class="text-center">
|
||||||
<a href="mailto:contact@miguelalmodo.com">contact@miguelalmodo.com</a>
|
<div class="d-inline-block text-center">
|
||||||
</div>
|
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!"
|
||||||
<ul class="modal--options">
|
style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
|
||||||
<li><a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">Nostr</a></li>
|
|
||||||
<li><a href="https://linkedin/in/miguelalmodo">LinkedIn</a></li>
|
<br>
|
||||||
<li><a href="mailto:contact@miguelalmodo.com">Send me an email</a></li>
|
<h2>Public Interest Communications </h2>
|
||||||
</ul>
|
<a href="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
|
||||||
</div>
|
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
|
||||||
</div>
|
<a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
|
||||||
|
<a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
|
||||||
|
<img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
|
||||||
|
<br><br>
|
||||||
|
<h6>Zap me Bitcoin!<br>ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
|
||||||
|
<div style= "text-align: end;">
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<button class="btn btn-secondary" href="#" disabled>View biography »</button>
|
||||||
-->
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
||||||
|
|
||||||
|
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<!-- <li class="l-section section">
|
<li class="nav-item dropdown">
|
||||||
<div class="hire">
|
<a class="nav-link" href="https://migs.uber.space/about.html">About</a>
|
||||||
<h2>Available for hire</h2>
|
|
||||||
checkout formspree.io for easy form setup
|
|
||||||
<form class="work-request">
|
|
||||||
|
|
||||||
<div class="work-request--options">
|
</li>
|
||||||
<span class="options-a">
|
|
||||||
<input id="opt-1" type="checkbox" value="app design">
|
<li class="nav-item">
|
||||||
<label for="opt-1">
|
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
|
||||||
<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"
|
</li>
|
||||||
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">
|
<li class="nav-item dropdown">
|
||||||
<div class="information-name">
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
<input id="name" type="text" spellcheck="false">
|
Collaborate
|
||||||
<label for="name">Name</label>
|
</a>
|
||||||
</div>
|
<ul class="dropdown-menu dropdown-menu-dark">
|
||||||
<div class="information-email">
|
<!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
|
||||||
<input id="email" type="email" spellcheck="false">
|
<li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>
|
||||||
<label for="email">Email</label>
|
<!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input type="submit" value="Send Request">
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</li> -->
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</li>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul class="outer-nav">
|
|
||||||
<a href="https://uberspace.de/en"><img src="https://dashboard.uberspace.de/static/img/badge_dark.png"></a>
|
|
||||||
<li class="is-active">Home</li>
|
|
||||||
<li>Interests</li>
|
|
||||||
<li>About</li>
|
|
||||||
<li>Contact</li>
|
|
||||||
|
|
||||||
<!-- <li>Work with Me</li> -->
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Resumes
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-dark">
|
||||||
|
<!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
|
||||||
|
<li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Garden
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-dark">
|
||||||
|
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Bookshelf</a></li>
|
||||||
|
<li><a class="dropdown-item" href="https://migs.uber.space/blog">Chronicles</a></li>
|
||||||
|
<li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="my-5">
|
||||||
|
<div class="p-5 text-center bg-body-tertiary">
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1 class="text-body-emphasis quote-banner">All aboard the Gummi Ship!</h1>
|
||||||
|
|
||||||
|
<p class="col-lg-8 mx-auto lead">
|
||||||
|
Thanks for visiting my asteroid. Explore the depths of uberspace
|
||||||
|
while we battle space pirates and save worlds from corporate tech!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://migs.uber.space/about.html';">About</button>
|
||||||
|
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://github.com/miggymofongo';">Git</button>
|
||||||
|
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Bookshelf</button>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1> Carta de Presentacion para PlenitudPR </h1>
|
||||||
|
<div class="video-container">
|
||||||
|
<video src="https://v.nostr.build/7GeB3.mp4" style="align-items: center;" controls>
|
||||||
|
Carta de Presentacion para PlenitudPR
|
||||||
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
|
||||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
|
<section style="background-color: #23272b;">
|
||||||
<script src="js/functions-min.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
<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>
|
</html>
|
||||||
1
js/functions-min.js
vendored
1
js/functions-min.js
vendored
File diff suppressed because one or more lines are too long
280
js/functions.js
280
js/functions.js
|
|
@ -1,280 +0,0 @@
|
||||||
// @codekit-prepend "/vendor/hammer-2.0.8.js";
|
|
||||||
|
|
||||||
$( document ).ready(function() {
|
|
||||||
|
|
||||||
// DOMMouseScroll included for firefox support
|
|
||||||
var canScroll = true,
|
|
||||||
scrollController = null;
|
|
||||||
$(this).on('mousewheel DOMMouseScroll', function(e){
|
|
||||||
|
|
||||||
if (!($('.outer-nav').hasClass('is-vis'))) {
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20;
|
|
||||||
|
|
||||||
if (delta > 50 && canScroll) {
|
|
||||||
canScroll = false;
|
|
||||||
clearTimeout(scrollController);
|
|
||||||
scrollController = setTimeout(function(){
|
|
||||||
canScroll = true;
|
|
||||||
}, 800);
|
|
||||||
updateHelper(1);
|
|
||||||
}
|
|
||||||
else if (delta < -50 && canScroll) {
|
|
||||||
canScroll = false;
|
|
||||||
clearTimeout(scrollController);
|
|
||||||
scrollController = setTimeout(function(){
|
|
||||||
canScroll = true;
|
|
||||||
}, 800);
|
|
||||||
updateHelper(-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.side-nav li, .outer-nav li').click(function(){
|
|
||||||
|
|
||||||
if (!($(this).hasClass('is-active'))) {
|
|
||||||
|
|
||||||
var $this = $(this),
|
|
||||||
curActive = $this.parent().find('.is-active'),
|
|
||||||
curPos = $this.parent().children().index(curActive),
|
|
||||||
nextPos = $this.parent().children().index($this),
|
|
||||||
lastItem = $(this).parent().children().length - 1;
|
|
||||||
|
|
||||||
updateNavs(nextPos);
|
|
||||||
updateContent(curPos, nextPos, lastItem);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.cta').click(function(){
|
|
||||||
|
|
||||||
var curActive = $('.side-nav').find('.is-active'),
|
|
||||||
curPos = $('.side-nav').children().index(curActive),
|
|
||||||
lastItem = $('.side-nav').children().length - 1,
|
|
||||||
nextPos = lastItem;
|
|
||||||
|
|
||||||
updateNavs(lastItem);
|
|
||||||
updateContent(curPos, nextPos, lastItem);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// swipe support for touch devices
|
|
||||||
var targetElement = document.getElementById('viewport'),
|
|
||||||
mc = new Hammer(targetElement);
|
|
||||||
mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
|
|
||||||
mc.on('swipeup swipedown', function(e) {
|
|
||||||
|
|
||||||
updateHelper(e);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).keyup(function(e){
|
|
||||||
|
|
||||||
if (!($('.outer-nav').hasClass('is-vis'))) {
|
|
||||||
e.preventDefault();
|
|
||||||
updateHelper(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// determine scroll, swipe, and arrow key direction
|
|
||||||
function updateHelper(param) {
|
|
||||||
|
|
||||||
var curActive = $('.side-nav').find('.is-active'),
|
|
||||||
curPos = $('.side-nav').children().index(curActive),
|
|
||||||
lastItem = $('.side-nav').children().length - 1,
|
|
||||||
nextPos = 0;
|
|
||||||
|
|
||||||
if (param.type === "swipeup" || param.keyCode === 40 || param > 0) {
|
|
||||||
if (curPos !== lastItem) {
|
|
||||||
nextPos = curPos + 1;
|
|
||||||
updateNavs(nextPos);
|
|
||||||
updateContent(curPos, nextPos, lastItem);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
updateNavs(nextPos);
|
|
||||||
updateContent(curPos, nextPos, lastItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){
|
|
||||||
if (curPos !== 0){
|
|
||||||
nextPos = curPos - 1;
|
|
||||||
updateNavs(nextPos);
|
|
||||||
updateContent(curPos, nextPos, lastItem);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
nextPos = lastItem;
|
|
||||||
updateNavs(nextPos);
|
|
||||||
updateContent(curPos, nextPos, lastItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// sync side and outer navigations
|
|
||||||
function updateNavs(nextPos) {
|
|
||||||
|
|
||||||
$('.side-nav, .outer-nav').children().removeClass('is-active');
|
|
||||||
$('.side-nav').children().eq(nextPos).addClass('is-active');
|
|
||||||
$('.outer-nav').children().eq(nextPos).addClass('is-active');
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// update main content area
|
|
||||||
function updateContent(curPos, nextPos, lastItem) {
|
|
||||||
|
|
||||||
$('.main-content').children().removeClass('section--is-active');
|
|
||||||
$('.main-content').children().eq(nextPos).addClass('section--is-active');
|
|
||||||
$('.main-content .section').children().removeClass('section--next section--prev');
|
|
||||||
|
|
||||||
if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) {
|
|
||||||
$('.main-content .section').children().removeClass('section--next section--prev');
|
|
||||||
}
|
|
||||||
else if (curPos < nextPos) {
|
|
||||||
$('.main-content').children().eq(curPos).children().addClass('section--next');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$('.main-content').children().eq(curPos).children().addClass('section--prev');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (nextPos !== 0 && nextPos !== lastItem) {
|
|
||||||
$('.header--cta').addClass('is-active');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$('.header--cta').removeClass('is-active');
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function outerNav() {
|
|
||||||
|
|
||||||
$('.header--nav-toggle').click(function(){
|
|
||||||
|
|
||||||
$('.perspective').addClass('perspective--modalview');
|
|
||||||
setTimeout(function(){
|
|
||||||
$('.perspective').addClass('effect-rotate-left--animate');
|
|
||||||
}, 25);
|
|
||||||
$('.outer-nav, .outer-nav li, .outer-nav--return').addClass('is-vis');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.outer-nav--return, .outer-nav li').click(function(){
|
|
||||||
|
|
||||||
$('.perspective').removeClass('effect-rotate-left--animate');
|
|
||||||
setTimeout(function(){
|
|
||||||
$('.perspective').removeClass('perspective--modalview');
|
|
||||||
}, 400);
|
|
||||||
$('.outer-nav, .outer-nav li, .outer-nav--return').removeClass('is-vis');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function workSlider() {
|
|
||||||
|
|
||||||
$('.slider--prev, .slider--next').click(function() {
|
|
||||||
|
|
||||||
var $this = $(this),
|
|
||||||
curLeft = $('.slider').find('.slider--item-left'),
|
|
||||||
curLeftPos = $('.slider').children().index(curLeft),
|
|
||||||
curCenter = $('.slider').find('.slider--item-center'),
|
|
||||||
curCenterPos = $('.slider').children().index(curCenter),
|
|
||||||
curRight = $('.slider').find('.slider--item-right'),
|
|
||||||
curRightPos = $('.slider').children().index(curRight),
|
|
||||||
totalWorks = $('.slider').children().length,
|
|
||||||
$left = $('.slider--item-left'),
|
|
||||||
$center = $('.slider--item-center'),
|
|
||||||
$right = $('.slider--item-right'),
|
|
||||||
$item = $('.slider--item');
|
|
||||||
|
|
||||||
$('.slider').animate({ opacity : 0 }, 400);
|
|
||||||
|
|
||||||
setTimeout(function(){
|
|
||||||
|
|
||||||
if ($this.hasClass('slider--next')) {
|
|
||||||
if (curLeftPos < totalWorks - 1 && curCenterPos < totalWorks - 1 && curRightPos < totalWorks - 1) {
|
|
||||||
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
|
|
||||||
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
|
|
||||||
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (curLeftPos === totalWorks - 1) {
|
|
||||||
$item.removeClass('slider--item-left').first().addClass('slider--item-left');
|
|
||||||
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
|
|
||||||
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
else if (curCenterPos === totalWorks - 1) {
|
|
||||||
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
|
|
||||||
$item.removeClass('slider--item-center').first().addClass('slider--item-center');
|
|
||||||
$right.removeClass('slider--item-right').next().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$left.removeClass('slider--item-left').next().addClass('slider--item-left');
|
|
||||||
$center.removeClass('slider--item-center').next().addClass('slider--item-center');
|
|
||||||
$item.removeClass('slider--item-right').first().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (curLeftPos !== 0 && curCenterPos !== 0 && curRightPos !== 0) {
|
|
||||||
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
|
|
||||||
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
|
|
||||||
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (curLeftPos === 0) {
|
|
||||||
$item.removeClass('slider--item-left').last().addClass('slider--item-left');
|
|
||||||
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
|
|
||||||
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
else if (curCenterPos === 0) {
|
|
||||||
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
|
|
||||||
$item.removeClass('slider--item-center').last().addClass('slider--item-center');
|
|
||||||
$right.removeClass('slider--item-right').prev().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$left.removeClass('slider--item-left').prev().addClass('slider--item-left');
|
|
||||||
$center.removeClass('slider--item-center').prev().addClass('slider--item-center');
|
|
||||||
$item.removeClass('slider--item-right').last().addClass('slider--item-right');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}, 400);
|
|
||||||
|
|
||||||
$('.slider').animate({ opacity : 1 }, 400);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function transitionLabels() {
|
|
||||||
|
|
||||||
$('.work-request--information input').focusout(function(){
|
|
||||||
|
|
||||||
var textVal = $(this).val();
|
|
||||||
|
|
||||||
if (textVal === "") {
|
|
||||||
$(this).removeClass('has-value');
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$(this).addClass('has-value');
|
|
||||||
}
|
|
||||||
|
|
||||||
// correct mobile device window position
|
|
||||||
window.scrollTo(0, 0);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
outerNav();
|
|
||||||
workSlider();
|
|
||||||
transitionLabels();
|
|
||||||
|
|
||||||
});
|
|
||||||
2643
js/vendor/hammer-2.0.8.js
vendored
2643
js/vendor/hammer-2.0.8.js
vendored
File diff suppressed because it is too large
Load diff
4
js/vendor/jquery-2.2.4.min.js
vendored
4
js/vendor/jquery-2.2.4.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue