mirror of
https://github.com/miggymofongo/asteroid.git
synced 2024-11-23 21:50:28 +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 |
849
index.html
849
index.html
|
|
@ -1,425 +1,490 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Miguel's Asteroid</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="HTML5 website template">
|
||||
<meta name="keywords" content="global, template, html, sass, jquery">
|
||||
<meta name="author" content="Bucky Maler">
|
||||
<link rel="stylesheet" href="/asteroid/css/main.css">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
|
||||
|
||||
<title>El Asteroide De Miguel</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></link>
|
||||
<link rel="stylesheet" href="./styles.css"></link>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||||
<script src="./scripts.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
$('.container').infiniteScroll({
|
||||
// options
|
||||
path: '.pagination__next',
|
||||
append: '.post',
|
||||
history: false,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.b-example-divider {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border: solid rgba(0, 0, 0, .15);
|
||||
border-width: 1px 0;
|
||||
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.b-example-vr {
|
||||
flex-shrink: 0;
|
||||
width: 1.5rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.bi {
|
||||
vertical-align: -.125em;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.btn-bd-primary {
|
||||
--bd-violet-bg: #712cf9;
|
||||
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
||||
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-color: var(--bs-white);
|
||||
--bs-btn-bg: var(--bd-violet-bg);
|
||||
--bs-btn-border-color: var(--bd-violet-bg);
|
||||
--bs-btn-hover-color: var(--bs-white);
|
||||
--bs-btn-hover-bg: #6528e0;
|
||||
--bs-btn-hover-border-color: #6528e0;
|
||||
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
||||
--bs-btn-active-color: var(--bs-btn-hover-color);
|
||||
--bs-btn-active-bg: #5a23c8;
|
||||
--bs-btn-active-border-color: #5a23c8;
|
||||
}
|
||||
|
||||
.bd-mode-toggle {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.bd-mode-toggle .dropdown-menu .active .bi {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.photo {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.btn-dark-custom {
|
||||
background-color: #343a40; /* Slightly lighter than the default bg-dark */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-dark-custom:hover {
|
||||
background-color: #23272b; /* Darken on hover for interaction feedback */
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* CSS used here will be applied after bootstrap.css */
|
||||
.jumbotron{
|
||||
position: relative;
|
||||
z-index:-2;
|
||||
}
|
||||
|
||||
#namecard{
|
||||
align-content: center;
|
||||
|
||||
}
|
||||
|
||||
#video-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.grid-item { width: 200px; }
|
||||
.grid-item--width2 { width: 400px; }
|
||||
|
||||
.white-bold-text {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
|
||||
font-family: KHGummi;
|
||||
src: url(./fonts/KHGummi.otf);
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
video {
|
||||
max-width: 100%; /* Ensure video doesn't exceed the container width */
|
||||
height: auto; /* Maintain aspect ratio */
|
||||
}
|
||||
|
||||
|
||||
.video-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- notification for small viewports and landscape oriented smartphones -->
|
||||
<div class="device-notification">
|
||||
<a class="device-notification--logo" href="#0">
|
||||
<img src="assets/img/Highwind1_opt.png" alt="Global">
|
||||
<p>Miguel's Asteroid</p>
|
||||
</a>
|
||||
<p class="device-notification--message">Try viewing on a bigger screen.</p>
|
||||
</div>
|
||||
<header>
|
||||
<nav class="navbar navbar-dark bg-dark fixed-top">
|
||||
<div class="container-fluid">
|
||||
<img src="./img/Highwind1_opt.png" href="index.html" alt="GummiShip" style="transform: scale(0.9)";>
|
||||
|
||||
<div class="perspective effect-rotate-left">
|
||||
<div class="container"><div class="outer-nav--return"></div>
|
||||
<div id="viewport" class="l-viewport">
|
||||
<div class="l-wrapper">
|
||||
<header class="header">
|
||||
<!-- <button class="header--cta cta">Work with Me</button>-->
|
||||
<div class="header--nav-toggle">
|
||||
<span></span>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="l-side-nav">
|
||||
<ul class="side-nav">
|
||||
<li class="is-active"><span>Home</span></li>
|
||||
<li><span>Interests</span></li>
|
||||
<li><span>About</span></li>
|
||||
<li><span>Contact</span></li>
|
||||
<!--Here I am commenting out a menu item from the vertical side nav, reducing from 4 to 5-->
|
||||
<!--<li><span>Work with Me</span></li>-->
|
||||
</ul>
|
||||
</nav>
|
||||
<ul class="l-main-content main-content">
|
||||
<li class="l-section section section--is-active">
|
||||
<div class="intro">
|
||||
<div class="intro--banner">
|
||||
<h1>Welcome<br>to my<br>asteroid.</h1>
|
||||
|
||||
<a href="https://library.miguelalmodo.com/">
|
||||
<button class="cta">Check out a book
|
||||
<svg version="1.1" id="Layer_1" href="https://library.miguelalmodo.com" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="btn-background"></span>
|
||||
</button></a>
|
||||
<br><br>
|
||||
|
||||
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
|
||||
<button class="cta">Bookmarks
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="btn-background"></span>
|
||||
<h4 class="navbar-brand" href="#" style="color: aliceblue; font-family: KHGummi;">Miguel's Asteroid</h4>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
|
||||
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel" style="font-family: KHGummi;">Cockpit</h5>
|
||||
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<img src="img/introduction-visual.png" alt="Welcome">
|
||||
</div>
|
||||
<div class="intro--options">
|
||||
<a href="https://uberspace.de">
|
||||
<h3>Deploying Web Apps in Space
|
||||
</h3>
|
||||
<p>This website is hosted on Uberspace, a cool worker owned business that rents out server space.</p>
|
||||
</a>
|
||||
<a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">
|
||||
<h3>Creator Residency</h3>
|
||||
<p>I'm in the Content Creator Residency with nos.social. Find me on Nostr!</p>
|
||||
</a>
|
||||
<a href="https://yakihonne.com/article/naddr1qvzqqqr4gupzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txqq2kgvrrd4zng32dv4fnx6mvgf8n2wr5dc68zlqdkj9">
|
||||
<h3>#CubaSIBloqeuoNO</h3>
|
||||
<p>Read about my recent trips to Cuba, where I attended this year's May Day celebrations in Havana with organizers and union members from around
|
||||
the world.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="l-section section">
|
||||
<div class="work">
|
||||
<div class="offcanvas-body">
|
||||
|
||||
<div class="text-center">
|
||||
<div class="d-inline-block text-center">
|
||||
<img src="./img/WEPA.png" alt="headshot of miguel yelling WEPA!"
|
||||
style="width: 300px; height: 300px; object-fit: cover;" alt="Headshot of Miguel"></img>
|
||||
|
||||
<br>
|
||||
<h2>Public Interest Communications </h2>
|
||||
<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="mailto:contact@miguelalmodo.com"><img src="./img/email.png" alt="mail icon" style="width: 50px; height: 50px;"></a>
|
||||
<a href="https://yakihonne.com/users/nprofile1qyw8wumn8ghj7mn0wd68ytfsxyh8jcttd95x7mnwv5hxxmmdqyw8wumn8ghj7mn0wd68ytfsxgh8jcttd95x7mnwv5hxxmmdqy08wumn8ghj7mn0wd68ytfsxvhxgmmjv9nxzcm5dae8jtn0wfnsz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpremhxue69uhkummnw3ez6vpj9ejx7unpveskxar0wfujummjvuqzpmyk2sz7zxn2vxrtylay2x30lsfedm083q7jagguxtaa933ej6txsnr0xw"><img src="./img/running-nostr.gif" alt="running nostrich gif" style="width: 50px; height: 50px;"></a>
|
||||
<a href="https://www.linkedin.com/in/miguelalmodo/"><img src="./img/LinkedIN.png" alt="linkedin logo" style="width: 50px; height: 50px;"></a>
|
||||
<a href="https://www.github.com/miggymofongo/"><img src="./img/Github.png" alt="github logo" style="width: 50px; height: 50px;"></a>
|
||||
<img src="./img/lightning.png" style="width: 80px; height: 80px; align-items: center;">
|
||||
<br><br>
|
||||
<h6>Zap me Bitcoin!<br>ancientwildflower33459@getalby.com</h6> <img src="./img/code.png" style="width: 100px; height:100px;">
|
||||
<div style= "text-align: end;">
|
||||
|
||||
<a href="https://migs.uber.space/portfolio">Portfolio
|
||||
<span>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 118" style="enable-background:new 0 0 150 118;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,118.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M870,1167c-34-17-55-57-46-90c3-15,81-100,194-211l187-185l-565-1c-431,0-571-3-590-13c-55-28-64-94-18-137c21-20,33-20,597-20h575l-192-193C800,103,794,94,849,39c20-20,39-29,61-29c28,0,63,30,298,262c147,144,272,271,279,282c30,51,23,60-219,304C947,1180,926,1196,870,1167z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<video src="https://v.nostr.build/xE7Vl.webm" alt="video of miguel soliciting cuba donations" style="padding-left: 40%; padding-bottom: 80%;" width="70%" height="70%" controls>
|
||||
</div>
|
||||
<div class="about--options">
|
||||
<a href="#0">
|
||||
<h3>Philosophy</h3>
|
||||
</a>
|
||||
<a href="#0">
|
||||
<h3>Who is Miguel</h3>
|
||||
</a>
|
||||
<a href="#0">
|
||||
<h3>Garden</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="l-section section">
|
||||
<div class="hire">
|
||||
<h2>Got an idea? I want to hear about it.</h2>
|
||||
<!-- checkout formspree.io for easy form setup -->
|
||||
<form class="work-request">
|
||||
|
||||
<div class="work-request--options">
|
||||
<span class="options-a">
|
||||
<input id="opt-1" type="checkbox" value="app design">
|
||||
<label for="opt-1">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Content Creation
|
||||
</label>
|
||||
<input id="opt-2" type="checkbox" value="graphic design">
|
||||
<label for="opt-2">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Training
|
||||
</label>
|
||||
<input id="opt-3" type="checkbox" value="motion design">
|
||||
<label for="opt-3">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Tech Consultation
|
||||
</label>
|
||||
</span>
|
||||
<span class="options-b">
|
||||
<input id="opt-4" type="checkbox" value="ux design">
|
||||
<label for="opt-4">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Cooking
|
||||
</label>
|
||||
<input id="opt-5" type="checkbox" value="webdesign">
|
||||
<label for="opt-5">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Communication Strategy
|
||||
</label>
|
||||
<input id="opt-6" type="checkbox" value="marketing">
|
||||
<label for="opt-6">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Marketing
|
||||
</label>
|
||||
<input id="opt-6" type="checkbox" value="marketing">
|
||||
<label for="opt-6">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Just sayin hi
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="work-request--information">
|
||||
<div class="information-name">
|
||||
<input id="name" type="text" spellcheck="false">
|
||||
<label for="name">Name</label>
|
||||
</div>
|
||||
<div class="information-email">
|
||||
<input id="email" type="email" spellcheck="false">
|
||||
<label for="email">Email</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" value="Send Request">
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="contact">
|
||||
<div class="contact--lockup">
|
||||
|
||||
<div class="modal">
|
||||
<div class="modal--information">
|
||||
<p>Aguadilla, Puerto Rico</p>
|
||||
<a href="mailto:contact@miguelalmodo.com">contact@miguelalmodo.com</a>
|
||||
</div>
|
||||
<ul class="modal--options">
|
||||
<li><a href="https://nostree.me/npub1ajt9gp0prf4xrp4j07j9rghlcyukahncs0fw5ywr977jccued9nqrcc0cs">Nostr</a></li>
|
||||
<li><a href="https://linkedin/in/miguelalmodo">LinkedIn</a></li>
|
||||
<li><a href="mailto:contact@miguelalmodo.com">Send me an email</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="l-section section">
|
||||
<div class="hire">
|
||||
<h2>Available for hire</h2>
|
||||
checkout formspree.io for easy form setup
|
||||
<form class="work-request">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="https://migs.uber.space/about.html">About</a>
|
||||
|
||||
<div class="work-request--options">
|
||||
<span class="options-a">
|
||||
<input id="opt-1" type="checkbox" value="app design">
|
||||
<label for="opt-1">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Content Creation
|
||||
</label>
|
||||
<input id="opt-2" type="checkbox" value="graphic design">
|
||||
<label for="opt-2">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Web Development
|
||||
</label>
|
||||
<input id="opt-3" type="checkbox" value="motion design">
|
||||
<label for="opt-3">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Tech Consultation
|
||||
</label>
|
||||
</span>
|
||||
<span class="options-b">
|
||||
<input id="opt-4" type="checkbox" value="ux design">
|
||||
<label for="opt-4">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Cooking
|
||||
</label>
|
||||
<input id="opt-5" type="checkbox" value="webdesign">
|
||||
<label for="opt-5">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Communication Strategy
|
||||
</label>
|
||||
<input id="opt-6" type="checkbox" value="marketing">
|
||||
<label for="opt-6">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 150 111" style="enable-background:new 0 0 150 111;" xml:space="preserve">
|
||||
<g transform="translate(0.000000,111.000000) scale(0.100000,-0.100000)">
|
||||
<path d="M950,705L555,310L360,505C253,612,160,700,155,700c-6,0-44-34-85-75l-75-75l278-278L550-5l475,475c261,261,475,480,475,485c0,13-132,145-145,145C1349,1100,1167,922,950,705z"/>
|
||||
</g>
|
||||
</svg>
|
||||
Marketing
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://yakihonne.com/users/nprofile1qqswe9j5qhs356nps6e8lfz35tluzwtwmeug85h2z8pjl0fvvwvkjespr3mhxue69uhkummnw3ez6vp39eukz6mfdphkumn99e3k7mgpr3mhxue69uhkummnw3ez6vpj9eukz6mfdphkumn99e3k7mgpremhxue69uhkummnw3ez6vpn9ejx7unpveskxar0wfujummjvuq3gamnwvaz7tmjv4kxz7fwv3sk6atn9e5k7qg7waehxw309ahx7um5wgknqv3wv3hhyctxv93hgmmj0yhx7un8rfe7nx">Nostr</a>
|
||||
</li>
|
||||
|
||||
|
||||
<div class="work-request--information">
|
||||
<div class="information-name">
|
||||
<input id="name" type="text" spellcheck="false">
|
||||
<label for="name">Name</label>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Collaborate
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<!-- <li><a class="dropdown-item" href="#">Content Production</a></li> -->
|
||||
<li><a class="dropdown-item" href="https://www.github.com/miggymofongo/">Code</a></li>
|
||||
<!--<li><a class="dropdown-item" href="#">Campaign Strategy</a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Resumes
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<!--<li><a class="dropdown-item" href="#">Hospitality</a></li>-->
|
||||
<li><a class="dropdown-item" href="https://migs.uber.space/resumes/PIC.pdf">Public Interest Communications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Garden
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark">
|
||||
<li><a class="dropdown-item" href="https://library.miguelalmodo.com/#">Bookshelf</a></li>
|
||||
<li><a class="dropdown-item" href="https://migs.uber.space/blog">Chronicles</a></li>
|
||||
<li><a class="dropdown-item" href="https://github.com/miggymofongo/asteroid/blob/main/scripts.js">Quote Shuffler</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="information-email">
|
||||
<input id="email" type="email" spellcheck="false">
|
||||
<label for="email">Email</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" value="Send Request">
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="my-5">
|
||||
<div class="p-5 text-center bg-body-tertiary">
|
||||
<div class="container py-5">
|
||||
<h1 class="text-body-emphasis quote-banner">All aboard the Gummi Ship!</h1>
|
||||
|
||||
<p class="col-lg-8 mx-auto lead">
|
||||
Thanks for visiting my asteroid. Explore the depths of uberspace
|
||||
while we battle space pirates and save worlds from corporate tech!
|
||||
</p>
|
||||
|
||||
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://migs.uber.space/about.html';">About</button>
|
||||
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://github.com/miggymofongo';">Git</button>
|
||||
<button class="btn btn-dark-custom btn-lg" type="button" onclick="window.location.href='https://library.miguelalmodo.com';">Bookshelf</button>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1> Carta de Presentacion para PlenitudPR </h1>
|
||||
<div class="video-container">
|
||||
<video src="https://v.nostr.build/7GeB3.mp4" style="align-items: center;" controls>
|
||||
Carta de Presentacion para PlenitudPR
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section style="background-color: #23272b;">
|
||||
|
||||
|
||||
|
||||
<div class="container px-4 py-5" style="background-color: #23272b;">
|
||||
<h2 class="pb-2 border-bottom" style="color: aliceblue; font-family: KHGummi;">Let's collaborate.
|
||||
|
||||
    
|
||||
    
|
||||
|
||||
<img src="img/leroy_opt.png" alt="pic of leroy from the movie leroy and stich"> </h2>
|
||||
|
||||
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
|
||||
<div class="d-flex flex-column align-items-start gap-2">
|
||||
<h3 class="fw-bold" style="color: aliceblue;">Communications for the Public Good</h3>
|
||||
<p style="color: rgb(255, 255, 255);">The <a
|
||||
href="https://migs.uber.space/blog/corporate-social-media-is-killing-us">
|
||||
corporate social media landscape looks grim.</a>
|
||||
They are tearing our society apart apart with the constant
|
||||
bombardment of advertising and antagonizing algorithms.
|
||||
Movements in 2024 need a robust communication strategy and the power of a
|
||||
decentralized internet. It's on us to take back the digital commons once and for all.
|
||||
</a></p>
|
||||
<!-- <div class="container">
|
||||
|
||||
<form onsubmit="sendEmail()" style="color: rgb(255, 255, 255);">
|
||||
<h4 style="color: rgb(255, 255, 255);">Send me an email and get a response back
|
||||
within 48 hours! </h4>
|
||||
<label for="text">Your Name:</label>
|
||||
<input type="text" id="name" placeholder="Your name" required>
|
||||
|
||||
<label for="email">Email ID:</label>
|
||||
<input type="email" id="email" placeholder="Email id" required>
|
||||
|
||||
<label for="message">Your Message:</label>
|
||||
<textarea id="message" rows="4" placeholder="What are your thoughts?" required></textarea>
|
||||
|
||||
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
<script src="./smtp.js"></script>
|
||||
<script>
|
||||
function sendEmail(){
|
||||
Email.sendEmail({
|
||||
Host: "smtppro.zoho.com",
|
||||
Username : "contact@miguelalmodo.com",
|
||||
Password : "EUfnEQ47d7iM",
|
||||
To : "recipient@example.com",
|
||||
From : document.getElementById("email").value,
|
||||
Subject: "We met at the protest",
|
||||
Body : "Free Palestine!"
|
||||
}).then(
|
||||
message => alert(message)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</div>-->
|
||||
|
||||
|
||||
|
||||
<a href="mailto:contact@miguelalmodo.com" class="btn btn-light btn-lg">
|
||||
Click to open a self - addressed email message in your favorite
|
||||
client.</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row row-cols-1 row-cols-sm-2 g-4">
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="outer-nav">
|
||||
<a href="https://uberspace.de/en"><img src="https://dashboard.uberspace.de/static/img/badge_dark.png"></a>
|
||||
<li class="is-active">Home</li>
|
||||
<li>Interests</li>
|
||||
<li>About</li>
|
||||
<li>Contact</li>
|
||||
|
||||
<!-- <li>Work with Me</li> -->
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-2.2.4.min.js"><\/script>')</script>
|
||||
<script src="js/functions-min.js"></script>
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Open source strategy.</h4>
|
||||
<p style="color: rgb(255, 255, 255);">Break the tech monopoly with open source software.
|
||||
Power map your "big bosses" and chart your path to sustainable change.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Cocreate meaning with your community.</h4>
|
||||
<p style="color: rgb(255, 255, 255);">Rally your
|
||||
community around shared values using a VPSA (Values, Problem, Solution, Action)
|
||||
framework.</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-2">
|
||||
|
||||
|
||||
<h4 class="fw-semibold mb-0" style="color: rgb(255, 255, 255);">Training</h4>
|
||||
<p style="color: rgb(255, 255, 255);">It seems like there's a new thing every couple months.
|
||||
Have questions about crypto or decentralized social media?
|
||||
Request a training to stay ahead of the curve.</p>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<span class="text-muted">© 2024 Miguel Almodóvar</span> <span style="font-weight: bolder;"><a href="https://uberspace.de/en/about/";>This website is hosted on an asteroid in uberspace!</a></span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1
js/functions-min.js
vendored
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