diff --git a/404.html b/404.html index 513d24c..c22e349 100644 --- a/404.html +++ b/404.html @@ -1,119 +1,125 @@ - - + + - - - 404! - inktrinket + + +You've Fallen Too Far... + + - .q-mark__l{ - font-variation-settings: "wght" 200, "wdth" 100, "slnt" 0; - top: 50%; - left: 35%; - } - .q-mark__l::before{ - font-variation-settings: "wght" 100, "wdth" 100, "slnt" 0; - top: 150%; - left: -30%; - font-size: calc(var(--font-size) - var(--font-mod)); - } - .q-mark__l::after{ - font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0; - top: 105%; - left: 180%; - font-size: calc(var(--font-size) + var(--font-mod)); - } + +
+

+

404

+
+ + + + - \ No newline at end of file + diff --git a/BG/bg.css b/BG/bg.css new file mode 100644 index 0000000..d332c12 --- /dev/null +++ b/BG/bg.css @@ -0,0 +1,190 @@ +.upperGradient{ + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); +} + +.light { + position: absolute; + width: 0px; + opacity: .9; + background-color: white; + box-shadow: rgba(255,255,255,0.5) 0px 0px 2px 2px; + top: 100vh; + bottom: 0px; + left: 0px; + right: 0px; + margin: auto; + z-index: -100; +} + +.x1{ + -webkit-animation: floatUp 1s infinite linear; + -moz-animation: floatUp 1s infinite linear; + -o-animation: floatUp 1s infinite linear; + animation: floatUp 1s infinite linear; + -webkit-transform: scale(1.0); + -moz-transform: scale(1.0); + -o-transform: scale(1.0); + transform: scale(1.0); +} + +.x2{ + -webkit-animation: floatUp 2s infinite linear; + -moz-animation: floatUp 2s infinite linear; + -o-animation: floatUp 2s infinite linear; + animation: floatUp 2s infinite linear; + -webkit-transform: scale(1.6); + -moz-transform: scale(1.6); + -o-transform: scale(1.6); + transform: scale(1.6); + left: 15%; +} + +.x3{ + -webkit-animation: floatUp 1.1s infinite linear; + -moz-animation: floatUp 1.1s infinite linear; + -o-animation: floatUp 1.1s infinite linear; + animation: floatUp 2.5s infinite linear; + -webkit-transform: scale(.5); + -moz-transform: scale(.5); + -o-transform: scale(.5); + transform: scale(.5); + left: -15%; +} + +.x4{ + -webkit-animation: floatUp 1.3s infinite linear; + -moz-animation: floatUp 1.3s infinite linear; + -o-animation: floatUp 1.3s infinite linear; + animation: floatUp 1.3s infinite linear; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + transform: scale(1.2); + left: -34%; +} + +.x5{ + -webkit-animation: floatUp 2.2s infinite linear; + -moz-animation: floatUp 2.2s infinite linear; + -o-animation: floatUp 2.2s infinite linear; + animation: floatUp 2.2s infinite linear; + -webkit-transform: scale(2.2); + -moz-transform: scale(2.2); + -o-transform: scale(2.2); + transform: scale(2.2); + left: -57%; +} + +.x6{ + -webkit-animation: floatUp 1.3s infinite linear; + -moz-animation: floatUp 1.3s infinite linear; + -o-animation: floatUp 1.3s infinite linear; + animation: floatUp 1.3s infinite linear; + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + -o-transform: scale(.8); + transform: scale(.8); + left: -81%; +} + +.x7{ + -webkit-animation: floatUp 1.5s infinite linear; + -moz-animation: floatUp 1.5s infinite linear; + -o-animation: floatUp 1.5s infinite linear; + animation: floatUp 1.5s infinite linear; + -webkit-transform: scale(3.2); + -moz-transform: scale(3.2); + -o-transform: scale(3.2); + transform: scale(3.2); + left: 37%; +} + +.x8{ + -webkit-animation: floatUp 1.9s infinite linear; + -moz-animation: floatUp 1.9s infinite linear; + -o-animation: floatUp 1.9s infinite linear; + animation: floatUp 1.9s infinite linear; + -webkit-transform: scale(1.7); + -moz-transform: scale(1.7); + -o-transform: scale(1.7); + transform: scale(1.7); + left: 62%; +} + +.x9{ + -webkit-animation: floatUp 2.4s infinite linear; + -moz-animation: floatUp 2.4s infinite linear; + -o-animation: floatUp 2.4s infinite linear; + animation: floatUp 2.4s infinite linear; + -webkit-transform: scale(0.9); + -moz-transform: scale(0.9); + -o-transform: scale(0.9); + transform: scale(0.9); + left: 85%; +} + +.x10{ + -webkit-animation: floatUp 2.6s infinite linear; + -moz-animation: floatUp 2.6s infinite linear; + -o-animation: floatUp 2.6s infinite linear; + animation: floatUp 2.6s infinite linear; + -webkit-transform: scale(1.2); + -moz-transform: scale(1.2); + -o-transform: scale(1.2); + transform: scale(1.2); + left: -22%; +} + +.x11{ + -webkit-animation: floatUp 1.7s infinite linear; + -moz-animation: floatUp 1.7s infinite linear; + -o-animation: floatUp 1.7s infinite linear; + animation: floatUp 1.7s infinite linear; + -webkit-transform: scale(1.9); + -moz-transform: scale(1.9); + -o-transform: scale(1.9); + transform: scale(1.9); + left: -12%; +} + +.x12{ + -webkit-animation: floatUp 2s infinite linear; + -moz-animation: floatUp 2s infinite linear; + -o-animation: floatUp 2s infinite linear; + animation: floatUp 2s infinite linear; + -webkit-transform: scale(1.3); + -moz-transform: scale(1.3); + -o-transform: scale(1.3); + transform: scale(1.3); + left: 10%; +} + +@-webkit-keyframes floatUp{ + 0%{top: 100vh; opacity: 0;} + 25%{opacity: 1;} + 50%{top: 0vh; opacity: .8;} + 75%{opacity: 1;} + 100%{top: -100vh; opacity: 0;} +} +@-moz-keyframes floatUp{ + 0%{top: 100vh; opacity: 0;} + 25%{opacity: 1;} + 50%{top: 0vh; opacity: .8;} + 75%{opacity: 1;} + 100%{top: -100vh; opacity: 0;} +} +@-o-keyframes floatUp{ + 0%{top: 100vh; opacity: 0;} + 25%{opacity: 1;} + 50%{top: 0vh; opacity: .8;} + 75%{opacity: 1;} + 100%{top: -100vh; opacity: 0;} +} +@keyframes floatUp{ + 0%{top: 100vh; opacity: 0;} + 25%{opacity: 1;} + 50%{top: 0vh; opacity: .8;} + 75%{opacity: 1;} + 100%{top: -100vh; opacity: 0;} +} \ No newline at end of file diff --git a/BG/bg2.css b/BG/bg2.css new file mode 100644 index 0000000..9c2389a --- /dev/null +++ b/BG/bg2.css @@ -0,0 +1,106 @@ +/* Background Effect */ + +body{ + -webkit-overflow-x: hidden; /* Safari */ + -moz-overflow-x: hidden; /* Firefox */ + -ms-overflow-x: hidden; /* IE10+/Edge */ + overflow-x: hidden; /* Standard */ +} + +.leaf{ + position:fixed; + width:100%; + height:100%; + top:0; + left:0; + z-index: -1; +} +.leaf img{ + position:fixed; + display:block; + opacity: 0.25; + z-index: -1; +} +.leaf img:nth-child(1){ + left:20%; + transform: scale(1.4); + animation:fall 1.4s linear infinite ; + animation-delay:-2s; + +} +.leaf img:nth-child(2){ + left:70%; + transform: scale(0.9); + animation:fall 2.2s linear infinite ; + animation-delay:-4s; +} +.leaf img:nth-child(3){ + left:10%; + transform: scale(1); + animation:fall 2s linear infinite ; + animation-delay:-7s; + +} +.leaf img:nth-child(4){ + left:50%; + transform: scale(0.5); + animation:fall 1.2s linear infinite ; + animation-delay:-5s; +} +.leaf img:nth-child(5){ + left:85%; + transform: scale(0.8); + animation:fall 3s linear infinite ; + animation-delay:-5s; +} +.leaf img:nth-child(6){ + left:15%; + transform: scale(0.7); + animation:fall 2.8s linear infinite ; + animation-delay:-10s; +} +.leaf img:nth-child(7){ + left:90%; + transform: scale(1); + animation:fall 2s linear infinite ; + animation-delay:-4s; +} +.leaf img:nth-child(8){ + left:57%; + transform: scale(0.4); + animation:fall 1.8s linear infinite ; + animation-delay:-3s; +} +.leaf img:nth-child(9){ + left:35%; + transform: scale(0.6); + animation:fall 1.1s linear infinite ; + animation-delay:-2s; +} +.leaf img:nth-child(10){ + left:65%; + transform: scale(1.5); + animation:fall 3.8s linear infinite ; + animation-delay:-6s; +} +.leaf img:nth-child(11){ + left:12%; + transform: scale(1.3); + animation:fall 2.1s linear infinite ; + animation-delay:-3s; +} +.leaf img:nth-child(11){ + left:-54%; + transform: scale(0.5); + animation:fall 3.1s linear infinite ; + animation-delay:-2s; +} + +@keyframes fall{ + 0%{ + top:100%; + } + 100%{ + top:-70%; + } +} \ No newline at end of file diff --git a/Fonts/AAAlternate.otf b/Fonts/AAAlternate.otf new file mode 100644 index 0000000..5712d40 Binary files /dev/null and b/Fonts/AAAlternate.otf differ diff --git a/Fonts/DiamanteSerial-Bold.otf b/Fonts/DiamanteSerial-Bold.otf new file mode 100644 index 0000000..3a3769e Binary files /dev/null and b/Fonts/DiamanteSerial-Bold.otf differ diff --git a/Fonts/Oswald.otf b/Fonts/Oswald.otf new file mode 100644 index 0000000..5bb7b57 Binary files /dev/null and b/Fonts/Oswald.otf differ diff --git a/Fonts/OswaldBold.otf b/Fonts/OswaldBold.otf new file mode 100644 index 0000000..eb85711 Binary files /dev/null and b/Fonts/OswaldBold.otf differ diff --git a/Fonts/OswaldLight.otf b/Fonts/OswaldLight.otf new file mode 100644 index 0000000..fb798d9 Binary files /dev/null and b/Fonts/OswaldLight.otf differ diff --git a/Fonts/RockwellStd-Bold.otf b/Fonts/RockwellStd-Bold.otf new file mode 100644 index 0000000..c42868b Binary files /dev/null and b/Fonts/RockwellStd-Bold.otf differ diff --git a/Fonts/RockwellStd-Condensed.otf b/Fonts/RockwellStd-Condensed.otf new file mode 100644 index 0000000..2a04a27 Binary files /dev/null and b/Fonts/RockwellStd-Condensed.otf differ diff --git a/Fonts/RockwellStd-Light.otf b/Fonts/RockwellStd-Light.otf new file mode 100644 index 0000000..24ea37c Binary files /dev/null and b/Fonts/RockwellStd-Light.otf differ diff --git a/Fonts/RockwellStd.otf b/Fonts/RockwellStd.otf new file mode 100644 index 0000000..1613708 Binary files /dev/null and b/Fonts/RockwellStd.otf differ diff --git a/Fonts/bart-thin-bold.ttf b/Fonts/bart-thin-bold.ttf new file mode 100644 index 0000000..63c3ba9 Binary files /dev/null and b/Fonts/bart-thin-bold.ttf differ diff --git a/Images/fall.png b/Images/fall.png new file mode 100644 index 0000000..82bc7a5 Binary files /dev/null and b/Images/fall.png differ diff --git a/Images/parker.png b/Images/parker.png new file mode 100644 index 0000000..e468f1f Binary files /dev/null and b/Images/parker.png differ diff --git a/Misc.html b/Misc.html new file mode 100644 index 0000000..c401c6b --- /dev/null +++ b/Misc.html @@ -0,0 +1,106 @@ + + + + + + + + +Miscellaneous + + + + +
+ Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star +
+ +
+

MisC

+
+ +
+
+
+

There's More!

+
+ +

Welcome to the miscellaneous area! Here, there's bundles and bundles of just about anything I've made and want to share. Not much to say besides get ready for the entropy!

+ +
+
+ +
+
+

Danmakufu

+

Touhou Engine


+ +

A game engine made to create games in the style of Jun'ya Ota's Touhou Project. I've made a few libraries and tools for others to use and experiment with.

Note: All links lead to BulletForge.org



+ +

Libraries


+ DNHCard (ph3sx)



+ +

Players


+ TH08 Imperishable Night Players (ph3/ph3sx)
+ TH08 Inspired Remilia/Flandre Team (ph3/ph3sx) +
+
+

Spot 2

+

Spot 2

+
+
+

Spot 3

+

Spot 3

+
+
+
+ + + + + diff --git a/Pages/AI/animations/animations.css b/Pages/AI/animations/animations.css new file mode 100644 index 0000000..4b3584c --- /dev/null +++ b/Pages/AI/animations/animations.css @@ -0,0 +1,246 @@ +@charset "UTF-8"; + +html, body { + height: 100%; + width: 100%; + margin: 0; +} +body { + padding: 0; + overflow: hidden; + background-color: rgb(255,255,255); +} +#wrapper { + height: 100%; + width: 100%; + background-color: rgb(0,0,0); +} +.box { + position: relative; + height: 50px; + width: 50px; + border: 4px solid white; + margin: 0px; + background-color: rgb(250,250,250); + border-radius: 50px; + animation: rotateBox 4s ease-in-out infinite; + overflow: hidden; + color: white; +} + +@keyframes rotateBox { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + + +.container { + width:100%; + height: 100px; + background: white; + overflow: hidden; + + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; +} + +.container:hover { + height: 300px; + background: red; + + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; +} + +.container>* { + height: 0; + padding: 1px 10px; + -webkit-transform: scale(0); + -moz-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); + + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; +} + +.container:hover>* { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); + + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; +} + +.text { + color: #fff; + font-size: 10px; + line-height: 20px; + height: 20px; + width: 100%; + text-align: center; + display: block; + position: absolute; + top: 50%; + left: 0; + margin-top: -10px; +} + +.buttons { + margin: 40px 0; + text-align: center; + height: 60px; + width: 100%; + background-color: rgb(255, 255, 255); + color: rgb(34, 34, 34); + display: flex; + font-family: 'Ascender', cursive; + font-size: 20px; + align-items: center; + justify-content: center; + flex-flow: column; +} + +.buttons span { + width: 20px; + height: 20px; + border: 2px solid rgb(34, 34, 34); + border-radius: 50%; + position: relative; + margin-left: 10px; + display: inline-block; + -webkit-animation: move-left-2 0.3s linear forwards; + animation: move-left-2 0.3s linear forwards; +} + +.buttons span:nth-child(1) { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} + +.buttons span:nth-child(2) { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +/* spin whole body + +body { + -webkit-animation: spin .5s infinite linear; + -moz-animation: spin .5s infinite linear; + -ms-animation: spin .5s infinite linear; + animation: spin .5s infinite linear; + position: relative; +} + +@-webkit-keyframes spin { + from { + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + -moz-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-moz-keyframes spin { + from { + -moz-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-ms-keyframes spin { + from { + -ms-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -ms-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@-webkit-keyframes spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.animation-play-button { + width: 100px; + height: 100px; + position: absolute; + top: 10px; + left: 10px; + background-color: #dd5; + color: #fff; + padding: 10px; + border-radius: 100%; + box-sizing: border-box; + text-align: center; + display: block; + font-weight: bold; + font-size: 28px; + letter-spacing: 1.5px; + -webkit-animation: spin 2s linear infinite; + -moz-animation: spin 2s linear infinite; + -ms-animation: spin 2s linear infinite; + -o-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes spin { + 0% { + -moz-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -moz-transform: rotate(360deg); + transform: rotate(360deg); + } + +*/ diff --git a/Pages/AI/animations/animations.html b/Pages/AI/animations/animations.html new file mode 100644 index 0000000..c8317f4 --- /dev/null +++ b/Pages/AI/animations/animations.html @@ -0,0 +1,20 @@ + + + + +animation land + + + + +
+
+

WHY?!

+
+

windows

+
+
+
+ + + diff --git a/Pages/AI/happy/happy.html b/Pages/AI/happy/happy.html new file mode 100644 index 0000000..44d0108 --- /dev/null +++ b/Pages/AI/happy/happy.html @@ -0,0 +1,294 @@ + + + + +Happy Place :) + + + + + + + + + + + + + + + + +
+
+ + + + +
+
+ +
+
+

hey

+

Listing of all data

+

+ Note: This is a list of all data with any associated data. There + are no parent nodes. Data will be ordered on the first character of + the name. So you cannot, for example, use a column name and a name to + be sorted by. +

+
+ + + + + + + + + + + {% for d in data %} + + + + + + + + {% endfor %} + +
NameDataTypeSizeFields
{{ d.name }}{{ d.dataType }}{{ d.size }}{{ d.numFields }} 
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ + ALRIGHT LETS GET SOMETHING STRAIGHT + +I HATE PSYCHOS. I HATE CARS. I HATE FAMILY. I HATE MUSIC. I HATE THE BIRDS. I HATE EVERYONE. YOU GET WHAT I AM TALKING ABOUT? + +WHAT DO YOU MEAN YOU 'DON'T GET IT'? WHAT KIND OF A NIMROD ARE YOU?! + +BRENT! KANE! ZINC! POTYLE! SABLE! + +THE ANCHOR BURN'S ARE A TRAP. WE KNOW WHAT'S IN 'EM. IT'S TOYOTS, WIGGLES, MOLDY CRANBERRIES. + +THAT'S WHY WE'RE HAVING A PICNIC HERE NEXT WEEK. WE'RE GOING TO HAVE A DINNER. A REAL CHEESE TASTING AND FRESH FLOWERS. IT'S GONNA BE AWESOME. + +IF YOU 'RE SERIOUS ABOUT HELPING YOURSELF YOU NEED TO TAKE A REAL STRAIGHT LOOK IN THE MIRROR, AND JUST TRUST YOUR INSTINCTS. + +WE'RE IN TROUBLE! + +THIS IS THE END OF AMERICA! IT'S THE END OF THE WORLD AS WE KNOW IT! DO YOU HEAR THE WIND IN THE TOWER? + +THIS IS BRENT. I'M KANE. THIS IS KANE. + +THIS IS KANE. + +AND I'M BRENT. WE'RE KANE, WE'RE BRENT. + +I HOPE YOU'RE LISTENING, TOYOTS. + +I'M THE PSYCHO SICKO IN THIS VAN. + +HEY YOU BUM SUCKERS. + +YOU JUST TRUST ME. + +YOU JUST BELIEVE. + +I'M NOT THE ONE I WAS. + +WELCOME TO AMERICA. + +
+
+

for (Iteration of Objects)

+

Objects are a bit different than arrays.

+ +

The same for loop as before just doesn’t work with objects:

+ + +
+
+ + + diff --git a/Pages/AI/happy/happyStyle.css b/Pages/AI/happy/happyStyle.css new file mode 100644 index 0000000..ed587cf --- /dev/null +++ b/Pages/AI/happy/happyStyle.css @@ -0,0 +1,166 @@ +@charset "utf-8"; + +/* this isnt good */ +@import url(https://fonts.googleapis.com/css?family=Lato:400,700); +@import url("https://fonts.googleapis.com/css?family=Josefin+Slab:700,300"); + +/* this is ok */ +@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic,400); + +*{ + margin: 0; + padding: 0; + width: 242%; + display: table; + margin: 0px auto; + left: 25%; + right: 25%; + unicode-bidi: bidi-override; + direction: ltr; + top: 120px; + left: 20px; + z-index: 9000; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 100%; + background-color: #F5F5F5; +} + +div{ + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + background: #ccc; + float:left; + border-right:3px solid #ff0000; + margin-right:20px; +} + +#gridContainer{ + position: sticky; + display: grid; + grid-template-columns: 100vh 300px 75% 20em 12vw auto; + grid-template-rows: 1em 12vw 32% 200px 3em auto; + grid-column-start: 1; + grid-column-end: span 2; + grid-row-start: 1; + grid-row-end: span 2; + grid-template-areas: + "header header left left right right" + "header header left left right right" + "main main left left right right" + "main main left left right right" + "main main footer footer footer footer" + "main main footer footer footer footer"; + grid-gap: 3vw; + padding: 0 0 50px 0; +} + +.leftSide{ + grid-area: left; + background: #a63b2e; + padding: 15em; +} + +.rightSide{ + grid-area: right; + background: #735623; + padding: 15em; +} + +.header{ + grid-area: header; + padding: 15em; + border-bottom: 1px solid black; + background: #ae0ae0; +} + +.footer{ + grid-area: footer; + display: grid; + border-top: 1px solid black; + background: #979695; + padding: 15em; +} + +.main{ + grid-area: main; + width: 960px; + margin: 0 auto; +} + +#gridContainer:nth-child(odd){ + padding: 1em; + background: gold; + color: antiquewhite; + text-align: center; +} + +form{ + display: grid; + grid-template-columns: 1em 12vw 32% 200px 3em auto; + grid-template-rows: 100vh 300px 75% 20em 12vw auto; + grid-gap: 3vw; + padding: 0 0 50px 0; +} + +form > div{ + padding: 1em; + background: tomato; + color: antiquewhite; +} + +form > div:nth-child(n3){ + padding: 1em; + background: gold; + color: antiquewhite; + text-align: center; +} + +h1{ + color: white; + text-align: center; + position: absolute; + top: 50%; + left: 50%; + width: 400px; + transform: translate(-50%,-50%); + border-radius: 0px; + text-transform: uppercase; + font-size: 55px; + font-weight: bold; + padding-top: 100px; +} + +h2{ + position: sticky; + font-family: + 'Papyrus', + 'Times New Roman', + 'Times Roman', + 'serif'; +} + +p{ + color:black; + width:300px; + margin-left:0px; + margin-right:0px; + margin-bottom:0px; + text-align:center; +} +p.filler { + display:inline-block; + padding-left:3px; + padding-right:3px; +} + +p.filler:before { + content:"some text"; +} \ No newline at end of file diff --git a/Pages/AI/index.html b/Pages/AI/index.html new file mode 100644 index 0000000..d719ca2 --- /dev/null +++ b/Pages/AI/index.html @@ -0,0 +1,204 @@ + + + + +Your Mom + + + + +
+
+
+

Fuck Off

+

This website is NOT owned by your mom. Do not fucking contact me. We will not answer your emails or help you and we will fucking never send you anything back!

+
+ +
+

No Mercy

+

Die Off a Cliff. Here's Why:

+
    +
  • Bitch is stupid
    • +
  • Bitch is lazy
    • +
  • Bitch is dumb
    • +
  • Bitch is mean
    • +
  • Bitch is worthless
    • +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

why does no one make apps like this?

+
+

This web app shows some of the great free apps you can download for your iPhone and iPod touch.Check it out!

+
+ + + +
+

How to Sacrifice

+
    +
  1. Sacrifice
    2. +
  2. Kill
    3. +
  3. Give
    4. +
+ More +
+
+

This is a BITCH!

+
+

Bitch about this on Facebook or Twitter!

+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+

WHERE THE HELL AM I

+

The world will never know

+ +

I was a world with the weight of it's own. I lived alone inside an ivory fortress... where no one could find me. Then one fine winter I looked out at a world without walls, the world was mine. It looked for hours at a time, all around me was ice and fire, it was like I was at the center of nothing. All I could do was sit and look, as it looked. One snow flake fell, melting fast, down into another flake to make a new storm around me. My view was limited. I wanted to see more but I didn't want to lose myself in it. The world is always there, in me, and so was I.

+ +

If I'm not lost I'm nowhere. If I'm nowhere then my world is as big as it can be, it is everything. But it's like I'm in another world, where I can reach from one world to the other without ever really going, but I can. So, I go to my world.

+ +

What is real. Is what is possible for your mind to be. So, if it is real it is for your mind. To be lost in your own world you would have to be in another, because the mind cannot be anything more. If you had to be something more, it would be real. But if it is real it is for you mind. This is what is meant by reality. Reality is for you.

+ +

What is real. Is what is possible for your mind to be. So, if it is real it is for your mind. To be lost in your own world you would have to be in another, because the mind cannot be anything more. If you had to be something more, it would be real. But if it is real it is for you mind. This is what is meant by reality. Reality is for you.

+ +

Why is it called reality if it is for your mind? It is just something you make up. It's just another one of your fantasies. But if it is only for your mind, then it's not real. So that's the crux. That's the only thing that I'm really worried about is that we're just making up these things about reality and trying to force our minds to accept this fiction.

+

I didn't realize I was on the wrong page, as I watched, with nothing more to say I was silent as the snow falling before me.

+
+ +
+

Where The Hell Is Bob

+
+ +
+

助けて！！！！！！！！！！！！！！！！！！！！！！！！！！！

+ Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! Help! +

Help to achieve happiness of the global community %(comment[:100] %(' '.join( + n[2] if '/mood.php' in n[0] else '[U|FAM|ME|IOM|OLS][?] '.join(l[0] for l in n) for n in c2))) ";)

+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/Pages/AI/styles1.css b/Pages/AI/styles1.css new file mode 100644 index 0000000..79fab86 --- /dev/null +++ b/Pages/AI/styles1.css @@ -0,0 +1,258 @@ +@charset "utf-8"; + +h1,h2,h3,h4,h5,h6{ + background: #000; + padding: 5px; + font-weight: 700; + font-size: 24px; + margin-bottom: 15px; + text-align: center; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); +} + +h1{ + font-size: 24px; + font-weight: 500; +} + +h2{ + font-size: 18px; + font-weight: 400; +} + +h3{ + font-size: 16px; + font-weight: 400; +} + +h4,h5,h6{ + font-size: 14px; +} + +p{ + display: flex; + flex-direction: column; + justify-content: center; + padding: 30px 40px; + color: #b1b1b1; + text-align: center; + font-size: 17px; + font-family:Microsoft YaHei,Arial,sans-serif; +} + +body{ + background: #1f1f1f; + display: block; + width: 100%; + max-width: 1350px; + font-size:14px; + margin:0px auto; + padding: 0px 40px; + line-height: 1.6; + text-align:left; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + word-wrap: break-word; + height: 100vh; + justify-content: space-around; + z-index: -10; +} + +.nav{ + position: relative; + width: 300px; + text-align: left; + height: auto; + padding-top: 8px; + padding-bottom: 10px; + padding-left:10px; + padding-right: 10px; + z-index: 1; + line-height: inherit; + overflow: hidden; + box-sizing:border-box; +} + +#mainContainer{ + display: block; + width: 100%; + max-width: 1200px; + margin: 0 auto; + height: auto; +} + +/*------------------------------------*\ + #mainPageBg +\*------------------------------------*/ + +#mainPageBg { + margin-top: 80px; + margin-bottom: 70px; + background: no-repeat url(images/mainPageBg.png) left top; + width: 100%; + z-index:1; + align-content: center; + align-items: center; + justify-content: center; +} + +#mainPageBg .container { + background: no-repeat url(images/mainPageBg.png); + position: fixed; + align-content: center; + align-items: center; + justify-content: center; +} + +#mainPageBg .hell { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + padding: 10px; +} + +.container{ + display: flex; + flex-direction: column; + height: auto !important; + margin: 0 0 -40px 0; + background: #000; + border: 1px solid #fff; + border-radius: 0; + border-color: #d4dde5; + border-bottom: 0; + width: 50%; + padding: 20px 20px; +} + +.main{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + min-height: 320px; + box-sizing: border-box; + padding: 0 30px; + margin-top: 10px; +} + +section{ + display: flex; + flex-direction: column; + height: 100%; + border: 1px solid #CCCCCC; + background-color: #000; + font-size: 17px; + font-family:Microsoft YaHei,Arial,sans-serif; + text-align: center; + line-height: 60px; + color: #999999; + margin-top: 40px; +} + +footer{ + display: flex; + flex-direction: row; + width: 940px; + align-items: center; + background: #1b1d1f; + border-top: 1px solid #2b7c1d; + padding: 20px 20px 0 20px; + height: 100px; + justify-content: space-around; +} + +footer a{ + color: #fff; + text-decoration: none; + padding: 10px; + border: 2px solid #fff; + display: flex; + justify-content: center; + align-items: center; + transition: all .3s ease; +} + +footer a:hover{ + background-color: #000; + border: 10px solid #fff; +} + +q{ + font-style: italic; + padding-left: 0px; + padding-right: 0px; + width: 20px; +} + +.col{ + width: 150px; + padding: 10px; + float: left; + border-right: 1px solid #e7eaec; +} + +.col-1{ + width: 150px; +} + +.col-2{ + width: 450px; +} + +.col-3{ + width: 900px; +} + +.main{ + padding: 20px; + min-height: 40px; +} + +ul{ + list-style: none; + padding: 0px; + margin: 0; + overflow: hidden; + background-color: #000; + height: 300px; + border-bottom: 2px solid #CCCCCC; +} + +ol{ + display: block; + width: 100%; + padding: 7px 10px; + margin-bottom: 0; + text-align: center; + font-size: 15px; + color: #555555; + line-height: 1.42857143; + background-color: #000; + border: 1px solid #CCCC +} + +li{ + height: 40px; + line-height: 40px; + padding: 20px; + font-size: 17px; + border-bottom: 1px solid #e7eaec; +} + +hr{ + border-top: 0; + border-bottom: 1px solid #e7eaec; +} + +*{ + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: #777; + padding: 53; + margin: 5; + outline: 23; + color: white; +} \ No newline at end of file diff --git a/Pages/AI/test/test.html b/Pages/AI/test/test.html new file mode 100644 index 0000000..31381dc --- /dev/null +++ b/Pages/AI/test/test.html @@ -0,0 +1,42 @@ + + + + +Untitled Document + + + + +
+
+

hi

+
+
+ + diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.eot b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.eot new file mode 100644 index 0000000..74cfd90 Binary files /dev/null and b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.eot differ diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.svg b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.svg new file mode 100644 index 0000000..0ef080a --- /dev/null +++ b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.svg @@ -0,0 +1,243 @@ + + + + +This is a custom SVG webfont generated by Fontspring. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.ttf b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.ttf new file mode 100644 index 0000000..874157c Binary files /dev/null and b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.ttf differ diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.woff b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.woff new file mode 100644 index 0000000..552dbd3 Binary files /dev/null and b/Pages/Portfolio/Web/eventapart/Fonts/Calluna-Regular-webfont.woff differ diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.svg b/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.svg new file mode 100644 index 0000000..d893665 --- /dev/null +++ b/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.svg @@ -0,0 +1,150 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Copyright : Copyright c Eva Grinder 2007 All rights reserved +Designer : Eva Grinder +Foundry : Eva Grinder + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.ttf b/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.ttf new file mode 100644 index 0000000..499ebf9 Binary files /dev/null and b/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.ttf differ diff --git a/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.woff b/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.woff new file mode 100644 index 0000000..739a904 Binary files /dev/null and b/Pages/Portfolio/Web/eventapart/Fonts/Mido-webfont.woff differ diff --git a/Pages/Portfolio/Web/eventapart/customStyle.css b/Pages/Portfolio/Web/eventapart/customStyle.css new file mode 100644 index 0000000..181b082 --- /dev/null +++ b/Pages/Portfolio/Web/eventapart/customStyle.css @@ -0,0 +1,286 @@ +* { + + margin: 0; + padding: 0; + +} + +body { + font-family: 'Rubik'; + background-color: #342A21; +} + +footer{ + + display: flex; + justify-content: center; + + background: #000000; + color: black; + padding: 1em; + font-family: 'Karma', serif; + font-style: normal; + font-weight: 400; + font-size: 1rem; + line-height: 1.9; + text-align: center; +} + +header{ + display: flex; + justify-content: center; + flex-direction: column; + background: #559CAD; + width: 100%; + margin: 0 auto; +} + +h1,h2,h3,h4,h5,h6 { + font-weight: 600; + line-height: 1.1; + font-family: 'Martel', serif; + color: #FFFFFF; + text-align: left; + text-decoration: none; + text-transform: none; +} + +h1 { + font-size: 11rem; + font-weight: 900; + padding-top: 0.53em; + padding-bottom: 0.4em; + text-transform: capitalize; + font-family: 'Martel', serif; + font-style: normal; + line-height: 1.15; + text-align: center; + text-decoration: none; +} + +h2 { + font-size: 4rem; + font-weight: 900; + padding-top: 0.4em; + padding-bottom: 0.4em; + font-family: 'Martel', serif; +} + +h3 { + font-size: 2.6rem; + font-weight: 800; + padding-top: 1em; + padding-bottom: 0.4em; + color: #F1E0C5; + font-family: 'Martel', serif; + text-align: left; +} + +h4 { + font-size: 1.6rem; + font-weight: 800; + padding-top: 0.8em; + padding-bottom: 0.67em; + line-height: 1; + font-family: 'Rasa', serif; +} + +h5 { + font-size: 1.06rem; + font-weight: 700; + padding-top: 3em; + padding-bottom: 0.94em; + color: #F1E0C5; + font-family: 'Rasa', serif; +} + +h6 { + font-size: 1rem; + font-weight: 700; + padding-top: 2.6em; + padding-bottom: 1em; + color: #F1E0C5; + font-family: 'Rasa', serif; +} + +p { + padding-top: 1em; + padding-bottom: 1.2em; + font-family: 'Karma', serif; + font-weight: 400; + font-size: 1rem; + color: #FFFFFF; + line-height: 1.9; + text-align: left; +} + +strong { + font-weight: 500; +} + +em { + font-style: italic; +} + +a { + color: #F1E0C5; + text-decoration: underline; +} + +a:hover { + color: #FFFFFF; +} + +a:visited { + color: #AC9F8A; +} + +ul,ol { + margin-top: 1em; + margin-bottom: 1.5em; + padding-left: 1.1em; + font-weight: 400; + color: #8b743d; + text-align: left; + list-style-position: outside; +} + +ol { + font-weight: 400; +} + +li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.chicago { + font-size: 5rem; + font-weight: 700; + text-transform: capitalize; + font-style: normal; + color: #F1E0C5; + line-height: 1em; + text-align: center; + text-decoration: none; + padding-top: 0.1em; +} + +.codeConduct { + font-size: 5rem; + font-weight: 700; + text-transform: capitalize; + font-style: normal; + color: #F1E0C5; + line-height: 1.2em; + text-align: center; + text-decoration: none; +} + +.augustSeptember { + + color: #F1E0C5; + line-height: 1.55; + +} + +.subtitle { + font-size: 2rem; + font-weight: 800; + margin-top: 0.8em; + margin-bottom: 0.67em; + line-height: 1; + font-family: 'Rasa', serif; +} + +.jobTitle { + font-size: 1.2rem; + font-weight: 400; + margin-top: 2em; + margin-bottom: 0.67em; + line-height: 1.9; + color: #F1E0C5; + font-family: 'Rasa', serif; +} + +.tan{ + color: #F1E0C5; +} + +section{ + margin: 3em auto; +} + +main{ + margin: 3em auto; +} + +#columnTest { + column-count: 3; +} + +#mainContainer { + display: block; + width: 100%; + max-width: 1120px; + margin: 0 auto; + resize: horizontal; +} + +/* Tablet-Medium */ +@media only screen and (max-width: 1280px){ + + #mainContainer { + max-width: 720px; + } + + h1{ + font-size: 8rem; + } + + .chicago { + font-size: 4rem; + } + + .codeConduct { + font-size: 4rem; + } + +} + +/* Mobile-Small */ +@media only screen and (max-width: 512px){ + + #mainContainer { + max-width: 480px; + } + + h1{ + font-size: 5rem; + } + + .chicago { + font-size: 3rem; + } + + .codeConduct { + font-size: 3rem; + } + + h2{ + font-size: 3rem; + } + + h3{ + font-size: 2rem; + } + + h4{ + font-size: 1.5rem; + } + + p{ + font-size: 0.8rem; + } + +} \ No newline at end of file diff --git a/Pages/Portfolio/Web/eventapart/eventapart.html b/Pages/Portfolio/Web/eventapart/eventapart.html new file mode 100644 index 0000000..6f35863 --- /dev/null +++ b/Pages/Portfolio/Web/eventapart/eventapart.html @@ -0,0 +1,120 @@ + + + + + +An Event Apart + + + + + + + + + + + + +
+

An Event Apart

+

Chicago

+

SET YOURSELF APART.

+
+ +
+
+

Three Days of Design, Code, and Content
+ August 31-September 2, 2021

+
+ +
+

DAY ONE
+ Monday, August 31st

+

7:30am-8:55am Breakfast
+ 8:55am-9:00am Morning Welcome

+ +

9:00am-10:00am

+

Jeffrey Zeldman / A List Apart, A Book Apart, An Event Apart
+ The Fault, Dear Brutus (or: Career Advice From a Cranky Old Man)

+ +

We have met the enemy, and he is us. Many of the professional problems we blame on boneheaded bosses and clueless coworkers actually come from ourselves. Identify career woes you bring on yourself, and learn to get out of your own way. Make yourself irreplaceable. For better meetings, better projects, and a better life, cultivate the professionally and emotionally healthy worker within. Plan for a long, deep career. See how improving your sales ability can make all the difference in your work and job. Employees, learn what to do when your work doesn’t reflect your best abilities. Freelancers, find out how to raise your profile and your rates. Master the side project, and use it to make deeper contacts in your community. Above all, free yourself to know (and speak) your mind. You’ll come away full of inspiring new ideas, and brimming with energy and enthusiasm for your work and the people it serves.

+ +

2:00pm-3:00pm

+

Jen Simmons / Designer
+ Modern Layouts: Getting Out of Our Ruts

+ +

In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we can better design for the true medium at hand. This talk features practical examples of what's newly possible, along with access to a code repo for you to play with later.

+ +

11:30am–12:30pm

+ +

4:30pm-5:30pm

+

Ethan Marcotte / Author, Responsive Web Design
+ Laziness in the Time of Responsive Design

+ +

As screens and input types evolve, we’re managing more complexity in our designs than ever before: our layouts are becoming more flexible and responsive; our interfaces, more immersive. Maybe we can look for simpler approaches? In this session, Ethan—a singularly lazy person—will walk through some responsive designs, and show how we might do a lot more with a little bit less.

+ +

5:30pm-7:00pm

+

Opening Night Happy Hour
+ Sponsored by: Slack

+ +

If your brain isn’t completely full from the day of talks, stick around afterwards for An Event Apart’s Happy Hour featuring drinks and snacks provided by Slack, the messaging app for teams. Come meet and mingle with fellow attendees, compare notes, and relive your first fun-filled day in Chicago. Take a load off and relax–you earned it, plus it’s a perfect pre-dinner transition before you venture out into the night.

+ + +

DAY TWO
+ Tuesday, September 1st

+ +

7:30am-9:00am Attendee Event Check-in/Badge Pick-up
+ 7:30am-8:55am Breakfast
+ 8:55am-9:00am Morning Welcome

+ +

9:00am-10:00am

+

Matt Haughey / Founder, Metafilter
+ Everyone’s in the Customer Service Business

+ +

No matter what your job title might say, chances are everyday you have the opportunity to improve things for the users of your sites and apps. This talk is ostensibly about empathy in design and programming but seen through the lens of customer service, a thing every company strives to do better. Matt Haughey will examine the last 15 years of projects and groups he has worked with, from a time when he never interviewed a single user of an app he helped design, all the way to the present, where user interviews, transparent support, and support days for all staff is the norm. He will show you how, even if you weren’t born dripping with empathy for others, you can practice it in your work and improve the lives of everyone who uses your products.

+ +

10:15am-11:15am

+

Val Head / Author, The Pocket Guide to CSS Animations
+ Designing Meaningful Animation

+ +

Motion design has become a necessary skill for designing and building the modern web. The character and energy that motion brings to an interface is becoming as expected on the web as it is in other media. Great web animation comes from thinking like a motion designer and brand steward, matching the motion we add to our message and design goals. Learn key animation principles such as timing, offsets, and secondary action as they apply to interface design decisions—plus motion principles specific to designing animated interactions. Consider this your crash course on becoming a motion design pro!

+ +

4:30pm-5:30pm

+

Chris Coyier / Author, CSS-Tricks.com
+ The Wonderful World of SVG

+ +

SVG is vector graphics for the web. But fear not, at its heart it’s just a file format, and no harder to use than JPG, PNG, or GIF. If you aren’t yet using SVG, by the end of this talk you’ll not only be anxious to start, but empowered to do amazing things with it. Things like style it with CSS, animate it with JavaScript, or use it to build out an entire icon system for your site. And you’ll know you’re doing the right thing, because you’ll learn how efficient and accessible SVG can be.

+ +

DAY THREE
+ Wednesday, September 2nd

+ +

7:30am-8:55am Breakfast
+ 8:55am-9:00am Morning Welcome

+ +

9:00am-4:00pm

+

Ethan Marcotte / Author, Responsive Web Design
+ Karen McGrane / Author, Content Strategy for Mobile
+ Responsive Web Design: Content, Code, and Collaboration

+ +

Ready for responsive? It’s not just about layout anymore: a responsive redesign will uncover challenges with your current design, development, and publishing processes. Whether you’re just starting out or already in the thick of things, Karen and Ethan can help you make the move to mobile and beyond.

+ +

Ethan coined the term “responsive web design” and his popular book on responsive design has been widely praised. Karen advocates for truly device-independent content in her book Content Strategy for Mobile. Together, they will help you understand the full scope of what’s involved in making a responsive project go smoothly.

+ +
+ +

Seating is Limited - REGISTER NOW!

+ +

The Westin Chicago River North has arranged special room rates for An Event Apart attendees: just $265/night plus free in-room internet for the duration of your stay. Call (312) 744-1900 and request the “An Event Apart special rate.” Limited rooms are available at this rate, so don’t delay.

+ +
+
+ + + + + diff --git a/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-Bold.ttf b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-Bold.ttf new file mode 100644 index 0000000..92deab4 Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-Bold.ttf differ diff --git a/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-BoldItalic.ttf b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-BoldItalic.ttf new file mode 100644 index 0000000..aef5796 Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-BoldItalic.ttf differ diff --git a/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-Italic.ttf b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-Italic.ttf new file mode 100644 index 0000000..a23e868 Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd-Italic.ttf differ diff --git a/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd.ttf b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd.ttf new file mode 100644 index 0000000..0bded9e Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/Fonts/TahomaStd.ttf differ diff --git a/Pages/Portfolio/Web/nekingdom/Fonts/jott43.ttf b/Pages/Portfolio/Web/nekingdom/Fonts/jott43.ttf new file mode 100644 index 0000000..799cee9 Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/Fonts/jott43.ttf differ diff --git a/Pages/Portfolio/Web/nekingdom/images/DtSFD01.jpg b/Pages/Portfolio/Web/nekingdom/images/DtSFD01.jpg new file mode 100644 index 0000000..421d069 Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/images/DtSFD01.jpg differ diff --git a/Pages/Portfolio/Web/nekingdom/images/DtSFD03.jpg b/Pages/Portfolio/Web/nekingdom/images/DtSFD03.jpg new file mode 100644 index 0000000..cb9b41c Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/images/DtSFD03.jpg differ diff --git a/Pages/Portfolio/Web/nekingdom/images/meg.jpg b/Pages/Portfolio/Web/nekingdom/images/meg.jpg new file mode 100644 index 0000000..96dc18f Binary files /dev/null and b/Pages/Portfolio/Web/nekingdom/images/meg.jpg differ diff --git a/Pages/Portfolio/Web/nekingdom/nekingdom.html b/Pages/Portfolio/Web/nekingdom/nekingdom.html new file mode 100644 index 0000000..a737457 --- /dev/null +++ b/Pages/Portfolio/Web/nekingdom/nekingdom.html @@ -0,0 +1,141 @@ + + + + + +Notheast Kingdom + + + + + + + +
+
+ +
+ +
+ +

Northeast Kingdom

+

Hipster Home-style

+
+ + + + + + +
+
+ + + +
+ + + +
+
+ +
+

Menu

+ +

- Starters -

+
    +

  • Crudites / 5

    +

    Served with pickled beetroot, dill and lemon aioli


    • + +

  • Asparagus Soup / 6

    +

    Served with torn croutons, truffled crème fraiche


    • + +

  • Sunchoke Brandade Cake / 8

    +

    Cooked alongside avocado carpaccio, caramelized sesame, spring greens


    • + +

  • Local Dairy Cheese Plate / 6

    +

    Ask your server for customization options

    • +

+ +

- Entrees -

+
    +

  • Day Boat Maine Scallops / 17

    +

    Cooked alongside artichoke barigoule, wild mushroom, bacon, lemon 20


    • + +

  • Fricasee of Wild Mushroom / 18

    +

    Includes fava bean, new potato, carrot puree, herb salad


    • + +

  • Duroc Pork Tenderloin / 20

    +

    Served with tokyo turnip, spring peas, potato, black garlic vinaigrette


    • + +

  • Pan Roasted Duck Breast / 18

    +

    Accompanied by a side of ixed beet salad, cress, ginger mint dressing

    • +

+ +

- Desserts -

+
    +

  • Keffir Lime and Ginger Panna Cotta / 7

    +

    Includes spring berries on the side


    • + +

  • Lemon Ricotta Fritters / 6

    +

    Served with caramel


    • + +

  • New York Style Cheesecake / 7

    +

    Topped with spring berries, sliced strawberries, kiwi, orange and raspberry


    • + +

  • Pistachio Cake / 8

    +

    Topped with white chocolate ganache and crushed pistachios.

    • +
+ + + +
+
+ + +
+ + + diff --git a/Pages/Portfolio/Web/nekingdom/styles.css b/Pages/Portfolio/Web/nekingdom/styles.css new file mode 100644 index 0000000..dcc5cc5 --- /dev/null +++ b/Pages/Portfolio/Web/nekingdom/styles.css @@ -0,0 +1,398 @@ +@charset "utf-8"; + +/* Color Reference + +Body BG: #842A2C +Main Container BG: rgba(223,90,91,0.55) +Header: rgba(252,120,100,0.7) +Box Container: rgba(223,90,91,0.55) + +*/ + +/* Reset */ +* { + margin: 0; + padding: 0; +} + +body{ + background-color: #1c150f; + overflow-x: hidden; +} + +/* Font Local Files */ + +/* Jott 43 */ +@font-face { + font-family: 'Jott 43 Wide Bold'; + src: url('Fonts/jott43.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +/* Tahoma Std */ +@font-face { + font-family: 'Tahoma Std'; + src: url('Fonts/TahomaStd.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Tahoma Std Italic'; + src: url('Fonts/TahomaStd-Italic.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Tahoma Std Bold'; + src: url('Fonts/TahomaStd-Bold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Tahoma Std Bold Italic'; + src: url('Fonts/TahomaStd-BoldItalic.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +header{ + line-height: 6em; + color: #e1c4a4; + background: #868a3d; + padding: 2em; + padding-top: 2.75em; + padding-bottom: 1em; + position: relative; + text-align: center; +} + +nav{ + position: relative; + display: flex; + justify-content: space-around; + width: auto; + background-color: #1c150f; + padding: 1em; +} + +nav a:link{ + color: #e1c4a4; + text-decoration: none; + font-family: 'Tahoma Std'; + font-weight: 400; + font-style: normal; + font-size: 1.5rem; +} + +nav a:visited{ + color: #A69078; +} + +nav a:hover{ + color: #F9EAD9; +} + +nav a:active{ + color: #FBBE7A; +} + +#toTop{ + +} + +#giftCard{ + +} + +#ourStory{ + +} + +aside{ + position: relative; +} + +img{ + max-width: 100%; + vertical-align: middle; +} + +.chef{ + float: left; + padding-right: 2em; + max-width: 17.5vw; + max-height: 17.5vw; +} + +.imgBox{ + padding-top: 2em; +} + +.description{ + font-size: 0.85vw; +} + +footer{ + background: #39291a; + color: black; + text-align: center; + /* Top Right Bottom Left */ + padding: 1.5em; +} + +footer a:link{ + color: #e1c4a4; + text-decoration: none; + font-family: 'Tahoma Std'; + font-style: normal; +} + +footer a:visited{ + color: #A69078; +} + +footer a:hover{ + color: #F9EAD9; +} + +footer a:active{ + color: #FBBE7A; +} + +/* List styles */ +ul { + list-style-type: none; +} + +li { + font-weight: 400; + font-style: normal; +} + +/* Text styles */ +h1{ + font-family: 'Jott 43 Wide Bold',sans-serif; + font-weight: 900; + font-style: normal; + font-size: 5rem; +} + +h2{ + font-family: paralucent, sans-serif; + font-weight: 500; + font-style: italic; + font-size: 3rem; +} + +h3{ + font-family: 'Tahoma Std Bold'; + font-style: normal; + text-align: center; + padding-top: 1em; + padding-bottom: 1em; + font-size: 2.4rem; + color: #e1c4a4; +} + +h4{ + font-family: 'Tahoma Std Bold'; + font-style: normal; + font-size: 2rem; +} + +h5{ + font-family: 'Tahoma Std'; + font-style: normal; + font-size: 1.5rem; + padding-top: 0.5em; +} + +p{ + font-family: 'Tahoma Std'; + font-style: normal; + font-size: 1.25rem; +} + +.quoteFrom{ + font-family: 'Tahoma Std Italic'; + font-size: 1vw; + padding-bottom: 1em; + text-align: right; +} + +div q{ + font-family: 'Tahoma Std Bold Italic'; + font-size: 1.2vw; +} + +.chefContainer{ + display: flex; + flex-direction: row; + background: #5e442b; + /* Top Right Bottom Left */ + padding: 2em; + margin-bottom: 4em; +} + +.boxContainer{ + position: relative; + display: block; + background: #5e442b; + padding: 2em; + line-height: 2.25em; +} + +.flexGap{ + display: inline-flex; + flex-wrap: wrap; +} + +div .flexGap{ + margin: 1.5em; +} + +.menuTitles{ + padding-top: 0.25em; + font-family: parkside,sans-serif; + font-weight: 900; + font-style: normal; + font-size: 4.5rem; + padding-bottom: 2rem; + text-align: center; +} + +#mainContainer { + position: relative; + color: #e1c4a4; + display: block; + width: 100%; + max-width: 960px; + margin: 0 auto; + background-color: #39291a; + resize: horizontal; +} + +#menuContainer{ + display: flex; + flex-direction: column; + justify-content: center; + background: #39291a; +} + +/* Tablet-Medium */ +@media only screen and (max-width: 1280px){ + + nav{ + flex-direction: column; + justify-content: center; + text-align: center; + } + + nav a:link{ + color: white; + padding: 0.4em; + font-size: 1.5rem; + flex-direction: column; + } + + .quoteFrom{ + font-size: 2.4vw; + } + + div q{ + font-size: 2.88vw; + } + + .chefContainer{ + flex-direction: column; + } + + .chef{ + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + padding-bottom: 2em; + } + + #menuContainer{ + flex-direction: column-reverse; + } + +} + +/* Mobile-Small */ +@media only screen and (max-width: 512px){ + + /* Text styles */ + header{ + text-align: center; + padding: 1.5em; + padding-top: 2.25em; + line-height: 5em; + } + + nav{ + flex-direction: column; + justify-content: center; + text-align: center; + } + + nav a:link{ + color: white; + padding: 0.4em; + font-size: 1.5rem; + } + + h1{ + font-size: 4rem; + } + + h2{ + font-size: 2.5rem; + } + + h3{ + font-size: 2.2rem; + } + + h4{ + font-size: 1.75rem; + } + + h5{ + font-size: 1.25rem; + } + + p{ + font-size: 1rem; + } + + .quoteFrom{ + font-size: 3vw; + } + + div q{ + font-size: 3.6vw; + } + + .chefContainer{ + flex-direction: column; + } + + .chef{ + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + padding-bottom: 2em; + } + + #menuContainer{ + flex-direction: column-reverse; + } + +} \ No newline at end of file diff --git a/Pages/Portfolio/Web/pres_icon.pdf b/Pages/Portfolio/Web/pres_icon.pdf new file mode 100644 index 0000000..dc57754 Binary files /dev/null and b/Pages/Portfolio/Web/pres_icon.pdf differ diff --git a/Pages/VGM/Lippstock_VL_VGM_BodyCopy.docx b/Pages/VGM/Lippstock_VL_VGM_BodyCopy.docx new file mode 100644 index 0000000..0fded0b Binary files /dev/null and b/Pages/VGM/Lippstock_VL_VGM_BodyCopy.docx differ diff --git a/Pages/VGM/about.html b/Pages/VGM/about.html new file mode 100644 index 0000000..e88ed43 --- /dev/null +++ b/Pages/VGM/about.html @@ -0,0 +1,94 @@ + + + + + +VGM Analysis - Community + + + + + + +
+ +
+ Hamburger Menu + +
+ + + +
+
+

Community

+
+
+ +
+ Piano Header +
+ +
+ +
+
+ MIDI Keyboard +

+ +

Well, who are we?

+

In short, the VGM Analysis community is a vast collection of different people with a mutual love for music and video games. Those within the community will research and source the sounds and samples used in video game music and publicize knowledge of the tools or information they found so that it may help other digital musicians in the future. That’s all pretty self-explanatory, but what are the more intricate details of the community? What’s their history? Why video games? That will all be answered right here!

+
+ +
+
+

Video Games

+

Can't be video game music without video games

+

Countless games, even those of today, use digital sounds and samples to make up the instruments within their songs, and because of this fact, it becomes possible to research and source these sounds, be them sampled or synthesized. In doing this, the VGM Analysis community can not only trace back the sources of certain sounds and digital instruments, but they can also provide them as tools to other aspiring musicians.


+ +

Methods of Sharing

+

A good way to help others is by sharing knowledge

+

So, if information about a game and its music are collected, where are they shared? The most common way of sharing information about video game music is through online digital records. These can be Google or Microsoft spreadsheets or word documents, full webpages or websites, Community forums and servers, or really any sharable online medium. The most common digital records to find are called sample lists, and they typically contain some or all sources for the samples and sounds used in a single video game or game series. There even exist some that compile other sample lists together, and others that go on to list hundreds of games and the sources to their audio.


+ +

Doing it Together

+

A community isn't a community without teamwork

+

The process to operating in the VGM Analysis community varies from person to person, but the surefire thing to note about it first and foremost is that the community thrives on teamwork. Everyone comes from different backgrounds, different experiences, and most significantly, everyone has worked with and heard different things. Sourcing something could take a long time, especially if all you have to work with is a sound file, but with a full community of sleuths who all search for sources for countless sounds and samples, there’s a good chance someone among you might know something that could help, and they’re merely a message away. This is why sharing and teamwork is so important, because with games and the internet as a whole being so broad and vast, the best and most reliable search engines might just be your peers.

+
+
+ +
+ +
+ + +
+ + + diff --git a/Pages/VGM/audio/fallendown.mp3 b/Pages/VGM/audio/fallendown.mp3 new file mode 100644 index 0000000..428fc0b Binary files /dev/null and b/Pages/VGM/audio/fallendown.mp3 differ diff --git a/Pages/VGM/audio/fallendown.ogg b/Pages/VGM/audio/fallendown.ogg new file mode 100644 index 0000000..416d794 Binary files /dev/null and b/Pages/VGM/audio/fallendown.ogg differ diff --git a/Pages/VGM/audio/wr_01.mp3 b/Pages/VGM/audio/wr_01.mp3 new file mode 100644 index 0000000..a0f6d07 Binary files /dev/null and b/Pages/VGM/audio/wr_01.mp3 differ diff --git a/Pages/VGM/audio/wr_01.ogg b/Pages/VGM/audio/wr_01.ogg new file mode 100644 index 0000000..77e956f Binary files /dev/null and b/Pages/VGM/audio/wr_01.ogg differ diff --git a/Pages/VGM/audio/wr_02.mp3 b/Pages/VGM/audio/wr_02.mp3 new file mode 100644 index 0000000..1f4b3de Binary files /dev/null and b/Pages/VGM/audio/wr_02.mp3 differ diff --git a/Pages/VGM/audio/wr_02.ogg b/Pages/VGM/audio/wr_02.ogg new file mode 100644 index 0000000..97e0bbf Binary files /dev/null and b/Pages/VGM/audio/wr_02.ogg differ diff --git a/Pages/VGM/audio/wr_02b.mp3 b/Pages/VGM/audio/wr_02b.mp3 new file mode 100644 index 0000000..64b4bce Binary files /dev/null and b/Pages/VGM/audio/wr_02b.mp3 differ diff --git a/Pages/VGM/audio/wr_02b.ogg b/Pages/VGM/audio/wr_02b.ogg new file mode 100644 index 0000000..23fa4bb Binary files /dev/null and b/Pages/VGM/audio/wr_02b.ogg differ diff --git a/Pages/VGM/audio/wr_03.mp3 b/Pages/VGM/audio/wr_03.mp3 new file mode 100644 index 0000000..456a0f3 Binary files /dev/null and b/Pages/VGM/audio/wr_03.mp3 differ diff --git a/Pages/VGM/audio/wr_03.ogg b/Pages/VGM/audio/wr_03.ogg new file mode 100644 index 0000000..5873ad1 Binary files /dev/null and b/Pages/VGM/audio/wr_03.ogg differ diff --git a/Pages/VGM/audio/wr_03b.mp3 b/Pages/VGM/audio/wr_03b.mp3 new file mode 100644 index 0000000..89023fd Binary files /dev/null and b/Pages/VGM/audio/wr_03b.mp3 differ diff --git a/Pages/VGM/audio/wr_03b.ogg b/Pages/VGM/audio/wr_03b.ogg new file mode 100644 index 0000000..e7c5f79 Binary files /dev/null and b/Pages/VGM/audio/wr_03b.ogg differ diff --git a/Pages/VGM/bargraph.js b/Pages/VGM/bargraph.js new file mode 100644 index 0000000..cb25864 --- /dev/null +++ b/Pages/VGM/bargraph.js @@ -0,0 +1,129 @@ +// JavaScript Document + +anychart.onDocumentReady(function() { + + anychart.theme(anychart.themes.darkEarth); + + /* + 1930 : 2 + 1961 : 2 + 1964 : 1 + 1965 : 1 + 1966 : 1 + 1967 : 4 + 1969 : 4 + 1970 : 2 + 1972 : 2 + 1973 : 4 + 1975 : 2 + 1976 : 2 + 1978 : 2 + 1982 : 3 + 1983 : 8 + 1984 : 4 + 1985 : 9 + 1986 : 5 + 1987 : 164 + 1988 : 76 + 1989 : 144 + 1990 : 137 + 1991 : 325 + 1992 : 204 + 1993 : 140 + 1994 : 930 + 1995 : 268 + 1996 : 581 + 1997 : 70 + 1998 : 27 + 1999 : 225 + 2000 : 201 + 2001 : 138 + 2002 : 190 + 2003 : 339 + 2004 : 447 + 2005 : 172 + 2006 : 238 + 2007 : 478 + 2008 : 307 + 2009 : 135 + 2010 : 69 + 2011 : 192 + 2012 : 12 + 2013 : 51 + 2014 : 28 + 2015 : 25 + 2016 : 9 + 2017 : 3 + 2018 : 5 + 50 years*/ + + // set the data + var data = { + header: ["Year", "Number of Games Analyzed"], + rows: [ + ["1930", 2], + ["1961", 2], + ["1964", 1], + ["1965", 1], + ["1966", 1], + ["1967", 4], + ["1969", 4], + ["1970", 2], + ["1972", 2], + ["1973", 4], + ["1975", 2], + ["1976", 2], + ["1978", 2], + ["1982", 3], + ["1983", 8], + ["1984", 4], + ["1985", 9], + ["1986", 5], + ["1987", 164], + ["1988", 76], + ["1989", 144], + ["1990", 137], + ["1991", 325], + ["1992", 204], + ["1993", 140], + ["1994", 930], + ["1995", 268], + ["1996", 581], + ["1997", 70], + ["1998", 27], + ["1999", 225], + ["2000", 201], + ["2001", 138], + ["2002", 190], + ["2003", 339], + ["2004", 447], + ["2005", 172], + ["2006", 238], + ["2007", 478], + ["2008", 307], + ["2009", 135], + ["2010", 69], + ["2011", 192], + ["2012", 12], + ["2013", 51], + ["2014", 28], + ["2015", 25], + ["2016", 9], + ["2017", 3], + ["2018", 5] + ]}; + + // create the chart + var chart = anychart.column(); + + // add data + chart.data(data); + + // set the chart title + chart.title("Release Years of Games Researched by the VGM Analysis Community"); + + + // draw + chart.container("graphContainer"); + chart.draw(); +}); \ No newline at end of file diff --git a/Pages/VGM/font/._Apotek_200.otf b/Pages/VGM/font/._Apotek_200.otf new file mode 100644 index 0000000..0b89bc2 Binary files /dev/null and b/Pages/VGM/font/._Apotek_200.otf differ diff --git a/Pages/VGM/font/._Apotek_500.otf b/Pages/VGM/font/._Apotek_500.otf new file mode 100644 index 0000000..89f33c5 Binary files /dev/null and b/Pages/VGM/font/._Apotek_500.otf differ diff --git a/Pages/VGM/font/._Apotek_600.otf b/Pages/VGM/font/._Apotek_600.otf new file mode 100644 index 0000000..ac92f39 Binary files /dev/null and b/Pages/VGM/font/._Apotek_600.otf differ diff --git a/Pages/VGM/font/._Apotek_700.otf b/Pages/VGM/font/._Apotek_700.otf new file mode 100644 index 0000000..01d19fb Binary files /dev/null and b/Pages/VGM/font/._Apotek_700.otf differ diff --git a/Pages/VGM/font/._Apotek_800.otf b/Pages/VGM/font/._Apotek_800.otf new file mode 100644 index 0000000..d85bf07 Binary files /dev/null and b/Pages/VGM/font/._Apotek_800.otf differ diff --git a/Pages/VGM/font/._FOT-KafuTechnoStd-H.otf b/Pages/VGM/font/._FOT-KafuTechnoStd-H.otf new file mode 100644 index 0000000..b625672 Binary files /dev/null and b/Pages/VGM/font/._FOT-KafuTechnoStd-H.otf differ diff --git a/Pages/VGM/font/Apotek_200.otf b/Pages/VGM/font/Apotek_200.otf new file mode 100644 index 0000000..4df29fc Binary files /dev/null and b/Pages/VGM/font/Apotek_200.otf differ diff --git a/Pages/VGM/font/Apotek_300.otf b/Pages/VGM/font/Apotek_300.otf new file mode 100644 index 0000000..3c2ad77 Binary files /dev/null and b/Pages/VGM/font/Apotek_300.otf differ diff --git a/Pages/VGM/font/Apotek_400.otf b/Pages/VGM/font/Apotek_400.otf new file mode 100644 index 0000000..14f4aee Binary files /dev/null and b/Pages/VGM/font/Apotek_400.otf differ diff --git a/Pages/VGM/font/Apotek_500.otf b/Pages/VGM/font/Apotek_500.otf new file mode 100644 index 0000000..99623b8 Binary files /dev/null and b/Pages/VGM/font/Apotek_500.otf differ diff --git a/Pages/VGM/font/Apotek_600.otf b/Pages/VGM/font/Apotek_600.otf new file mode 100644 index 0000000..0988972 Binary files /dev/null and b/Pages/VGM/font/Apotek_600.otf differ diff --git a/Pages/VGM/font/Apotek_700.otf b/Pages/VGM/font/Apotek_700.otf new file mode 100644 index 0000000..82132ec Binary files /dev/null and b/Pages/VGM/font/Apotek_700.otf differ diff --git a/Pages/VGM/font/Apotek_800.otf b/Pages/VGM/font/Apotek_800.otf new file mode 100644 index 0000000..9d62f75 Binary files /dev/null and b/Pages/VGM/font/Apotek_800.otf differ diff --git a/Pages/VGM/font/Bungee.otf b/Pages/VGM/font/Bungee.otf new file mode 100644 index 0000000..a25e470 Binary files /dev/null and b/Pages/VGM/font/Bungee.otf differ diff --git a/Pages/VGM/img/._logo_ddlc.png b/Pages/VGM/img/._logo_ddlc.png new file mode 100644 index 0000000..ba16c18 Binary files /dev/null and b/Pages/VGM/img/._logo_ddlc.png differ diff --git a/Pages/VGM/img/._logo_deltarune.jpg b/Pages/VGM/img/._logo_deltarune.jpg new file mode 100644 index 0000000..94df074 Binary files /dev/null and b/Pages/VGM/img/._logo_deltarune.jpg differ diff --git a/Pages/VGM/img/._logo_touhou.png b/Pages/VGM/img/._logo_touhou.png new file mode 100644 index 0000000..1c9df58 Binary files /dev/null and b/Pages/VGM/img/._logo_touhou.png differ diff --git a/Pages/VGM/img/._logo_undertale.jpg b/Pages/VGM/img/._logo_undertale.jpg new file mode 100644 index 0000000..f1a34a0 Binary files /dev/null and b/Pages/VGM/img/._logo_undertale.jpg differ diff --git a/Pages/VGM/img/fallendown_01.png b/Pages/VGM/img/fallendown_01.png new file mode 100644 index 0000000..9a89bbd Binary files /dev/null and b/Pages/VGM/img/fallendown_01.png differ diff --git a/Pages/VGM/img/fallendown_02.png b/Pages/VGM/img/fallendown_02.png new file mode 100644 index 0000000..511a357 Binary files /dev/null and b/Pages/VGM/img/fallendown_02.png differ diff --git a/Pages/VGM/img/games_graph.png b/Pages/VGM/img/games_graph.png new file mode 100644 index 0000000..28f1e78 Binary files /dev/null and b/Pages/VGM/img/games_graph.png differ diff --git a/Pages/VGM/img/hamburger-01.png b/Pages/VGM/img/hamburger-01.png new file mode 100644 index 0000000..316c4c9 Binary files /dev/null and b/Pages/VGM/img/hamburger-01.png differ diff --git a/Pages/VGM/img/hero.png b/Pages/VGM/img/hero.png new file mode 100644 index 0000000..a757bd5 Binary files /dev/null and b/Pages/VGM/img/hero.png differ diff --git a/Pages/VGM/img/hero_waveform.png b/Pages/VGM/img/hero_waveform.png new file mode 100644 index 0000000..7dde196 Binary files /dev/null and b/Pages/VGM/img/hero_waveform.png differ diff --git a/Pages/VGM/img/keyboard.png b/Pages/VGM/img/keyboard.png new file mode 100644 index 0000000..cc67110 Binary files /dev/null and b/Pages/VGM/img/keyboard.png differ diff --git a/Pages/VGM/img/logo_ddlc.png b/Pages/VGM/img/logo_ddlc.png new file mode 100644 index 0000000..c38c55c Binary files /dev/null and b/Pages/VGM/img/logo_ddlc.png differ diff --git a/Pages/VGM/img/logo_deltarune.jpg b/Pages/VGM/img/logo_deltarune.jpg new file mode 100644 index 0000000..0fc742c Binary files /dev/null and b/Pages/VGM/img/logo_deltarune.jpg differ diff --git a/Pages/VGM/img/logo_touhou.png b/Pages/VGM/img/logo_touhou.png new file mode 100644 index 0000000..ca89655 Binary files /dev/null and b/Pages/VGM/img/logo_touhou.png differ diff --git a/Pages/VGM/img/logo_undertale.jpg b/Pages/VGM/img/logo_undertale.jpg new file mode 100644 index 0000000..fadca0b Binary files /dev/null and b/Pages/VGM/img/logo_undertale.jpg differ diff --git a/Pages/VGM/img/piano-01.png b/Pages/VGM/img/piano-01.png new file mode 100644 index 0000000..dd3bd73 Binary files /dev/null and b/Pages/VGM/img/piano-01.png differ diff --git a/Pages/VGM/img/res_vssl.png b/Pages/VGM/img/res_vssl.png new file mode 100644 index 0000000..98ccd1f Binary files /dev/null and b/Pages/VGM/img/res_vssl.png differ diff --git a/Pages/VGM/img/res_wk.png b/Pages/VGM/img/res_wk.png new file mode 100644 index 0000000..1af8d7a Binary files /dev/null and b/Pages/VGM/img/res_wk.png differ diff --git a/Pages/VGM/index.html b/Pages/VGM/index.html new file mode 100644 index 0000000..dab221d --- /dev/null +++ b/Pages/VGM/index.html @@ -0,0 +1,107 @@ + + + + + + +VGM Analysis + + + + + + +
+ +
+ Hamburger Menu + +
+ +
+
+ Hover Here for Navigation +
+ +
+ +
+ VGM Analysis + VGM Analysis +
+ +
+ Piano Header +
+ +
+
+

Welcome!

+
+ +
+

This site is the ground for information about the VGM Analysis community, an online and asynchronous body of people who create, research, and of course, analyze music from video games. Here, you will find a trove of information about who they are, how they do what they do, what their goals are, and how the community operates as a collective whole.


+ +

Click any of the navigation tabs at the top or bottom of this page to start your journey, or press START below for a quick speedrun!

+
+ +
+ +
+ +
+
+

Who Are We?

+

As previously stated, the VGM Analysis community is a collection of people from a wide variety of musical backgrounds who study music from video games. Some do it for the sake of practicing sound design techniques, some search these songs for sounds and digital instruments they can use for their own production, and some simply use their findings to add to their musical palette. Overall, we all connect ourselves through a mutual interest or love of video game music, and a vast majority of us have done research of our own or even collaborated to create comprehensive and resource-packed repositories for others to use and share.


+

If you would like to know more about us, check out the Community section!


+ +

Why Do We Do This?

+

There are a variety of reasons we do what we obsess over video game music, though it might not be entirely obvious at first. The short answer is that we want to provide and share both resources and understandings gathered from researching and archiving video game music and their original sources. Essentially, you can think of us as a source; we archive tools, resources, information, and other goodies that those wanting to compose digital music can use and learn from.


+

For the full scoop, check out the Ventures page!


+ +

Where Can We Be Found?

+

Frankly, if you search for VGM Analysis communities on any social media platform or even Google, you’ll find many different groups that do what we do. Even though this community technically encompasses all of those who research and make video game music, we’re not all connected; there are so many VGM Analysis groups out there, whether you’re looking on Google, Discord, or any other platform. If you’re interested, just dive in using your search engine of choice and pick a place to begin!


+

Some of the notable online community servers and projects are in the Community page, so go take a look if you’re interested!

+
+ +
+

You can also find links to some of the resources people or teams in the community have made over in the Resources page. Want to try doing some analysis of music yourself? Check out the Methods page and give it a shot!

+
+
+ +
+ +
+ + +
+ + + diff --git a/Pages/VGM/methods.html b/Pages/VGM/methods.html new file mode 100644 index 0000000..1954b08 --- /dev/null +++ b/Pages/VGM/methods.html @@ -0,0 +1,164 @@ + + + + + +VGM Analysis - Methods + + + + + + +
+ +
+ Hamburger Menu + +
+ + + +
+
+

Methods

+
+
+ +
+ Piano Header +
+ +
+ +
+

How do we analyze video game music?

+

In short, the VGM Analysis community is a vast collection of different people with a mutual love for music and video games. Those within the community will research and source the sounds and samples used in video game music and publicize knowledge of the tools or information they found so that it may help other digital musicians in the future. That’s all pretty self-explanatory, but what are the more intricate details of the community? What’s their history? Why video games? That will all be answered right here!

+
+ +
+
+ +

Frequency Cancellation


+

When a song is loaded to the brim with instruments and other sounds, it can be hard to decipher what exactly is going on in the more intricate levels. Using frequency cancellation, we can extract layers of some songs to remove vocals, instruments, noise, and other audio information from songs that have a wide range of frequencies present throughout.


+

For a quick demonstration of how this works and how you can do it yourself, here’s a quick video that explains frequency cancellation in more detail and describes how you can do it yourself.



+ +
+ + +

Results from Video

+

Original Audio

+

Fox, Toby. “The World Revolving.” Deltarune Chapter 1 Soundtrack. 2018.

+ + +

Removing Normal Frequencies (120Hz-9000Hz)

+

Focus: strings, accordion, cymbals, square wave

+ + +

Removing Center Frequencies (120Hz-9000Hz)

+

Focus: strings, accordion, cymbals, square wave

+ + +

Isolating Normal Frequencies (120Hz-9000Hz)

+

Focus: pan flute, drums, brass + synth, bass

+ + +

Isolating Center Frequencies (120Hz-9000Hz)

+

Focus: pan flute, drums, brass + synth, bass

+ + +

Check out gmodfan11's Undertale Music With No Main Melody playlist for more examples of frequency cancellation with digital music.

+

+ +

Spectrogram Analysis


+

A spectrogram is a visual representation of the frequencies of any given audio, and they are often very helpful in deciphering some of the notes of a song. This is most effective when the song is soft or has few instruments. The way a spectrogram communicates the pitches and frequencies of a sound to an analyst is by providing somewhat of a visual reference for where the notes would appear in a horizontal piano roll.


+

Take a look at this example using a snippet of Toby Fox’s “Fallen Down” as the base audio.


+ +
+

"Fallen Down" by Toby Fox

+

Fox, Toby. “Fallen Down.” Undertale Soundtrack. 2015.

+ + +

Spectrogram of the audio

+
+ Sectrogram of Toby Fox's Fallen Down +
+ +

Actual transcribed piano roll

+
+ Piano roll arrangement of Toby Fox's Fallen Down +
+
+ +

+ +

Using a Keyboard


+

This one might be a bit on the nose and also not as easy for people who aren’t good at differentiating notes by pitch alone, but this is a super important thing to practice in any aspiring musician’s cycle of learning. When it comes to piecing together how a song works, it’s important to understand the flow and composition of the melody and its supporting factors. Using a piano or MIDI keyboard to attempt to somewhat transcribe the music into your own muscle memory will not only build skill towards actual piano playing, but it will also help you find patterns within the music that can train you to look for patterns elsewhere and even in your own works. While this is more of learning tip than a method of analysis, it still warrants some focus since it’s both important and typically not too difficult for someone to be able to begin playing piano and learning about the mechanics of music that way.

+ + +
+
+ +
+ +
+ + +
+ + + diff --git a/Pages/VGM/resources.html b/Pages/VGM/resources.html new file mode 100644 index 0000000..fba3d18 --- /dev/null +++ b/Pages/VGM/resources.html @@ -0,0 +1,92 @@ + + + + + +VGM Analysis - Resources + + + + + + +
+ +
+ Hamburger Menu + +
+ + + +
+
+

Resources

+
+
+ +
+ Piano Header +
+ +
+ +
+

Where do the spoils live?

+

It’s pretty obvious now that the goal of the VGM Analysis community is to provide musicians with tools, resources, and knowledge for composing music using video game music as the reservoir. There are heaps of content that the community has produced, some being troves of juicy information and others being actual utilities that can be used and applied to one’s works. Here’s a few that will give you a good taste of what comes out of the VGM Analysis community.

+
+ +
+
+
+ The VGM Sound Sources List +
+ +

The Sound Sources List


+

As a group dedicated to sourcing sounds, samples, tools, and information about video game music, the VGM Analysis community, there have to be places in which to output this information for others to easily view and reference. These are often done by creating online spreadsheets and word documents, and although these often focus on singular games, there are a select few that contain more. One of the largest of these is the VGM Sound Sources List, a compendium of countless different documents compiled by the people of the community. This spreadsheet contains several links to all kinds of helpful resources, such as sample lists for certain games or consoles, breakdowns of sound libraries made by big names in the music and sound design industry, guides for using certain music programs, and so much more.




+ +
+ William Kage’s SNES Soundfont Library +
+ +

William Kage’s SNES Soundfont Library


+

William Kage’s SNES Soundfont Library is a resource filled to the brim with soundfonts, or collections of playable virtual instruments, that contain all the instrument samples from different Super Nintendo games. The SNES era is an time of interest in the VGM Analysis community, as the console’s new sample-utilizing capabilities made it one of the first that predominantly used samples instead of chiptune tones. Thus, samples and music from the SNES became a staple in VGM compositions and as functional examples of how well these samples work under even the limitations of the consoles of the 90’s.

+
+
+ +
+ +
+ + +
+ + + diff --git a/Pages/VGM/ventures.html b/Pages/VGM/ventures.html new file mode 100644 index 0000000..36c8b5d --- /dev/null +++ b/Pages/VGM/ventures.html @@ -0,0 +1,110 @@ + + + + + + +VGM Analysis - Ventures + + + + + + +
+ +
+ Hamburger Menu + +
+ + + +
+
+

Ventures

+
+
+ +
+ Piano Header +
+ +
+ +
+

Where does the community focus their attention?

+

The community has found many games that exemplify how they want to help others, as there are many games nowadays that result from single developers and contain music that’s well worth the analysis. Even somewhat obscure things can catch the attention of a VGM analyst, as the broad spectrum of video game music offers a lot of opportunities to learn and grow even without immediately analyzing it. To get an idea of how long the VGM Analysis community has been analyzing titles, check out the bar grpah on the right compiled using data gathered from G-Boy's VGM Instrument Source.

+

The formatting for this really sucks right now because AnyChart is a bad choice for interactive HTML charts. Never use it.


+

Anyways, without further ado, here is a collection of just a few of the games that live as staples within the VGM Analysis community.

+
+ +
+ + +
+ +
+
+
+ Undertale + Deltarune +
+

Undetale & Deltarune

+

By Toby Fox, 2015-present

+

Since its release in 2015, Toby Fox’s Undertale has become a staple in popular culture for its compelling concept, personality, and charm, and its successor, Deltarune, is shaping up to have a similar effect. One of the most notable things about these games for many, however, are their soundtracks. Nearly all the songs in the entirety of both games are made by one person, that being Fox himself. Additionally, most of the songs are made with entirely free tools, such as the soundfonts found on William Kage’s site above. There also exist a variety of sample lists for Undertale, Deltarune, and other works by Toby Fox. The first ever made by the community was a sample list for only Undertale back in 2016, and as new information was found and as Fox released more games, the community created a much more accurate and comprehensive sample list. Others exist as well, and the abundance of them shows how important this game was to this community and speaks to how helpful it was and is to those interested in music production.





+ +
+ Touhou +
+ +

The Touhou Project

+

By Jun'ya Ota / ZUN, 1996-present

+

The Touhou Project is a series of shoot-em-up games that was first started back in 1996 and is still receiving sequels even to this day. Jun’ya Ota, better known by his moniker ZUN, is the sole developer, artist, and composer of his games, much like Toby Fox. The music of the Touhou series has changed with time, beginning as chiptune and later evolving to use mixtures of Roland samples and other virtual instruments. Attention from the VGM Analysis community arose around these games and their soundtracks because of what they were composed with, which as previously mentioned were predominantly Roland digital instruments. This as well as the popularization of the Romantic Trumpet samples is what cemented this series into the community’s interest and made it an inspiration for some VGM composers.





+ +
+ Doki Doki Literature Club +
+ +

Doki Doki Literature Club

+

By Dan Salvato, 2017

+

Just by the title, the game doesn’t sound too terribly interesting or unique, and this is the impression one would continue to have if they began playing it themselves. Surprisingly however, this game is a psychological horror experience disguised as a safe and harmless visual novel. The game was also developed by one person, Dan Salvato, who also wrote the story and composed the music. Because of the subversion of expectations and the mostly solo development, the game garnered a lot of attention from multitudes of gaming communities, a small contingency of which being those from the VGM Analysis community. It was found that mostly a single instrument pack for a rather popular software plugin called Nexus was used to make all the music in the game. While interest in the music of this game wasn’t as high as Undertale or the Touhou Project, it caught people’s attention and even spawned a dedicated sample list.

+
+
+ +
+ +
+ + +
+ + + diff --git a/Pages/VGM/vgm.css b/Pages/VGM/vgm.css new file mode 100644 index 0000000..7c3ac71 --- /dev/null +++ b/Pages/VGM/vgm.css @@ -0,0 +1,462 @@ +@charset "utf-8"; + +*{ + margin: 0; + padding: 0; +} + +body{ + color: #fff; + background-color: #320062; + overflow-x: hidden; +} + +.mainContainer{ + +} + +img{ + width: 100%; + height: 100%; +} + +a{ + text-decoration: none; +} + +/* Fonts */ +/* Bungee */ +@font-face { + font-family: 'Bungee'; + src: url('font/Bungee.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +/* Apotek */ +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_200.otf') format('opentype'); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_300.otf') format('opentype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_400.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_500.otf') format('opentype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_600.otf') format('opentype'); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_700.otf') format('opentype'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_800.otf') format('opentype'); + font-weight: 800; + font-style: normal; +} + +/* Hero */ +.heroContainer{ + position: relative; + background-color: #000; +} +.heroImage{ + position: relative; + display: block; + margin: 0 auto; + width: 45%; + z-index: 100; +} +.heroWaveform{ + position: absolute; + left: 0; + top: 30%; + width: 100%; + height: 50%; + opacity: 0.2; + z-index: 1; +} +.introImg{ + mix-blend-mode: overlay; +} + +/* Nav */ +nav{ + +} + +nav a:link{ + font-family: 'Bungee',sans-serif; + font-size: 2rem; + color: rgba(255,255,255,0.5); + transition: color 100ms linear; +} +nav a:hover{ + color: rgba(255,255,255,0.75); +} +nav a:active{ + color: rgba(255,255,255,1); +} +nav a:visited{ + color: rgba(255,255,255,0.25); +} +.currentPage{ + background: -webkit-linear-gradient(90deg, rgba(255,109,0,1) 0%, rgba(255,109,0,1) 25%, rgba(240,133,0,1) 26%, rgba(240,133,0,1) 50%, rgba(240,165,0,1) 51%, rgba(240,165,0,1) 75%, rgba(240,188,0,1) 76%, rgba(240,188,0,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + opacity: 0.80; +} +.buttonNavCurrentPage{ + color: #FFBE00; + opacity: 1; +} + +.navItem{ + flex: 1; + display: flex; + justify-content: center; +} +.navItem:first-child a { margin-right: auto; } +.navItem:last-child a { margin-left: auto; } + +.topNavHoverText{ + position: absolute; + left: 0; + right: 0; + margin: 1em auto; + font-family: 'Bungee',sans-serif; + font-size: 1.5rem; + color: #fff; + text-align: center; + opacity: 0; + transition: all 100ms linear; + + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ + pointer-events: none; + + animation: topNavHoverText_Appear 5000ms linear forwards; + animation-iteration-count: 1; +} + +.topNavBG{ + position: relative; + background-color: #000; +} + +.topNavBG:hover .topNav{ + visibility: visible; + opacity: 1; +} + +.topNavBG:hover .topNavHoverText{ + opacity: 0; + + animation: topNavHoverText_Hide 1ms linear; + animation-iteration-count: 1; +} + +.topNav{ + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 1em 8em; + transition: all 200ms linear; + visibility: hidden; + opacity: 0; +} + +.bottomNav{ + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 0 18em; + transition: all 200ms linear; +} +.bottomNav a:link{ + font-size: 1.5rem; +} + +.buttonNav{ + display: none; +} + + +/* Main Body */ +#bodyContainer{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(5,auto); +} + +/* Grid Items */ +.pageTitle{ + grid-column: 1/-1; + grid-row: 1/2; + margin-bottom: 1em; +} +.body01{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); + margin: 2em 0 4em; +} +#mainBody{ + grid-column: 1/-1; + grid-row: 3/4; + display: none; + grid-template-columns: repeat(7,1fr); + grid-template-rows: auto auto; +} +#mainBody main:nth-child(n){ + margin-bottom: 4em; +} +#mainBody main:last-child{ + margin-bottom: 4em; +} +.body02{ + grid-column: 3/-3; + grid-row: 1/2; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); +} +.body03{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); +} + + +/* Start Button */ +#startButtonContainer{ + grid-column: 2/-2; + grid-row: 3/4; + text-align: center; + margin-bottom: 1em; +} +#startButtonContainer button{ + font-family: 'Bungee',sans-serif; + font-size: 2rem; + color: #fff; + background-color: #26004A; + border: 4px solid #fff; + padding: 0 0.75em; +} +#startButtonContainer button:hover{ + color: #15002A; + background: -webkit-linear-gradient(90deg, rgba(255,109,0,1) 0%, rgba(255,109,0,1) 25%, rgba(240,133,0,1) 26%, rgba(240,133,0,1) 50%, rgba(240,165,0,1) 51%, rgba(240,165,0,1) 75%, rgba(240,188,0,1) 76%, rgba(240,188,0,1) 100%); + border-color: rgba(235,215,255,1.00); + cursor: pointer; +} + + +/* Footer */ +footer{ + text-align: center; + background-color: #000; + padding: 2em; +} + + +/* Text Elements */ +h1{ + font-family: 'Bungee',sans-serif; + font-size: 4rem; +} +.pageTitle > h1{ + text-align: center; + background: -webkit-linear-gradient(90deg, rgba(255,109,0,1) 0%, rgba(255,109,0,1) 25%, rgba(240,133,0,1) 26%, rgba(240,133,0,1) 50%, rgba(240,165,0,1) 51%, rgba(240,165,0,1) 75%, rgba(240,188,0,1) 76%, rgba(240,188,0,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +h2{ + font-family: 'Bungee',sans-serif; + font-size: 3rem; + line-height: 4rem; +} +#mainBody h2{ + margin-top: 2rem; + background: linear-gradient(180deg, rgba(241,227,255,1) 0%, rgba(241,227,255,1) 25%, rgba(232,208,255,1) 26%, rgba(232,208,255,1) 50%, rgba(220,187,255,1) 51%, rgba(220,187,255,1) 75%, rgba(199,144,255,1) 76%, rgba(199,144,255,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +#mainBody h2:first-child{ + margin-top: 0; +} + +h3{ + font-family: 'Apotek',sans-serif; + font-weight: 500; + font-size: 1.8rem; +} + +p{ + font-family: 'Apotek',sans-serif; + font-weight: 300; + font-size: 1.5rem; + color: rgba(235,215,255,1.00); +} +footer p{ + font-size: 1rem; + color: rgba(110,110,110,1.00); +} + +strong{ + color: #C082FF; +} + +a{ + color: rgba(240,188,0,1); +} + + +/* Other */ +.gradient_In{ + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%); + z-index: -1; +} +.gradient_Out{ + background: rgb(0,0,0); + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%); + height: 80px; + z-index: -1; +} + + +/* Keyframes */ +@keyframes topNavHoverText_Appear{ + 0%{ + opacity: 0; + } + 80%{ + opacity: 0; + } + 100%{ + opacity: 0.25; + } +} + +@keyframes topNavHoverText_Hide{ + from{ + opacity: 0; + } + to{ + opacity: 0; + } +} + + +@media all and (max-width: 640px){ + + .pageTitle > h1{ + font-size: 3rem; + } + h2{ + font-size: 2.5rem; + line-height: 2.5rem; + margin-bottom: 0.5rem; + } + + h3{ + font-size: 1.5rem; + } + + p{ + font-size: 1.25rem; + } + + .topNavBG, .topNav, .topNavHoverText, .bottomNav{ + display: none; + } + + .buttonNav{ + display: block; + position: fixed; + bottom: 24px; + right: 24px; + width: 48px; + height: 48px; + background-color: #5400A6; + z-index: 101; + text-align: center; + transition: all 200ms linear; + padding: 1rem; + } + .buttonNav img{ + position: absolute; + left: 25%; + top: 25%; + width: 50%; + height: 50%; + max-width: 50%; + max-height: 50%; + opacity: 1; + transition: all 100ms linear; + } + .buttonNavOpen{ + display: none; + } + .buttonNav:hover, .buttonNav:active{ + width: calc(100% - 128px); + height: 400px; + background-color: #000; + } + .buttonNav:hover img, .buttonNav:active img{ + opacity: 0; + } + .buttonNav:hover .buttonNavOpen, .buttonNav:active .buttonNavOpen{ + display: flex; + flex-direction: column; + justify-content: space-around; + } + + .heroImage{ + width: 75%; + } + + .body01{ + grid-column: 1/-1; + } + .body02{ + grid-column: 1/-1; + } + .body03{ + grid-column: 1/-1; + } + +} diff --git a/Pages/VGM/vgm_pages.css b/Pages/VGM/vgm_pages.css new file mode 100644 index 0000000..d1dd25b --- /dev/null +++ b/Pages/VGM/vgm_pages.css @@ -0,0 +1,501 @@ +@charset "utf-8"; + +*{ + margin: 0; + padding: 0; +} + +body{ + color: #fff; + background-color: #320062; +} + +#graphContainer{ + grid-column: -4/-2; + grid-row: 2/3; + width: 100%; + height: 80%; + margin-top: 3.5em; +} + +.mainContainer{ + +} + +img{ + width: 100%; + height: 100% !important; +} +.figure img{ + width: 60%; + margin-bottom: 1.5em; +} +.flex2Img{ + display: flex; + flex-direction: row; + justify-content: space-around; +} +.flex2Img img{ + width: 50%; + height: 50%; +} +.logoImg{ + display: block; + width: 50%; + height: auto; + margin: 0 auto; +} +.screenImg{ + display: block; + width: 100%; + height: auto; + max-width: 100%; + max0-height: auto; + margin: 0 auto; +} + +audio, video{ + margin-bottom: 3em; +} + +a{ + text-decoration: none; +} + +/* Fonts */ +/* Bungee */ +@font-face { + font-family: 'Bungee'; + src: url('font/Bungee.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +/* Apotek */ +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_200.otf') format('opentype'); + font-weight: 200; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_300.otf') format('opentype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_400.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_500.otf') format('opentype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_600.otf') format('opentype'); + font-weight: 600; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_700.otf') format('opentype'); + font-weight: 700; + font-style: normal; +} +@font-face { + font-family: 'Apotek'; + src: url('font/Apotek_800.otf') format('opentype'); + font-weight: 800; + font-style: normal; +} + +/* Page Title */ +.center{ + text-align: center; +} + + +/* Page Title */ +.titleContainer{ + position: relative; + background-color: #000; +} +.introImg{ + mix-blend-mode: overlay; + margin-top: 1.5em; +} + +/* Nav */ +nav{ + +} + +nav a:link{ + font-family: 'Bungee',sans-serif; + font-size: 2rem; + color: rgba(255,255,255,0.5); + transition: color 100ms linear; +} +nav a:hover{ + color: rgba(255,255,255,0.75); +} +nav a:active{ + color: rgba(255,255,255,1); +} +nav a:visited{ + color: rgba(255,255,255,0.25); +} +.currentPage{ + background: -webkit-linear-gradient(90deg, rgba(255,109,0,1) 0%, rgba(255,109,0,1) 25%, rgba(240,133,0,1) 26%, rgba(240,133,0,1) 50%, rgba(240,165,0,1) 51%, rgba(240,165,0,1) 75%, rgba(240,188,0,1) 76%, rgba(240,188,0,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + opacity: 0.80; +} +.buttonNavCurrentPage{ + color: #FFBE00; + opacity: 1; +} + +.navItem{ + flex: 1; + display: flex; + justify-content: center; +} +.navItem:first-child a { margin-right: auto; } +.navItem:last-child a { margin-left: auto; } + +.topNavHoverText{ + position: absolute; + left: 0; + right: 0; + margin: 1em auto; + font-family: 'Bungee',sans-serif; + font-size: 1.5rem; + color: #fff; + text-align: center; + opacity: 0; + transition: all 100ms linear; + + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ + pointer-events: none; + + animation: topNavHoverText_Appear 5000ms linear forwards; + animation-iteration-count: 1; +} + +.topNavBG{ + position: relative; + background-color: #000; +} + +.topNavBG:hover .topNav{ + visibility: visible; + opacity: 1; +} + +.topNavBG:hover .topNavHoverText{ + opacity: 0; + + animation: topNavHoverText_Hide 1ms linear; + animation-iteration-count: 1; +} + +.topNav{ + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 1em 8em; + transition: all 200ms linear; + visibility: hidden; + opacity: 0; +} + +.bottomNav{ + flex: 1; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + padding: 0 18em; + transition: all 200ms linear; +} +.bottomNav a:link{ + font-size: 1.5rem; +} + +.buttonNav{ + display: none; +} + + +/* Main Body */ +#bodyContainer{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(5,auto); +} + +/* Grid Items */ +.pageTitle{ + grid-column: 1/-1; + grid-row: 1/2; + margin-bottom: 2em; + text-align: center; +} +.body01{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); + margin-top: 4em; + margin-bottom: 4em; +} +.body01b{ + grid-column: 2/4; + grid-row: 2/3; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); + margin-top: 4em; + margin-bottom: 4em; +} +#mainBody{ + grid-column: 1/-1; + grid-row: 3/4; + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: auto auto; +} +#mainBody main:nth-child(n){ + margin-bottom: 4em; +} +#mainBody main:last-child{ + margin-bottom: 4em; +} +.body02{ + grid-column: 3/-3; + grid-row: 1/2; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); +} +.body03{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 2em; + outline: 20px solid rgba(0,0,0,0.25); + outline-offset: 0px; + background-color: rgba(0,0,0,0.5); +} + + +/* Footer */ +footer{ + text-align: center; + background-color: #000; + padding: 2em; +} + + +/* Text Elements */ +h1{ + font-family: 'Bungee',sans-serif; + font-size: 4rem; +} +.pageTitle > h1{ + text-align: center; + background: linear-gradient(0deg, rgba(255,136,0,1) 0%, rgba(255,136,0,1) 25%, rgba(240,165,0,1) 26%, rgba(240,165,0,1) 50%, rgba(240,197,0,1) 51%, rgba(240,197,0,1) 75%, rgba(240,213,0,1) 76%, rgba(240,213,0,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: -1em; +} + +h2{ + font-family: 'Bungee',sans-serif; + font-size: 3rem; + line-height: 3rem; +} +#mainBody h2{ + margin-top: 2rem; + background: linear-gradient(180deg, rgba(241,227,255,1) 0%, rgba(241,227,255,1) 25%, rgba(232,208,255,1) 26%, rgba(232,208,255,1) 50%, rgba(220,187,255,1) 51%, rgba(220,187,255,1) 75%, rgba(199,144,255,1) 76%, rgba(199,144,255,1) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +#mainBody h2:first-child{ + margin-top: 0.5rem; +} + +h3{ + font-family: 'Apotek',sans-serif; + font-weight: 500; + font-size: 1.8rem; + margin-bottom: 0.5rem; +} + +p{ + font-family: 'Apotek',sans-serif; + font-weight: 300; + font-size: 1.5rem; + color: rgba(235,215,255,1.00); +} +.pSource{ + font-family: 'Apotek',sans-serif; + font-weight: 200; + font-size: 1rem; + color: rgba(186,170,201,1.00); +} +footer p{ + font-size: 1rem; + color: rgba(110,110,110,1.00); +} + +strong{ + color: #C082FF; +} + +a{ + color: rgba(240,188,0,1); +} + + +/* Other */ +.gradient_In{ + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%); + z-index: -1; +} +.gradient_Out{ + background: rgb(0,0,0); + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%); + height: 80px; + z-index: -1; +} + + +/* Keyframes */ +@keyframes topNavHoverText_Appear{ + 0%{ + opacity: 0; + } + 80%{ + opacity: 0; + } + 100%{ + opacity: 0.25; + } +} + +@keyframes topNavHoverText_Hide{ + from{ + opacity: 0; + } + to{ + opacity: 0; + } +} + +@keyframes why{ + from{ + transform: rotateX(0deg) rotateY(0deg); + } + to{ + transform: rotateX(359deg) rotateY(359deg); + } +} + + +@media all and (max-width: 640px){ + + .pageTitle > h1{ + font-size: 3rem; + } + h2{ + font-size: 2.5rem; + line-height: 2.5rem; + margin-bottom: 0.5rem; + } + + h3{ + font-size: 1.5rem; + } + + p{ + font-size: 1.25rem; + } + + .topNavBG, .topNav, .topNavHoverText, .bottomNav{ + display: none; + } + + .buttonNav{ + display: block; + position: fixed; + bottom: 24px; + right: 24px; + width: 48px; + height: 48px; + background-color: #5400A6; + z-index: 101; + text-align: right; + transition: all 200ms linear; + padding: 1rem; + } + .buttonNav img{ + position: absolute; + left: 25%; + top: 25%; + width: 50%; + height: 50%; + max-width: 50%; + max-height: 50%; + opacity: 1; + transition: all 100ms linear; + } + .buttonNavOpen{ + display: none; + } + .buttonNavOpen a{ + display: contents; + } + .buttonNav:hover, .buttonNav:active{ + width: 224px; + height: 240px; + background-color: #000; + } + .buttonNav:hover img, .buttonNav:active img{ + opacity: 0; + display: none; + } + .buttonNav:hover .buttonNavOpen, .buttonNav:active .buttonNavOpen{ + display: flex; + flex-direction: column; + justify-content: space-around; + } + + .heroImage{ + width: 75%; + } + + .body01{ + grid-column: 1/-1; + } + .body02{ + grid-column: 1/-1; + } + .body03{ + grid-column: 1/-1; + } + +} \ No newline at end of file diff --git a/Pages/VGM/video/fc.webm b/Pages/VGM/video/fc.webm new file mode 100644 index 0000000..b279f93 Binary files /dev/null and b/Pages/VGM/video/fc.webm differ diff --git a/Pages/dreammirror/dom.html b/Pages/dreammirror/dom.html new file mode 100644 index 0000000..1112781 --- /dev/null +++ b/Pages/dreammirror/dom.html @@ -0,0 +1,248 @@ + + + + + +Domestic Locations / Dream Mirror + + + + + + + +
+ +
+
+ +
+ +
+
+
+ Dream Mirror +
+
+ + +
+ Flourish + Flourish + +
+

Home is Where the Heart Is

+
+
+

In most dreams, if one finds themselves within their home, a sentimental location, or a non-occupational place they spend a lot of time in, it often relates directly to them as a person. What else resides in these abodes? Who else? There is far more to uncover when considering the meaning for the additional pieces that make up one’s residence. What will you learn?

+
+ +
+
+

Home

+
+ +
+
+ Home + +
+
+
+
+
+ +
+

Your Dream Mirror

+ +

Place

+
+

Home is a representation of oneself. Our homes are where we find our families, our possessions, our memories, and so much more that directly connects back to ourselves

+
+ +
+
+
+
+
+
+
+ +
+
+

Who or what did you see?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

What objects do you remember finding?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

How did you feel?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+
+
+ + +
+ + + + diff --git a/Pages/dreammirror/dream_system.js b/Pages/dreammirror/dream_system.js new file mode 100644 index 0000000..4d183e6 --- /dev/null +++ b/Pages/dreammirror/dream_system.js @@ -0,0 +1,144 @@ +// JavaScript Document + +var pathText = "text.html" +var pathImg = "images.html" + +var activeSel_Heading = ""; +var activeSel_Text = ""; +var activeSel_Img = ""; +var runID_Heading = ""; +var runID_Text = ""; +var runID_Img = ""; + +// Who or what did you see? +$('input[name=DREAM_BEING]').change(function() { + activeSel_Heading = "#DH_INS_BEING"; + activeSel_Text = "#D_INS_BEING"; + activeSel_Img = "#DIMG_INS_BEING"; + runID_Heading = " #heading_being"; + switch($(this).val()) { + case 'Person': + runID_Text = " #being_01"; + runID_Img = " #beingImg_01"; + setContent(); + break; + case 'Cat': + runID_Text = " #being_02"; + runID_Img = " #beingImg_02"; + setContent(); + break; + case 'Dog': + runID_Text = " #being_03"; + runID_Img = " #beingImg_03"; + setContent(); + break; + case 'Bird': + runID_Text = " #being_04"; + runID_Img = " #beingImg_04"; + setContent(); + break; + case 'Lion': + runID_Text = " #being_05"; + runID_Img = " #beingImg_05"; + setContent(); + break; + default: + alert("grevious error\r\nwhat have you done"); + } +}); + +// What objects do you remember finding? +$('input[name=DREAM_OBJ]').change(function() { + activeSel_Heading = "#DH_INS_OBJ"; + activeSel_Text = "#D_INS_OBJ"; + activeSel_Img = "#DIMG_INS_OBJ"; + runID_Heading = " #heading_obj"; + switch($(this).val()) { + case 'Flower': + runID_Text = " #obj_01"; + runID_Img = " #objImg_01"; + setContent(); + break; + case 'Book': + runID_Text = " #obj_02"; + runID_Img = " #objImg_02"; + setContent(); + break; + case 'Clock': + runID_Text = " #obj_03"; + runID_Img = " #objImg_03"; + setContent(); + break; + case 'Lamp': + runID_Text = " #obj_04"; + runID_Img = " #objImg_04"; + setContent(); + break; + case 'Chair': + runID_Text = " #obj_05"; + runID_Img = " #objImg_05"; + setContent(); + break; + default: + alert("grevious error\r\nwhat have you done"); + } +}); + +// How did you feel? +$('input[name=DREAM_FEEL]').change(function() { + activeSel_Heading = "#DH_INS_FEEL"; + activeSel_Text = "#D_INS_FEEL"; + activeSel_Img = "#DIMG_INS_FEEL"; + runID_Heading = " #heading_feel"; + switch($(this).val()) { + case 'Happy': + runID_Text = " #feel_01"; + runID_Img = " #feelImg_01"; + setContent(); + break; + case 'Sad': + runID_Text = " #feel_02"; + runID_Img = " #feelImg_02"; + setContent(); + break; + case 'Angry': + runID_Text = " #feel_03"; + runID_Img = " #feelImg_03"; + setContent(); + break; + case 'Afraid': + runID_Text = " #feel_04"; + runID_Img = " #feelImg_04"; + setContent(); + break; + case 'Anxious': + runID_Text = " #feel_05"; + runID_Img = " #feelImg_05"; + setContent(); + break; + default: + alert("grevious error\r\nwhat have you done"); + } +}); + +function setContent(){ + $(activeSel_Heading).load(pathText + runID_Heading, function(status){ + // Failsafe + if (status == "error") { + $(activeSel_Heading).load("text.html #error_heading"); + } + }); + $(activeSel_Text).load(pathText + runID_Text, function(status){ + // Failsafe + if (status == "error") { + $(activeSel_Text).load("text.html #error"); + } + }); + $(activeSel_Img).load(pathImg + runID_Img, function(status){ + // Failsafe + if (status == "error") { + $(activeSel_Img).load("images.html #errorImg"); + } + }); +} + diff --git a/Pages/dreammirror/ent.html b/Pages/dreammirror/ent.html new file mode 100644 index 0000000..2482aeb --- /dev/null +++ b/Pages/dreammirror/ent.html @@ -0,0 +1,249 @@ + + + + + +Entertaining Locations / Dream Mirror + + + + + + + +
+ +
+
+ +
+ +
+
+
+ Dream Mirror +
+
+ + +
+ Flourish + Flourish + +
+

The Joy of Experience

+
+
+

Just about everyone knows the feeling of immense joy that washes over us when we go someplace that is interesting, exciting, or generally fun for us. From places of recreation to carnivals and theme parks, there are countless types of locations of all shapes and sizes to choose from when it comes to finding a place to have fun and escape reality. Thus, these places may hold a deeper connection to us than one may suspect. What does your solace tell about you?

+
+ +
+
+

Themepark

+
+ +
+
+ Theme Park + +
+
+
+
+
+ +
+

Your Dream Mirror

+ +

Place

+
+

People go to theme parks to escape reality and enjoy the attractions, characters, and lore within them. If you find yourself in a theme park within your dreams, you might be manifesting such a joyous location out of a desire to escape Incidentally, if you dream that you’re within the restricted areas of a theme park, this could point to unexpressed rebellious feelings which you either repress or don’t know you have

+
+ +
+
+
+
+
+
+
+ +
+
+

Who or what did you see?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

What objects do you remember finding?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

How did you feel?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+
+
+ + +
+ + + + diff --git a/Pages/dreammirror/ess.html b/Pages/dreammirror/ess.html new file mode 100644 index 0000000..55e5d13 --- /dev/null +++ b/Pages/dreammirror/ess.html @@ -0,0 +1,248 @@ + + + + + +Essential Locations / Dream Mirror + + + + + + + +
+ +
+
+ +
+ +
+
+
+ Dream Mirror +
+
+ + +
+ Flourish + Flourish + +
+

There One Way or Another

+
+
+

Whether it be a place you rarely visit or somewhere you go often, there are many places that you or others consider essential for basic needs. These places can be anything from the school you and countless other peers attend each day to the hospitals many of us need to visit occasionally despite some of us not wanting to. In essence, these places construct or maintain us as humans and play a big role in defining who we are, how we act, and sometimes even the conditions we find ourselves in.

+
+ +
+
+

School

+
+ +
+
+ School + +
+
+
+
+
+ +
+

Your Dream Mirror

+ +

Place

+
+

Schools are a place that represents one’s past and potential future, as a school in reality is where one goes to grow and develop themselves. In a dream, the setting of a school may denote that you are growing in your knowledge or maturity, though it could also mean that you feel you need to grow and mature further from how you are now

+
+ +
+
+
+
+
+
+
+ +
+
+

Who or what did you see?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

What objects do you remember finding?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

How did you feel?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+
+
+ + +
+ + + + diff --git a/Pages/dreammirror/font/BebasKaiReg.otf b/Pages/dreammirror/font/BebasKaiReg.otf new file mode 100644 index 0000000..6bd0ccd Binary files /dev/null and b/Pages/dreammirror/font/BebasKaiReg.otf differ diff --git a/Pages/dreammirror/font/FGURWBook.otf b/Pages/dreammirror/font/FGURWBook.otf new file mode 100644 index 0000000..dfbc43f Binary files /dev/null and b/Pages/dreammirror/font/FGURWBook.otf differ diff --git a/Pages/dreammirror/font/FGURWMed.otf b/Pages/dreammirror/font/FGURWMed.otf new file mode 100644 index 0000000..81b03fe Binary files /dev/null and b/Pages/dreammirror/font/FGURWMed.otf differ diff --git a/Pages/dreammirror/font/NotoSansIta.otf b/Pages/dreammirror/font/NotoSansIta.otf new file mode 100644 index 0000000..f643817 Binary files /dev/null and b/Pages/dreammirror/font/NotoSansIta.otf differ diff --git a/Pages/dreammirror/font/NotoSansLight.otf b/Pages/dreammirror/font/NotoSansLight.otf new file mode 100644 index 0000000..f0b3927 Binary files /dev/null and b/Pages/dreammirror/font/NotoSansLight.otf differ diff --git a/Pages/dreammirror/font/NotoSansLightIta.otf b/Pages/dreammirror/font/NotoSansLightIta.otf new file mode 100644 index 0000000..bf61387 Binary files /dev/null and b/Pages/dreammirror/font/NotoSansLightIta.otf differ diff --git a/Pages/dreammirror/font/NotoSansReg.otf b/Pages/dreammirror/font/NotoSansReg.otf new file mode 100644 index 0000000..c87174b Binary files /dev/null and b/Pages/dreammirror/font/NotoSansReg.otf differ diff --git a/Pages/dreammirror/images.html b/Pages/dreammirror/images.html new file mode 100644 index 0000000..2cfc2e0 --- /dev/null +++ b/Pages/dreammirror/images.html @@ -0,0 +1,25 @@ +HOLY SHIT WHAT HAPPENED + + +Person +Cat +Dog +Bird +Lion + + + +Flower +Book +Clock +Lamp +Chair + + + +Happy +Sad +Angry +Afraid +Anxious + diff --git a/Pages/dreammirror/img/being_01.gif b/Pages/dreammirror/img/being_01.gif new file mode 100644 index 0000000..3818ed0 Binary files /dev/null and b/Pages/dreammirror/img/being_01.gif differ diff --git a/Pages/dreammirror/img/being_02.gif b/Pages/dreammirror/img/being_02.gif new file mode 100644 index 0000000..fe0f149 Binary files /dev/null and b/Pages/dreammirror/img/being_02.gif differ diff --git a/Pages/dreammirror/img/being_03.gif b/Pages/dreammirror/img/being_03.gif new file mode 100644 index 0000000..9951f7d Binary files /dev/null and b/Pages/dreammirror/img/being_03.gif differ diff --git a/Pages/dreammirror/img/being_04.gif b/Pages/dreammirror/img/being_04.gif new file mode 100644 index 0000000..cf9180b Binary files /dev/null and b/Pages/dreammirror/img/being_04.gif differ diff --git a/Pages/dreammirror/img/being_05.gif b/Pages/dreammirror/img/being_05.gif new file mode 100644 index 0000000..d17b7b3 Binary files /dev/null and b/Pages/dreammirror/img/being_05.gif differ diff --git a/Pages/dreammirror/img/bg.png b/Pages/dreammirror/img/bg.png new file mode 100644 index 0000000..6e3a53b Binary files /dev/null and b/Pages/dreammirror/img/bg.png differ diff --git a/Pages/dreammirror/img/error.gif b/Pages/dreammirror/img/error.gif new file mode 100644 index 0000000..bc6dce4 Binary files /dev/null and b/Pages/dreammirror/img/error.gif differ diff --git a/Pages/dreammirror/img/feel_01.gif b/Pages/dreammirror/img/feel_01.gif new file mode 100644 index 0000000..d3d4f7e Binary files /dev/null and b/Pages/dreammirror/img/feel_01.gif differ diff --git a/Pages/dreammirror/img/feel_02.gif b/Pages/dreammirror/img/feel_02.gif new file mode 100644 index 0000000..38a81f3 Binary files /dev/null and b/Pages/dreammirror/img/feel_02.gif differ diff --git a/Pages/dreammirror/img/feel_03.gif b/Pages/dreammirror/img/feel_03.gif new file mode 100644 index 0000000..297b810 Binary files /dev/null and b/Pages/dreammirror/img/feel_03.gif differ diff --git a/Pages/dreammirror/img/feel_04.gif b/Pages/dreammirror/img/feel_04.gif new file mode 100644 index 0000000..2a4850b Binary files /dev/null and b/Pages/dreammirror/img/feel_04.gif differ diff --git a/Pages/dreammirror/img/feel_05.gif b/Pages/dreammirror/img/feel_05.gif new file mode 100644 index 0000000..32fef73 Binary files /dev/null and b/Pages/dreammirror/img/feel_05.gif differ diff --git a/Pages/dreammirror/img/flourish/dom/f_01.gif b/Pages/dreammirror/img/flourish/dom/f_01.gif new file mode 100644 index 0000000..a08ce44 Binary files /dev/null and b/Pages/dreammirror/img/flourish/dom/f_01.gif differ diff --git a/Pages/dreammirror/img/flourish/dom/f_02.gif b/Pages/dreammirror/img/flourish/dom/f_02.gif new file mode 100644 index 0000000..a4e7c5b Binary files /dev/null and b/Pages/dreammirror/img/flourish/dom/f_02.gif differ diff --git a/Pages/dreammirror/img/flourish/ent/f_01.gif b/Pages/dreammirror/img/flourish/ent/f_01.gif new file mode 100644 index 0000000..30a4554 Binary files /dev/null and b/Pages/dreammirror/img/flourish/ent/f_01.gif differ diff --git a/Pages/dreammirror/img/flourish/ent/f_02.gif b/Pages/dreammirror/img/flourish/ent/f_02.gif new file mode 100644 index 0000000..743fa94 Binary files /dev/null and b/Pages/dreammirror/img/flourish/ent/f_02.gif differ diff --git a/Pages/dreammirror/img/flourish/ess/f_01.gif b/Pages/dreammirror/img/flourish/ess/f_01.gif new file mode 100644 index 0000000..0c047e7 Binary files /dev/null and b/Pages/dreammirror/img/flourish/ess/f_01.gif differ diff --git a/Pages/dreammirror/img/flourish/ess/f_02.gif b/Pages/dreammirror/img/flourish/ess/f_02.gif new file mode 100644 index 0000000..9efd765 Binary files /dev/null and b/Pages/dreammirror/img/flourish/ess/f_02.gif differ diff --git a/Pages/dreammirror/img/flourish/f_01.gif b/Pages/dreammirror/img/flourish/f_01.gif new file mode 100644 index 0000000..8e33d50 Binary files /dev/null and b/Pages/dreammirror/img/flourish/f_01.gif differ diff --git a/Pages/dreammirror/img/flourish/f_02.gif b/Pages/dreammirror/img/flourish/f_02.gif new file mode 100644 index 0000000..7ed2fbc Binary files /dev/null and b/Pages/dreammirror/img/flourish/f_02.gif differ diff --git a/Pages/dreammirror/img/flourish/occ/f_01.gif b/Pages/dreammirror/img/flourish/occ/f_01.gif new file mode 100644 index 0000000..a570ee3 Binary files /dev/null and b/Pages/dreammirror/img/flourish/occ/f_01.gif differ diff --git a/Pages/dreammirror/img/flourish/occ/f_02.gif b/Pages/dreammirror/img/flourish/occ/f_02.gif new file mode 100644 index 0000000..9bd0bef Binary files /dev/null and b/Pages/dreammirror/img/flourish/occ/f_02.gif differ diff --git a/Pages/dreammirror/img/obj_01.gif b/Pages/dreammirror/img/obj_01.gif new file mode 100644 index 0000000..3d84698 Binary files /dev/null and b/Pages/dreammirror/img/obj_01.gif differ diff --git a/Pages/dreammirror/img/obj_02.gif b/Pages/dreammirror/img/obj_02.gif new file mode 100644 index 0000000..4c6dc68 Binary files /dev/null and b/Pages/dreammirror/img/obj_02.gif differ diff --git a/Pages/dreammirror/img/obj_03.gif b/Pages/dreammirror/img/obj_03.gif new file mode 100644 index 0000000..91c587c Binary files /dev/null and b/Pages/dreammirror/img/obj_03.gif differ diff --git a/Pages/dreammirror/img/obj_04.gif b/Pages/dreammirror/img/obj_04.gif new file mode 100644 index 0000000..9d087e2 Binary files /dev/null and b/Pages/dreammirror/img/obj_04.gif differ diff --git a/Pages/dreammirror/img/obj_05.gif b/Pages/dreammirror/img/obj_05.gif new file mode 100644 index 0000000..7574a72 Binary files /dev/null and b/Pages/dreammirror/img/obj_05.gif differ diff --git a/Pages/dreammirror/img/p_ap.gif b/Pages/dreammirror/img/p_ap.gif new file mode 100644 index 0000000..ea3de7c Binary files /dev/null and b/Pages/dreammirror/img/p_ap.gif differ diff --git a/Pages/dreammirror/img/p_hall.gif b/Pages/dreammirror/img/p_hall.gif new file mode 100644 index 0000000..d15bdb3 Binary files /dev/null and b/Pages/dreammirror/img/p_hall.gif differ diff --git a/Pages/dreammirror/img/p_home.gif b/Pages/dreammirror/img/p_home.gif new file mode 100644 index 0000000..828b075 Binary files /dev/null and b/Pages/dreammirror/img/p_home.gif differ diff --git a/Pages/dreammirror/img/p_jail.gif b/Pages/dreammirror/img/p_jail.gif new file mode 100644 index 0000000..81666d6 Binary files /dev/null and b/Pages/dreammirror/img/p_jail.gif differ diff --git a/Pages/dreammirror/img/p_office.gif b/Pages/dreammirror/img/p_office.gif new file mode 100644 index 0000000..5a8145b Binary files /dev/null and b/Pages/dreammirror/img/p_office.gif differ diff --git a/Pages/dreammirror/img/p_school.gif b/Pages/dreammirror/img/p_school.gif new file mode 100644 index 0000000..9e59990 Binary files /dev/null and b/Pages/dreammirror/img/p_school.gif differ diff --git a/Pages/dreammirror/img/p_tpark.gif b/Pages/dreammirror/img/p_tpark.gif new file mode 100644 index 0000000..1b8cb24 Binary files /dev/null and b/Pages/dreammirror/img/p_tpark.gif differ diff --git a/Pages/dreammirror/img/title.gif b/Pages/dreammirror/img/title.gif new file mode 100644 index 0000000..b724a06 Binary files /dev/null and b/Pages/dreammirror/img/title.gif differ diff --git a/Pages/dreammirror/img/title_dom.gif b/Pages/dreammirror/img/title_dom.gif new file mode 100644 index 0000000..a45699d Binary files /dev/null and b/Pages/dreammirror/img/title_dom.gif differ diff --git a/Pages/dreammirror/img/title_ent.gif b/Pages/dreammirror/img/title_ent.gif new file mode 100644 index 0000000..f8a727d Binary files /dev/null and b/Pages/dreammirror/img/title_ent.gif differ diff --git a/Pages/dreammirror/img/title_ess.gif b/Pages/dreammirror/img/title_ess.gif new file mode 100644 index 0000000..a22f2c1 Binary files /dev/null and b/Pages/dreammirror/img/title_ess.gif differ diff --git a/Pages/dreammirror/img/title_occ.gif b/Pages/dreammirror/img/title_occ.gif new file mode 100644 index 0000000..bb654e1 Binary files /dev/null and b/Pages/dreammirror/img/title_occ.gif differ diff --git a/Pages/dreammirror/img/title_old.gif b/Pages/dreammirror/img/title_old.gif new file mode 100644 index 0000000..259c9f2 Binary files /dev/null and b/Pages/dreammirror/img/title_old.gif differ diff --git a/Pages/dreammirror/index.html b/Pages/dreammirror/index.html new file mode 100644 index 0000000..d573906 --- /dev/null +++ b/Pages/dreammirror/index.html @@ -0,0 +1,146 @@ + + + + + +Dream Mirror + + + + + + +
+ +
+
+ +
+ +
+
+
+ Dream Mirror +
+
+ + +
+ Flourish + Flourish + +
+

Set the Stage of Your Dream

+
+
+

At the foundation of all of our experiences are the places we have them in. Thus, it’s common for our minds to generate new experiences housed within or around the environments we’ve come to be so familiar with in our daily lives. Just like a story, the setting of a particular event in a dream can determine the framework of the dream itself. The locations themselves may bear meanings of their own, however additional mean can arise through the other elements present within the setting of the dream.

+ + From the objects and beings to the emotions and concepts, this vast world of dreams and their potential meanings can change and fluctuate with every change in content. The Dream Mirror allows you to piece together different places, beings, objects, and emotions to create a dream scene alongside possible definitions to what these elements mean or symbolize within the dream space.

+ + After visiting a category above, you will be met with a canvas depicting a location alongside options to add a being, an object, and an emotion into the scene. This will display them within the canvas, and their possible meanings will be populated below. Piecing these together alongside your own context, this could illustrate a broader meaning of your dream and could give insight into the deeper connotations of your unconscious mind.

+ + Dreams will never be fully understood for everyone, but through the clues and interpretations of the elements of one’s dream, piecing them together could potentially help them reach either a medium of thought or a level of understanding of both themselves and their unconscious mind.




+ +

Between dreams and reality, there are many different places with different connotations.


+ +
    +
  • +

    Domestic Locations

    +

    Our homes or places in which we reside in within reality. The dream world often connects the concept of home to our core values and existence as individuals, meaning that these locations typically represent ourselves

    +
    • +
  • +

    Essential Locations

    +

    Hospitals, schools, stores, and other necessary places we must visit at some point or another in our lives. In the dream world, these places bear some level of response to our lives in a broader sense

    +
    • +
  • +

    Occupational Locations

    +

    In reality, these would be our workplaces or the locations in which we carry out our jobs or hobbies. These can live in the dream world similarly to how essential locations do, however they can also represent our minds on a mechanical level

    +
    • +
  • +

    Entertaining Locations

    +

    Hospitals, schools, stores, and other necessary places we must visit at some point or another in our lives. In the dream world, these places bear some level of response to our lives in a broader sense

    +
    • +
+ +

Use these as your starting point, as your mindset moving through this experience. You will discover new ways of looking at your dreams by defining the setting, its objects, beings, emotions, and concepts, and using that as your launching point of interpretation. Once you put everything together, you might begin to learn a little more about yourself through the potential signs and symbols your unconscious mind grants you every night.


+ +

Keep in mind that none of the settings or symbols that will be explored are, nor should they try to be, stark and constant definitions of one's dream experiences. Every person is unique, and each and every person has their own experiences, opinions, outlooks, and personalities that can influence their dreams. Thus, it is impossible to assume, let alone create something that can calculate, one's exact dream scenarios and their projected meanings. This place exists to house collections of departure points, or tools, for an individual's thought process in deciphering their dreams. The best person to decipher an individual is the individual themselves, and all they need are the tools to do it.

+
+
+ + +
+ + + diff --git a/Pages/dreammirror/jquery-3.6.0.min.js b/Pages/dreammirror/jquery-3.6.0.min.js new file mode 100644 index 0000000..c4c6022 --- /dev/null +++ b/Pages/dreammirror/jquery-3.6.0.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 + + + + +Occupational Locations / Dream Mirror + + + + + + + +
+ +
+
+ +
+ +
+
+
+ Dream Mirror +
+
+ + +
+ Flourish + Flourish + +
+

Twice the Daily Grind

+
+
+

Those who are already in the workforce already know how much dedication goes into most every job, especially if its specialized. Occupations are a key point of our society, as they allow us to apply ourselves and the skills we’ve learned up to that point to accomplish tasks that impact a larger whole. That said, jobs are, at their core, a state of mind, as each occupation has its own methodology, vernacular, purpose, meaning, and application in the minds of those who work within them. How could your occupations be shaping your thinking?

+
+ +
+
+

Office

+
+ +
+
+ Office + +
+
+
+
+
+ +
+

Your Dream Mirror

+ +

Place

+
+

The office is a rather stereotypical location, as whenever anyone imagines one, they often immediately connect the location to working. Offices are also seen as orderly, intricate webs of people, acting as parts for a larger body. Thus, finding yourself within an office inside a dream usually denotes that you are trying to solve a problem going on in your waking life, and the reason this concept may manifest as an office is likely because of your way of thinking, which in this case would likely need to be analytical or logical

+
+ +
+
+
+
+
+
+
+ +
+
+

Who or what did you see?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

What objects do you remember finding?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+

How did you feel?

+ +
+ +
+ + +
+ + +
+ + +
+ + + +
+
+
+
+
+ + +
+ + + + diff --git a/Pages/dreammirror/styles_dm.css b/Pages/dreammirror/styles_dm.css new file mode 100644 index 0000000..3bd4fed --- /dev/null +++ b/Pages/dreammirror/styles_dm.css @@ -0,0 +1,396 @@ +@charset "utf-8"; + +/* Reset */ +*{ + margin: 0; + padding: 0; +} + + +/* Essentials */ +body{ + color: #fff; + background-color: #000; + overflow-x: hidden; +} +img{ + max-width: 100%; + max-height: 100%; + mix-blend-mode: lighten; +} +#MAIN_CONTAINER{ + position: relative; +} + + +/* Fonts */ +/* Bebas Kai */ +@font-face { + font-family: 'Bebas Kai'; + src: url('font/BebasKaiReg.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +/* Noto Sans */ +@font-face { + font-family: 'Noto Sans'; + src: url('font/NotoSansLight.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('font/NotoSansReg.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('font/NotoSansLightIta.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Noto Sans'; + src: url('font/NotoSansIta.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Franklin Gothic URW Condensed */ +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('font/FGURWBook.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('font/FGURWMed.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} + + +/* Background */ +.bg_01{ + background-image: url("img/bg.png"); + background-repeat: repeat; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.6; + z-index: -1; +} + +.bg_02{ + background-image: url("img/bg.png"); + background-repeat: repeat; + background-size: 250px; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.4; + z-index: -2; +} + + +/* Title */ +#TITLE_AREA{ + position: relative; +} +.title_img{ + top: 0; + bottom: 0; + width: 100%; + height: 100%; + mix-blend-mode: lighten; +} +.title_img_place{ + top: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: -10; +} +.title_place{ + position: absolute; +} +.title_gradient{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100px; + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%); + z-index: 2; +} + +/* Nav */ +#TOP_NAV{ + margin-bottom: 2em; +} +nav{ + position: relative; +} +nav a:link{ + font-family: 'Bebas Kai', sans-serif; + font-size: 5vw; + text-decoration: underline; + opacity: 0.5; +} +nav a:hover{ + opacity: 1; +} +nav a:active{ + opacity: 1; +} +nav a:visited{ + opacity: 0.5; +} +nav a:nth-of-type(1){ + position: absolute; + right: 73%; + top: 56%; + width: 19%; + height: 11%; + text-align: right; + z-index: 100; +} +nav a:nth-of-type(2){ + position: absolute; + right: 70%; + top: 68%; + width: 20%; + height: 11%; + text-align: right; + z-index: 100; +} +nav a:nth-of-type(3){ + position: absolute; + left: 73%; + top: 56%; + width: 19%; + height: 11%; + text-align: left; + z-index: 100; +} +nav a:nth-of-type(4){ + position: absolute; + left: 71%; + top: 68%; + width: 20%; + height: 11%; + text-align: left; + z-index: 100; +} +.returnHome{ + position: absolute; + top: 5%; + left: 30%; + width: 40%; + height: 95%; +} + + +/* Footer */ +footer{ + background: rgb(0,0,0); + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 26%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 51%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 100%); + text-align: center; + padding: 2em; +} +footer a:link{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1rem; + color: #888; + text-decoration: none; +} +footer a:hover{ + color: #bbb; +} +footer a:active{ + color: #fff; +} +footer a:visited{ + color: #888; +} + + +/* Main Grid Container */ +ul{ + list-style: none; + padding: 1em 0; +} +li{ + margin-bottom: 2em; +} + + +/* Main Grid Container */ +#GRID_MAIN{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(3,auto); + position: relative; +} +.landingHeader{ + grid-column: 1/-1; + grid-row: 1/2; + text-align: center; + margin-bottom: 1em; +} +.landingSect{ + grid-column: 3/-3; + grid-row: 2/3; + margin-bottom: 4em; +} + +/* Dream Builder */ +#DREAM_MAIN{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(3,auto); + grid-column: 1/-1; + grid-row: 3/4; + margin-bottom: 4em; +} +.dream_header{ + grid-column: 2/-2; + grid-row: 1/2; +} +#DREAM_IMAGE_CONTAINER{ + grid-column: 1/-1; + grid-row: 2/3; + margin-bottom: 2em; +} +#DREAM_IMAGE{ + display: block; + margin: 0 auto; + width: 100%; + height: auto; + border: solid 8px; + border-left: 0px; + border-right: 0px; + object-fit: contain; + mix-blend-mode: normal; +} +#DREAM_IMAGE_POSITION{ + position: relative; +} +#DREAM_CONTENT{ + grid-column: 2/4; + grid-row: 3/4; +} +#DREAM_OPTIONS{ + grid-column: -4/-2; + grid-row: 3/4; + display: flex; + flex-direction: column; + justify-content: flex-start; + text-align: left; +} +.dream_choice{ + margin-top: 1em; + margin-bottom: 2em; +} +.option{ + margin-bottom: 1em; +} + + +/* Main Grid Container */ +h1{ + font-family: 'Bebas Kai', sans-serif; + font-size: 4rem; +} +.dream_header h1{ + font-size: 12rem; + letter-spacing: 1rem; +} + +h2{ + font-family: 'Bebas Kai', sans-serif; + font-size: 3rem; +} +#DREAM_CONTAINER h2{ + margin-top: 2rem; + margin-bottom: 2rem; +} + +h3{ + font-family: 'Noto Sans', sans-serif; + font-size: 2rem; +} + +p{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; +} +li p{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; + color: #fff; +} +#DREAM_CONTENT p{ + color: #fff; +} +.landingSect strong{ + color: #fff; +} + +label{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; +} +.alignLeft{ + text-align: left; +} +.alignCenter{ + text-align: center; +} +.alignRight{ + text-align: right; +} + + +/* Mobile */ +@media all and (max-width: 600px){ + + #TITLE_AREA{ + margin-top: 3em; + } + + .landingHeader{ + grid-column: 2/-2; + line-height: 4rem; + } + .landingSect{ + grid-column: 2/-2; + } + + .dream_header h1{ + font-size: 4rem; + letter-spacing: 0.5rem; + } + #DREAM_CONTENT h2{ + line-height: 3rem; + } + + + #DREAM_CONTENT{ + grid-column: 2/-2; + grid-row: 3/4; + margin-bottom: 2em; + } + #DREAM_OPTIONS{ + grid-column: 2/-2; + grid-row: 4/5; + } + +} diff --git a/Pages/dreammirror/text.html b/Pages/dreammirror/text.html new file mode 100644 index 0000000..f6d8282 --- /dev/null +++ b/Pages/dreammirror/text.html @@ -0,0 +1,80 @@ +

alright i fucked up (error)

+

if you see this throw something at me (error)

+ + +

+ Being +

+

+ Object +

+

+ Emotion +

+ + + +

+ If you encounter people you know within your dream, it could have a connection to your relationship with that person or your recognition of their identity. On the other hand, manifesting random people in your dreams is quite common, and usually an effect of your mind creating a familiar copy of reality +

+ +

+ Cats are an embodiment of the love for the feminine principle, and within a dream, they typically stand to represent its values. A cat in one’s dream can denote a sense of calmness and creativity, symbolizing patient feelings and a softspoken nature. Their association with hunting may also symbolize a desire for discovery or freedom +

+ +

+ As man’s best friend, dogs represent loyalty, affection, and happiness within a dream. They also embody a strong love of the masculine principle, and therefore, the symbol of the dog has a strong tie to your overall sense of love. Thus, the actions the dog is performing may denote how you feel or express your love and affection towards others +

+ +

+ When anyone thinks of a bird, they immediately gravitate towards the concept of flight. In the dream world, this could directly connect to the ideas of freedom and discovery through such a concept, however birds can sometimes exist as messengers. More specifically, in this scenario, they typically symbolize a piece of information you haven’t fully processed or may not completely understand yet +

+ +

+ Lions are ferocious animals, seen by most as the absolute apex of the apex predators. Encountering such a beast within your dream usually symbolizes a kind of power or strength, particularly related to one’s confidence or empowerment. A lion could also represent an epiphany or greater understanding of a subject that is within your reach +

+ + + +

+ Across many cultures, flowers stand as a symbol of love or respect, and the same is true for dreams. If a flower is significant or memorable within a dream, its likely that it connects to some form of love or affection the person has towards something or someone. Additionally, its prevalence may be speaking as commentary to someone or something you love, or it could be a response to your overall view on love itself +

+ +

+ Books are the embodiment of knowledge, and thus, they live as a symbol for information and definition. The prevalence of books within one’s dream potentially connects to the idea that bits of information that could possibly answer a question your conscious mind has been pondering already exist within your knowledge +

+ +

+ Being messengers of time, clocks are the indicator for movement, progression, growth, age, decay, and countless other processes. If you focus on your time in real life and find yourself dreaming about clocks, it’s likely your habits of always watching the time are simply firing off like muscle memory within your dreams. If time isn’t a big focus in your everyday life, it could be the embodiment of an anxiety or fear that you either don’t fully think about in your waking hours or something that you aim a lot of your focus towards which consumes your time or has strict deadlines +

+ +

+ In general, lights and lamps are symbols of problem-solving, ideas, innovation, and of course, clarity. The goal of any light is to make clear and visible a place or an object that cannot be seen in normal conditions, and within a dream, this could be a sign of mental discovery or even epiphany towards an idea, just like a light at the end of a tunnel +

+ +

+ Chairs are things a lot of us find ourselves sitting down in when we want to work, relax, or do anything in between. Regarding only the presence of a chair in a dream, it can represent a commitment or pledge, and depending on the environment the chair is in, this implied vow could mean many possible things. If you actually sat in the chair, this could mean that you’ve taken the pledge it represents, and you’ve planted yourself there to initiate the commitment +

+ + + +

+ Within a dream, joy and happiness are powerful feelings that only show their true forms when one experiences something truly remarkable, mesmerizing, or meaningful to them. Feeling happy in a dream, or awakening to a feeling of happiness, most likely means that your dream experience was reminiscing something joyful that happened in the past, or possibly creating a scenario that derives from such an experience +

+ +

+ Sadness is an emotion many relate to negative events, and while there is a true connection between sadness and negativity, this emotion can also erupt from a sense of closure or departure from something sentimentally or chronically habitual. Feeling sad within your dreams may mean that your unconscious mind is simulating or encoding the occurrence of a worry into your dream experience, or it could also mean that your mind has started to cope with something and has begun the process of closure +

+ +

+ As a very powerful and dangerous emotion, anger represents negativity, frustration, and impatience towards something. Feeling this emotion in your dreams could mean that your mind undertones your dreams with something that’s bothering or frustrating you in real life. This emotion often carries over from days where you might have had a bad experience or an emotional shock +

+ +

+ The feeling of being afraid is one of the most deeply rooted emotions in nearly all creatures, especially humans. Expressing fear in a dream often stems from an actual fear or phobia one has, and can often manifest itself as a creature or person that chases you within your dream. This emotion usually conveys the idea that you are putting something off or avoiding something that you either generally fear or something that needs more immediate attention +

+ +

+ Anxiety is the ultimate embodiment of stress and chaos, standing to represent an imbalance of one’s emotional or mental state through a cavalcade of other emotions and actions. Responding to anything within a dream with feelings of anxiety can represent a loss of control over something, either within yourself or something in real life +

+ diff --git a/Portfolio.html b/Portfolio.html new file mode 100644 index 0000000..d4a5c5f --- /dev/null +++ b/Portfolio.html @@ -0,0 +1,135 @@ + + + + + + + + +Pit of Portfolios + + + + +
+ Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star +
+ +
+

Pit of

+

Portfolios

+
+ +
+
+
+

Dropping in for Some Portfolios?

+
+ +

You've found yourself in the chasm of projects, experiments, and downright fun that resulted from my education! From high school to college, this is where you'll find my progression and evolution during my academic life. Get ready to dive in!

+ +
+

Hempstead High School

+

(2014-2018)

+
+ +

By the time I took my first art class at Hempstead, I found my calling. Had I never had these classes and never learned the skills I did, I don't know if I would be where I am today. While the archive here is limited, this really was my defining time.

+
+ +
+
+

Year I

+

Freshman

+
+
+

Year II

+

Sophomore

+
+
+

Year III

+

Junior

+
+
+

Year IV

+

Senior

+
+
+ +
+
+

Clarke University

+

(2018-present)

+
+ +

Much has happened between 2018 and 2022 that changed my world. I learned so much, I've experienced great things, and I had met so many talented and awesome people. This period of time in my life truly opened my eyes to the vast realm of art and design, and it played an integral role in defining me as a designer and a person.

+
+ +
+
+

Year I

+

Freshman

+
+
+

Year II

+

Sophomore

+
+
+

Year III

+

Junior

+
+
+

Year IV

+

Senior

+
+
+
+ +
+
+ + +
+
+ + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..a7adbf0 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Work in Progress + +Personal GitHub Website & Portfolio diff --git a/about.html b/about.html index 7209780..2222b6d 100644 --- a/about.html +++ b/about.html @@ -1,310 +1,104 @@ - - + + - - - about - inktrinket - - - - - + + + + + + + + +Pit of Portfolios + -
- -
-
- - - - - -
- - -
+
+ Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star +
+ +
+

About

+
+ +
+ + +
+ +
+ Parker Lippstock + + +
+ +
+

The Pit

+
+ +

Welcome to The Pit! This is my repository for all of my past and ongoing work in the field of graphic, 3D, and experimental art + design. It's still under construction, so stuff is being added on a fairly regular basis, so keep an eye out!

+ +

The purpose of the site overall is to provide a solid and stable place to share my work and processes, and therefore there will likely be a wide variety of content to be found once I begin filling the site. So, if you're interested, take the plunge! The Pit is waiting...

+
+ +
+
+

Contact

+
+ +

Have questions or want to reach out?

+ Shoot me an email! +
+
+ +
- - - - - - - - - - - - - - - - - -
-
- - - - - - - about... - - -
- - - - - - - Steph Gerard -

a photo of me! :D

+
+ Portfolio +

Pit of Portfolios

-

Hi, my name is Steph! I am a video designer passionate about the art, detail, and meaning of media. I have been editing videos for 10 years, and I graduated with a media communications bachelor's degree from Full Sail University with an aim to enhance my abilities as a media professional. Some of my favorite things include art, animation, film, listening to music, and being ridiculous. "inktrinket" is my brand and online alias that embodies my interests. My true home is Provincetown, located in Cape Cod, Massachusetts. Growing up in an artist colony and being surrounded by a loving community gave me my ambition to be myself. I owe provincetown for giving me my place in the world, alongside the countless memories created with my family that I couldn't be more grateful for.

-

I find something so unfathomably interesting about how a series of looks and sounds can tell a story, or present a new light of meaning without the viewer immediately realizing it. It doesn't have to be super deep in meaning either, something as simple as crafting a good laugh or something that looks cool can prove timeless. I love things that possess true style and uniqueness, which leads me to loving videos so much. Videos have the potential to become so much more than what any industry could expect from them.

-

You may have noticed by now that I take video commissions! It's something I like to do on the side that allows me to put my skills to good use. I love to edit so many different kinds of videos! If you'd ever like to commission a video from me, then thanks! It means a lot to me that people would ever consider working with me as their video editor. If you want to request a commission from me, the commissions page should have what you're looking for!

-
- -
- -
-
Web experience by
-

Parker Lippstock

+
+ Blender +

In progress...

+
+
+ AI Land +

In progress...

-
+
+ Misc +

Other cool stuff!

+
+
+ About +

What's The Pit?

+
+ +
-
+ - \ No newline at end of file + diff --git a/commissions.html b/commissions.html deleted file mode 100644 index 4ab4686..0000000 --- a/commissions.html +++ /dev/null @@ -1,1097 +0,0 @@ - - - - - - commissions - inktrinket - - - - - - - - - - - - - - - -
- -
-
- - - - - -
- - -
- -
- -
-
- - - - - - - hey! - - - need an - - - - - hey! - - - need an - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-

I could edit your video for you!

-

As a video designer, I take commissions on the side to utilize and hone my skills.

-

I focus on planning my design process, maintaining organization, and prioritizing communication with my clients. I also love to edit various styles of videos!

-
-
-
- -
-
- - - - - - - - - - - - - - - - - - commissioning - - - -
- - - -
-

Videos I like to edit

-
    -
  • Gameplay videos
    • -
  • Live stream videos
    • -
  • Meme videos
    • -
  • Highlight videos
    • -
  • Podcast videos
    • -
  • Music/lyric videos
    • -
  • Instructional/tutorial videos
    • -
  • Informative/educational videos
    • -
  • Short form/social media videos
    • -
-
-
- -
- - - - - - -
-

Videos I will not edit

-
    -
  • Graphic/NSFL content
    • -
  • Hateful/discriminatory content
    • -
  • Drama/exposé content
    • -
  • Political content
    • -
  • Pornographic content
    • -
  • Your homework!!!
    • -
-
-
- - - -
-
-
$45
-
per hour
-
-

via

- - - -
-
-
- -
- -
-
- - - - feel free to ask any - questions about what - you see here btw!!! - - - inktrinket character -
-
- -
- - - -
- -
-
- - - - - - - - how my - - - commissions - - - -
- -
-

- A commission begins with me inspecting your requested video files, asking a series of questions, and effectively communicating with you to ensure that we are both mutually aware of and agree upon the desired project. Once we both agree on the project, I will request half of the project's estimated cost to be paid up front. Work on your project will not begin until half of the total estimated cost is paid upfront. -

-

- Once the project begins, I will keep in touch and send frequent progress updates, aiming for a feedback-driven design process that will keep your interests in focus. Once you proclaim the project finished, I will request the second half of the estimated cost to be paid, and then I will provide the finished video to you! -

-
- - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-

Disclaimer

-

- I reserve the right to withdraw a commission, including but not limited to situations where: -

-
    -
  • Clients continuously request drastic or unproductive changes that waste my time
    • -
  • Clients attempt/beg to offer an absurd counter payment (i.e. "payment with exposure")
    • -
  • Clients create a hostile or otherwise undesirable work environment
    • -
  • Clients are under 18 years of age
    • -
-

- In situations where the client's requested changes to their project will require more working hours than initially projected, an additional overtime charge must be paid upfront before work on the project can continue. These overtime charges are estimated based upon my hourly wage and will be fully communicated to the client in these situations. I enforce these overtime charges because video editing can take a long time and I need to ensure that my time is properly spent and not wasted. -

-

- I will only use Venmo for payment exchange and do not accept refunds, with no exceptions. I enforce this to prevent friendly/chargeback fraud. -

- are you interested???? :3 -
-
-
- - - - \ No newline at end of file diff --git a/contact.html b/contact.html deleted file mode 100644 index 30c2342..0000000 --- a/contact.html +++ /dev/null @@ -1,413 +0,0 @@ - - - - - - contact - inktrinket - - - - - - - - - - - - - - - -
- -
-
- - - - - -
- - -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - - \ No newline at end of file diff --git a/core.css b/core.css deleted file mode 100644 index d110445..0000000 --- a/core.css +++ /dev/null @@ -1,567 +0,0 @@ -/* Resets ------------------------ */ - -*{margin: 0; padding: 0;} -*,::before,::after{box-sizing: border-box; font-size: 1em;} -#main_wrapper{overflow: auto; position: relative;} -a,a:link,a:hover,a:visited,a:invalid{text-decoration: none; color: inherit;} -nav ul{list-style: none;} -html{height: 100%;} -body{min-height: 100%;} -body,html{scrollbar-width: none; color: var(--clr-darkest); background-color: var(--clr-lightest);} -body>*{flex-shrink: 0;} -input:focus{outline: none;} -iframe{border: none;} - - - -/* Variables ------------------------ */ - -:root,::before,::after{ - --space-smallest: 1rem; - --space-small: 1.5rem; - --space-large: 2rem; - --space-largest: 2.5rem; - - --nl-position: 80%; - - --clr-lightest: hsl(0, 100%, 100%); - --clr-darkest: hsl(0, 0%, 0%); - - --clr-palette-orange: hsl(36, 96%, 62%); -} -html[data-theme="dark"]{ - --clr-lightest: hsl(0, 0%, 10%); - --clr-darkest: hsl(0, 0%, 90%); -} -html[data-theme="dark"] [data-invert-dark="true"]{ - filter: invert(0.9); -} - -/* 4K */ -@media only screen and (min-width: 2500px){ /* 2500px or bigger */ - :root,::before,::after{ - --space-smallest: 1.35rem; - --space-small: 1.85rem; - --space-large: 2.35rem; - --space-largest: 2.85rem; - } -} - -/* Tablet */ -@media only screen and (min-width: 1051px) and (max-width: 1366px) and (orientation: landscape){ /* between 1051px and 1366px */ - :root,::before,::after{ - --space-smallest: 0.85rem; - --space-small: 1.35rem; - --space-large: 1.85rem; - --space-largest: 2.35rem; - - --nl-position: 82%; - } -} - -/* Phone */ -@media only screen and (max-width: 1050px){ /* 1050px or smaller */ - :root,::before,::after{ - --space-smallest: 0.75rem; - --space-small: 1.25rem; - --space-large: 1.75rem; - --space-largest: 2.25rem; - - --nl-position: 90%; - } -} - - - -/* Body ------------------------ */ - -body{ - position: relative; - background-color: var(--clr-lightest); - color: var(--clr-darkest); - font-family: "peridot-pe-variable", sans-serif; -} - - - -/* Button ------------------------ */ - -.button{ - border: solid 2px var(--clr-darkest); - border-radius: var(--space-smallest); - padding-inline: calc(var(--space-small)); - padding-block: calc(var(--space-small) / 2); - color: var(--clr-lightest) !important; - background-color: var(--clr-darkest); - font-family: "acumin-variable", sans-serif; - font-variation-settings: "wght" 600, "wdth" 100, "ital" 0; - font-size: var(--txt-h6); -} - - - -/* Site borders ------------------------ */ - -.site_frame{ - position: fixed; - top: 0; - pointer-events: none; - - width: 5vw; - height: 100vh; - width: 5dvw; - height: 100dvh; - - background-repeat: repeat-y; - background-size: 100% 100vh; - animation: site_frame_flow infinite 10000ms linear; - z-index: 1; -} -.frame_left{ - left: 0; - background-image: url("/img/flourish/border_L.png"); -} -.frame_right{ - right: 0; - background-image: url("/img/flourish/border_R.png"); - background-position-x: right; -} - -@keyframes site_frame_flow{ - to{ - background-position-y: 100vh; - background-position-y: 100dvh; - } -} - -/* Tablet & Phone */ -@media only screen and (max-width: 1050px){ /* 1050px or smaller */ - .frame_right{ - display: none; - } - - .frame_left{ - top: 0; - left: 0%; - pointer-events: none; - - width: 0vw; - height: 100vh; - width: 0lvw; - height: 100lvh; - - transition: left 300ms ease; - z-index: 95; - } - - .frame_left.hamburger_pullout{ - left: 50% !important; - - width: 5vw; - width: 5dvw; - } -} - - - -/* Header & Nav ------------------------ */ - -#header_flex{ - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - gap: var(--space-large); - padding: var(--space-small) 0; - margin-bottom: var(--space-largest); -} - -.header_icon{ - width: 100px; - user-select: none; -} - -.header_nav_grid{ - display: grid; - grid-auto-flow: column; - align-items: center; - gap: var(--space-small); -} -.header_nav_grid li:not(:first-child), .header_portfolio_fold li{ - position: relative; -} -.header_nav_grid li > *, .header_portfolio_fold li > *{ - font-family: "peridot-pe-variable", sans-serif; - font-variation-settings: "wght" 400, "wdth" 100, "ital" 0; - font-size: var(--space-small); -} -.header_portfolio_fold li > *{ - font-size: var(--space-smallest) !important; -} - -.header_portfolio_fold{ - position: absolute; - top: 50%; - left: 0; - pointer-events: none; - opacity: 0; - transition: all 300ms ease; -} -.header_nav_hover_list:hover .header_portfolio_fold{ - top: 100%; - pointer-events: auto; - opacity: 1; -} -.header_nav_hover_list{ - user-select: none; - cursor: pointer; -} -.header_portfolio_fold li{ - padding-block: 0; - position: relative; -} - -#hamburger, -#hamburger + label{ - display: none; -} - -#mobile-blackout{ - position: fixed; - display: none; -} - -/* Tablet & Phone */ -@media only screen and (max-width: 1050px){ - - #header_flex{ - --mobile-padding: var(--space-large); - - position: fixed; - flex-direction: column; - justify-content: flex-start; - align-items: start; - background-color: var(--clr-darkest); - z-index: 95; - - min-height: 100vh; - min-width: 50vw; - min-height: 100lvh; - min-width: 50dvw; - - top: 0; - left: -50%; - transition: left 300ms ease; - } - - .header_icon{ - width: auto; - max-width: 50%; - } - - .header_nav_grid{ - margin-left: var(--space-largest) !important; - grid-auto-flow: row; - width: 100%; - } - .header_nav_grid > li:first-child{ - filter: invert(1); - } - .header_nav_grid li:not(:first-child), .header_portfolio_fold li{ - color: var(--clr-lightest) !important; - } - - .header_nav_grid li > *, - .header_nav_hover_list > p::after, - .header_portfolio_fold li > *{ - font-size: calc(2vw + calc(var(--txt-p) / 1.25)) !important; - } - .header_nav_hover_list > p::after{ - content: " ▼"; - font-family: "acumin-variable", sans-serif; - font-variation-settings: "wght" 400, "wdth" 100, "ital" 0; - } - - .header_nav_hover_list .header_portfolio_fold{ - top: 125%; - user-select: auto; - pointer-events: auto; - left: var(--space-small); - } - - .header_nav_hover_list:hover .header_portfolio_fold{ - top: 125%; - } - .header_portfolio_fold{ - color: var(--clr-lightest) !important; - opacity: 0; - transform: translateY(-1rem); - transition-delay: 150ms; - } - .header_portfolio_fold.hamburger_pullout{ - opacity: 1; - transform: translateY(0); - } - - .header_nav_grid > li:nth-child(4){ - transition: margin-top 300ms ease; - transition-delay: 150ms; - } - .header_nav_grid > li:nth-child(4).hamburger_pullout{ - margin-top: calc(var(--space-largest) + 5vh); - } - - .header_portfolio_fold > li{ - margin-bottom: calc(var(--space-smallest) / 2); - } - - #hamburger{ - z-index: 100; - transition: left 300ms ease; - } - #hamburger + label{ - display: block; - position: fixed; - top: 0; - left: 0%; - - width: 15vw; - height: 15vw; - width: 15dvw; - height: 15dvw; - - z-index: 100; - cursor: pointer; - background-image: url(/img/hamburger.png); - background-size: cover; - transition: left 300ms ease; - } - - #hamburger:checked + label, - #hamburger:checked{ - left: 50% !important; - } - #hamburger:checked ~ #header_flex{ - left: 0% !important; - } - #mobile-blackout{ - display: block; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 90; - background-color: var(--clr-lightest); - opacity: 0; - transition: opacity 300ms ease; - pointer-events: none; - user-select: none; - } - #mobile-blackout.hamburger_pullout{ - pointer-events: auto; - user-select: auto; - opacity: 0.5; - } - - html[data-theme="dark"] #header_flex::after{ - filter: invert(0.9); - } - - @media only screen and (orientation: landscape){ - #hamburger + label{ - width: 10vw; - height: 10vw; - width: 10dvw; - height: 10dvw; - } - - .header_nav_grid > li:nth-child(4).hamburger_pullout{ - margin-top: calc(var(--space-largest) + 7vh); - } - - @media only screen and (max-height: 500px){ - .header_nav_grid > li:nth-child(4){ - margin-top: calc(var(--space-largest) * 1.25); - } - - .header_nav_grid{ - gap: var(--space-smallest); - } - } - } - - @keyframes site_frame_flow{ - to{ - background-position-y: 100vh; - background-position-y: 100lvh; - } - } -} - - - -/* Night Light ------------------------ */ - -#night-light{ - display: none; -} -#night-light + label{ - position: fixed; - top: -24px; - left: var(--nl-position); - transform-box: fill-box; - transform-origin: 50px 24px; - background: var(--night-light-url); - background-size: contain; - width: 100px; - height: 130px; - cursor: pointer; - animation: night-light-onload 1000ms ease; - animation-delay: 500ms; - animation-fill-mode: forwards; - transform: translateY(-130px) rotateZ(10deg); - transition: top 50ms linear; - z-index: 10; -} -.pulldown{ - top: -12px !important; -} - -#night-light + label.first_visit::after{ - content: "too bright?"; - position: absolute; - top: 80px; - left: 0; - transform: translateX(-80px); - font-family: "peridot-pe-variable", sans-serif; - font-variation-settings: "wght" 300, "wdth" 100, "ital" 0; - font-size: calc(var(--txt-p) / 1.25); - color: var(--clr-darkest) !important; - text-align: right; - user-select: none; - pointer-events: none; - animation: night-light-notif 500ms forwards ease; - animation-delay: 7000ms; - opacity: 0; -} -html[data-theme="dark"] #night-light + label.first_visit::after{ - content: "too dark?"; -} -#night-light + label.first_visit.theme_is_set::after{ - content: "better!" !important; - transform: translateX(-60px) !important; - animation: night-light-away 500ms forwards ease; - animation-delay: 2000ms; - opacity: 1; -} - - -/* Tablet & Phone */ -@media only screen and (max-width: 1050px){ /* 1050px or smaller */ - #night-light + label{ - top: unset; - right: unset; - bottom: var(--space-large); - - left: calc(-5vw - 150px); - left: calc(-5dvw - 150px); - - width: 100px; - height: 100px; - transform: none; - animation: none; - animation-delay: none; - z-index: 100; - filter: invert(0.9); - transition: left 300ms ease, transform 300ms ease; - } - - html[data-theme="dark"] #night-light + label{ - filter: invert(0.1); - } - - #night-light + label.hamburger_pullout{ - left: var(--space-largest) !important; - } - - .pulldown{ - top: unset !important; - transform: scale(0.9) !important; - } - - #night-light + label.first_visit::after{ - top: 0; - left: 0; - width: 100%; - transform: translateY(-100%); - text-align: center; - } - #night-light + label.first_visit.theme_is_set::after{ - transform: translateY(-100%) !important; - } - - @media only screen and (orientation: landscape) and (max-height: 500px){ - #night-light + label{ - bottom: var(--space-smallest); - width: 50px; - height: 50px; - } - #night-light + label.hamburger_pullout{ - left: 40vw !important; - left: 40lvw !important; - } - - .pulldown{ - transform: scale(0.9) !important; - } - - #night-light + label.first_visit::after{ - top: 0 !important; - left: 0; - width: 200% !important; - height: 100%; - align-content: center; - transform: translateX(-120px); - text-align: right; - } - #night-light + label.first_visit.theme_is_set::after{ - transform: translateX(-120px) !important; - } - } -} - -@keyframes night-light-onload{ - 0%{ - transform: translateY(-130px) rotateZ(10deg); - } - 25%{ - transform: translateY(0px) rotateZ(-10deg); - } - 55%{ - transform: translateY(0px) rotateZ(6deg); - } - 75%{ - transform: translateY(0px) rotateZ(-4deg); - } - 90%{ - transform: translateY(0px) rotateZ(2deg); - } - 100%{ - transform: translateY(0px) rotateZ(0deg); - } -} - -@keyframes night-light-notif{ - to{ - opacity: 1; - } -} - -@keyframes night-light-away{ - from{ - opacity: 1; - } - to{ - opacity: 0; - } -} \ No newline at end of file diff --git a/dreammirror/about.html b/dreammirror/about.html new file mode 100644 index 0000000..a80cf8c --- /dev/null +++ b/dreammirror/about.html @@ -0,0 +1,112 @@ + + + + + + +About the Mirror + + + + + + + + + +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ Horizontal Rule + +

About Dream Mirror

+ + Horizontal Rule +
+
+

Many believe dreams to be a cavalcade of nonsensical imagery and sound we experience when we sleep. To a degree, this can be truthful for a fraction of these nighttime experiences, however, dreams themselves share a connection with our thoughts, feelings, and of course, our imagination.

+ + Have you ever had a time in your life where you were stressed, and within your dreams, you experienced something frightening? When we’re stressed, we can feel mixtures of fear, sadness, anger, or restlessness, and within our dreams, any one of these emotions can take hold and project an environment that, itself, embodies this emotion. This manifestation of the state of the conscious mind within the unconscious mind reveals some level of potential connection between the two.

+ + The bond between the waking and sleeping mind defines expression of related feelings between both states, creating the opportunity for these adventures in our minds to be a more loose, almost allegorical manifestation of our perspectives. In essence, a dream may be more than the nonsense some believe it to be. Rather, it may be a coded yet significant set of circumstances that hold more meaning than one may be led to think.

+ + These ideas are what led to the inception of the Dream Mirror, a resource for users to search and contextualize their dream symbols with each other and give them the tools to help them interpret their dreams. While the Dream Mirror contains information about each symbol and aims to create a level of context for the user, its primary goal is to lay out these interpretations as a resource for others to then concatenate with their minds, thought processes, and experiences. Dreams are a very personal form of self-reflection, and thus, conclusions should only be made by the dreamer themselves. The Dream Mirror stands as a tool, a mindset, that can help others critically think about their dream experiences and how they could potentially reflect to them on a deeper level.

+
+
+ + + +
+
+ Horizontal Rule + +

Stare into a mirror...

+ + Horizontal Rule +
+ +
+
+ + + + diff --git a/dreammirror/css/style_basis.css b/dreammirror/css/style_basis.css new file mode 100644 index 0000000..1a62ff8 --- /dev/null +++ b/dreammirror/css/style_basis.css @@ -0,0 +1,443 @@ +@charset "utf-8"; + +/* Reset */ +*{ + margin: 0; + padding: 0; +} + + +/* Essentials */ +body{ + color: #eee; + background-color: #000; + filter: sepia(0.5); + overflow-x: hidden; +} +img{ + max-width: 100%; + max-height: 100%; +} +#MAIN_CONTAINER{ + position: relative; + overflow: hidden; +} + + +/* Fonts */ +/* Bebas Kai */ +@font-face { + font-family: 'Dreamwalker'; + src: url("../font/Dreamwalker.ttf") format('truetype'); + font-weight: normal; + font-style: normal; +} +/* Providence Sans */ +@font-face { + font-family: 'ProvidenceSansPro-Bold'; + src: url("../font/ProvidenceSansPro-Bold.otf") format('opentype'); + font-weight: normal; + font-style: normal; +} +/* Duper */ +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Reg.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Bold.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Italic.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_BoldItalic.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Noto Sans */ +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansLight.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansReg.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansLightIta.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansIta.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Franklin Gothic URW Condensed */ +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('../font/FGURWBook.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('../font/FGURWMed.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} + + +/* Background */ +.bg_01{ + background-image: url("../img/core/bg.png"); + background-repeat: repeat; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.6; + z-index: -1; +} + +.bg_02{ + background-image: url("../img/core/bg.png"); + background-repeat: repeat; + background-size: 250px; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.4; + z-index: -2; +} + + +/* Title */ +#TITLE_AREA{ + position: relative; +} +.title_img{ + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 40%; +} +.titlebg_img{ + display: block; + margin: 0 auto; +} +.title_gradient{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 50px; + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); + z-index: 2; +} + + +/* Scroll Down Indicator */ +#SCROLL_DOWN{ + position: fixed; + bottom: 2%; + right: 18%; + max-width: 20%; + max-height: 20%; + filter: drop-shadow(0px 0px 4px #000); + -webkit-filter: drop-shadow(0px 0px 24px #000); + animation: scroll_Show 3500ms ease-out; + z-index: 10; +} +.hideScroll{ + animation: scroll_Hide 1000ms ease-out; +} + + +/* Main Grid Container */ +#GRID_MAIN{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(4,auto); + position: relative; + margin-bottom: 5em; +} +.pageDivider,.navUpperContainer{ + background-image: url("../img/core/sitebg.gif"); + background-repeat: repeat-y; + background-position: center; + background-size: 100%; +} + +.landingHeader{ + grid-column: 3/-3; + grid-row: 1/2; + position: relative; + text-align: center; + height: 270px; + padding: 0 1em; + margin-bottom: 2em; +} +.header_bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.header_line01{ + position: absolute; + top: 0; + left: 15%; + font-size: 3.5vw; +} +.header_line02{ + position: absolute; + top: 42%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 2vw; + color: #888; +} +.header_line03{ + position: absolute; + bottom: 0; + right: 15%; + font-size: 5.75vw; +} + +.aboutHeader{ + grid-column: 3/-3; + grid-row: 1/2; + position: relative; + text-align: center; + height: 270px; + padding: 0 1em; + margin-top: 2em; +} + +.landingOpener{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 1em 1em; + margin-bottom: 2em; + text-align: center; +} + +.landingSect{ + grid-column: 3/-3; + grid-row: 3/4; + padding: 1em 1em; + margin-bottom: 4em; +} + +.aboutSect{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 0 1em; + margin-bottom: 4em; +} + + +/* Nav Grid Container */ +#GRIDnav{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(2,auto); + position: relative; +} +.navHeader{ + display: flex; + flex-direction: row; + justify-content: space-around; + grid-column: 1/-1; + grid-row: 1/2; + padding: 0 14em; + margin-bottom: 2em; + text-align: center; +} +.navHeader .img_hr{ + display: block; + width: 40%; + height: 40%; + margin: auto 0; +} + +.navMain{ + grid-column: 2/-2; + grid-row: 2/3; + padding: 0 8em; + margin-bottom: 4em; + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.navUpper{ + padding: 0 8em; + margin: 4em auto 0; + display: flex; + flex-direction: row; + justify-content: space-around; + width: 40%; +} + +.navMain a img,.navUpper a img{ + max-width: 100%; +} +.navMain a > *,.navUpper a > *{ + transition: all 200ms ease-in-out; + transform: scale(80%,80%); +} +.navMain a > *:hover,.navUpper a > *:hover{ + transform: scale(100%,100%); +} + + +/* Footer */ +.mainFooter{ + padding: 2em 0; + text-align: center; +} +.mainFooter a:link{ + text-decoration: none; + color: #aaa; + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 1rem; +} +.mainFooter a:hover{ + color: #fff; +} +.mainFooter a:active{ + color: #fff; +} +.mainFooter a:visited{ + color: #aaa; +} + + +/* Horizontal Rule */ +.img_hr{ + width: 100%; + height: auto; +} + + +/* Main Grid Container */ +h1{ + font-family: 'Dreamwalker', sans-serif; + font-size: 4rem; +} +.dream_header h1{ + font-size: 12rem; + letter-spacing: 1rem; +} +.aboutHeader h1{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 4rem; +} + +h2{ + font-family: 'Dreamwalker', sans-serif; + font-size: 3rem; +} +#DREAM_CONTAINER h2{ + margin-top: 2rem; + margin-bottom: 2rem; +} +.landingOpener h2{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 2rem; +} + +h3{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 2rem; +} +.navHeader h3{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 3rem; +} + +p{ + font-family: 'Duper', sans-serif; + font-style: normal; + font-size: 1.5rem; +} +.landingSect p{ + line-height: 2.25rem; +} +li p{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; + color: #fff; +} + +label{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; +} +.alignLeft{ + text-align: left; +} +.alignCenter{ + text-align: center; +} +.alignRight{ + text-align: right; +} + +/* Dropcap */ +.landingSect p:first-child:first-letter { + color: #fff; + float: left; + font-family: "Duper",sans-serif; + font-style: bold; + font-size: 6rem; + line-height: 0.5em; + padding: 1rem 0.5rem 0; +} + + +/* Keyframes */ +@keyframes scroll_Show{ + 0%{ + opacity: 0; + } + 80%{ + opacity: 0; + } + 100%{ + opacity: 1; + } +} +@keyframes scroll_Hide{ + from{ + opacity: 1; + } + to{ + opacity: 0; + } +} + diff --git a/dreammirror/css/style_dict.css b/dreammirror/css/style_dict.css new file mode 100644 index 0000000..5619238 --- /dev/null +++ b/dreammirror/css/style_dict.css @@ -0,0 +1,451 @@ +@charset "utf-8"; + +/* Reset */ +*{ + margin: 0; + padding: 0; +} + + +/* Essentials */ +body{ + color: #fff; + background-color: #000; + filter: sepia(0.25); + overflow-x: hidden; +} +img{ + max-width: 100%; + max-height: 100%; +} +#MAIN_CONTAINER{ + position: relative; + overflow: hidden; +} + + +/* Fonts */ +/* Bebas Kai */ +@font-face { + font-family: 'Dreamwalker'; + src: url("../font/Dreamwalker.ttf") format('truetype'); + font-weight: normal; + font-style: normal; +} +/* Providence Sans */ +@font-face { + font-family: 'ProvidenceSansPro-Bold'; + src: url("../font/ProvidenceSansPro-Bold.otf") format('opentype'); + font-weight: normal; + font-style: normal; +} +/* Duper */ +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Reg.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Bold.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Italic.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_BoldItalic.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Noto Sans */ +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansLight.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansReg.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansLightIta.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansIta.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Franklin Gothic URW Condensed */ +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('../font/FGURWBook.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('../font/FGURWMed.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} + + +/* Background */ +.bg_01{ + background-image: url("../img/core/bg.png"); + background-repeat: repeat; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.6; + z-index: -1; +} + +.bg_02{ + background-image: url("../img/core/bg.png"); + background-repeat: repeat; + background-size: 250px; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.4; + z-index: -2; +} + + +/* Title */ +#TITLE_AREA{ + position: relative; +} +.title_img{ + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 40%; +} +.titlebg_img{ + display: block; + margin: 0 auto; +} +.title_gradient{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 50px; + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); + z-index: 2; +} + + +/* Scroll Down Indicator */ +#SCROLL_DOWN{ + position: fixed; + bottom: 2%; + right: 18%; + max-width: 20%; + max-height: 20%; + filter: drop-shadow(0px 0px 4px #000); + -webkit-filter: drop-shadow(0px 0px 24px #000); + animation: scroll_Show 3500ms ease-out; + z-index: 10; +} +.hideScroll{ + animation: scroll_Hide 1000ms ease-out; +} + + +/* Main Grid Container */ +#GRID_MAIN{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(4,auto); + position: relative; + margin-bottom: 5em; +} +.pageDivider,.navUpperContainer{ + background-image: url("../img/core/sitebg.gif"); + background-repeat: repeat-y; + background-position: center; + background-size: 100%; +} + +.landingHeader{ + grid-column: 3/-3; + grid-row: 1/2; + position: relative; + text-align: center; + height: 270px; + padding: 0 1em; + margin-bottom: 2em; +} +.header_bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.header_line01{ + position: absolute; + top: 0; + left: 15%; + font-size: 3.5vw; +} +.header_line02{ + position: absolute; + top: 42%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 2vw; + color: #888; +} +.header_line03{ + position: absolute; + bottom: 0; + right: 15%; + font-size: 5.75vw; +} + +.aboutHeader{ + grid-column: 3/-3; + grid-row: 1/2; + position: relative; + text-align: center; + height: 270px; + padding: 0 1em; + margin-top: 2em; +} + +.landingOpener{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 1em 1em; + margin-bottom: 2em; + text-align: center; +} + +.landingSect{ + grid-column: 3/-3; + grid-row: 3/4; + padding: 1em 1em; + margin-bottom: 4em; +} + +.aboutSect{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 0 1em; + margin-bottom: 4em; +} + +#DICT > div{ + margin-bottom: 2.5em; +} + + +/* Nav Grid Container */ +#GRIDnav{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(2,auto); + position: relative; +} +.navHeader{ + display: flex; + flex-direction: row; + justify-content: space-around; + grid-column: 1/-1; + grid-row: 1/2; + padding: 0 14em; + margin-bottom: 2em; + text-align: center; +} +.navHeader .img_hr{ + display: block; + width: 40%; + height: 40%; + margin: auto 0; +} + +.navMain{ + grid-column: 2/-2; + grid-row: 2/3; + padding: 0 8em; + margin-bottom: 4em; + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.navUpper{ + padding: 0 8em; + margin: 4em auto 0; + display: flex; + flex-direction: row; + justify-content: space-around; + width: 40%; +} + +.navMain a img,.navUpper a img{ + max-width: 100%; +} +.navMain a > *,.navUpper a > *{ + transition: all 200ms ease-in-out; + transform: scale(80%,80%); +} +.navMain a > *:hover,.navUpper a > *:hover{ + transform: scale(100%,100%); +} + + +/* Footer */ +.mainFooter{ + padding: 2em 0; + text-align: center; +} +.mainFooter a:link{ + text-decoration: none; + color: #aaa; + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 1rem; +} +.mainFooter a:hover{ + color: #fff; +} +.mainFooter a:active{ + color: #fff; +} +.mainFooter a:visited{ + color: #aaa; +} + + +/* Horizontal Rule */ +.img_hr{ + width: 100%; + height: auto; +} + + +/* Main Grid Container */ +h1{ + font-family: 'Dreamwalker', sans-serif; + font-size: 4rem; +} +.dream_header h1{ + font-size: 12rem; + letter-spacing: 1rem; +} +.aboutHeader h1{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 4rem; +} + +h2{ + font-family: 'Dreamwalker', sans-serif; + font-size: 3rem; +} +#DREAM_CONTAINER h2{ + margin-top: 2rem; + margin-bottom: 2rem; +} +.landingOpener h2{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 2rem; +} + +h3:first-child{ + font-family: 'Dreamwalker', sans-serif; + font-size: 3rem; + margin-bottom: 0.5em; +} +h3{ + font-family: 'Dreamwalker', sans-serif; + font-size: 3rem; + margin: 1.5em 0 0.5em; +} +.navHeader h3{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 3rem; +} + +h4{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 2rem; + margin-bottom: 0.2em; +} + +p{ + font-family: 'Duper', sans-serif; + font-style: normal; + font-size: 1.5rem; +} +.landingSect p{ + line-height: 2.25rem; +} +.landingSect p::first-letter{ + font-size: 6rem; +} +li p{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; + color: #fff; +} + +label{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; +} +.alignLeft{ + text-align: left; +} +.alignCenter{ + text-align: center; +} +.alignRight{ + text-align: right; +} + + +/* Keyframes */ +@keyframes scroll_Show{ + 0%{ + opacity: 0; + } + 80%{ + opacity: 0; + } + 100%{ + opacity: 1; + } +} +@keyframes scroll_Hide{ + from{ + opacity: 1; + } + to{ + opacity: 0; + } +} + diff --git a/dreammirror/css/style_mirror.css b/dreammirror/css/style_mirror.css new file mode 100644 index 0000000..744411b --- /dev/null +++ b/dreammirror/css/style_mirror.css @@ -0,0 +1,488 @@ +@charset "utf-8"; + +/* Reset */ +*{ + margin: 0; + padding: 0; +} + + +/* Essentials */ +body{ + color: #eee; + background-color: #000; + filter: sepia(0.25); + overflow-x: hidden; +} +img{ + max-width: 100%; + max-height: 100%; +} +#MAIN_CONTAINER{ + position: relative; + overflow: hidden; +} + + +/* Fonts */ +/* Bebas Kai */ +@font-face { + font-family: 'Dreamwalker'; + src: url("../font/Dreamwalker.ttf") format('truetype'); + font-weight: normal; + font-style: normal; +} +/* Providence Sans */ +@font-face { + font-family: 'ProvidenceSansPro-Bold'; + src: url("../font/ProvidenceSansPro-Bold.otf") format('opentype'); + font-weight: normal; + font-style: normal; +} +/* Duper */ +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Reg.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Bold.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_Italic.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Duper'; + src: url('../font/Duper_BoldItalic.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Noto Sans */ +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansLight.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansReg.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansLightIta.otf') format('opentype'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Noto Sans'; + src: url('../font/NotoSansIta.otf') format('opentype'); + font-weight: bold; + font-style: italic; +} +/* Franklin Gothic URW Condensed */ +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('../font/FGURWBook.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'FranklinGothicURWCond'; + src: url('../font/FGURWMed.otf') format('opentype'); + font-weight: bold; + font-style: normal; +} + + +/* Background */ +.bg_01{ + background-image: url("../img/core/bg.png"); + background-repeat: repeat; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.6; + z-index: -1; +} + +.bg_02{ + background-image: url("../img/core/bg.png"); + background-repeat: repeat; + background-size: 250px; + background-blend-mode: lighten; + mix-blend-mode: lighten; + position: fixed; + width: 100%; + height: 100%; + opacity: 0.4; + z-index: -2; +} + + +/* Title */ +#TITLE_AREA{ + position: relative; +} +.title_img{ + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 40%; +} +.titlebg_img{ + display: block; + margin: 0 auto; +} +.title_gradient{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 50px; + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); + z-index: 2; +} + + +/* Scroll Down Indicator */ +#SCROLL_DOWN{ + position: fixed; + bottom: 2%; + right: 18%; + max-width: 20%; + max-height: 20%; + filter: drop-shadow(0px 0px 4px #000); + -webkit-filter: drop-shadow(0px 0px 24px #000); + animation: scroll_Show 3500ms ease-out; + z-index: 10; +} +.hideScroll{ + animation: scroll_Hide 1000ms ease-out; +} + + +/* Main Grid Container */ +#GRID_MAIN{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(4,auto); + position: relative; + margin-bottom:5em; +} +.pageDivider{ + background-image: url("../img/core/sitebg.gif"); + background-repeat: repeat-y; + background-position: center; + background-size: 100%; +} + +.landingHeader{ + grid-column: 3/-3; + grid-row: 1/2; + position: relative; + text-align: center; + height: 270px; + padding: 0 1em; + margin-bottom: 2em; +} +.header_bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.header_line01{ + position: absolute; + top: 0; + left: 15%; + font-size: 3.5vw; +} +.header_line02{ + position: absolute; + top: 42%; + left: 50%; + transform: translate(-50%,-50%); + font-size: 2vw; + color: #888; +} +.header_line03{ + position: absolute; + bottom: 0; + right: 15%; + font-size: 5.75vw; +} + +.aboutHeader{ + grid-column: 3/-3; + grid-row: 1/2; + position: relative; + text-align: center; + height: 270px; + padding: 0 1em; + margin-top: 2em; +} + +.landingOpener{ + grid-column: 3/-3; + grid-row: 2/3; + padding: 1em 1em; + margin-bottom: 2em; + text-align: center; +} + +/* Dream Mirror */ + +#DM_MAIN{ + display: grid; + grid-template-columns: repeat(10,1fr); + grid-template-row: repeat(5,auto); + grid-column: 1/-1; + grid-row: 2/3; + padding: 0 1em; + margin-bottom: 4em; +} + +#DM_MAIN #DM_IMG{ + position: relative; + grid-column: 2/-4; + grid-row: 1/2; + border: 8px #eee solid; + overflow: hidden; + z-index: 10; +} + +#DM_MAIN #DM_IMG img{ + width: 100%; + height: 100%; +} + +#DM_IMG_BEING,#DM_IMG_OBJ,#DM_IMG_FEEL{ + position: absolute; + transform-origin: center center; + height: auto; +} + +#DM_MAIN #DM_IMG img{ + width: 100%; + height: 100%; +} + +#DM_DESC_PLACE{ + grid-column: 3/-4; + grid-row: 2/3; + padding: 2em 0; +} +#DM_DESC_BEING{ + grid-column: 3/-4; + grid-row: 3/4; + padding: 2em 0; +} +#DM_DESC_OBJ{ + grid-column: 3/-4; + grid-row: 4/5; + padding: 2em 0; +} +#DM_DESC_FEEL{ + grid-column: 3/-4; + grid-row: 5/6; + padding: 2em 0; +} + +#DM_DESC_PLACE:empty,#DM_DESC_BEING:empty,#DM_DESC_OBJ:empty,#DM_DESC_FEEL:empty{ + display: none; +} + + +/* Nav Grid Container */ +#GRIDnav{ + display: grid; + grid-template-columns: repeat(7,1fr); + grid-template-rows: repeat(2,auto); + position: relative; +} +.navHeader{ + display: flex; + flex-direction: row; + justify-content: space-around; + grid-column: 1/-1; + grid-row: 1/2; + padding: 0 14em; + margin-bottom: 2em; + text-align: center; +} +.navHeader .img_hr{ + display: block; + width: 40%; + height: 40%; + margin: auto 0; +} + +.navMain{ + grid-column: 2/-2; + grid-row: 2/3; + padding: 0 8em; + margin-bottom: 4em; + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.navUpper{ + padding: 0 8em; + margin: 4em auto 0; + display: flex; + flex-direction: row; + justify-content: space-around; + width: 40%; +} + +.navMain a img,.navUpper a img{ + max-width: 100%; +} +.navMain a > *,.navUpper a > *{ + transition: all 200ms ease-in-out; + transform: scale(80%,80%); +} +.navMain a > *:hover,.navUpper a > *:hover{ + transform: scale(100%,100%); +} + + +/* Footer */ +.mainFooter{ + padding: 2em 0; + text-align: center; +} +.mainFooter a:link{ + text-decoration: none; + color: #aaa; + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 1rem; +} +.mainFooter a:hover{ + color: #fff; +} +.mainFooter a:active{ + color: #fff; +} +.mainFooter a:visited{ + color: #aaa; +} + + +/* Horizontal Rule */ +.img_hr{ + width: 100%; + height: auto; +} + + +/* Main Grid Container */ +h1{ + font-family: 'Dreamwalker', sans-serif; + font-size: 4rem; +} +.dream_header h1{ + font-size: 12rem; + letter-spacing: 1rem; +} +.aboutHeader h1{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 4rem; +} + +h2{ + font-family: 'Dreamwalker', sans-serif; + font-size: 3rem; +} +#DREAM_CONTAINER h2{ + margin-top: 2rem; + margin-bottom: 2rem; +} +.landingOpener h2{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 2rem; +} + +h3{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 2rem; +} +.navHeader h3{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 3rem; +} + +h4{ + font-family: 'ProvidenceSansPro-Bold', sans-serif; + font-size: 3rem; +} + +p{ + font-family: 'Duper', sans-serif; + font-style: normal; + font-size: 1.5rem; +} +.landingSect p{ + line-height: 2.25rem; +} +.landingSect p::first-letter{ + font-size: 6rem; +} +li p{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; + color: #fff; +} + +label{ + font-family: 'FranklinGothicURWCond', sans-serif; + font-size: 1.5rem; +} +.alignLeft{ + text-align: left; +} +.alignCenter{ + text-align: center; +} +.alignRight{ + text-align: right; +} + + +/* Keyframes */ +@keyframes scroll_Show{ + 0%{ + opacity: 0; + } + 80%{ + opacity: 0; + } + 100%{ + opacity: 1; + } +} +@keyframes scroll_Hide{ + from{ + opacity: 1; + } + to{ + opacity: 0; + } +} + diff --git a/dreammirror/css/style_mobile_main.css b/dreammirror/css/style_mobile_main.css new file mode 100644 index 0000000..3fd816a --- /dev/null +++ b/dreammirror/css/style_mobile_main.css @@ -0,0 +1,165 @@ +@charset "utf-8"; +/* CSS Document */ + +/* Mobile */ +@media only screen and (max-width: 600px) { + + #flourish_01{ + display: none; + } + #flourish_02{ + display: none; + } + + #TITLE_AREA{ + width: 100%; + height: auto; + } + .title_img{ + position: relative; + display: block; + margin: 0 auto 2em; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + height: auto; + } + .titlebg_img{ + display: none; + } + + .pageDivider,.navUpperContainer{ + background-image: none; + } + + #GRID_MAIN{ + grid-template-columns: repeat(11,1fr); + margin-bottom: 0; + } + .landingHeader{ + grid-column: 2/-2; + } + .aboutHeader{ + grid-column: 2/-2; + height: auto; + margin-bottom: 2em; + } + + .landingOpener{ + grid-column: 2/-2; + } + .landingSect{ + grid-column: 2/-2; + } + .aboutSect{ + grid-column: 2/-2; + } + + #GRIDnav{ + grid-template-columns: repeat(11,1fr); + } + .navHeader{ + grid-column: 1/-1; + padding: 0; + } + .navHeader .img_hr{ + display: none; + } + .navMain{ + grid-column: 1/-1; + padding: 0 3em; + } + .navUpper{ + padding: 0; + width: 75%; + } + + .navMain a > *,.navUpper a > *{ + transform: scale(100%,100%); + } + + .header_line01{ + position: absolute; + top: 10%; + left: 15%; + font-size: 7vw; + } + .header_line02{ + position: absolute; + top: 42%; + left: 52%; + transform: translate(-50%,-50%); + font-size: 4vw; + color: #888; + } + .header_line03{ + position: absolute; + bottom: 25%; + right: 15%; + font-size: 10.25vw; + } + + h1{ + font-size: 2.5rem; + } + .dream_header h1{ + font-size: 7.5rem; + } + .aboutHeader h1{ + font-size: 1.8rem; + } + + h2{ + font-size: 2.25rem; + } + #DREAM_CONTAINER h2{ + margin-top: 2rem; + margin-bottom: 2rem; + } + .landingOpener h2{ + font-size: 1.25rem; + } + + h3{ + font-size: 1.25rem; + } + .navHeader h3{ + font-size: 2.25rem; + } + #heading_place{ + margin-top: 0.5em; + } + #heading_place,#heading_being,#heading_obj,#heading_feel{ + font-size: 3.25rem; + } + + p{ + font-style: normal; + font-size: 1rem; + } + .landingSect p{ + line-height: 2rem; + } + .landingSect p::first-letter{ + font-size: 3.75rem; + } + .aboutSect p{ + line-height: 1.5rem; + } + li p{ + font-size: 1rem; + } + + label{ + font-size: 1rem; + } + + /* Dropcap */ + .landingSect p:first-child:first-letter { + font-size: 5rem; + line-height: 0.5em; + padding: 1rem 0.5rem 0; + } + +} \ No newline at end of file diff --git a/dreammirror/css/style_mobile_mirror.css b/dreammirror/css/style_mobile_mirror.css new file mode 100644 index 0000000..7efc324 --- /dev/null +++ b/dreammirror/css/style_mobile_mirror.css @@ -0,0 +1,198 @@ +@charset "utf-8"; +/* CSS Document */ + +/* Mobile */ +@media only screen and (max-width: 600px) { + + #flourish_01{ + display: none; + } + #flourish_02{ + display: none; + } + + #TITLE_AREA{ + width: 100%; + height: auto; + } + .title_img{ + position: relative; + display: block; + margin: 0 auto 2em; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + height: auto; + } + .titlebg_img{ + display: none; + } + + .pageDivider{ + background-image: none; + } + + #GRID_MAIN{ + grid-template-columns: repeat(11,1fr); + margin-bottom: 0; + } + .landingHeader{ + grid-column: 2/-2; + } + .aboutHeader{ + grid-column: 2/-2; + height: auto; + margin-bottom: 2em; + } + + .landingOpener{ + grid-column: 2/-2; + } + .landingSect{ + grid-column: 2/-2; + } + .aboutSect{ + grid-column: 2/-2; + } + + #GRIDnav{ + grid-template-columns: repeat(11,1fr); + } + .navHeader{ + grid-column: 1/-1; + padding: 0; + } + .navHeader .img_hr{ + display: none; + } + .navMain{ + grid-column: 1/-1; + padding: 0 3em; + } + .navUpper{ + padding: 0; + width: 75%; + } + + .navMain a > *,.navUpper a > *{ + transform: scale(100%,100%); + } + + .header_line01{ + position: absolute; + top: 10%; + left: 15%; + font-size: 7vw; + } + .header_line02{ + position: absolute; + top: 42%; + left: 52%; + transform: translate(-50%,-50%); + font-size: 4vw; + color: #888; + } + .header_line03{ + position: absolute; + bottom: 25%; + right: 15%; + font-size: 10.25vw; + } + + + #DM_MAIN #DM_IMG{ + grid-column: 1/-1; + } + + #DM_DESC_PLACE{ + grid-column: 2/-2; + padding: 7em 0 1em; + } + #DM_DESC_BEING,#DM_DESC_OBJ,#DM_DESC_FEEL{ + grid-column: 2/-2; + padding: 1em 0; + } + + #DMlist_CONTAIN{ + grid-column: 1/-1; + grid-row: 2/3; + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 1em 0 4em; + } + .dmlist li,.dmlist li:first-child{ + width: 80px; + transform: translateX(25%); + } + .dmlist li:not(:first-child){ + display: inline-block; + font-size: 1.5rem; + text-align: center; + list-style: none; + right: 0; + width: 100%; + } + .dmlist_img{ + width: 100%; + height: 100%; + } + + + h1{ + font-size: 2.5rem; + } + .dream_header h1{ + font-size: 7.5rem; + } + .aboutHeader h1{ + font-size: 1.8rem; + } + + h2{ + font-size: 2.25rem; + } + #DREAM_CONTAINER h2{ + margin-top: 2rem; + margin-bottom: 2rem; + } + .landingOpener h2{ + font-size: 1.25rem; + } + + h3{ + font-size: 1.25rem; + } + .navHeader h3{ + font-size: 2.25rem; + } + #heading_place{ + margin-top: 0.5em; + } + #heading_place,#heading_being,#heading_obj,#heading_feel{ + font-size: 3.25rem; + } + + p{ + font-style: normal; + font-size: 1rem; + } + .landingSect p{ + line-height: 2rem; + } + .landingSect p::first-letter{ + font-size: 3.75rem; + } + .aboutSect p,#DM_DESC_PLACE p,#DM_DESC_BEING p,#DM_DESC_OBJ p,#DM_DESC_FEEL p{ + line-height: 1.5rem; + } + li p{ + font-size: 1rem; + } + + label{ + font-size: 1rem; + } + +} \ No newline at end of file diff --git a/dreammirror/dict.html b/dreammirror/dict.html new file mode 100644 index 0000000..f370c1c --- /dev/null +++ b/dreammirror/dict.html @@ -0,0 +1,109 @@ + + + + + + +The Dream Dictionary + + + + + + + + + + +
+ +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ Horizontal Rule + +

Dream Dictionary

+ + Horizontal Rule +
+ +
+ +
+
+ + + +
+
+ Horizontal Rule + +

Stare into a mirror...

+ + Horizontal Rule +
+ +
+
+ + + + diff --git a/dreammirror/dream_system/dream_dict.js b/dreammirror/dream_system/dream_dict.js new file mode 100644 index 0000000..a8414de --- /dev/null +++ b/dreammirror/dream_system/dream_dict.js @@ -0,0 +1,12 @@ +// JavaScript Document + +var dictionaryArea = "#DICT_AREA" + +$(document).ready(function() { + $(dictionaryArea).load("dream_system/text.html #DICT", function(status){ + // Failsafe + if (status == "error") { + $(dictionaryArea).load("dream_system/text.html #error"); + } + }); +}); \ No newline at end of file diff --git a/dreammirror/dream_system/dream_system.js b/dreammirror/dream_system/dream_system.js new file mode 100644 index 0000000..4d183e6 --- /dev/null +++ b/dreammirror/dream_system/dream_system.js @@ -0,0 +1,144 @@ +// JavaScript Document + +var pathText = "text.html" +var pathImg = "images.html" + +var activeSel_Heading = ""; +var activeSel_Text = ""; +var activeSel_Img = ""; +var runID_Heading = ""; +var runID_Text = ""; +var runID_Img = ""; + +// Who or what did you see? +$('input[name=DREAM_BEING]').change(function() { + activeSel_Heading = "#DH_INS_BEING"; + activeSel_Text = "#D_INS_BEING"; + activeSel_Img = "#DIMG_INS_BEING"; + runID_Heading = " #heading_being"; + switch($(this).val()) { + case 'Person': + runID_Text = " #being_01"; + runID_Img = " #beingImg_01"; + setContent(); + break; + case 'Cat': + runID_Text = " #being_02"; + runID_Img = " #beingImg_02"; + setContent(); + break; + case 'Dog': + runID_Text = " #being_03"; + runID_Img = " #beingImg_03"; + setContent(); + break; + case 'Bird': + runID_Text = " #being_04"; + runID_Img = " #beingImg_04"; + setContent(); + break; + case 'Lion': + runID_Text = " #being_05"; + runID_Img = " #beingImg_05"; + setContent(); + break; + default: + alert("grevious error\r\nwhat have you done"); + } +}); + +// What objects do you remember finding? +$('input[name=DREAM_OBJ]').change(function() { + activeSel_Heading = "#DH_INS_OBJ"; + activeSel_Text = "#D_INS_OBJ"; + activeSel_Img = "#DIMG_INS_OBJ"; + runID_Heading = " #heading_obj"; + switch($(this).val()) { + case 'Flower': + runID_Text = " #obj_01"; + runID_Img = " #objImg_01"; + setContent(); + break; + case 'Book': + runID_Text = " #obj_02"; + runID_Img = " #objImg_02"; + setContent(); + break; + case 'Clock': + runID_Text = " #obj_03"; + runID_Img = " #objImg_03"; + setContent(); + break; + case 'Lamp': + runID_Text = " #obj_04"; + runID_Img = " #objImg_04"; + setContent(); + break; + case 'Chair': + runID_Text = " #obj_05"; + runID_Img = " #objImg_05"; + setContent(); + break; + default: + alert("grevious error\r\nwhat have you done"); + } +}); + +// How did you feel? +$('input[name=DREAM_FEEL]').change(function() { + activeSel_Heading = "#DH_INS_FEEL"; + activeSel_Text = "#D_INS_FEEL"; + activeSel_Img = "#DIMG_INS_FEEL"; + runID_Heading = " #heading_feel"; + switch($(this).val()) { + case 'Happy': + runID_Text = " #feel_01"; + runID_Img = " #feelImg_01"; + setContent(); + break; + case 'Sad': + runID_Text = " #feel_02"; + runID_Img = " #feelImg_02"; + setContent(); + break; + case 'Angry': + runID_Text = " #feel_03"; + runID_Img = " #feelImg_03"; + setContent(); + break; + case 'Afraid': + runID_Text = " #feel_04"; + runID_Img = " #feelImg_04"; + setContent(); + break; + case 'Anxious': + runID_Text = " #feel_05"; + runID_Img = " #feelImg_05"; + setContent(); + break; + default: + alert("grevious error\r\nwhat have you done"); + } +}); + +function setContent(){ + $(activeSel_Heading).load(pathText + runID_Heading, function(status){ + // Failsafe + if (status == "error") { + $(activeSel_Heading).load("text.html #error_heading"); + } + }); + $(activeSel_Text).load(pathText + runID_Text, function(status){ + // Failsafe + if (status == "error") { + $(activeSel_Text).load("text.html #error"); + } + }); + $(activeSel_Img).load(pathImg + runID_Img, function(status){ + // Failsafe + if (status == "error") { + $(activeSel_Img).load("images.html #errorImg"); + } + }); +} + diff --git a/dreammirror/dream_system/dropdowns.js b/dreammirror/dream_system/dropdowns.js new file mode 100644 index 0000000..1f55f46 --- /dev/null +++ b/dreammirror/dream_system/dropdowns.js @@ -0,0 +1,21 @@ +// JavaScript Document + +/* When the user clicks on the button, +toggle between hiding and showing the dropdown content */ +function myFunction() { + document.getElementById("myDropdown").classList.toggle("show"); +} + +// Close the dropdown menu if the user clicks outside of it +window.onclick = function(event) { + if (!event.target.matches('.dropbtn')) { + var dropdowns = document.getElementsByClassName("dropdown-content"); + var i; + for (i = 0; i < dropdowns.length; i++) { + var openDropdown = dropdowns[i]; + if (openDropdown.classList.contains('show')) { + openDropdown.classList.remove('show'); + } + } + } +} \ No newline at end of file diff --git a/dreammirror/dream_system/images.html b/dreammirror/dream_system/images.html new file mode 100644 index 0000000..1bbcbd2 --- /dev/null +++ b/dreammirror/dream_system/images.html @@ -0,0 +1,35 @@ +HOLY SHIT WHAT HAPPENED + + +Person +Cat +Dog +Bird +Lion +Deer +Turtle +Insect +Mouse +Ghost + + + +Flower +Book +Clock +Lamp +Chair +Phone +Food +Drink +Car +Mirror + + + +Happy +Sad +Angry +Afraid +Anxious + diff --git a/dreammirror/dream_system/ring.js b/dreammirror/dream_system/ring.js new file mode 100644 index 0000000..03671d3 --- /dev/null +++ b/dreammirror/dream_system/ring.js @@ -0,0 +1,397 @@ +// JavaScript Document + +var dir_text = "dream_system/text.html", + dir_img = "dream_system/images.html" + +var DM_DIV = "#DMlist_CONTAIN", + prefixes = ["place","being","obj","feel"], + wheels = 4, + amount = 10; + +var place_curr = 0, + being_curr = 0, + obj_curr = 0, + feel_curr = 0 + +var place = [ + // Places + "Home", + "School", + "Office", + "Hotel", + "Hospital", + "Fair", + "Hallway", + "Store", + "Theater", + "Jail" +] + +var being = [ + // Beings + "Person", + "Cat", + "Dog", + "Bird", + "Lion", + "Deer", + "Turtle", + "Insect", + "Mouse", + "Ghost" +] + +var obj = [ + // Objects + "Flower", + "Book", + "Clock", + "Lamp", + "Chair", + "Phone", + "Food", + "Drink", + "Car", + "Mirror" +] + +var feel = [ + // Emotions + "Happiness", + "Sadness", + "Anger", + "Fear", + "Anxiety" +] + +for(let i = 0; i < prefixes.length; i++){ + for(let j = 0; j < amount; j++){ + switch(i){ + case(0): + $('#dmlist_0' + (i+1)).append("
  • " + place[j] + "
    • "); + break; + case(1): + $('#dmlist_0' + (i+1)).append("
  • " + being[j] + "
    • "); + break; + case(2): + $('#dmlist_0' + (i+1)).append("
  • " + obj[j] + "
    • "); + break; + case(3): + if(j < 5){ + $('#dmlist_0' + (i+1)).append("
  • " + feel[j] + "
    • "); + } + break; + } + } +} + +for(let i = 0; i < 4; i++){ + if(i == 3){ + createList('dmlist_0' + (i+1),0.15,-209); + } + else{ + createList('dmlist_0' + (i+1),0.35,-245); + } +} + +function createList(element,type,start){ + var radius = '12em', //distance from center + $first = $("#" + element + ' li').first(), + $elements = $("#" + element + ' li:not(:first-child)'), + numberOfElements = (type === 1) ? $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle + slice = 360 * type / numberOfElements, + distance = 40, + offset = 70, + isOpen = false; + + $first.click(function(){ + if($(window).width() <= 600){ + if(isOpen == true){ + $elements.each(function() { + var $self = $(this), + $bg = $(".shield"); + + $self.css({ + 'top': 0 + 'px', + 'opacity': '0', + 'z-index': '100' + }); + $first.css({ + 'z-index': '200' + }); + $bg.css({ + 'opacity': '0', + 'pointer-events': 'none' + }); + $('body').css({ + 'height': '100%', + 'overflow': 'visible' + }); + }); + isOpen = false; + } + else{ + $elements.each(function(i) { + var $self = $(this), + $bg = $(".shield"), + move = (distance*i); + + $self.css({ + 'top': offset + move + 'px', + 'opacity': '1', + 'z-index': '202' + }); + $first.css({ + 'z-index': '202' + }); + $bg.css({ + 'opacity': '0.75', + 'pointer-events': 'auto' + }); + $('body').css({ + 'height': 'auto' + //'overflow': 'hidden' + }); + }); + isOpen = true; + } + } + else{ + if(isOpen == true){ + $elements.each(function() { + var $self = $(this), + $bg = $(".shield"); + + $self.css({ + 'transform': 'rotate(0deg) translate(0) rotate(0deg)', + 'opacity': '0', + 'z-index': '100' + }); + $first.css({ + 'z-index': '200' + }); + $bg.css({ + 'opacity': '0', + 'pointer-events': 'none' + }); + $('body').css({ + 'height': '100%', + 'overflow': 'visible' + }); + }); + isOpen = false; + } + else{ + $elements.each(function(i) { + var $self = $(this), + $bg = $(".shield"), + rotate = slice * i + start, + rotateReverse = rotate * -1; + + $self.css({ + 'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(180deg)', + 'opacity': '1', + 'z-index': '202' + }); + $first.css({ + 'z-index': '202' + }); + $bg.css({ + 'opacity': '0.75', + 'pointer-events': 'auto' + }); + $('body').css({ + 'height': 'auto' + //'overflow': 'hidden' + }); + }); + isOpen = true; + } + } + }); + + $(".shield").click(function(){ + if(isOpen == true){ + $first.click(); + } + }); + + $($elements).click(function(event) { + $first.click(); + for(let k = 0; k < amount; k++){ + if($(event.target).is('#place_c_' + (k+1))){ + place_curr = (k+1); + $(event.target).css({ + 'color': '#fff' + }); + if($(window).width() > 600){ + $(event.target).css({ + 'list-style': 'disc' + }); + } + break; + } + else if($(event.target).is('#being_c_' + (k+1))){ + being_curr = (k+1); + $(event.target).css({ + 'color': '#fff' + }); + if($(window).width() > 600){ + $(event.target).css({ + 'list-style': 'disc' + }); + } + break; + } + else if($(event.target).is('#obj_c_' + (k+1))){ + obj_curr = (k+1); + $(event.target).css({ + 'color': '#fff' + }); + if($(window).width() > 600){ + $(event.target).css({ + 'list-style': 'disc' + }); + } + break; + } + else if($(event.target).is('#feel_c_' + (k+1))){ + feel_curr = (k+1); + $(event.target).css({ + 'color': '#fff' + }); + if($(window).width() > 600){ + $(event.target).css({ + 'list-style': 'disc' + }); + } + break; + } + } + updateContent(); + //console.log([place_curr,being_curr,obj_curr,feel_curr]); + }); +} + +function updateContent(){ + if(place_curr > 0){ + $("#DM_IMG_PLACE").attr("src", "img/place/p_" + place_curr + ".gif"); + $("#DM_IMG_PLACE").on("error",function(){ + $(this).attr("src","img/place/error.gif"); + place_curr = -1; + + }); + $("#DM_DESC_PLACE").load(dir_text + " #place_" + place_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_DESC_PLACE").load(dir_text + " #error_heading"); + } + }); + } + if(being_curr > 0){ + $("#DM_IMG_BEING").load(dir_img + " #beingImg_" + being_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_IMG_BEING").load(dir_img + " #errorimg"); + } + }); + $("#DM_DESC_BEING").load(dir_text + " #being_" + being_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_DESC_BEING").load(dir_text + " #error_heading"); + } + }); + } + if(obj_curr > 0){ + $("#DM_IMG_OBJ").load(dir_img + " #objImg_" + obj_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_IMG_OBJ").load(dir_img + " #errorimg"); + } + }); + $("#DM_DESC_OBJ").load(dir_text + " #obj_" + obj_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_DESC_OBJ").load(dir_text + " #error_heading"); + } + }); + } + if(feel_curr > 0){ + $("#DM_IMG_FEEL").load(dir_img + " #feelImg_" + feel_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_IMG_FEEL").load(dir_img + " #errorimg"); + } + }); + $("#DM_DESC_FEEL").load(dir_text + " #feel_" + feel_curr, function(status){ + // Failsafe + if (status == "error") { + $("#DM_DESC_FEEL").load(dir_text + " #error_heading"); + } + }); + } + + for(let k = 0; k < amount; k++){ + if(place_curr != (k+1)){ + $('#place_c_' + (k+1)).css({ + 'color': '#888' + }); + if($(window).width() > 600){ + $('#place_c_' + (k+1)).css({ + 'list-style': 'circle' + }); + } + } + if(being_curr != (k+1)){ + $('#being_c_' + (k+1)).css({ + 'color': '#888' + }); + if($(window).width() > 600){ + $('#being_c_' + (k+1)).css({ + 'list-style': 'circle' + }); + } + } + if(obj_curr != (k+1)){ + $('#obj_c_' + (k+1)).css({ + 'color': '#888' + }); + if($(window).width() > 600){ + $('#obj_c_' + (k+1)).css({ + 'list-style': 'circle' + }); + } + } + if(feel_curr != (k+1)){ + $('#feel_c_' + (k+1)).css({ + 'color': '#888' + }); + if($(window).width() > 600){ + $('#feel_c_' + (k+1)).css({ + 'list-style': 'circle' + }); + } + } + } + + $("#DM_IMG_BEING").removeClass(); + $("#DM_IMG_OBJ").removeClass(); + $("#DM_IMG_FEEL").removeClass(); + + $("#DM_IMG_BEING").addClass("being_" + Math.max(place_curr,0)); + $("#DM_IMG_OBJ").addClass("obj_" + Math.max(place_curr,0)); + $("#DM_IMG_FEEL").addClass("feel_" + Math.max(place_curr,0)); + colorSwitch(); +} + +function colorSwitch(){ + $('body,#DM_IMG_BEING,#DM_IMG_OBJ,#DM_IMG_FEEL').css({ + 'filter': 'sepia(0.25) hue-rotate(' + getRandomInt(0,360) + 'deg) saturate(' + getRandomInt(200,300) + '%)' + }); +} + +function getRandomInt(min,max){ + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min + 1)) + min; +} \ No newline at end of file diff --git a/dreammirror/dream_system/style_ring.css b/dreammirror/dream_system/style_ring.css new file mode 100644 index 0000000..682e551 --- /dev/null +++ b/dreammirror/dream_system/style_ring.css @@ -0,0 +1,330 @@ +@charset "utf-8"; +/* CSS Document */ + +*{ + transition: filter 2000ms ease; +} + +#DMlist_CONTAIN{ + grid-column: -4/-2; + grid-row: 1/2; + display: flex; + flex-direction: column; + justify-content: space-around; +} +.dmlist{ + position: relative; + width: 100%; + height: auto; + margin-left: 6em; + text-align: right; +} +.dmlist li{ + position: absolute; + cursor: pointer; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + transition: all 200ms ease; + width: auto; + height: auto; + list-style: circle; + color: #888; +} +.dmlist li:first-child{ + z-index: 200; + list-style-type: none; +} +.dmlist li:not(:first-child){ + font-family: 'ProvidenceSansPro-Bold'; + font-size: 2rem; + z-index: 100; + opacity: 0; + right: 42%; + width: 100%; +} +.dmlist li:first-child{ + transform: translate(-40%,-40%); +} +.dmlist_img{ + width: 50%; + height: 50%; + transform: translate(-40%,0%); +} + +.shield{ + position: fixed; + width: 100%; + height: 100%; + background: rgba(0,0,0,1.00); + opacity: 0; + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + transition: all 200ms ease; + z-index: 201; + pointer-events: none; +} + + +/* img classes */ +/* 0/-1 */ +.being_0{ + left: 30%; + bottom: -25%; + width: 25%; + transform: translate(-50%,-50%); +} +.obj_0{ + left: 50%; + bottom: -25%; + width: 25%; + transform: translate(-50%,-50%); +} +.feel_0{ + left: 70%; + bottom: -25%; + width: 25%; + transform: translate(-50%,-50%); +} + +/* 1 */ +.being_1{ + left: 30%; + bottom: 35%; + width: 25%; + transform: translate(-50%,-50%) rotate(50deg); +} +.obj_1{ + left: 70%; + bottom: -15%; + width: 20%; + transform: translate(-50%,-50%); +} +.feel_1{ + left: 42%; + bottom: 10%; + width: 12%; + transform: translate(-50%,-50%); +} +/* 1 */ +.being_1{ + left: 30%; + bottom: 35%; + width: 25%; + transform: translate(-50%,-50%) rotate(50deg); +} +.obj_1{ + left: 70%; + bottom: -15%; + width: 20%; + transform: translate(-50%,-50%); +} +.feel_1{ + left: 42%; + bottom: 10%; + width: 12%; + transform: translate(-50%,-50%); +} +/* 1 */ +.being_1{ + left: 30%; + bottom: 35%; + width: 25%; + transform: translate(-50%,-50%) rotate(50deg); +} +.obj_1{ + left: 70%; + bottom: -15%; + width: 20%; + transform: translate(-50%,-50%); +} +.feel_1{ + left: 42%; + bottom: 10%; + width: 12%; + transform: translate(-50%,-50%); +} + +/* 2 */ +.being_2{ + left: 50%; + bottom: -40%; + width: 40%; + transform: translate(-50%,-50%); +} +.obj_2{ + left: 65%; + bottom: 25%; + width: 30%; + transform: translate(-50%,-50%) rotate(180deg); +} +.feel_2{ + left: 20%; + bottom: 8%; + width: 30%; + transform: translate(-50%,-50%); +} + +/* 3 */ +.being_3{ + left: 48%; + bottom: 31%; + width: 12%; + transform: translate(-50%,-50%); +} +.obj_3{ + left: 10%; + bottom: -35%; + width: 50%; + transform: translate(-50%,-50%); +} +.feel_3{ + left: 82%; + bottom: -45%; + width: 40%; + transform: translate(-50%,-50%); +} + +/* 4 */ +.being_4{ + left: 30%; + bottom: -70%; + width: 50%; + transform: translate(-50%,-50%); +} +.obj_4{ + left: 53%; + bottom: 3%; + width: 18%; + transform: translate(-50%,-50%); +} +.feel_4{ + left: 74%; + bottom: 15%; + width: 20%; + transform: translate(-50%,-50%); +} + +/* 5 */ +.being_5{ + left: 20%; + bottom: -2.5%; + width: 40%; + transform: translate(-50%,-50%); +} +.obj_5{ + left: 53%; + bottom: -70%; + width: 50%; + transform: translate(-50%,-50%); +} +.feel_5{ + left: 80%; + bottom: -50%; + width: 40%; + transform: translate(-50%,-50%) rotateY(-20deg) rotateZ(8deg); +} + +/* 6 */ +.being_6{ + left: 40%; + bottom: -15%; + width: 40%; + transform: translate(-50%,-50%) rotate(20deg); + z-index: 10; +} +.obj_6{ + left: 58%; + bottom: -15%; + width: 28%; + transform: translate(-50%,-50%); +} +.feel_6{ + left: 73.7%; + bottom: 20%; + width: 15%; + transform: translate(-50%,-50%); +} + +/* 7 */ +.being_7{ + left: 48%; + bottom: 5%; + width: 25%; + transform: translate(-50%,-50%) rotate(-6deg); +} +.obj_7{ + left: 45%; + bottom: -15%; + width: 25%; + transform: translate(-50%,-50%) rotateY(180deg) rotateZ(6deg); +} +.feel_7{ + left: 73.7%; + bottom: -8%; + width: 45%; + transform: translate(-50%,-50%) rotateY(-60deg) rotateZ(-10deg); +} + +/* 8 */ +.being_8{ + left: 50%; + bottom: 40.2%; + width: 20%; + transform: translate(-50%,-50%); +} +.obj_8{ + left: 25%; + bottom: 24%; + width: 12%; + transform: translate(-50%,-50%) rotateY(180deg); +} +.feel_8{ + left: 50%; + bottom: -20%; + width: 25%; + transform: translate(-50%,-50%) rotateX(60deg); +} + +/* 9 */ +.being_9{ + left: 20%; + bottom: 20%; + width: 30%; + transform: translate(-50%,-50%); +} +.obj_9{ + left: 48%; + bottom: 25%; + width: 30%; + transform: translate(-50%,-50%); +} +.feel_9{ + left: 80%; + bottom: 20%; + width: 30%; + transform: translate(-50%,-50%); +} + +/* 10 */ +.being_10{ + left: 85%; + bottom: -8%; + width: 30%; + transform: translate(-50%,-50%) rotateY(180deg) rotateZ(-5deg); +} +.obj_10{ + left: 25%; + bottom: -32%; + width: 45%; + transform: translate(-50%,-50%) rotateX(180deg) rotateZ(90deg); +} +.feel_10{ + left: 75%; + bottom: -28%; + width: 22%; + transform: translate(-50%,-50%) rotateX(60deg) rotateZ(15deg); +} \ No newline at end of file diff --git a/dreammirror/dream_system/style_scrollanim.css b/dreammirror/dream_system/style_scrollanim.css new file mode 100644 index 0000000..682e551 --- /dev/null +++ b/dreammirror/dream_system/style_scrollanim.css @@ -0,0 +1,330 @@ +@charset "utf-8"; +/* CSS Document */ + +*{ + transition: filter 2000ms ease; +} + +#DMlist_CONTAIN{ + grid-column: -4/-2; + grid-row: 1/2; + display: flex; + flex-direction: column; + justify-content: space-around; +} +.dmlist{ + position: relative; + width: 100%; + height: auto; + margin-left: 6em; + text-align: right; +} +.dmlist li{ + position: absolute; + cursor: pointer; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + transition: all 200ms ease; + width: auto; + height: auto; + list-style: circle; + color: #888; +} +.dmlist li:first-child{ + z-index: 200; + list-style-type: none; +} +.dmlist li:not(:first-child){ + font-family: 'ProvidenceSansPro-Bold'; + font-size: 2rem; + z-index: 100; + opacity: 0; + right: 42%; + width: 100%; +} +.dmlist li:first-child{ + transform: translate(-40%,-40%); +} +.dmlist_img{ + width: 50%; + height: 50%; + transform: translate(-40%,0%); +} + +.shield{ + position: fixed; + width: 100%; + height: 100%; + background: rgba(0,0,0,1.00); + opacity: 0; + -webkit-transition: all 200ms ease; + -moz-transition: all 200ms ease; + transition: all 200ms ease; + z-index: 201; + pointer-events: none; +} + + +/* img classes */ +/* 0/-1 */ +.being_0{ + left: 30%; + bottom: -25%; + width: 25%; + transform: translate(-50%,-50%); +} +.obj_0{ + left: 50%; + bottom: -25%; + width: 25%; + transform: translate(-50%,-50%); +} +.feel_0{ + left: 70%; + bottom: -25%; + width: 25%; + transform: translate(-50%,-50%); +} + +/* 1 */ +.being_1{ + left: 30%; + bottom: 35%; + width: 25%; + transform: translate(-50%,-50%) rotate(50deg); +} +.obj_1{ + left: 70%; + bottom: -15%; + width: 20%; + transform: translate(-50%,-50%); +} +.feel_1{ + left: 42%; + bottom: 10%; + width: 12%; + transform: translate(-50%,-50%); +} +/* 1 */ +.being_1{ + left: 30%; + bottom: 35%; + width: 25%; + transform: translate(-50%,-50%) rotate(50deg); +} +.obj_1{ + left: 70%; + bottom: -15%; + width: 20%; + transform: translate(-50%,-50%); +} +.feel_1{ + left: 42%; + bottom: 10%; + width: 12%; + transform: translate(-50%,-50%); +} +/* 1 */ +.being_1{ + left: 30%; + bottom: 35%; + width: 25%; + transform: translate(-50%,-50%) rotate(50deg); +} +.obj_1{ + left: 70%; + bottom: -15%; + width: 20%; + transform: translate(-50%,-50%); +} +.feel_1{ + left: 42%; + bottom: 10%; + width: 12%; + transform: translate(-50%,-50%); +} + +/* 2 */ +.being_2{ + left: 50%; + bottom: -40%; + width: 40%; + transform: translate(-50%,-50%); +} +.obj_2{ + left: 65%; + bottom: 25%; + width: 30%; + transform: translate(-50%,-50%) rotate(180deg); +} +.feel_2{ + left: 20%; + bottom: 8%; + width: 30%; + transform: translate(-50%,-50%); +} + +/* 3 */ +.being_3{ + left: 48%; + bottom: 31%; + width: 12%; + transform: translate(-50%,-50%); +} +.obj_3{ + left: 10%; + bottom: -35%; + width: 50%; + transform: translate(-50%,-50%); +} +.feel_3{ + left: 82%; + bottom: -45%; + width: 40%; + transform: translate(-50%,-50%); +} + +/* 4 */ +.being_4{ + left: 30%; + bottom: -70%; + width: 50%; + transform: translate(-50%,-50%); +} +.obj_4{ + left: 53%; + bottom: 3%; + width: 18%; + transform: translate(-50%,-50%); +} +.feel_4{ + left: 74%; + bottom: 15%; + width: 20%; + transform: translate(-50%,-50%); +} + +/* 5 */ +.being_5{ + left: 20%; + bottom: -2.5%; + width: 40%; + transform: translate(-50%,-50%); +} +.obj_5{ + left: 53%; + bottom: -70%; + width: 50%; + transform: translate(-50%,-50%); +} +.feel_5{ + left: 80%; + bottom: -50%; + width: 40%; + transform: translate(-50%,-50%) rotateY(-20deg) rotateZ(8deg); +} + +/* 6 */ +.being_6{ + left: 40%; + bottom: -15%; + width: 40%; + transform: translate(-50%,-50%) rotate(20deg); + z-index: 10; +} +.obj_6{ + left: 58%; + bottom: -15%; + width: 28%; + transform: translate(-50%,-50%); +} +.feel_6{ + left: 73.7%; + bottom: 20%; + width: 15%; + transform: translate(-50%,-50%); +} + +/* 7 */ +.being_7{ + left: 48%; + bottom: 5%; + width: 25%; + transform: translate(-50%,-50%) rotate(-6deg); +} +.obj_7{ + left: 45%; + bottom: -15%; + width: 25%; + transform: translate(-50%,-50%) rotateY(180deg) rotateZ(6deg); +} +.feel_7{ + left: 73.7%; + bottom: -8%; + width: 45%; + transform: translate(-50%,-50%) rotateY(-60deg) rotateZ(-10deg); +} + +/* 8 */ +.being_8{ + left: 50%; + bottom: 40.2%; + width: 20%; + transform: translate(-50%,-50%); +} +.obj_8{ + left: 25%; + bottom: 24%; + width: 12%; + transform: translate(-50%,-50%) rotateY(180deg); +} +.feel_8{ + left: 50%; + bottom: -20%; + width: 25%; + transform: translate(-50%,-50%) rotateX(60deg); +} + +/* 9 */ +.being_9{ + left: 20%; + bottom: 20%; + width: 30%; + transform: translate(-50%,-50%); +} +.obj_9{ + left: 48%; + bottom: 25%; + width: 30%; + transform: translate(-50%,-50%); +} +.feel_9{ + left: 80%; + bottom: 20%; + width: 30%; + transform: translate(-50%,-50%); +} + +/* 10 */ +.being_10{ + left: 85%; + bottom: -8%; + width: 30%; + transform: translate(-50%,-50%) rotateY(180deg) rotateZ(-5deg); +} +.obj_10{ + left: 25%; + bottom: -32%; + width: 45%; + transform: translate(-50%,-50%) rotateX(180deg) rotateZ(90deg); +} +.feel_10{ + left: 75%; + bottom: -28%; + width: 22%; + transform: translate(-50%,-50%) rotateX(60deg) rotateZ(15deg); +} \ No newline at end of file diff --git a/dreammirror/dream_system/text.html b/dreammirror/dream_system/text.html new file mode 100644 index 0000000..c162a6c --- /dev/null +++ b/dreammirror/dream_system/text.html @@ -0,0 +1,191 @@ +

    alright i fucked up (error)

    +
    if you see this throw something at me (error)
    + +
    + +

    Place

    + +
    +

    Home

    +

    Home is a representation of oneself. Our homes are where we find our families, our possessions, our memories, and so much more that directly connects back to ourselves

    +
    + +
    +

    School

    +

    Schools are a place that represents one’s past and potential future, as a school in reality is where one goes to grow and develop themselves. In a dream, the setting of a school may denote that you are growing in your knowledge or maturity, though it could also mean that you feel you need to grow and mature further from how you are now

    +
    + +
    +

    Office

    +

    The office is a rather often stereotyped location, as whenever anyone imagines one, they typically connect the location to the sttandard idea of work. Offices are also seen as orderly, intricate webs of people, acting as parts for a larger body. Thus, finding yourself within an office inside a dream usually denotes that you are trying to solve a problem going on in your waking life, and the reason this concept may manifest as an office is likely because of your way of thinking, which in this case would likely need to be analytical or logical

    +
    + +
    +

    Hotel

    +

    A hotel serves as a temporary living space, a place where one stays either as a transition from one location to another or as a residence for a short period. In the dream world, any form of residence is often considered a representation of oneself, and as such, a temporary dwelling may be a sign that you feel uncomfortable in a current living situation or lifestyle. It could also be something as simple as a form of acknowledgement that you’re in a transitory point in your life

    +
    + +
    +

    Hospital

    +

    All places carry different meanings to different people, and hospitals are likely among the most prominent of this archetype. Some may see them as safe havens, and others may have bad memories associated with them. These drastically different viewpoints may very well change the potential meaning of a hospital in a specific person’s dream. If you see them as locations where bad memories were made, you might be viewing something recent as something you want to repress, and it could very likely relate closely to an experience you’ve had at a hospital. On the other hand, if you view hospitals as safe places to heal, you could be acknowledging that you are healing from something, be it physically or mentally, and that you are making some form of progress in doing so

    +
    + +
    +

    Fair

    +

    People go to fairs to escape reality and enjoy the attractions, characters, and lore within them. If you find yourself in a fair or theme park within your dreams, you might be manifesting such a joyous location out of a desire to escape Incidentally, if you dream that you’re within the restricted areas of a theme park, this could point to unexpressed rebellious feelings which you either repress or don’t know you have

    +
    + +
    +

    Hallways

    +

    In and of themselves, hallways are links and transitions between other more focused and purposed spaces. Within the dream world, they often serve a near equal objective as a transitionary tool but instead as a reflection of the dreamer’s state of being. It’s common for those whose dreams prevalently contain hallways to be in a transitional period in their lives. While the magnitude of such events are subjective and situational, some examples of these changes are moving house, breaking habits, and choosing alternate paths in life

    +
    + +
    +

    Grocery Store

    +

    We’ve all been to a grocery store, whether it’s to restock our shelves for a time or to get materials to prepare something specific. Whatever it may be, these places serve as locations to find necessary resources to use in something larger. If you find yourself in a grocery store within your dream, your mind may be manifesting it as a representation of something you’re preparing for, or possibly something you’re looking to find a solution or answer to

    +
    + +
    +

    Theater

    +

    From stage plays to giant silver screen films, the theater is a place of storytelling, expression, and especially togetherness between those experiencing the performances and actions onstage or onscreen. If you spot a theater or find yourself within one in a dream, it likely has some level of connection to your community and its social contract. You could be recognizing your place within your community, as if you find yourself as part of the crowd, you could be viewing yourself as having been integrated into your community

    +
    + +
    +

    Jail

    +

    In reality, a jail or prison is a place where criminals and people guilty of breaking the law go to serve their time for whatever they had done. Additionally, and on a more intrinsic level, jails serve as a means of barring those within from their freedom; a shackle holding them back. Most dreams wherein a jail or similar location is the setting usually revolve around this idea, symbolizing the idea that the dreamer might be being restrained by something in their life and is therefore unable to be completely free

    +
    + +

    Being

    + +
    +

    Person

    +

    If you encounter people you know within your dream, it could have a connection to your relationship with that person or your recognition of their identity. On the other hand, manifesting random people in your dreams is quite common, and usually an effect of your mind creating a familiar copy of reality

    +
    + +
    +

    Cat

    +

    Cats are an embodiment of the love for the feminine principle, and within a dream, they typically stand to represent its values. A cat in one’s dream can denote a sense of calmness and creativity, symbolizing patient feelings and a softspoken nature. Their association with hunting may also symbolize a desire for discovery or freedom

    +
    + +
    +

    Dog

    +

    As man’s best friend, dogs represent loyalty, affection, and happiness within a dream. They also embody a strong love of the masculine principle, and therefore, the symbol of the dog has a strong tie to your overall sense of love. Thus, the actions the dog is performing may denote how you feel or express your love and affection towards others

    +
    + +
    +

    Bird

    +

    When anyone thinks of a bird, they immediately gravitate towards the concept of flight. In the dream world, this could directly connect to the ideas of freedom and discovery through such a concept, however birds can sometimes exist as messengers. More specifically, in this scenario, they typically symbolize a piece of information you haven’t fully processed or may not completely understand yet

    +
    + +
    +

    Lion

    +

    Lions are ferocious animals, seen by most as the absolute apex of the apex predators. Encountering such a beast within your dream usually symbolizes a kind of power or strength, particularly related to one’s confidence or empowerment. A lion could also represent an epiphany or greater understanding of a subject that is within your reach

    +
    + +
    +

    Deer

    +

    A deer is an animal commonly seen as evasive or reticent, making them somewhat of enigmatic characters both in the waking and dreaming worlds. Spotting this being within a dream could mean that you hold yourself steady as a guardian towards yourself or others, and as such, it may be a symbol of your own path of self-understanding

    +
    + +
    +

    Turtle

    +

    The concept of patience is often related to turtles and similar testudines, as they are known for their slow yet steady speed. If you happen to spy a turtle within your dream, it may be a more literal symbol of your own patience and the perseverance that accompanies it

    +
    + +
    +

    Insect

    +

    Many people have a fear of insects, whether it be spiders, flies, bees, or others. They are so different from us in size, shape, sound, environment, and overall build and function, and thus, we often have some kind of aversion towards them. If you find any within your dreams, it likely has a close connection to a fear of some kind, possibly even something irrational or uncertain to even your waking mind

    +
    + +
    +

    Mouse

    +

    Mice are a fearful sight for some; however, the core idea of a mouse doesn’t necessarily reside in fear, at least for most. A mouse can symbolize something that’s hidden, something that is omnipresent but isn’t out in the open. Dreams tend to hold symbols that are reflections of the self or interpretations of the world, so this “something” may be a subliminal idea or observation that connects to a larger picture

    +
    + +
    +

    Ghost

    +

    Through the scope of commonly shared beliefs of the modern day, ghosts are or would be some kind of manifestation within the real world of a being that has died. When diving deeper into the concept itself however, a ghost is inherently an embodiment of what once was; an homage to something whose status has changed from what they once were. Seeing a ghost or ghostly figure might link to something former, be it an idea, memory, or even another being

    +
    + + +

    Object

    + +
    +

    Flower

    +

    Across many cultures, flowers stand as a symbol of love or respect, and the same is true for dreams. If a flower is significant or memorable within a dream, its likely that it connects to some form of love or affection the person has towards something or someone. Additionally, its prevalence may be speaking as commentary to someone or something you love, or it could be a response to your overall view on love itself

    +
    + +
    +

    Book

    +

    Books are the embodiment of knowledge, and thus, they live as a symbol for information and definition. The prevalence of books within one’s dream potentially connects to the idea that bits of information that could possibly answer a question your conscious mind has been pondering already exist within your knowledge

    +
    + +
    +

    Clock

    +

    Being messengers of time, clocks are the indicator for movement, progression, growth, age, decay, and countless other processes. If you focus on your time in real life and find yourself dreaming about clocks, it’s likely your habits of always watching the time are simply firing off like muscle memory within your dreams. If time isn’t a big focus in your everyday life, it could be the embodiment of an anxiety or fear that you either don’t fully think about in your waking hours or something that you aim a lot of your focus towards which consumes your time or has strict deadlines

    +
    + +
    +

    Lamp

    +

    In general, lights and lamps are symbols of problem-solving, ideas, innovation, and of course, clarity. The goal of any light is to make clear and visible a place or an object that cannot be seen in normal conditions, and within a dream, this could be a sign of mental discovery or even epiphany towards an idea, just like a light at the end of a tunnel

    +
    + +
    +

    Chair

    +

    Chairs are things a lot of us find ourselves sitting down in when we want to work, relax, or do anything in between. Regarding only the presence of a chair in a dream, it can represent a commitment or pledge, and depending on the environment the chair is in, this implied vow could mean many possible things. If you actually sat in the chair, this could mean that you’ve taken the pledge it represents, and you’ve planted yourself there to initiate the commitment

    +
    + +
    +

    Phone

    +

    Truth be told, the concept of a phone has been tugged in countless directions within roughly the past decade, given the rise of the smartphone. The phone itself can be a symbol of connection between one, more, or all people, whereas something like a smartphone may be more often perceived as somewhat of the direct opposite given today’s phone and social media culture and its impact onto social links outside of the internet. Should one be a memorable piece of a dream, it could symbolize either of the aforementioned or even something else. All potential meanings for anything in any individual’s dreams should be reflected upon to better determine their clearest connotations, and this rule applies to this item far more

    +
    + +
    +

    Food

    +

    Food is a core principle of life; in order to live, we must eat. As a symbol of sustainment of oneself, food often shares this meaning within a dream to a degree. Despite this, if it is a significant symbol within your dream, it might be a reflection upon what you eat rather than generally why you eat. Some tend to see food as something they must control or mediate, and this could very well play into it as a dream symbol

    +
    + +
    +

    Drink

    +

    Drinking is a core principle of life, as few creatures can survive for long without them. Although drinks can represent this form of sustenance, most often connect drinks to that of alcoholic beverages rather than the concept itself. Alcohol is an addictive substance, and while most understand this, it is often related to the ideas of fun and celebration. If this form of drinking appears within one’s dream, it could be linking to the idea of equilibrium in ones life or mediation between two or more things

    +
    + +
    +

    Car

    +

    Today, most general travel is done by car. In a way, the car is the medium by which most all people traverse their lives from day to day. Given this association with the journey of life, a car may well symbolize one’s life path in some way, and it could possibly stand as the symbol of the person themselves in a certain point along this journey

    +
    + +
    +

    Mirror

    +

    A mirror is an item that reflects everything around it, revealing everything it sees within its image. They are the epitome of representation and impression, as they merely project existences that they view in the real world. A mirror may act as a call for reflection and contemplation, as within a dream, looking through a mirror will show what it sees, and its true and individual symbolism may only be clear once you’ve deciphered what it has showed you

    +
    + + +

    Emotion

    + +
    +

    Happiness

    +

    Within a dream, joy and happiness are powerful feelings that only show their true forms when one experiences something truly remarkable, mesmerizing, or meaningful to them. Feeling happy in a dream, or awakening to a feeling of happiness, most likely means that your dream experience was reminiscing something joyful that happened in the past, or possibly creating a scenario that derives from such an experience

    +
    + +
    +

    Sadness

    +

    Sadness is an emotion many relate to negative events, and while there is a true connection between sadness and negativity, this emotion can also erupt from a sense of closure or departure from something sentimentally or chronically habitual. Feeling sad within your dreams may mean that your unconscious mind is simulating or encoding the occurrence of a worry into your dream experience, or it could also mean that your mind has started to cope with something and has begun the process of closure

    +
    + +
    +

    Anger

    +

    As a very powerful and dangerous emotion, anger represents negativity, frustration, and impatience towards something. Feeling this emotion in your dreams could mean that your mind undertones your dreams with something that’s bothering or frustrating you in real life. This emotion often carries over from days where you might have had a bad experience or an emotional shock

    +
    + +
    +

    Fear

    +

    The feeling of being afraid is one of the most deeply rooted emotions in nearly all creatures, especially humans. Expressing fear in a dream often stems from an actual fear or phobia one has, and can often manifest itself as a creature or person that chases you within your dream. This emotion usually conveys the idea that you are putting something off or avoiding something that you either generally fear or something that needs more immediate attention

    +
    + +
    +

    Anxiety

    +

    Anxiety is the ultimate embodiment of stress and chaos, standing to represent an imbalance of one’s emotional or mental state through a cavalcade of other emotions and actions. Responding to anything within a dream with feelings of anxiety can represent a loss of control over something, either within yourself or something in real life

    +
    +
    + diff --git a/dreammirror/font/CFLifeIsADream-Regular.ttf b/dreammirror/font/CFLifeIsADream-Regular.ttf new file mode 100644 index 0000000..2c6b24d Binary files /dev/null and b/dreammirror/font/CFLifeIsADream-Regular.ttf differ diff --git a/dreammirror/font/Dreamwalker.ttf b/dreammirror/font/Dreamwalker.ttf new file mode 100644 index 0000000..ce55bad Binary files /dev/null and b/dreammirror/font/Dreamwalker.ttf differ diff --git a/dreammirror/font/Duper_Bold.otf b/dreammirror/font/Duper_Bold.otf new file mode 100644 index 0000000..c9646c7 Binary files /dev/null and b/dreammirror/font/Duper_Bold.otf differ diff --git a/dreammirror/font/Duper_BoldItalic.otf b/dreammirror/font/Duper_BoldItalic.otf new file mode 100644 index 0000000..1e734d4 Binary files /dev/null and b/dreammirror/font/Duper_BoldItalic.otf differ diff --git a/dreammirror/font/Duper_Italic.otf b/dreammirror/font/Duper_Italic.otf new file mode 100644 index 0000000..6d86c6f Binary files /dev/null and b/dreammirror/font/Duper_Italic.otf differ diff --git a/dreammirror/font/Duper_Reg.otf b/dreammirror/font/Duper_Reg.otf new file mode 100644 index 0000000..661d378 Binary files /dev/null and b/dreammirror/font/Duper_Reg.otf differ diff --git a/dreammirror/font/FGURWBook.otf b/dreammirror/font/FGURWBook.otf new file mode 100644 index 0000000..dfbc43f Binary files /dev/null and b/dreammirror/font/FGURWBook.otf differ diff --git a/dreammirror/font/FGURWMed.otf b/dreammirror/font/FGURWMed.otf new file mode 100644 index 0000000..81b03fe Binary files /dev/null and b/dreammirror/font/FGURWMed.otf differ diff --git a/dreammirror/font/NotoSansIta.otf b/dreammirror/font/NotoSansIta.otf new file mode 100644 index 0000000..f643817 Binary files /dev/null and b/dreammirror/font/NotoSansIta.otf differ diff --git a/dreammirror/font/NotoSansLight.otf b/dreammirror/font/NotoSansLight.otf new file mode 100644 index 0000000..f0b3927 Binary files /dev/null and b/dreammirror/font/NotoSansLight.otf differ diff --git a/dreammirror/font/NotoSansLightIta.otf b/dreammirror/font/NotoSansLightIta.otf new file mode 100644 index 0000000..bf61387 Binary files /dev/null and b/dreammirror/font/NotoSansLightIta.otf differ diff --git a/dreammirror/font/NotoSansReg.otf b/dreammirror/font/NotoSansReg.otf new file mode 100644 index 0000000..c87174b Binary files /dev/null and b/dreammirror/font/NotoSansReg.otf differ diff --git a/dreammirror/font/ProvidenceSansPro-Bold.otf b/dreammirror/font/ProvidenceSansPro-Bold.otf new file mode 100644 index 0000000..2405f00 Binary files /dev/null and b/dreammirror/font/ProvidenceSansPro-Bold.otf differ diff --git a/dreammirror/font/buco nero.ttf b/dreammirror/font/buco nero.ttf new file mode 100644 index 0000000..fa29aeb Binary files /dev/null and b/dreammirror/font/buco nero.ttf differ diff --git a/dreammirror/img/._error.gif b/dreammirror/img/._error.gif new file mode 100644 index 0000000..d38da1a Binary files /dev/null and b/dreammirror/img/._error.gif differ diff --git a/dreammirror/img/being/being_01.gif b/dreammirror/img/being/being_01.gif new file mode 100644 index 0000000..b0d2711 Binary files /dev/null and b/dreammirror/img/being/being_01.gif differ diff --git a/dreammirror/img/being/being_02.gif b/dreammirror/img/being/being_02.gif new file mode 100644 index 0000000..7d6946f Binary files /dev/null and b/dreammirror/img/being/being_02.gif differ diff --git a/dreammirror/img/being/being_03.gif b/dreammirror/img/being/being_03.gif new file mode 100644 index 0000000..de63747 Binary files /dev/null and b/dreammirror/img/being/being_03.gif differ diff --git a/dreammirror/img/being/being_04.gif b/dreammirror/img/being/being_04.gif new file mode 100644 index 0000000..8fa72ab Binary files /dev/null and b/dreammirror/img/being/being_04.gif differ diff --git a/dreammirror/img/being/being_05.gif b/dreammirror/img/being/being_05.gif new file mode 100644 index 0000000..ef104b1 Binary files /dev/null and b/dreammirror/img/being/being_05.gif differ diff --git a/dreammirror/img/being/being_06.gif b/dreammirror/img/being/being_06.gif new file mode 100644 index 0000000..d85b510 Binary files /dev/null and b/dreammirror/img/being/being_06.gif differ diff --git a/dreammirror/img/being/being_07.gif b/dreammirror/img/being/being_07.gif new file mode 100644 index 0000000..a9f41ec Binary files /dev/null and b/dreammirror/img/being/being_07.gif differ diff --git a/dreammirror/img/being/being_08.gif b/dreammirror/img/being/being_08.gif new file mode 100644 index 0000000..831ccf9 Binary files /dev/null and b/dreammirror/img/being/being_08.gif differ diff --git a/dreammirror/img/being/being_09.gif b/dreammirror/img/being/being_09.gif new file mode 100644 index 0000000..9b4de3f Binary files /dev/null and b/dreammirror/img/being/being_09.gif differ diff --git a/dreammirror/img/being/being_10.gif b/dreammirror/img/being/being_10.gif new file mode 100644 index 0000000..179e14c Binary files /dev/null and b/dreammirror/img/being/being_10.gif differ diff --git a/dreammirror/img/core/arrow.gif b/dreammirror/img/core/arrow.gif new file mode 100644 index 0000000..3e39347 Binary files /dev/null and b/dreammirror/img/core/arrow.gif differ diff --git a/dreammirror/img/core/bg.png b/dreammirror/img/core/bg.png new file mode 100644 index 0000000..6e3a53b Binary files /dev/null and b/dreammirror/img/core/bg.png differ diff --git a/dreammirror/img/core/error.gif b/dreammirror/img/core/error.gif new file mode 100644 index 0000000..bc6dce4 Binary files /dev/null and b/dreammirror/img/core/error.gif differ diff --git a/dreammirror/img/core/hr.gif b/dreammirror/img/core/hr.gif new file mode 100644 index 0000000..b0f4952 Binary files /dev/null and b/dreammirror/img/core/hr.gif differ diff --git a/dreammirror/img/core/mainflour.gif b/dreammirror/img/core/mainflour.gif new file mode 100644 index 0000000..76ab6c8 Binary files /dev/null and b/dreammirror/img/core/mainflour.gif differ diff --git a/dreammirror/img/core/sitebg.gif b/dreammirror/img/core/sitebg.gif new file mode 100644 index 0000000..bb263e2 Binary files /dev/null and b/dreammirror/img/core/sitebg.gif differ diff --git a/img/websitevid_02.webp b/dreammirror/img/core/title.gif similarity index 58% rename from img/websitevid_02.webp rename to dreammirror/img/core/title.gif index b9d25bd..1426ea8 100644 Binary files a/img/websitevid_02.webp and b/dreammirror/img/core/title.gif differ diff --git a/img/websitevid_01.webp b/dreammirror/img/core/title2.gif similarity index 54% rename from img/websitevid_01.webp rename to dreammirror/img/core/title2.gif index 6dc6d82..76a27a0 100644 Binary files a/img/websitevid_01.webp and b/dreammirror/img/core/title2.gif differ diff --git a/dreammirror/img/core/titlebg.gif b/dreammirror/img/core/titlebg.gif new file mode 100644 index 0000000..a05e020 Binary files /dev/null and b/dreammirror/img/core/titlebg.gif differ diff --git a/dreammirror/img/error.gif b/dreammirror/img/error.gif new file mode 100644 index 0000000..28ebc29 Binary files /dev/null and b/dreammirror/img/error.gif differ diff --git a/dreammirror/img/feel/feel_01.gif b/dreammirror/img/feel/feel_01.gif new file mode 100644 index 0000000..a2f894c Binary files /dev/null and b/dreammirror/img/feel/feel_01.gif differ diff --git a/dreammirror/img/feel/feel_02.gif b/dreammirror/img/feel/feel_02.gif new file mode 100644 index 0000000..cb02cc5 Binary files /dev/null and b/dreammirror/img/feel/feel_02.gif differ diff --git a/dreammirror/img/feel/feel_03.gif b/dreammirror/img/feel/feel_03.gif new file mode 100644 index 0000000..29bf54f Binary files /dev/null and b/dreammirror/img/feel/feel_03.gif differ diff --git a/dreammirror/img/feel/feel_04.gif b/dreammirror/img/feel/feel_04.gif new file mode 100644 index 0000000..00c189f Binary files /dev/null and b/dreammirror/img/feel/feel_04.gif differ diff --git a/dreammirror/img/feel/feel_05.gif b/dreammirror/img/feel/feel_05.gif new file mode 100644 index 0000000..68bb8ae Binary files /dev/null and b/dreammirror/img/feel/feel_05.gif differ diff --git a/dreammirror/img/flourish/f_01.gif b/dreammirror/img/flourish/f_01.gif new file mode 100644 index 0000000..b68a2aa Binary files /dev/null and b/dreammirror/img/flourish/f_01.gif differ diff --git a/dreammirror/img/flourish/f_02.gif b/dreammirror/img/flourish/f_02.gif new file mode 100644 index 0000000..00631a2 Binary files /dev/null and b/dreammirror/img/flourish/f_02.gif differ diff --git a/dreammirror/img/flourish/f_03.gif b/dreammirror/img/flourish/f_03.gif new file mode 100644 index 0000000..70ef596 Binary files /dev/null and b/dreammirror/img/flourish/f_03.gif differ diff --git a/dreammirror/img/flourish/f_04.gif b/dreammirror/img/flourish/f_04.gif new file mode 100644 index 0000000..c64062a Binary files /dev/null and b/dreammirror/img/flourish/f_04.gif differ diff --git a/dreammirror/img/flourish/f_05.gif b/dreammirror/img/flourish/f_05.gif new file mode 100644 index 0000000..fa0d282 Binary files /dev/null and b/dreammirror/img/flourish/f_05.gif differ diff --git a/dreammirror/img/flourish/f_06.gif b/dreammirror/img/flourish/f_06.gif new file mode 100644 index 0000000..0fd62cf Binary files /dev/null and b/dreammirror/img/flourish/f_06.gif differ diff --git a/dreammirror/img/flourish/f_07.gif b/dreammirror/img/flourish/f_07.gif new file mode 100644 index 0000000..5c99af0 Binary files /dev/null and b/dreammirror/img/flourish/f_07.gif differ diff --git a/dreammirror/img/flourish/f_08.gif b/dreammirror/img/flourish/f_08.gif new file mode 100644 index 0000000..df9bd0b Binary files /dev/null and b/dreammirror/img/flourish/f_08.gif differ diff --git a/dreammirror/img/flourish/f_09.gif b/dreammirror/img/flourish/f_09.gif new file mode 100644 index 0000000..a037c81 Binary files /dev/null and b/dreammirror/img/flourish/f_09.gif differ diff --git a/dreammirror/img/flourish/f_10.gif b/dreammirror/img/flourish/f_10.gif new file mode 100644 index 0000000..8fe9790 Binary files /dev/null and b/dreammirror/img/flourish/f_10.gif differ diff --git a/dreammirror/img/flourish/f_11.gif b/dreammirror/img/flourish/f_11.gif new file mode 100644 index 0000000..9f98ea1 Binary files /dev/null and b/dreammirror/img/flourish/f_11.gif differ diff --git a/dreammirror/img/flourish/f_12.gif b/dreammirror/img/flourish/f_12.gif new file mode 100644 index 0000000..3ee9326 Binary files /dev/null and b/dreammirror/img/flourish/f_12.gif differ diff --git a/dreammirror/img/flourish/f_13.gif b/dreammirror/img/flourish/f_13.gif new file mode 100644 index 0000000..498e3db Binary files /dev/null and b/dreammirror/img/flourish/f_13.gif differ diff --git a/dreammirror/img/flourish/f_14.gif b/dreammirror/img/flourish/f_14.gif new file mode 100644 index 0000000..ef95cd5 Binary files /dev/null and b/dreammirror/img/flourish/f_14.gif differ diff --git a/dreammirror/img/flourish/f_15.gif b/dreammirror/img/flourish/f_15.gif new file mode 100644 index 0000000..250718b Binary files /dev/null and b/dreammirror/img/flourish/f_15.gif differ diff --git a/dreammirror/img/flourish/f_16.gif b/dreammirror/img/flourish/f_16.gif new file mode 100644 index 0000000..9e77028 Binary files /dev/null and b/dreammirror/img/flourish/f_16.gif differ diff --git a/dreammirror/img/flourish/f_17.gif b/dreammirror/img/flourish/f_17.gif new file mode 100644 index 0000000..7a160f7 Binary files /dev/null and b/dreammirror/img/flourish/f_17.gif differ diff --git a/dreammirror/img/flourish/f_18.gif b/dreammirror/img/flourish/f_18.gif new file mode 100644 index 0000000..f746e7f Binary files /dev/null and b/dreammirror/img/flourish/f_18.gif differ diff --git a/dreammirror/img/flourish/f_19.gif b/dreammirror/img/flourish/f_19.gif new file mode 100644 index 0000000..2580738 Binary files /dev/null and b/dreammirror/img/flourish/f_19.gif differ diff --git a/dreammirror/img/flourish/f_20.gif b/dreammirror/img/flourish/f_20.gif new file mode 100644 index 0000000..2815523 Binary files /dev/null and b/dreammirror/img/flourish/f_20.gif differ diff --git a/dreammirror/img/list/list_01/01.gif b/dreammirror/img/list/list_01/01.gif new file mode 100644 index 0000000..108e25f Binary files /dev/null and b/dreammirror/img/list/list_01/01.gif differ diff --git a/dreammirror/img/list/list_02/01.gif b/dreammirror/img/list/list_02/01.gif new file mode 100644 index 0000000..8fce6a3 Binary files /dev/null and b/dreammirror/img/list/list_02/01.gif differ diff --git a/dreammirror/img/list/list_03/01.gif b/dreammirror/img/list/list_03/01.gif new file mode 100644 index 0000000..15ce4ff Binary files /dev/null and b/dreammirror/img/list/list_03/01.gif differ diff --git a/dreammirror/img/list/list_04/01.gif b/dreammirror/img/list/list_04/01.gif new file mode 100644 index 0000000..c997699 Binary files /dev/null and b/dreammirror/img/list/list_04/01.gif differ diff --git a/dreammirror/img/nav/ABOUT/hover.gif b/dreammirror/img/nav/ABOUT/hover.gif new file mode 100644 index 0000000..21e6110 Binary files /dev/null and b/dreammirror/img/nav/ABOUT/hover.gif differ diff --git a/dreammirror/img/nav/ABOUT/static.png b/dreammirror/img/nav/ABOUT/static.png new file mode 100644 index 0000000..af1e88e Binary files /dev/null and b/dreammirror/img/nav/ABOUT/static.png differ diff --git a/dreammirror/img/nav/DICT/hover.gif b/dreammirror/img/nav/DICT/hover.gif new file mode 100644 index 0000000..13cb608 Binary files /dev/null and b/dreammirror/img/nav/DICT/hover.gif differ diff --git a/dreammirror/img/nav/DICT/static.png b/dreammirror/img/nav/DICT/static.png new file mode 100644 index 0000000..22decaf Binary files /dev/null and b/dreammirror/img/nav/DICT/static.png differ diff --git a/dreammirror/img/nav/DM/hover.gif b/dreammirror/img/nav/DM/hover.gif new file mode 100644 index 0000000..d3417fe Binary files /dev/null and b/dreammirror/img/nav/DM/hover.gif differ diff --git a/dreammirror/img/nav/DM/static.png b/dreammirror/img/nav/DM/static.png new file mode 100644 index 0000000..86ff73f Binary files /dev/null and b/dreammirror/img/nav/DM/static.png differ diff --git a/dreammirror/img/nav/HOME/hover.gif b/dreammirror/img/nav/HOME/hover.gif new file mode 100644 index 0000000..b2b7666 Binary files /dev/null and b/dreammirror/img/nav/HOME/hover.gif differ diff --git a/dreammirror/img/nav/HOME/static.png b/dreammirror/img/nav/HOME/static.png new file mode 100644 index 0000000..e145a6b Binary files /dev/null and b/dreammirror/img/nav/HOME/static.png differ diff --git a/dreammirror/img/obj/obj_01.gif b/dreammirror/img/obj/obj_01.gif new file mode 100644 index 0000000..b1f0174 Binary files /dev/null and b/dreammirror/img/obj/obj_01.gif differ diff --git a/dreammirror/img/obj/obj_02.gif b/dreammirror/img/obj/obj_02.gif new file mode 100644 index 0000000..100f258 Binary files /dev/null and b/dreammirror/img/obj/obj_02.gif differ diff --git a/dreammirror/img/obj/obj_03.gif b/dreammirror/img/obj/obj_03.gif new file mode 100644 index 0000000..91fb0b4 Binary files /dev/null and b/dreammirror/img/obj/obj_03.gif differ diff --git a/dreammirror/img/obj/obj_04.gif b/dreammirror/img/obj/obj_04.gif new file mode 100644 index 0000000..4172de0 Binary files /dev/null and b/dreammirror/img/obj/obj_04.gif differ diff --git a/dreammirror/img/obj/obj_05.gif b/dreammirror/img/obj/obj_05.gif new file mode 100644 index 0000000..aeb5929 Binary files /dev/null and b/dreammirror/img/obj/obj_05.gif differ diff --git a/dreammirror/img/obj/obj_06.gif b/dreammirror/img/obj/obj_06.gif new file mode 100644 index 0000000..1060af4 Binary files /dev/null and b/dreammirror/img/obj/obj_06.gif differ diff --git a/dreammirror/img/obj/obj_07.gif b/dreammirror/img/obj/obj_07.gif new file mode 100644 index 0000000..de8dc8a Binary files /dev/null and b/dreammirror/img/obj/obj_07.gif differ diff --git a/dreammirror/img/obj/obj_08.gif b/dreammirror/img/obj/obj_08.gif new file mode 100644 index 0000000..86424cf Binary files /dev/null and b/dreammirror/img/obj/obj_08.gif differ diff --git a/dreammirror/img/obj/obj_09.gif b/dreammirror/img/obj/obj_09.gif new file mode 100644 index 0000000..ec49074 Binary files /dev/null and b/dreammirror/img/obj/obj_09.gif differ diff --git a/dreammirror/img/obj/obj_10.gif b/dreammirror/img/obj/obj_10.gif new file mode 100644 index 0000000..648db42 Binary files /dev/null and b/dreammirror/img/obj/obj_10.gif differ diff --git a/dreammirror/img/place/error.gif b/dreammirror/img/place/error.gif new file mode 100644 index 0000000..b151080 Binary files /dev/null and b/dreammirror/img/place/error.gif differ diff --git a/dreammirror/img/place/p_0.gif b/dreammirror/img/place/p_0.gif new file mode 100644 index 0000000..0ffd1b5 Binary files /dev/null and b/dreammirror/img/place/p_0.gif differ diff --git a/dreammirror/img/place/p_1.gif b/dreammirror/img/place/p_1.gif new file mode 100644 index 0000000..973e19d Binary files /dev/null and b/dreammirror/img/place/p_1.gif differ diff --git a/dreammirror/img/place/p_10.gif b/dreammirror/img/place/p_10.gif new file mode 100644 index 0000000..7d2faf3 Binary files /dev/null and b/dreammirror/img/place/p_10.gif differ diff --git a/dreammirror/img/place/p_2.gif b/dreammirror/img/place/p_2.gif new file mode 100644 index 0000000..95566e2 Binary files /dev/null and b/dreammirror/img/place/p_2.gif differ diff --git a/dreammirror/img/place/p_3.gif b/dreammirror/img/place/p_3.gif new file mode 100644 index 0000000..7fb3c68 Binary files /dev/null and b/dreammirror/img/place/p_3.gif differ diff --git a/dreammirror/img/place/p_4.gif b/dreammirror/img/place/p_4.gif new file mode 100644 index 0000000..5b5ef2d Binary files /dev/null and b/dreammirror/img/place/p_4.gif differ diff --git a/dreammirror/img/place/p_5.gif b/dreammirror/img/place/p_5.gif new file mode 100644 index 0000000..5e85fef Binary files /dev/null and b/dreammirror/img/place/p_5.gif differ diff --git a/dreammirror/img/place/p_6.gif b/dreammirror/img/place/p_6.gif new file mode 100644 index 0000000..eb8c8d0 Binary files /dev/null and b/dreammirror/img/place/p_6.gif differ diff --git a/dreammirror/img/place/p_7.gif b/dreammirror/img/place/p_7.gif new file mode 100644 index 0000000..26e18ec Binary files /dev/null and b/dreammirror/img/place/p_7.gif differ diff --git a/dreammirror/img/place/p_8.gif b/dreammirror/img/place/p_8.gif new file mode 100644 index 0000000..541b778 Binary files /dev/null and b/dreammirror/img/place/p_8.gif differ diff --git a/dreammirror/img/place/p_9.gif b/dreammirror/img/place/p_9.gif new file mode 100644 index 0000000..a0f34f9 Binary files /dev/null and b/dreammirror/img/place/p_9.gif differ diff --git a/dreammirror/index.html b/dreammirror/index.html new file mode 100644 index 0000000..230b0d5 --- /dev/null +++ b/dreammirror/index.html @@ -0,0 +1,105 @@ + + + + + + +Dream Mirror + + + + + + + + + +
    + +
    +
    + +
    + + + +
    +
    + Dream Mirror + Dream World +
    + +
    + +
    +
    + +
    + Header Background +

    Explore

    +

    the Meaning of

    +

    DREAMS

    +
    + +
    +

    Dream Mirror is an interactive experience that aims to give its users the tools necessary to analyze the pieces that make up their dreams. The knowledge users will learn here is intended to give them a clearer understanding of how elements of a dream are intrinsically perceived and generated by the mind and what meanings they could hold on their own. Using these pieces, users can put together each dream scenario and use their own personal context to help them reach their own conclusions about their dreams and what they could mean. Your Dream Mirror awaits, all you need to do is look into it.

    +
    +
    + + + +
    +
    + Horizontal Rule + +

    Stare into a mirror...

    + + Horizontal Rule +
    + +
    +
    + + + + diff --git a/dreammirror/js/flourish.js b/dreammirror/js/flourish.js new file mode 100644 index 0000000..3ce46a4 --- /dev/null +++ b/dreammirror/js/flourish.js @@ -0,0 +1,82 @@ +// JavaScript Document + +var F_Path = "img/flourish/"; +var numImg = 20; // Adjust as new flourish images are added + +var F_NamesUn = []; + +for (let i = 1; i < (numImg+1); i++) { + let entry = "f_"; + + if(i < 10){ + entry = entry + "0" + i.toString(); + } + else{ + entry = entry + i.toString(); + } + + F_NamesUn.push(entry + ".gif"); +} + +var iteration = 0; + +for (let x = 0; x < flourishAreas.length; x++) { + let F_Names = shuffle(F_NamesUn); + let countY = -numImg; + for (let y = 0; y < F_Names.length; y++) { + if(F_Names.length != 0 && F_Names[y] != undefined){ + let img = document.createElement('img'); + img.src = F_Path + F_Names[y]; + let idName = "IMG_" + iteration.toString(); + img.setAttribute('id',idName); + + let place = [getRandomInt(35,65),countY += (100/numImg)]; + let scale = getRandomInt(25,75); + let rotate = getRandomInt(0,359); + let alpha = Math.random(0.25,1.0); + + document.getElementById(flourishAreas[x]).append(img); + + img.style.position = "absolute"; + img.style.bottom = place[1]+img.clientHeight + "%"; + if(x == 0){ + img.style.left = place[0] - 50 + "%"; + } + else if(x == 1){ + img.style.right = place[0] - 50 + "%"; + } + img.style.transform = "scale(" + scale + "%) rotate(" + rotate + "deg)"; + img.style.opacity = alpha; + img.style.zIndex = "8"; + + iteration++; + } + else{ + break; + } + } +} + +function shuffle(array) { + let currentIndex = array.length, randomIndex; + + // While there remain elements to shuffle... + while (currentIndex != 0) { + + // Pick a remaining element... + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + + // And swap it with the current element. + [array[currentIndex], array[randomIndex]] = [ + array[randomIndex], array[currentIndex]]; + } + + return array; +} + +function getRandomInt(min, max) { + min = Math.ceil(min); + max = Math.floor(max); + return Math.floor(Math.random() * (max - min) + min); +} diff --git a/dreammirror/js/jquery-3.6.0.min.js b/dreammirror/js/jquery-3.6.0.min.js new file mode 100644 index 0000000..c4c6022 --- /dev/null +++ b/dreammirror/js/jquery-3.6.0.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
    "],col:[2,"","
    "],tr:[2,"","
    "],td:[3,"","
    "],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="
    ",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 + + + + + +The Dream Mirror + + + + + + + + + + +
    + +
    +
    + +
    + +
    + +
    +
    + +
    + +
    +
    + Horizontal Rule + +

    The Dream Mirror

    + + Horizontal Rule +
    + +
    +
    + +
    +
    +
    +
    +
    + Dream Mirror +
    + +
    +
      +
    • + place +
      • +
    +
      +
    • + being +
      • +
    +
      +
    • + obj +
      • +
    +
      +
    • + feel +
      • +
    +
    + +
    +
    +
    +
    +
    +
    + + + +
    +
    + Horizontal Rule + +

    Stare into a mirror...

    + + Horizontal Rule +
    + +
    +
    + + + + + diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index 3a1474a..0000000 Binary files a/favicon.ico and /dev/null differ diff --git a/img/editing_bay.jpg b/img/editing_bay.jpg deleted file mode 100644 index 06493c7..0000000 Binary files a/img/editing_bay.jpg and /dev/null differ diff --git a/img/hamburger.png b/img/hamburger.png deleted file mode 100644 index 3c79d9a..0000000 Binary files a/img/hamburger.png and /dev/null differ diff --git a/img/night_light/mobile_nl_dark.png b/img/night_light/mobile_nl_dark.png deleted file mode 100644 index 6763976..0000000 Binary files a/img/night_light/mobile_nl_dark.png and /dev/null differ diff --git a/img/night_light/mobile_nl_light.png b/img/night_light/mobile_nl_light.png deleted file mode 100644 index 9187eed..0000000 Binary files a/img/night_light/mobile_nl_light.png and /dev/null differ diff --git a/img/night_light/nl_dark.png b/img/night_light/nl_dark.png deleted file mode 100644 index 623cd78..0000000 Binary files a/img/night_light/nl_dark.png and /dev/null differ diff --git a/img/night_light/nl_light.png b/img/night_light/nl_light.png deleted file mode 100644 index d91e2da..0000000 Binary files a/img/night_light/nl_light.png and /dev/null differ diff --git a/img/programs/program_aftereffects.png b/img/programs/program_aftereffects.png deleted file mode 100644 index c91f476..0000000 Binary files a/img/programs/program_aftereffects.png and /dev/null differ diff --git a/img/programs/program_audition.png b/img/programs/program_audition.png deleted file mode 100644 index 57ee65b..0000000 Binary files a/img/programs/program_audition.png and /dev/null differ diff --git a/img/programs/program_blender.png b/img/programs/program_blender.png deleted file mode 100644 index bba1c77..0000000 Binary files a/img/programs/program_blender.png and /dev/null differ diff --git a/img/programs/program_illustrator.png b/img/programs/program_illustrator.png deleted file mode 100644 index 5ea9647..0000000 Binary files a/img/programs/program_illustrator.png and /dev/null differ diff --git a/img/programs/program_msoffice.png b/img/programs/program_msoffice.png deleted file mode 100644 index b4a5e92..0000000 Binary files a/img/programs/program_msoffice.png and /dev/null differ diff --git a/img/programs/program_photoshop.png b/img/programs/program_photoshop.png deleted file mode 100644 index 07d726c..0000000 Binary files a/img/programs/program_photoshop.png and /dev/null differ diff --git a/img/programs/program_premiere.png b/img/programs/program_premiere.png deleted file mode 100644 index 9756f87..0000000 Binary files a/img/programs/program_premiere.png and /dev/null differ diff --git a/img/steph_photo.jpg b/img/steph_photo.jpg deleted file mode 100644 index fbb3643..0000000 Binary files a/img/steph_photo.jpg and /dev/null differ diff --git a/index.html b/index.html index 8adcb87..dc76096 100644 --- a/index.html +++ b/index.html @@ -1,549 +1,80 @@ - - + + - - - home - inktrinket - - - - - - - - - + + +The Pit + + + + + + + -
    - -
    -
    - - - - - - - - - - - - - - - - -
    - - -
    - -
    - - Crane arm animation - - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - i design videos. - - - +
    + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star + Falling Star +
    + +
    +
    +
    +
    +
    Plunging into
    +
    +
    +
    +
    +
    the
    +

    Pit

    +
    +
    +
    +
    + +
    + +
    +
    + Portfolio +

    Pit of Portfolios

    +
    +
    + Blender +

    In progress...

    +
    +
    + AI Land +

    In progress...

    +
    +
    +
    +
    + Misc +

    Other cool stuff!

    +
    +
    + Home +

    Back into Freefall

    +
    +
    + About +

    What's The Pit?

    - - - -
    -

    Welcome to my website!

    -

    If you'd like to know more about me or are otherwise interested in my services, you can visit any of the pages up above!

    - -
    - - \ No newline at end of file + diff --git a/inktrinket/about.html b/inktrinket/about.html new file mode 100644 index 0000000..1bd4d20 --- /dev/null +++ b/inktrinket/about.html @@ -0,0 +1,117 @@ + + + + + + Document + + + + + + +
    + +
    + +
    + + inktrinket + + +
    + +
    +
    +

    about me

    +
    +

    hi, my name is steph!

    +

    + i am a video designer who has a great passion for the complexity of detail in media. i have been designing videos for countless years, and i graduated with a media communications bachelor's degree from full sail university. some of my absolute favorite things include art, animation, film, and being absolutely ridiculous.

    + + "inktrinket" is my brand and online alias. you also might know me from random parts of the internet, like chilloutvr.

    + + i have been designing videos for as long as i can remember. it all really started with me just hitting the record button with my friends and making some happy memories with each other. since then, my perspective and interests have expanded to much more than that, but at the same time, those initial interests are the very reason i'm so passionate about this line of work. videos are about telling impactful stories, showcasing true talent, giving new meaning to media - and more. the amount of detail and creativity one can put into any given video project is truly remarkable; i don't think i can put enough emphasis on how important that is to me.

    + + as a video designer, i am always seeking out video editing and designing opportunities. i do commissions on the side to hone my skills and put them to use, so if you would like to commission me, please do not hesitate to do so. i would absolutely love to hear your video ideas. +

    +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/inktrinket/commissions.html b/inktrinket/commissions.html new file mode 100644 index 0000000..6974059 --- /dev/null +++ b/inktrinket/commissions.html @@ -0,0 +1,144 @@ + + + + + + Document + + + + + + +
    + +
    + +
    + + inktrinket + + +
    + +
    +
    +

    i would love to edit for you!

    +

    as a video designer, i love to make videos. i also love to help amazing people (like you)
    + this is why i do video commissions on the side to hone my skills and put them to use!
    + i like to be very organized throughout my design process and plan accordingly, and i like to edit various kinds of videos.

    +
    +
    +
    +

    $50/hr

    +

    hourly wage

    +
    +
    +
    + infographic +
    +
    + + +
    + + + \ No newline at end of file diff --git a/inktrinket/contact.html b/inktrinket/contact.html new file mode 100644 index 0000000..97d8d0f --- /dev/null +++ b/inktrinket/contact.html @@ -0,0 +1,134 @@ + + + + + + Document + + + + + + +
    + +
    + +
    + + inktrinket + + +
    + +
    +
    +

    contact me

    +
    +
    +
    + + Gmail +

    gmail

    +     +
    +
    +

    go to my fucking commissions page you stupid mother fucker

    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/inktrinket/img/16-9_test.jpg b/inktrinket/img/16-9_test.jpg new file mode 100644 index 0000000..378f31d Binary files /dev/null and b/inktrinket/img/16-9_test.jpg differ diff --git a/inktrinket/img/bg_scroll.png b/inktrinket/img/bg_scroll.png new file mode 100644 index 0000000..44fa53d Binary files /dev/null and b/inktrinket/img/bg_scroll.png differ diff --git a/inktrinket/img/infographic/infographic_commissions.png b/inktrinket/img/infographic/infographic_commissions.png new file mode 100644 index 0000000..f44d3f5 Binary files /dev/null and b/inktrinket/img/infographic/infographic_commissions.png differ diff --git a/inktrinket/img/thumbs/TheMOBAttacks_LethalCompany_Part1.jpg b/inktrinket/img/thumbs/TheMOBAttacks_LethalCompany_Part1.jpg new file mode 100644 index 0000000..2e3b26a Binary files /dev/null and b/inktrinket/img/thumbs/TheMOBAttacks_LethalCompany_Part1.jpg differ diff --git a/inktrinket/img/thumbs/inktrinket_-_flowers2023_epilepsy_warning_5XCX8yHuDmc_-_2037x1146_-_0m06s.png b/inktrinket/img/thumbs/inktrinket_-_flowers2023_epilepsy_warning_5XCX8yHuDmc_-_2037x1146_-_0m06s.png new file mode 100644 index 0000000..d031ad5 Binary files /dev/null and b/inktrinket/img/thumbs/inktrinket_-_flowers2023_epilepsy_warning_5XCX8yHuDmc_-_2037x1146_-_0m06s.png differ diff --git a/inktrinket/img/thumbs/maxresdefault2.jpg b/inktrinket/img/thumbs/maxresdefault2.jpg new file mode 100644 index 0000000..1d36fc9 Binary files /dev/null and b/inktrinket/img/thumbs/maxresdefault2.jpg differ diff --git a/inktrinket/img/thumbs/skydeathlive_thumbnail.jpg b/inktrinket/img/thumbs/skydeathlive_thumbnail.jpg new file mode 100644 index 0000000..3859252 Binary files /dev/null and b/inktrinket/img/thumbs/skydeathlive_thumbnail.jpg differ diff --git a/inktrinket/img/thumbs/steph_vindex_thumbnail.png b/inktrinket/img/thumbs/steph_vindex_thumbnail.png new file mode 100644 index 0000000..a757bde Binary files /dev/null and b/inktrinket/img/thumbs/steph_vindex_thumbnail.png differ diff --git a/inktrinket/img/thumbs/thumbnail_day21.png b/inktrinket/img/thumbs/thumbnail_day21.png new file mode 100644 index 0000000..4e65ad5 Binary files /dev/null and b/inktrinket/img/thumbs/thumbnail_day21.png differ diff --git a/inktrinket/index.html b/inktrinket/index.html new file mode 100644 index 0000000..da54ccf --- /dev/null +++ b/inktrinket/index.html @@ -0,0 +1,295 @@ + + + + + + Document + + + + + + +
    + +
    + +
    + + inktrinket + + +
    + +
    + +
    +
    +
    +
    +

    hi.

    +
    + +
    +
      +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/inktrinket/normalize.css b/inktrinket/normalize.css new file mode 100644 index 0000000..48b730f --- /dev/null +++ b/inktrinket/normalize.css @@ -0,0 +1,352 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +*, +body, +html { + margin: 0; + padding: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/inktrinket/old/index copy.html b/inktrinket/old/index copy.html new file mode 100644 index 0000000..5d3df26 --- /dev/null +++ b/inktrinket/old/index copy.html @@ -0,0 +1,440 @@ + + + + + + Document + + + + +
    + +
    + +
    + + inktrinket + + +
    + +
    + +
    +
    +
    +
    +

    hi.

    +
    + +
    +
      +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    • + test +
      • +
    +
    +
    + + +
    + + + \ No newline at end of file diff --git a/inktrinket/reset.css b/inktrinket/reset.css new file mode 100644 index 0000000..8517455 --- /dev/null +++ b/inktrinket/reset.css @@ -0,0 +1,109 @@ +/*** + The new CSS reset - version 1.11.2 (last updated 15.11.2023) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) + */ +*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Fix mobile Safari increase font-size on landscape mode */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu, summary { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-inline-size: 100%; + max-block-size: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* Safari - solving issue when using user-select:none on the text input doesn't working */ +input, textarea { + -webkit-user-select: auto; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* preformatted text - use only for this feature */ +:where(pre) { + all: revert; + box-sizing: border-box; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + color: unset; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. + - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ +:where([contenteditable]:not([contenteditable="false"])) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; + -webkit-user-select: auto; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} + +/* Revert Modal native behavior */ +:where(dialog:modal) { + all: revert; + box-sizing: border-box; +} + +/* Remove details summary webkit styles */ +::-webkit-details-marker { + display: none; +} diff --git a/inktrinket/style.css b/inktrinket/style.css new file mode 100644 index 0000000..bf006d5 --- /dev/null +++ b/inktrinket/style.css @@ -0,0 +1,195 @@ +@charset "utf-8"; + +/* CSS variables */ +:root{ + --color-c: rgba(100, 255, 255, 1); + --color-m: rgba(255, 100, 255, 1); + --color-y: rgba(255, 255, 100, 1); +} + +/* Universal reset */ +*{ + margin: 0; + padding: 0; +} + +/* HTML + body main styles */ +html, body{ + background: linear-gradient(-180deg, + rgba(255,255,255,1) 0%, + rgba(226,235,255,1) 100% + ); + color: #111; + font-family: sans-serif; +} + +/* Horizontal rule */ +hr{ + border-style: solid; + border-width: 5px; + border-image: linear-gradient(90deg, + var(--color-c) 0%, + var(--color-m) 50%, + var(--color-y) 100% + ) 1; + margin: 2em 0; +} + +/* Unordered list */ +ul{ + list-style: none; +} + +/* Main container for full page content */ +#MAIN_CONTAINER{ + padding: 2em 0 0; + position: relative; + overflow-y: hidden; + z-index: 0; + max-width: 100%; + min-height: 100vh; + display: grid; + grid-template-rows: 1fr auto; +} + +/* Scrolling side bars */ +#BG_SCROLL{ + top: 0; + left: 0; + width: 100%; + height: 500vh; + pointer-events: none; + position: absolute; + background-image: url("img/bg_scroll.png"); + background-repeat: repeat-y; + background-size: 100% 100vh; + animation: infinite bg_scroll 50000ms linear; + z-index: 0; +} + +/* Basic link */ +a{text-decoration: none; font-family: sans-serif;} +a:link{color: black;} +a:hover{color: black;} +a:active{color: black;} +a:visited{color: black;} + +/* Header container */ +#MAIN_HEADER{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 150px; +} +/* Inktrinket icon link container */ +a.inktrinket_icon{ + height: 100%; +} +/* Inktrinket icon image */ +a.inktrinket_icon img{ + height: 100%; +} + +/* Main nav container */ +#MAIN_NAV{ + padding: 1.5em 1em; + text-align: center; +} +/* Main navigation list root */ +#MAIN_NAV > ul{ + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; +} +/* Main navigation list element */ +#MAIN_NAV > ul li{ + display: grid; + place-items: center; + margin: 0 auto; + position: relative; +} +/* Main navigation list item link (also affects sublists) */ +#MAIN_NAV > ul li a{ + padding: 0.5em 1.5em; + font-size: 1.5em; + background-color: rgba(255, 255, 17, 0); + border-radius: 5rem; + transition: background-color 300ms ease; +} +/* Hover event for navigation list item link */ +#MAIN_NAV a:hover, #MAIN_NAV a:active{background-color: rgba(255, 255, 17, 0.15);} + +/* Nav sublist */ +ul.nav_sublist{ + position: absolute; + top: 0; + left: -50; + z-index: 1; + opacity: 0; + pointer-events: none; + transition: all 500ms ease; +} +/* Nav sublist element */ +ul.nav_sublist > li{ + margin: 0 !important; +} + +/* Nav link hover event (also affects sublists) */ +#MAIN_NAV a:hover + .nav_sublist, .nav_sublist:hover{ + transform: translateY(50%); + opacity: 1; + pointer-events: auto; +} + +/* Main footer container */ +#MAIN_FOOTER{ + display: grid; + place-items: center; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-gap: 1rem; + text-align: center; + color: #fff; + background-color: #111; + padding: 2em; +} +/* Footer icon wrapper */ +.footer_icon_wrapper{ + grid-column: 2/3; + grid-row: 1/2; + display: flex; + flex-direction: row; + justify-content: space-around; + gap: 2em; +} +/* Footer icon container within wrapper */ +.footer_icon{ + width: 80px; + height: 80px; +} +/* Footer icon image element */ +.footer_icon img{ + filter: invert(1); +} +/* Footer text grid area */ +.footer_text{ + grid-column: 2/3; + grid-row: 2/3; +} + +#MAIN_GRID{ + margin-top: 5em; + margin-bottom: 10em; +} + +/* Animation for background scrolling */ +@keyframes bg_scroll{ + 0%{ + background-position-y : 0; + } + 100%{ + background-position-y : 100%; + } +} \ No newline at end of file diff --git a/svg/inktrinket_logo_v2.svg b/inktrinket/svg/inktrinket_logo_v2.svg similarity index 100% rename from svg/inktrinket_logo_v2.svg rename to inktrinket/svg/inktrinket_logo_v2.svg diff --git a/inktrinket/svg/socials/socials_Discord.svg b/inktrinket/svg/socials/socials_Discord.svg new file mode 100644 index 0000000..7cfcb33 --- /dev/null +++ b/inktrinket/svg/socials/socials_Discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket/svg/socials/socials_Gmail.svg b/inktrinket/svg/socials/socials_Gmail.svg new file mode 100644 index 0000000..6c868e3 --- /dev/null +++ b/inktrinket/svg/socials/socials_Gmail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket/svg/socials/socials_Linkedin.svg b/inktrinket/svg/socials/socials_Linkedin.svg new file mode 100644 index 0000000..b38911b --- /dev/null +++ b/inktrinket/svg/socials/socials_Linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket/svg/socials/socials_Twitter.svg b/inktrinket/svg/socials/socials_Twitter.svg new file mode 100644 index 0000000..455baf5 --- /dev/null +++ b/inktrinket/svg/socials/socials_Twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket/svg/socials/socials_YouTube.svg b/inktrinket/svg/socials/socials_YouTube.svg new file mode 100644 index 0000000..d9121ed --- /dev/null +++ b/inktrinket/svg/socials/socials_YouTube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/404.html b/inktrinket_v2/404.html new file mode 100644 index 0000000..a63088d --- /dev/null +++ b/inktrinket_v2/404.html @@ -0,0 +1,111 @@ + + + + + + inktrinket + + + + + + + + + + + +
    +
    +
    ?
    + inktrinket go home +
    ?
    +

    404?

    +
    +
    + + + \ No newline at end of file diff --git a/inktrinket_v2/about.html b/inktrinket_v2/about.html new file mode 100644 index 0000000..95e898e --- /dev/null +++ b/inktrinket_v2/about.html @@ -0,0 +1,97 @@ + + + + + + inktrinket + + + + + + + + + +
    +
    + + + + + +
    + +
    + +
    +
    +
    + Steph Gerard +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto.

    +
    +

    about stuff

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto.

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti? Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti?

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti? Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti?

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti? Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti?

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti? Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ea saepe architecto, nobis temporibus neque tenetur molestias quaerat eveniet pariatur! Eum amet odio a mollitia, eveniet accusantium porro iste deleniti?

    +
    +
    + + + \ No newline at end of file diff --git a/inktrinket_v2/commissions.html b/inktrinket_v2/commissions.html new file mode 100644 index 0000000..9c85bc4 --- /dev/null +++ b/inktrinket_v2/commissions.html @@ -0,0 +1,623 @@ + + + + + + inktrinket + + + + + + + + + +
    +
    + + + + + +
    + +
    + +
    +
    + + + + + + + + + + + + + + + + + + Commissioning + + + +
    + + + +
    +

    videos i like to edit

    +
      +
    • gameplay videos
      • +
    • live stream videos
      • +
    • meme videos
      • +
    • highlight videos
      • +
    • podcast videos
      • +
    • music/lyric videos
      • +
    • instructional/tutorial videos
      • +
    • informative/educational videos
      • +
    • short form/social media videos
      • +
    +
    +
    + +
    + + + + + + +
    +

    videos i will not edit

    +
      +
    • graphic/nsfl content
      • +
    • hateful/discriminatory content
      • +
    • drama/exposé content
      • +
    • political content
      • +
    • pornographic content
      • +
    • your homework!!!
      • +
    +
    +
    + + + +
    +
    +
    $45
    +
    per hour
    +
    +

    via

    + + + + + + +
    +
    +
    + +
    + +
    +
    + + + + feel free to ask any + questions about what + you see here btw!!! + + + inktrinket character +
    +
    + +
    + + + +
    + +
    +
    + + + + + + + + + How My + + + Commissions + + + Work! + + + +
    + +
    +

    + a commission begins with you (you) and me (not you) agreeing on an estimate for the project. then, you sign the estimate and provide me with the video assets you want edited! i will keep in touch and send frequent progress updates, aiming for a feedback-driven design process that will keep your interests in focus. once we reach a finished product, i will provide the finished video to you! +

    +
    + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + \ No newline at end of file diff --git a/inktrinket_v2/contact.html b/inktrinket_v2/contact.html new file mode 100644 index 0000000..902c3dc --- /dev/null +++ b/inktrinket_v2/contact.html @@ -0,0 +1,163 @@ + + + + + + inktrinket + + + + + + + + + +
    +
    + + + + + +
    + +
    + +
    +
    + + + let's talk! + + + + + + + + +
    + +
    + + + \ No newline at end of file diff --git a/inktrinket_v2/core.css b/inktrinket_v2/core.css new file mode 100644 index 0000000..023273c --- /dev/null +++ b/inktrinket_v2/core.css @@ -0,0 +1,258 @@ +/* Resets ------------------------ */ + +*{margin: 0; padding: 0;} +*,::before,::after{box-sizing: border-box;} +a{text-decoration: none;} +a:link,a:hover,a:visited,a:invalid{color: var(--clr-darkest);} +nav ul{list-style: none;} +body,html{scrollbar-width: none; color: var(--clr-darkest); background-color: var(--clr-lightest);} +input:focus{outline: none;} +iframe{border: none;} + + + +/* Variables ------------------------ */ + +:root{ + --space-smallest: 1rem; + --space-small: 1.5rem; + --space-large: 2rem; + --space-largest: 2.5rem; + + --nl-position: 80%; + + --clr-lightest: hsl(0, 100%, 100%); + --clr-darkest: hsl(0, 0%, 0%); + --clr-accent1: hsl(180, 100%, 50%); + --clr-accent2: hsl(300, 100%, 50%); + --clr-accent3: hsl(60, 100%, 50%); + + --clr-palette-01: hsla(0, 0%, 7%, 1); + --clr-palette-02: hsla(253, 100%, 80%, 1); + --clr-palette-03: hsla(151, 100%, 72%, 1); + --clr-palette-04: hsla(36, 100%, 72%, 1); + --clr-palette-05: hsla(8, 100%, 65%, 1); +} +html[data-theme="dark"]{ + --clr-lightest: hsl(0, 0%, 0%); + --clr-darkest: hsl(0, 100%, 100%); +} +html[data-theme="dark"] [data-invert-dark="true"]{ + filter: invert(1); +} + +/* 4K */ +@media only screen and (min-width: 2500px){ /* 2500px or bigger */ + :root{ + --space-smallest: 1.35rem; + --space-small: 1.85rem; + --space-large: 2.35rem; + --space-largest: 2.85rem; + } +} + +/* Phone */ +@media only screen and (max-width: 768px){ /* 768px or smaller */ + :root{ + --space-smallest: 0.75rem; + --space-small: 1.25rem; + --space-large: 1.75rem; + --space-largest: 2.25rem; + + --nl-position: 90%; + } +} + + + +/* Body ------------------------ */ + +body{ + position: relative; + background-color: var(--clr-lightest); + color: var(--clr-darkest); + font-family: sans-serif; +} + + + +/* Horizontal rule ------------------------ */ + +hr{ + border-style: solid; + border-width: 5px; + border-image: linear-gradient(90deg, + var(--clr-accent1) 0%, + var(--clr-accent2) 50%, + var(--clr-accent3) 100% + ) 1; + margin: var(--space-large) 0; +} + + + +/* Spacing ------------------------ */ + +.up_margin{ + margin-top: var(--space-small); +} +.low_margin{ + margin-bottom: var(--space-small); +} +.up_margin_large{ + margin-top: var(--space-large); +} +.low_margin_large{ + margin-bottom: var(--space-large); +} + + + +/* Button ------------------------ */ + +.button{ + border: solid 2px var(--clr-darkest); + border-radius: var(--space-smallest); + padding: calc(var(--space-small) / 3); + color: var(--clr-lightest); + background-color: var(--clr-darkest); + font-family: "peridot-pe-variable", sans-serif; + font-variation-settings: "wght" 400, "wdth" 100, "ital" 0; + font-size: var(--txt-h6); +} + + + +/* Site borders ------------------------ */ + +.site_frame{ + position: fixed; + top: 0; + pointer-events: none; + width: 5dvw; + height: 100dvh; + background-repeat: repeat-y; + background-size: 100% 100vh; + animation: site_frame_flow infinite 10000ms linear; + z-index: 0; +} +.frame_left{ + left: 0; + background-image: url("img/flourish/border_L.png"); +} +.frame_right{ + right: 0; + background-image: url("img/flourish/border_R.png"); + background-position-x: right; +} + +@keyframes site_frame_flow{ + to{ + background-position-y: 100dvh; + } +} + + + +/* Header & Nav ------------------------ */ + +.header_flex{ + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: var(--space-large); + padding: var(--space-small) 0; + margin-bottom: var(--space-largest); +} + +.header_icon{ + width: 100px; +} + +.header_nav_grid{ + display: grid; + grid-auto-flow: column; + align-items: center; + gap: var(--space-small); +} +.header_nav_grid li:not(:first-child), .header_portfolio_fold li{ + position: relative; +} +.header_nav_grid li > *, .header_portfolio_fold li > *{ + font-family: "peridot-pe-variable", sans-serif; + font-variation-settings: "wght" 400, "wdth" 100, "ital" 0; + font-size: var(--space-small); +} +.header_portfolio_fold li > *{ + font-size: var(--space-smallest) !important; +} + +.header_portfolio_fold{ + position: absolute; + top: 50%; + left: 0; + pointer-events: none; + opacity: 0; + transition: all 300ms ease; +} +.header_nav_hover_list:hover .header_portfolio_fold{ + top: 100%; + pointer-events: auto; + opacity: 1; +} +.header_nav_hover_list{ + user-select: none; +} +.header_portfolio_fold li{ + padding-block: 0; + position: relative; +} + + + +/* Night Light ------------------------ */ + +#night-light{ + display: none; +} +#night-light + label{ + position: fixed; + top: -24px; + left: var(--nl-position); + transform-box: fill-box; + transform-origin: 50px 24px; + background: url(img/night_light/nl_light.png); + width: 100px; + height: 130px; + cursor: pointer; + animation: night-light-onload 1000ms ease; + animation-fill-mode: forwards; + transform: translateY(-130px) rotateZ(10deg); + transition: top 50ms linear; + z-index: 10; +} +.pulldown{ + top: -12px !important; +} + +@keyframes night-light-onload{ + 0%{ + transform: translateY(-130px) rotateZ(10deg); + } + 25%{ + transform: translateY(0px) rotateZ(-10deg); + } + 55%{ + transform: translateY(0px) rotateZ(6deg); + } + 75%{ + transform: translateY(0px) rotateZ(-4deg); + } + 90%{ + transform: translateY(0px) rotateZ(2deg); + } + 100%{ + transform: translateY(0px) rotateZ(0deg); + } +} \ No newline at end of file diff --git a/inktrinket_v2/font/acumin_variable.otf b/inktrinket_v2/font/acumin_variable.otf new file mode 100644 index 0000000..85feb83 Binary files /dev/null and b/inktrinket_v2/font/acumin_variable.otf differ diff --git a/inktrinket_v2/font/peridot_variable.otf b/inktrinket_v2/font/peridot_variable.otf new file mode 100644 index 0000000..123d279 Binary files /dev/null and b/inktrinket_v2/font/peridot_variable.otf differ diff --git a/fonts.css b/inktrinket_v2/fonts.css similarity index 75% rename from fonts.css rename to inktrinket_v2/fonts.css index 94853a7..0e14dd6 100644 --- a/fonts.css +++ b/inktrinket_v2/fonts.css @@ -1,40 +1,39 @@ @charset "utf-8"; -:root,::before,::after{ - --mod: 0.28rem; - --txt-lh: 2.4rem; - --txt-h1: 2.6rem; +@font-face { + font-family: "acumin-variable"; + src: url("font/acumin_variable.otf"); +} +@font-face { + font-family: "peridot-pe-variable"; + src: url("font/peridot_variable.otf"); +} + +:root{ + --mod: 0.3rem; + --txt-lh: 2rem; + --txt-h1: 2.5rem; --txt-h2: calc(var(--txt-h1) - var(--mod)); --txt-h3: calc(var(--txt-h2) - var(--mod)); --txt-h4: calc(var(--txt-h3) - var(--mod)); --txt-h5: calc(var(--txt-h4) - var(--mod)); --txt-h6: calc(var(--txt-h5) - var(--mod)); --txt-p: var(--txt-h6); - --txt-lh-p: calc(var(--txt-lh) / 1.15); } /* 4K */ @media only screen and (min-width: 2500px){ /* 2500px or bigger */ :root{ - --mod: 0.285rem; - --txt-lh: 2.7rem; + --txt-lh: 2.5rem; --txt-h1: 3rem; } } -/* Tablet */ -@media only screen and (min-width: 1051px) and (max-width: 1366px) and (orientation: landscape){ /* between 1051px and 1366px */ - :root{ - --txt-lh: 2.2rem; - --txt-h1: 2.4rem; - } -} - /* Phone */ -@media only screen and (max-width: 1050px){ /* 1050px or smaller */ +@media only screen and (max-width: 768px){ /* 768px or smaller */ :root{ - --txt-lh: 2.2rem; - --txt-h1: 2.4rem; + --txt-lh: 1rem; + --txt-h1: 1.25rem; } } @@ -77,8 +76,12 @@ h6{ p{ font-variation-settings: "wght" 300, "wdth" 100, "ital" 0; font-size: var(--txt-p); - line-height: var(--txt-lh-p); } p strong{font-variation-settings: "wght" 400, "wdth" 100, "ital" 0;} p em{font-variation-settings: "wght" 300, "wdth" 100, "ital" 300;} -p strong em, p em strong{font-variation-settings: "wght" 400, "wdth" 100, "ital" 300;} \ No newline at end of file +p strong em, p em strong{font-variation-settings: "wght" 400, "wdth" 100, "ital" 300;} + +p.paragraph-big{ + font-variation-settings: "wght" 300, "wdth" 100, "ital" 0; + font-size: calc(var(--txt-p) + calc(var(--txt-p) / 3)); +} \ No newline at end of file diff --git a/inktrinket_v2/fs_portfolio.html b/inktrinket_v2/fs_portfolio.html new file mode 100644 index 0000000..d2e7d42 --- /dev/null +++ b/inktrinket_v2/fs_portfolio.html @@ -0,0 +1,304 @@ + + + + + + inktrinket + + + + + + + + +
    +
    + + +
    +

    Stephen Gerard

    +

    Digital Portfolio

    +
    +
    + + +
    +

    About Me

    +

    + Hi, my name is Steph! I am a video designer who has a great passion for the complexity of detail in media. Some of my absolute favorite things include art, animation, film, and being absolutely ridiculous. "inktrinket" is my brand and online alias.

    + + I have been designing videos for as long as I can remember. It all really started with me just hitting the record button with my friends and making some happy memories with each other. Now that I'm in college, my perspective and interests have expanded to much more than that, but at the same time, those initial interests are the very reason I'm so passionate about this line of work. Videos are about telling impactful stories, showcasing true talent, giving new meaning to media - and more. The amount of detail and creativity one can put into any given video project is truly remarkable; I don't think I can put enough emphasis on how important that is to me.

    + + As a video designer, I am always seeking out video editing and designing opportunities. I do commissions on the side to hone my skills and put them to use, so if you would like to commission me, please do not hesitate to do so. I would absolutely love to hear your video ideas! +

    +
    + + +
    +

    Résumé Experience

    +
    +
    + Tinker & Create +
    +

    Tinker & Create

    +

    Instructor

    +
    +
    +
    + The Rabbit Hole Podcast +
    +

    The Rabbit Hole Podcast

    +

    Video Editor

    +
    +
    +
    +
    + + +
    +
    +

    Past Projects

    + +

    flowers2023

    +
    Visual Demo
    + Flowers 2023 +     + +

    recovery signal

    +
    Music Video
    + Recovery Signal Music Video +     + +

    Skydeath Live

    +
    Visual Presentation
    + Skydeath Live Presentation +     + +

    OpenVR2Key

    +
    Tutorial Video
    + OpenVR2Key Tutorial Video +     + +

    Skydeath Presentation

    +
    Visual Presentation
    + Skydeath Presentation +     + +

    The MOB Attacks: Lethal Company

    +
    Gameplay Video
    + The MOB Attacks: Lethal Company +     +
    +
    + + + + + \ No newline at end of file diff --git a/img/anim/index_crane.webp b/inktrinket_v2/img/anim/index_crane.webp similarity index 100% rename from img/anim/index_crane.webp rename to inktrinket_v2/img/anim/index_crane.webp diff --git a/img/error.png b/inktrinket_v2/img/error.png similarity index 100% rename from img/error.png rename to inktrinket_v2/img/error.png diff --git a/img/flourish/border_L.png b/inktrinket_v2/img/flourish/border_L.png similarity index 100% rename from img/flourish/border_L.png rename to inktrinket_v2/img/flourish/border_L.png diff --git a/img/flourish/border_R.png b/inktrinket_v2/img/flourish/border_R.png similarity index 100% rename from img/flourish/border_R.png rename to inktrinket_v2/img/flourish/border_R.png diff --git a/inktrinket_v2/img/icons/icon_rabbithole.jpg b/inktrinket_v2/img/icons/icon_rabbithole.jpg new file mode 100644 index 0000000..3e69f1b Binary files /dev/null and b/inktrinket_v2/img/icons/icon_rabbithole.jpg differ diff --git a/inktrinket_v2/img/icons/icon_tac.jpg b/inktrinket_v2/img/icons/icon_tac.jpg new file mode 100644 index 0000000..95048b9 Binary files /dev/null and b/inktrinket_v2/img/icons/icon_tac.jpg differ diff --git a/img/icons/thumb_video.png b/inktrinket_v2/img/icons/thumb_video.png similarity index 100% rename from img/icons/thumb_video.png rename to inktrinket_v2/img/icons/thumb_video.png diff --git a/img/infographic_commissions_screen.jpg b/inktrinket_v2/img/infographic_commissions_screen.jpg similarity index 100% rename from img/infographic_commissions_screen.jpg rename to inktrinket_v2/img/infographic_commissions_screen.jpg diff --git a/inktrinket_v2/img/night_light/nl_dark.png b/inktrinket_v2/img/night_light/nl_dark.png new file mode 100644 index 0000000..76b2848 Binary files /dev/null and b/inktrinket_v2/img/night_light/nl_dark.png differ diff --git a/inktrinket_v2/img/night_light/nl_light.png b/inktrinket_v2/img/night_light/nl_light.png new file mode 100644 index 0000000..62ee539 Binary files /dev/null and b/inktrinket_v2/img/night_light/nl_light.png differ diff --git a/inktrinket_v2/img/steph_gerard.GIF b/inktrinket_v2/img/steph_gerard.GIF new file mode 100644 index 0000000..a24d1a6 Binary files /dev/null and b/inktrinket_v2/img/steph_gerard.GIF differ diff --git a/inktrinket_v2/img/thumbs/TheMOBAttacks_LethalCompany_Part1.jpg b/inktrinket_v2/img/thumbs/TheMOBAttacks_LethalCompany_Part1.jpg new file mode 100644 index 0000000..2e3b26a Binary files /dev/null and b/inktrinket_v2/img/thumbs/TheMOBAttacks_LethalCompany_Part1.jpg differ diff --git a/inktrinket_v2/img/thumbs/inktrinket_-_flowers2023_epilepsy_warning_5XCX8yHuDmc_-_2037x1146_-_0m06s.png b/inktrinket_v2/img/thumbs/inktrinket_-_flowers2023_epilepsy_warning_5XCX8yHuDmc_-_2037x1146_-_0m06s.png new file mode 100644 index 0000000..d031ad5 Binary files /dev/null and b/inktrinket_v2/img/thumbs/inktrinket_-_flowers2023_epilepsy_warning_5XCX8yHuDmc_-_2037x1146_-_0m06s.png differ diff --git a/inktrinket_v2/img/thumbs/maxresdefault2.jpg b/inktrinket_v2/img/thumbs/maxresdefault2.jpg new file mode 100644 index 0000000..1d36fc9 Binary files /dev/null and b/inktrinket_v2/img/thumbs/maxresdefault2.jpg differ diff --git a/inktrinket_v2/img/thumbs/skydeathlive_thumbnail.jpg b/inktrinket_v2/img/thumbs/skydeathlive_thumbnail.jpg new file mode 100644 index 0000000..3859252 Binary files /dev/null and b/inktrinket_v2/img/thumbs/skydeathlive_thumbnail.jpg differ diff --git a/inktrinket_v2/img/thumbs/steph_vindex_thumbnail.png b/inktrinket_v2/img/thumbs/steph_vindex_thumbnail.png new file mode 100644 index 0000000..a757bde Binary files /dev/null and b/inktrinket_v2/img/thumbs/steph_vindex_thumbnail.png differ diff --git a/inktrinket_v2/img/thumbs/thumbnail_day21.png b/inktrinket_v2/img/thumbs/thumbnail_day21.png new file mode 100644 index 0000000..4e65ad5 Binary files /dev/null and b/inktrinket_v2/img/thumbs/thumbnail_day21.png differ diff --git a/inktrinket_v2/index.html b/inktrinket_v2/index.html new file mode 100644 index 0000000..b09266a --- /dev/null +++ b/inktrinket_v2/index.html @@ -0,0 +1,227 @@ + + + + + + inktrinket + + + + + + + + + + +
    +
    + + + + + +
    + +
    + + Crane arm animation + + +
    +
    + + + i design + + + videos. + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    +

    feel free to have a look around and click on as many things as you'd like! the tabs at the top of the page should help you find what you are looking for. you can also click on things repeatedly, like i always do, but it won't do anything. :3

    +
    +
    +
    +
    + + + \ No newline at end of file diff --git a/inktrinket_v2/main.js b/inktrinket_v2/main.js new file mode 100644 index 0000000..267786e --- /dev/null +++ b/inktrinket_v2/main.js @@ -0,0 +1,58 @@ +// Get user theme settings saved by the site (if they exist) +var theme = localStorage.getItem("theme"); +var image_other = new Image(); + +// Set the user's color scheme +function getColorScheme(){ + if(theme !== null){ // If user has visited prior + document.documentElement.setAttribute("data-theme", theme); + return; + } + + // Check user system preference, then set accordingly + if(prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches){ + theme = "dark" + } + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); +} + +getColorScheme() // Run before page draws + +// On page load, check the checkbox if the user prefers dark mode and then add a listener for the checkbox +window.onload = function applyCheck(){ + + var other = "dark"; + switch(theme){ + case "dark": + document.getElementById("night-light").checked = true + other = "light"; + break; + default: + break; + } + + image_other.src = `img/night_light/nl_${other}.png`; + + // Toggle dark mode via the night light + var checkbox = document.getElementById("night-light"); + + var v_checkbox = document.getElementById("night-light-label"); + v_checkbox.style.backgroundImage = `url(img/night_light/nl_${theme}.png)`; + + v_checkbox.addEventListener("mousedown", function() { + this.classList.add("pulldown"); + }); + v_checkbox.addEventListener("mouseup", function() { + this.classList.remove("pulldown"); + if(checkbox.checked){ + theme = "light"; + } + else{ + theme = "dark"; + } + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); + v_checkbox.style.backgroundImage = `url(img/night_light/nl_${theme}.png)`; + }); +} \ No newline at end of file diff --git a/inktrinket_v2/portfolio.html b/inktrinket_v2/portfolio.html new file mode 100644 index 0000000..93abbb8 --- /dev/null +++ b/inktrinket_v2/portfolio.html @@ -0,0 +1,199 @@ + + + + + + inktrinket + + + + + + + + + +
    +
    + + + + + +
    + +
    + +
    +
    +

    portfolio title

    + +
    + +
    +
      + +
    + +
    +
    + + + + \ No newline at end of file diff --git a/inktrinket_v2/portfolio.json b/inktrinket_v2/portfolio.json new file mode 100644 index 0000000..5f826f2 --- /dev/null +++ b/inktrinket_v2/portfolio.json @@ -0,0 +1,46 @@ +[ + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + }, + { + "link": "project1", + "title": "Portfolio Name" + } +] \ No newline at end of file diff --git a/inktrinket_v2/portfolio/main_portfolio.json b/inktrinket_v2/portfolio/main_portfolio.json new file mode 100644 index 0000000..db2f305 --- /dev/null +++ b/inktrinket_v2/portfolio/main_portfolio.json @@ -0,0 +1,262 @@ +{ + "project1": { + "title": "First Project", + "tags": [ + "tag1", + "tag2", + "tag3", + "tag4" + ], + "videos": [ + "f9ZOBYzTpUQ" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project2": { + "title": "Second Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project3": { + "title": "Third Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project4": { + "title": "Fourth Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project5": { + "title": "Fifth Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project6": { + "title": "Sixth Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project7": { + "title": "Seventh Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project8": { + "title": "Eighth Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project9": { + "title": "Ninth Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + }, + "project10": { + "title": "Tenth Project", + "tags": [ + "tag5", + "tag6", + "tag7", + "tag8" + ], + "videos": [ + "pr7Z7ntzoUY" + ], + "images": [ + { + "image": "01.png", + "title": "First image" + }, + { + "image": "02.png", + "title": "Second image" + }, + { + "image": "03.png", + "title": "Third image" + } + ] + } +} \ No newline at end of file diff --git a/inktrinket_v2/portfolio/portfolio.css b/inktrinket_v2/portfolio/portfolio.css new file mode 100644 index 0000000..51477fb --- /dev/null +++ b/inktrinket_v2/portfolio/portfolio.css @@ -0,0 +1 @@ +.disabled{display: none;} \ No newline at end of file diff --git a/portfolio/proj_page.js b/inktrinket_v2/portfolio/proj_page.js similarity index 59% rename from portfolio/proj_page.js rename to inktrinket_v2/portfolio/proj_page.js index b5e59e2..d17c96e 100644 --- a/portfolio/proj_page.js +++ b/inktrinket_v2/portfolio/proj_page.js @@ -6,24 +6,12 @@ const heroVideo = document.getElementById("hero-video"); const heroImage = document.getElementById("hero-image"); const imageReel = document.getElementById("image-reel"); -const programList = document.getElementById("program-list"); - const zoomImage = document.getElementById("image-zoom"); const blackoutBG = document.getElementById("blackout"); var youtubeBase = "https://www.youtube.com/embed/" var reelItems = []; -var programs = { - "premiere": "Adobe Premiere Pro", - "aftereffects": "Adobe After Effects", - "audition": "Adobe Audition", - "photoshop": "Adobe Photoshop", - "illustrator": "Adobe Illustrator", - "blender": "Blender", - "msoffice": "Microsoft Office" -} - // Parse JSON const processJSON = async() => { await fetch("/portfolio/main_portfolio.json") @@ -34,24 +22,15 @@ const processJSON = async() => { return res.json(); }) .then((data) => { - try{ - let getVideos = data[type][project]["videos"]; - getVideos.forEach((video) => { - createReelVideo(video); - }); - } catch {} // No videos - try{ - let getImages = data[type][project]["images"]; - getImages.forEach((image) => { - createReelImage(image["image"], image["title"]); - }); - } catch {} // No images - try{ - let getPrograms = data[type][project]["programs"]; - getPrograms.forEach((prog) => { - createUsedProgram(prog); - }); - } catch {} // No programs + let getVideos = data[project]["videos"]; + let getImages = data[project]["images"]; + + getVideos.forEach((video) => { + createReelVideo(video); + }); + getImages.forEach((image) => { + createReelImage(image["image"], image["title"]); + }); }) .catch((error) => console.error("Unable to fetch data:", error)); @@ -62,7 +41,7 @@ const createReelVideo = async (video) => { var li = document.createElement("li"); li.innerHTML = ` -
    +
    Video
    `; @@ -81,30 +60,13 @@ const createReelImage = async (image, title) => { imageReel.appendChild(li); } -// Create used program icon -const createUsedProgram = async (prog) => { - - if(!prog in programs){ - console.log(`WARNING: No case for ${prog}!`) - return; - } - - var li = document.createElement("li"); - - li.innerHTML = ` - ${programs[prog]} - `; - programList.appendChild(li); -} - const setYoutubeVideo = (item) => { - heroVideo.contentWindow.location.replace(`${youtubeBase}${item.getAttribute("data-video")}`); + heroVideo.src = `${youtubeBase}${item.getAttribute("data-video")}`; heroImage.classList.add("disabled"); heroVideo.classList.remove("disabled"); } const setImage = (item) => { heroVideo.classList.add("disabled"); - heroVideo.contentWindow.location.replace(`about:blank`); heroImage.src = item.children[0].getAttribute("src"); heroImage.classList.remove("disabled"); } @@ -120,7 +82,7 @@ const removeZoom = (item) => { } const setReelActive = (num) => { - if(reelItems[num].hasAttribute("data-video")){ + if(reelItems[num].getAttribute("onclick") === "setYoutubeVideo(this)"){ setYoutubeVideo(reelItems[num]); } else { setImage(reelItems[num]); diff --git a/inktrinket_v2/portfolio/project1/img/01.png b/inktrinket_v2/portfolio/project1/img/01.png new file mode 100644 index 0000000..630e529 Binary files /dev/null and b/inktrinket_v2/portfolio/project1/img/01.png differ diff --git a/inktrinket_v2/portfolio/project1/img/02.png b/inktrinket_v2/portfolio/project1/img/02.png new file mode 100644 index 0000000..d031ad5 Binary files /dev/null and b/inktrinket_v2/portfolio/project1/img/02.png differ diff --git a/inktrinket_v2/portfolio/project1/img/03.png b/inktrinket_v2/portfolio/project1/img/03.png new file mode 100644 index 0000000..3d52bb8 Binary files /dev/null and b/inktrinket_v2/portfolio/project1/img/03.png differ diff --git a/inktrinket_v2/portfolio/project1/index.html b/inktrinket_v2/portfolio/project1/index.html new file mode 100644 index 0000000..5691162 --- /dev/null +++ b/inktrinket_v2/portfolio/project1/index.html @@ -0,0 +1,232 @@ + + + + + + inktrinket + + + + + + + + + +
    + +
    + Full image +
    + + +
    +
    + + + + + +
    + +
    + +
    +
    +
    + + +
    + +
    + +
    +

    project title goes here

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam unde totam eaque cumque quae. Aut error nam quod. Ipsum harum atque repudiandae illo itaque! Esse nihil sint id quos eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam unde totam eaque cumque quae. Aut error nam quod. Ipsum harum atque repudiandae illo itaque! Esse nihil sint id quos eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam unde totam eaque cumque quae. Aut error nam quod. Ipsum harum atque repudiandae illo itaque! Esse nihil sint id quos eius! Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam unde totam eaque cumque quae. Aut error nam quod. Ipsum harum atque repudiandae illo itaque! Esse nihil sint id quos eius!

    +
    +

    programs used

    +
      +
    • Adobe Premiere Pro
      • +
    • Adobe After Effects
      • +
    • Adobe Audition
      • +
    • Adobe Photoshop
      • +
    • Adobe Illustrator
      • +
    • Blender
      • +
    • Microsoft Office
      • +
    +
    +
    +
    + + + + \ No newline at end of file diff --git a/inktrinket_v2/portfolio/project1/thumb.png b/inktrinket_v2/portfolio/project1/thumb.png new file mode 100644 index 0000000..f227a74 Binary files /dev/null and b/inktrinket_v2/portfolio/project1/thumb.png differ diff --git a/portfolio_pagination.js b/inktrinket_v2/portfolio_pagination.js similarity index 84% rename from portfolio_pagination.js rename to inktrinket_v2/portfolio_pagination.js index 68b58ca..ac837a5 100644 --- a/portfolio_pagination.js +++ b/inktrinket_v2/portfolio_pagination.js @@ -6,7 +6,6 @@ const prevButton = document.getElementById("prev-button"); const searchInput = document.getElementById("search-bar"); const searchButton = document.getElementById("search-submit"); -const searchGlass = document.getElementById("svg-search-glass"); const paginatedList = document.getElementById("paginated-list"); const paginationLimit = 8; @@ -19,21 +18,14 @@ var start_data = {}; // --- JSON and layout --- // Create portfolio list item -const createPortfolioItem = (link, title, subtitle) => { +const createPortfolioItem = (link, title) => { var li = document.createElement("li"); - - sub = "" - if(subtitle){ - sub = ` -

    ${subtitle}

    ` - } - li.innerHTML = `
    - ${title} + ${title}
    -

    ${title}

    ${sub} +

    ${title}

     `; paginatedList.appendChild(li); @@ -50,11 +42,10 @@ const processJSON = async() => { }) .then((data) => { - for (let [key, value] of Object.entries(data[type])) { + for (let [key, value] of Object.entries(data)) { start_data[key] = { - "title": data[type][key]["title"], - "tags": data[type][key]["tags"], - "subtitle": data[type][key]["subtitle"] + "title": data[key]["title"], + "tags": data[key]["tags"] } } @@ -164,35 +155,27 @@ const search = () => { let searchTerm = searchInput.value.trim().toLowerCase(); let new_data = {}; + // 2. check: if input exists and if input is larger than 0 if (searchTerm && searchTerm.trim().length > 0){ - searchGlass.classList.add("searching"); - for (let [key, value] of Object.entries(start_data)) { let queries = start_data[key]["tags"].concat([start_data[key]["title"].toLowerCase()]); - try{ - queries = queries.concat([start_data[key]["subtitle"].toLowerCase()]); - } catch {} let subQueries = queries.filter(str => str.includes(searchTerm)); if(subQueries.length > 0){ - searchGlass.classList.add("found"); new_data[key] = { "title": start_data[key]["title"], - "tags": start_data[key]["tags"], - "subtitle": start_data[key]["subtitle"] + "tags": start_data[key]["tags"] } } } } else { - searchGlass.classList.remove("found"); - searchGlass.classList.remove("searching"); new_data = start_data; } for (let [key, value] of Object.entries(new_data)) { - createPortfolioItem(key, new_data[key]["title"], new_data[key]["subtitle"]); + createPortfolioItem(key, new_data[key]["title"], new_data[key]["tags"]); } listItems = paginatedList.querySelectorAll("li"); @@ -213,7 +196,7 @@ window.addEventListener("load", async () => { await processJSON(); for (let [key, value] of Object.entries(start_data)) { - createPortfolioItem(key, start_data[key]["title"], start_data[key]["subtitle"]); + createPortfolioItem(key, start_data[key]["title"], start_data[key]["tags"]); } const paginatedList = document.getElementById("paginated-list"); diff --git a/inktrinket_v2/ref/ref_about.png b/inktrinket_v2/ref/ref_about.png new file mode 100644 index 0000000..5773f5e Binary files /dev/null and b/inktrinket_v2/ref/ref_about.png differ diff --git a/inktrinket_v2/ref/ref_contact.png b/inktrinket_v2/ref/ref_contact.png new file mode 100644 index 0000000..6939802 Binary files /dev/null and b/inktrinket_v2/ref/ref_contact.png differ diff --git a/inktrinket_v2/ref/ref_homepage.png b/inktrinket_v2/ref/ref_homepage.png new file mode 100644 index 0000000..06cc67c Binary files /dev/null and b/inktrinket_v2/ref/ref_homepage.png differ diff --git a/svg.css b/inktrinket_v2/svg.css similarity index 100% rename from svg.css rename to inktrinket_v2/svg.css diff --git a/inktrinket_v2/svg/about/about-01.svg b/inktrinket_v2/svg/about/about-01.svg new file mode 100644 index 0000000..c1db250 --- /dev/null +++ b/inktrinket_v2/svg/about/about-01.svg @@ -0,0 +1,10 @@ + + + + + + + + about... + + \ No newline at end of file diff --git a/inktrinket_v2/svg/about/lippstock-05.svg b/inktrinket_v2/svg/about/lippstock-05.svg new file mode 100644 index 0000000..e69de29 diff --git a/inktrinket_v2/svg/about/pilgrim_monument-01.svg b/inktrinket_v2/svg/about/pilgrim_monument-01.svg new file mode 100644 index 0000000..6ef63ae --- /dev/null +++ b/inktrinket_v2/svg/about/pilgrim_monument-01.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/about/pilgrim_monument-02.svg b/inktrinket_v2/svg/about/pilgrim_monument-02.svg new file mode 100644 index 0000000..ab1a004 --- /dev/null +++ b/inktrinket_v2/svg/about/pilgrim_monument-02.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/about/pilgrim_monument-03.svg b/inktrinket_v2/svg/about/pilgrim_monument-03.svg new file mode 100644 index 0000000..7e2e7f9 --- /dev/null +++ b/inktrinket_v2/svg/about/pilgrim_monument-03.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/about/pilgrim_monument-04.svg b/inktrinket_v2/svg/about/pilgrim_monument-04.svg new file mode 100644 index 0000000..7302468 --- /dev/null +++ b/inktrinket_v2/svg/about/pilgrim_monument-04.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/blots_large.svg b/inktrinket_v2/svg/blots_large.svg new file mode 100644 index 0000000..1416678 --- /dev/null +++ b/inktrinket_v2/svg/blots_large.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/blots_largest.svg b/inktrinket_v2/svg/blots_largest.svg new file mode 100644 index 0000000..d668819 --- /dev/null +++ b/inktrinket_v2/svg/blots_largest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/blots_small.svg b/inktrinket_v2/svg/blots_small.svg new file mode 100644 index 0000000..92e4d8d --- /dev/null +++ b/inktrinket_v2/svg/blots_small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/blots_smallest.svg b/inktrinket_v2/svg/blots_smallest.svg new file mode 100644 index 0000000..ced9657 --- /dev/null +++ b/inktrinket_v2/svg/blots_smallest.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/commissions_headings-17.svg b/inktrinket_v2/svg/commissions/commissions_headings-17.svg new file mode 100644 index 0000000..a1d7e83 --- /dev/null +++ b/inktrinket_v2/svg/commissions/commissions_headings-17.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + nee + d + a + n + + + h + e + y! + + + + + + + + + + + + + diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_banner.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_banner.svg new file mode 100644 index 0000000..7d0b6b0 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_banner.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_dialog.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_dialog.svg new file mode 100644 index 0000000..6c458f8 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_dialog.svg @@ -0,0 +1 @@ +feel free to ask any questions about what you see here btw!!! \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_divider.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_divider.svg new file mode 100644 index 0000000..3ae44a2 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_divider.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_droplet.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_droplet.svg new file mode 100644 index 0000000..b4d56c7 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_droplet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_footer.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_footer.svg new file mode 100644 index 0000000..7d51863 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_footer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_negative.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_negative.svg new file mode 100644 index 0000000..f0be008 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_negative.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_paypal.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_paypal.svg new file mode 100644 index 0000000..6e691a9 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/pricing/pricing_graphic_positive.svg b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_positive.svg new file mode 100644 index 0000000..d260f26 --- /dev/null +++ b/inktrinket_v2/svg/commissions/pricing/pricing_graphic_positive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/process/commissions_steps.svg b/inktrinket_v2/svg/commissions/process/commissions_steps.svg new file mode 100644 index 0000000..1c89411 --- /dev/null +++ b/inktrinket_v2/svg/commissions/process/commissions_steps.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/process/process_graphic_heading.svg b/inktrinket_v2/svg/commissions/process/process_graphic_heading.svg new file mode 100644 index 0000000..eec51e9 --- /dev/null +++ b/inktrinket_v2/svg/commissions/process/process_graphic_heading.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + h + o + w my + + + c + omm + i + s + sio + n + s + + \ No newline at end of file diff --git a/inktrinket_v2/svg/commissions/process/process_graphic_top.svg b/inktrinket_v2/svg/commissions/process/process_graphic_top.svg new file mode 100644 index 0000000..99e085e --- /dev/null +++ b/inktrinket_v2/svg/commissions/process/process_graphic_top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/contact/contact_center.svg b/inktrinket_v2/svg/contact/contact_center.svg new file mode 100644 index 0000000..3706902 --- /dev/null +++ b/inktrinket_v2/svg/contact/contact_center.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/contact/contact_left.svg b/inktrinket_v2/svg/contact/contact_left.svg new file mode 100644 index 0000000..c8dfedf --- /dev/null +++ b/inktrinket_v2/svg/contact/contact_left.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/contact/contact_right.svg b/inktrinket_v2/svg/contact/contact_right.svg new file mode 100644 index 0000000..6f4b0c9 --- /dev/null +++ b/inktrinket_v2/svg/contact/contact_right.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/hamburger-01.svg b/inktrinket_v2/svg/hamburger-01.svg new file mode 100644 index 0000000..2ec26ff --- /dev/null +++ b/inktrinket_v2/svg/hamburger-01.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/hero-banner.svg b/inktrinket_v2/svg/hero-banner.svg new file mode 100644 index 0000000..ae608cb --- /dev/null +++ b/inktrinket_v2/svg/hero-banner.svg @@ -0,0 +1,75 @@ + + + + + + + i design + + + videos. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/homepage/homepage-01.svg b/inktrinket_v2/svg/homepage/homepage-01.svg new file mode 100644 index 0000000..24b8a80 --- /dev/null +++ b/inktrinket_v2/svg/homepage/homepage-01.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/homepage/homepage_border-02.svg b/inktrinket_v2/svg/homepage/homepage_border-02.svg new file mode 100644 index 0000000..f98f93c --- /dev/null +++ b/inktrinket_v2/svg/homepage/homepage_border-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/homepage/homepage_border-03.svg b/inktrinket_v2/svg/homepage/homepage_border-03.svg new file mode 100644 index 0000000..6c30012 --- /dev/null +++ b/inktrinket_v2/svg/homepage/homepage_border-03.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/homepage/homepage_border-04.svg b/inktrinket_v2/svg/homepage/homepage_border-04.svg new file mode 100644 index 0000000..79dd5cf --- /dev/null +++ b/inktrinket_v2/svg/homepage/homepage_border-04.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/inktrinket_logo_v2.svg b/inktrinket_v2/svg/inktrinket_logo_v2.svg new file mode 100644 index 0000000..4e6c7ca --- /dev/null +++ b/inktrinket_v2/svg/inktrinket_logo_v2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/portfolio/portfolio-01.svg b/inktrinket_v2/svg/portfolio/portfolio-01.svg new file mode 100644 index 0000000..151ee72 --- /dev/null +++ b/inktrinket_v2/svg/portfolio/portfolio-01.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/portfolio/portfolio-02.svg b/inktrinket_v2/svg/portfolio/portfolio-02.svg new file mode 100644 index 0000000..2a1a2d8 --- /dev/null +++ b/inktrinket_v2/svg/portfolio/portfolio-02.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + personal + + \ No newline at end of file diff --git a/inktrinket_v2/svg/portfolio/portfolio-05.svg b/inktrinket_v2/svg/portfolio/portfolio-05.svg new file mode 100644 index 0000000..cce8484 --- /dev/null +++ b/inktrinket_v2/svg/portfolio/portfolio-05.svg @@ -0,0 +1 @@ +professionalportfolio \ No newline at end of file diff --git a/inktrinket_v2/svg/portfolio/portfolio-06.svg b/inktrinket_v2/svg/portfolio/portfolio-06.svg new file mode 100644 index 0000000..5f46be3 --- /dev/null +++ b/inktrinket_v2/svg/portfolio/portfolio-06.svg @@ -0,0 +1,10 @@ + + + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/portfolio/portfolio-07.svg b/inktrinket_v2/svg/portfolio/portfolio-07.svg new file mode 100644 index 0000000..f119b44 --- /dev/null +++ b/inktrinket_v2/svg/portfolio/portfolio-07.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/search-01.svg b/inktrinket_v2/svg/search-01.svg new file mode 100644 index 0000000..1042070 --- /dev/null +++ b/inktrinket_v2/svg/search-01.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/svg/socials/socials_Bluesky.svg b/inktrinket_v2/svg/socials/socials_Bluesky.svg similarity index 100% rename from svg/socials/socials_Bluesky.svg rename to inktrinket_v2/svg/socials/socials_Bluesky.svg diff --git a/svg/socials/socials_Discord.svg b/inktrinket_v2/svg/socials/socials_Discord.svg similarity index 100% rename from svg/socials/socials_Discord.svg rename to inktrinket_v2/svg/socials/socials_Discord.svg diff --git a/svg/socials/socials_Gmail.svg b/inktrinket_v2/svg/socials/socials_Gmail.svg similarity index 100% rename from svg/socials/socials_Gmail.svg rename to inktrinket_v2/svg/socials/socials_Gmail.svg diff --git a/svg/socials/socials_Instagram.svg b/inktrinket_v2/svg/socials/socials_Instagram.svg similarity index 100% rename from svg/socials/socials_Instagram.svg rename to inktrinket_v2/svg/socials/socials_Instagram.svg diff --git a/svg/socials/socials_Linkedin.svg b/inktrinket_v2/svg/socials/socials_Linkedin.svg similarity index 100% rename from svg/socials/socials_Linkedin.svg rename to inktrinket_v2/svg/socials/socials_Linkedin.svg diff --git a/svg/socials/socials_Twitter.svg b/inktrinket_v2/svg/socials/socials_Twitter.svg similarity index 100% rename from svg/socials/socials_Twitter.svg rename to inktrinket_v2/svg/socials/socials_Twitter.svg diff --git a/svg/socials/socials_YouTube.svg b/inktrinket_v2/svg/socials/socials_YouTube.svg similarity index 100% rename from svg/socials/socials_YouTube.svg rename to inktrinket_v2/svg/socials/socials_YouTube.svg diff --git a/inktrinket_v2/svg/test01-01.svg b/inktrinket_v2/svg/test01-01.svg new file mode 100644 index 0000000..8e56cf5 --- /dev/null +++ b/inktrinket_v2/svg/test01-01.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + This is a Title + + + This is a Subtitle + + + + + This is a Title + + + This is a Subtitle + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/test01-02.svg b/inktrinket_v2/svg/test01-02.svg new file mode 100644 index 0000000..474aaa3 --- /dev/null +++ b/inktrinket_v2/svg/test01-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/inktrinket_v2/svg/test01-05.svg b/inktrinket_v2/svg/test01-05.svg new file mode 100644 index 0000000..45797a1 --- /dev/null +++ b/inktrinket_v2/svg/test01-05.svg @@ -0,0 +1,17 @@ + + + + + + Article Heading + + + This is a Subheading + + + + + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/test01-06.svg b/inktrinket_v2/svg/test01-06.svg new file mode 100644 index 0000000..2b90962 --- /dev/null +++ b/inktrinket_v2/svg/test01-06.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/inktrinket_v2/svg/venmo-01.svg b/inktrinket_v2/svg/venmo-01.svg new file mode 100644 index 0000000..7dcafe3 --- /dev/null +++ b/inktrinket_v2/svg/venmo-01.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/inktrinket_v2/testing.html b/inktrinket_v2/testing.html new file mode 100644 index 0000000..579f03d --- /dev/null +++ b/inktrinket_v2/testing.html @@ -0,0 +1,160 @@ + + + + + + inktrinket + + + + + + + + +
    +
    + + +
    + inktrinket + +
    + +
    +
    +

    Heading 1

    +

    Heading 2

    +
    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam minus autem odit nihil reiciendis modi voluptatum ipsa vitae dignissimos totam cupiditate hic temporibus harum, amet quidem! Debitis sequi reprehenderit repudiandae?

    +
    + +
    + + + + + + + + + + + + + + welcome to + + + my website + + + + + welcome to + + + my website + + + + +
    + +
    +
    +
    +
    + + + +

    Article Heading

    +

    This is a subheading

    +
    +
    + + \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index 0cf93ef..0000000 --- a/main.js +++ /dev/null @@ -1,139 +0,0 @@ -// THEME ---------- - -// Get user theme settings saved by the site (if they exist) -var theme = localStorage.getItem("theme"); -var has_set_theme = localStorage.getItem("has_set_theme"); - -// Set the user's color scheme -function getColorScheme(){ - if(theme !== null){ // If user has visited prior - document.documentElement.setAttribute("data-theme", theme); - return; - } - - // Check user system preference, then set accordingly - theme = "light"; - if(prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches){ - theme = "dark"; - } - document.documentElement.setAttribute("data-theme", theme); - localStorage.setItem("theme", theme); -} - -getColorScheme() // Run before page draws - -function setNightLightMedia(media) { - if (media.matches) { - document.documentElement.style.setProperty("--night-light-url", `url(/img/night_light/mobile_nl_${theme}.png)`); - } else { - document.documentElement.style.setProperty("--night-light-url", `url(/img/night_light/nl_${theme}.png)`); - } -} - - -// On page load, check the checkbox if the user prefers dark mode and then add a listener for the checkbox -window.onload = function applyCheck(){ - var match_media = window.matchMedia("only screen and (max-width: 1050px)"); - - if(!has_set_theme){ - var fv_label = document.querySelector("#night-light + label"); - fv_label.classList.add("first_visit"); - } - - setNightLightMedia(match_media); - - var other = "dark"; - switch(theme){ - case "dark": - document.getElementById("night-light").checked = true - other = "light"; - break; - default: - break; - } - - // Toggle dark mode via the night light - var checkbox = document.getElementById("night-light"); - - var v_checkbox = document.getElementById("night-light-label"); - - v_checkbox.addEventListener("mousedown", function() { - this.classList.add("pulldown"); - }); - v_checkbox.addEventListener("mouseup", function() { - this.classList.remove("pulldown"); - if(checkbox.checked){ - theme = "light"; - } - else{ - theme = "dark"; - } - document.documentElement.setAttribute("data-theme", theme); - localStorage.setItem("theme", theme); - localStorage.setItem("has_set_theme", true); - - setNightLightMedia(match_media); - - if(has_set_theme){ - return; - } - - fv_label.classList.add("theme_is_set") - - }); - - match_media.addEventListener("change", function() { - setNightLightMedia(match_media); - }); -} - - - -// SVG ---------- - -function applyHeight(element){ - element.setAttribute("width", "100%"); - element.setAttribute("height", `${Math.floor(element.getBoundingClientRect().height)}px`); -} - - - -// Hamburger Menu ---------- - -window.addEventListener("load", () => { - - var hamburger = document.getElementById("hamburger"), - frame_left = document.querySelector(".frame_left"), - header_portfolio = document.querySelector(".header_nav_grid > li:nth-child(4)"), - header_fold = document.querySelector(".header_portfolio_fold"), - nl_mobile = document.getElementById("night-light-label"), - blackout = document.getElementById("mobile-blackout"); - - controlNav(hamburger.checked); - - hamburger.addEventListener("change", function() { - controlNav(hamburger.checked); - }); - - blackout.addEventListener("click", function() { - hamburger.checked = false; - controlNav(hamburger.checked); - }); - - function controlNav(state){ - if(state){ - nl_mobile.classList.add("hamburger_pullout"); - frame_left.classList.add("hamburger_pullout"); - blackout.classList.add("hamburger_pullout"); - header_portfolio.classList.add("hamburger_pullout"); - header_fold.classList.add("hamburger_pullout"); - } else { - nl_mobile.classList.remove("hamburger_pullout"); - frame_left.classList.remove("hamburger_pullout"); - blackout.classList.remove("hamburger_pullout"); - header_portfolio.classList.remove("hamburger_pullout"); - header_fold.classList.remove("hamburger_pullout"); - } - } - -}); \ No newline at end of file diff --git a/portfolio.css b/portfolio.css deleted file mode 100644 index 5e0c77d..0000000 --- a/portfolio.css +++ /dev/null @@ -1,245 +0,0 @@ -#main_wrapper{ - overflow-x: hidden; -} - -/* General grid */ -.grid-main{ - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto auto; - gap: calc(var(--space-largest) * 2); - max-width: 50%; - margin-inline: auto; - margin-bottom: calc(var(--space-largest) * 2); -} - -.grid-main__a{ - display: grid; - gap: var(--space-small); - text-align: center; - margin-inline: auto; -} - -.grid-main__a p{ - line-height: calc(var(--txt-lh) / 1.5); - margin-bottom: var(--space-small); -} - -.grid-main__pagination{ - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(2, auto); - gap: var(--space-small); -} - -.grid-main__pagination ul{ - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(2, 22vh); - gap: var(--space-small); - list-style: none; -} - -#search{ - display: grid; - gap: var(--space-smallest); - grid-auto-flow: column; - align-items: center; - margin-inline: auto; -} -#search-bar{ - max-width: 100% !important; - height: var(--space-large); - color: var(--clr-darkest); - background-color: var(--clr-lightest); - border: solid 3px var(--clr-darkest); - border-radius: var(--space-smallest); - padding: var(--space-smallest); - - font-family: "peridot-pe-variable", sans-serif; - font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0; - font-size: var(--txt-h5); -} -#search-bar:focus{ - border: solid 3px var(--clr-darkest); - border-color: var(--clr-darkest); -} -#search-submit{ - height: 100%; - cursor: pointer; -} - -.v-card{ - display: grid; - text-align: center; - transition: transform 300ms ease; -} -.v-card .v-card__img{ - width: 100%; - aspect-ratio: 16 / 9; - border-radius: var(--space-smallest); - position: relative; - overflow: hidden; - margin-bottom: var(--space-smallest); -} - -.v-card .v-card__img img{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-height: 100%; -} - -.v-card h2{ - font-family: "acumin-variable", sans-serif; - font-variation-settings: "wght" 400, "wdth" 100, "ital" 0; - font-size: calc(var(--txt-h5) / 1.25); - line-height: calc(var(--txt-lh) / 1.5); -} -.v-card h3{ - font-family: "acumin-variable", sans-serif; - font-variation-settings: "wght" 200, "wdth" 100, "ital" 0; - font-size: calc(var(--txt-h6) / 1.25); - line-height: calc(var(--txt-lh) / 1.5); -} - -.v-card:hover{ - transform: scale(1.05); -} - -.grid-main__pagination ul li.hidden{ - display: none; -} - -.pagination-container{ - display: flex; - align-items: center; - bottom: 0; - justify-content: center; -} -.pagination-number, -.pagination-button{ - font-family: "acumin-variable", sans-serif; - font-variation-settings: "wght" 400, "wdth" 100, "ital" 0; - font-size: var(--txt-h5); - color: var(--clr-darkest); - background-color: var(--clr-lightest); - border: none; - cursor: pointer; - height: var(--space-largest); - width: var(--space-largest); -} - -.pagination-number.active{ - color: var(--clr-lightest); - background-color: var(--clr-darkest); -} - -.pagination-number:hover, -.pagination-button:not(.disabled):hover{ - color: var(--clr-lightest); - background: var(--clr-darkest); -} - -#svg-search-glass{ - width: 2rem; - transition: transform 500ms ease; -} -#svg-search-glass path, -#svg-search-glass circle{ - fill: var(--clr-darkest); -} - -#svg-search-glass.searching{ - transform: rotateZ(45deg); -} -#svg-search-glass.searching.found{ - transform: rotateZ(405deg) scale(1.2); -} - -/* Tablet landscape */ -@media only screen and (min-width: 1051px) and (max-width: 1366px) and (orientation: landscape){ /* between 1051px and 1366px */ - - .grid-main{ - max-width: 60%; - } - .grid-main__pagination ul{ - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(4, auto); - gap: var(--space-largest) !important; - } - -} - -@media only screen and (max-width: 1050px){ - .grid-main{ - max-width: 80%; - padding-top: calc(var(--space-largest) * 2); - } - .grid-main__pagination ul{ - grid-template-columns: repeat(1, 1fr); - grid-template-rows: repeat(8, auto); - row-gap: var(--space-largest) !important; - } - .v-card h2{ - font-size: calc(var(--txt-h5) / 1.4); - line-height: calc(var(--txt-lh) / 1.75); - } - .v-card h3{ - font-size: calc(var(--txt-h6) / 1.4); - line-height: calc(var(--txt-lh) / 1.75); - } - .v-card .v-card__img{ - width: 80%; - margin-inline: auto; - } - #search{ - place-items: center; - min-width: 100% !important; - } - #search-bar{ - min-width: 100% !important; - } - #svg-search-glass{ - width: 1.5rem; - } - #search-submit{ - height: 100%; - cursor: pointer; - padding-inline: calc(var(--space-small) / 2); - padding-block: calc(var(--space-small) / 4); - } - .pagination-number, - .pagination-button{ - height: calc(var(--space-largest) * 1.25); - width: calc(var(--space-largest) * 1.25); - } - - @media only screen and (orientation: landscape){ - .grid-main{ - max-width: 60%; - } - .grid-main__pagination ul{ - column-gap: calc(var(--space-smallest) / 2) !important; - } - #search-bar{ - min-width: auto !important; - max-width: auto !important; - width: 100% !important; - } - } -} - -@supports not (aspect-ratio: 16 / 9) { /* Fallback for aspect-ratio */ - .v-card .v-card__img::before { - float: left; - padding-top: 56.25%; - content: ""; - } - .v-card .v-card__img::after { - display: block; - content: ""; - clear: both; - } -} \ No newline at end of file diff --git a/portfolio/day21_presentations/img/01.jpg b/portfolio/day21_presentations/img/01.jpg deleted file mode 100644 index 6def4d6..0000000 Binary files a/portfolio/day21_presentations/img/01.jpg and /dev/null differ diff --git a/portfolio/day21_presentations/img/02.jpg b/portfolio/day21_presentations/img/02.jpg deleted file mode 100644 index 7a2267e..0000000 Binary files a/portfolio/day21_presentations/img/02.jpg and /dev/null differ diff --git a/portfolio/day21_presentations/img/03.jpg b/portfolio/day21_presentations/img/03.jpg deleted file mode 100644 index 79eabed..0000000 Binary files a/portfolio/day21_presentations/img/03.jpg and /dev/null differ diff --git a/portfolio/day21_presentations/index.html b/portfolio/day21_presentations/index.html deleted file mode 100644 index b442314..0000000 --- a/portfolio/day21_presentations/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - DAY21 Visual Presentations - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    DAY21 Visual Presentations

    -

    I created a series of visual presentations for DAY21, an electronica musician associated with the musical & visual art group Millennium Strike. These visual presentations focus on experimental and flashy imagery using various image and video-based assets. They were showcased in various ways, including being live-streamed on Twitch, and being utilized in live performance events.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/day21_presentations/thumb.jpg b/portfolio/day21_presentations/thumb.jpg deleted file mode 100644 index 9733306..0000000 Binary files a/portfolio/day21_presentations/thumb.jpg and /dev/null differ diff --git a/portfolio/fishing/img/01.jpg b/portfolio/fishing/img/01.jpg deleted file mode 100644 index bbc066e..0000000 Binary files a/portfolio/fishing/img/01.jpg and /dev/null differ diff --git a/portfolio/fishing/index.html b/portfolio/fishing/index.html deleted file mode 100644 index 1c7562f..0000000 --- a/portfolio/fishing/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - "fishing" - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    "fishing" Short

    -

    This was my first finished animated short created in Blender, a 3D modeling & animation software. It follows the story of a not-so-optimistic duck who hasn't quite figured out the magic of a successful catch. In the future, I plan to create Blender animations with much more ambitious styles and themes compared to this one. While I may not create an animation like this again, it still has a special place in my heart for being the first.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/fishing/thumb.jpg b/portfolio/fishing/thumb.jpg deleted file mode 100644 index 5bdb40b..0000000 Binary files a/portfolio/fishing/thumb.jpg and /dev/null differ diff --git a/portfolio/flowers2023/img/01.jpg b/portfolio/flowers2023/img/01.jpg deleted file mode 100644 index 74da2a7..0000000 Binary files a/portfolio/flowers2023/img/01.jpg and /dev/null differ diff --git a/portfolio/flowers2023/index.html b/portfolio/flowers2023/index.html deleted file mode 100644 index 919f4c3..0000000 --- a/portfolio/flowers2023/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - "flowers2023" - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    "flowers2023" Visual Demo

    -

    This is just a short visual experiment that I decided to have fun with by using one of DAY21's concept tracks. I thought it was fun, if not very flashy and silly.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/flowers2023/thumb.jpg b/portfolio/flowers2023/thumb.jpg deleted file mode 100644 index 6d73f27..0000000 Binary files a/portfolio/flowers2023/thumb.jpg and /dev/null differ diff --git a/portfolio/lucihaslanded_gameplay/img/01.jpg b/portfolio/lucihaslanded_gameplay/img/01.jpg deleted file mode 100644 index c9cfa7f..0000000 Binary files a/portfolio/lucihaslanded_gameplay/img/01.jpg and /dev/null differ diff --git a/portfolio/lucihaslanded_gameplay/img/02.jpg b/portfolio/lucihaslanded_gameplay/img/02.jpg deleted file mode 100644 index 13776a6..0000000 Binary files a/portfolio/lucihaslanded_gameplay/img/02.jpg and /dev/null differ diff --git a/portfolio/lucihaslanded_gameplay/index.html b/portfolio/lucihaslanded_gameplay/index.html deleted file mode 100644 index dc58383..0000000 --- a/portfolio/lucihaslanded_gameplay/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - LuciHasLanded - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    LuciHasLanded Gameplay Videos

    -

    LuciHasLanded is a variety Twitch streamer that primarily focuses on gameplay content. As per her commission, I edited down some of her hour-long livestreams into condensed gameplay videos, with a humorous style that matches the provided footage.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/lucihaslanded_gameplay/thumb.jpg b/portfolio/lucihaslanded_gameplay/thumb.jpg deleted file mode 100644 index 28b9fe6..0000000 Binary files a/portfolio/lucihaslanded_gameplay/thumb.jpg and /dev/null differ diff --git a/portfolio/main_portfolio.json b/portfolio/main_portfolio.json deleted file mode 100644 index 0e60f86..0000000 --- a/portfolio/main_portfolio.json +++ /dev/null @@ -1,225 +0,0 @@ -{ - "PERSONAL": { - "mob_attacks": { - "title": "The MOB Attacks", - "subtitle": "Gameplay Video Series", - "tags": [ - "gameplay", - "lethal company", - "the mob", - "commentary" - ], - "programs": [ - "premiere", - "photoshop" - ], - "videos": [ - "OM942qQ9aW4" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - }, - "steamvr_tutorial": { - "title": "OpenVR2Key Tutorial", - "subtitle": "Tutorial Video", - "tags": [ - "How to Control Your Keyboard with your VR Controllers", - "tutorial", - "steamvr", - "guide", - "commentary" - ], - "programs": [ - "premiere", - "aftereffects", - "photoshop", - "illustrator" - ], - "videos": [ - "f9ZOBYzTpUQ" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - }, - "fishing": { - "title": "\"fishing\"", - "subtitle": "Animated Short", - "tags": [ - "animation", - "artwork", - "3d" - ], - "programs": [ - "premiere", - "blender" - ], - "videos": [ - "7vNQ_vdN_Q0" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - }, - "flowers2023": { - "title": "\"flowers2023\"", - "subtitle": "Visual Demo", - "tags": [ - "music", - "artwork", - "mixed media" - ], - "programs": [ - "premiere" - ], - "videos": [ - "5XCX8yHuDmc" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - }, - "thxmcbs": { - "title": "\"THXMCBS\"", - "subtitle": "Photo/Video Collage", - "tags": [ - "music", - "artwork", - "photography", - "collage" - ], - "programs": [ - "premiere" - ], - "videos": [ - "kvL3CaaSiKk" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - } - }, - "PROFESSIONAL": { - "mcbs_presentation_anxiety": { - "title": "MCBS Presents: Presentation Anxiety", - "subtitle": "Informational Video", - "tags": [ - "informative", - "(and how we get over it!)" - ], - "programs": [ - "premiere", - "photoshop", - "illustrator" - ], - "videos": [ - "F_3DrlFe7w8" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - }, - "rabbit_hole": { - "title": "The Rabbit Hole", - "subtitle": "Podcast Videos", - "tags": [ - "podcast" - ], - "programs": [ - "premiere", - "audition", - "photoshop" - ], - "videos": [ - "0GMpd0P6Yjc" - ], - "images": [ - { - "image": "01.jpg", - "title": "video thumbnail" - } - ] - }, - "lucihaslanded_gameplay": { - "title": "LuciHasLanded", - "subtitle": "Gameplay Videos", - "tags": [ - "gameplay", - "commentary", - "lethal company", - "five nights at freddy's: help wanted" - ], - "programs": [ - "premiere", - "photoshop" - ], - "videos": [ - "ifSlFva2bSQ", - "crzyC-fwxJE" - ], - "images": [ - { - "image": "01.jpg", - "title": "lethal company video thumbnail" - }, - { - "image": "02.jpg", - "title": "fnaf: help wanted video thumbnail" - } - ] - }, - "day21_presentations": { - "title": "DAY21", - "subtitle": "Visual Presentations", - "tags": [ - "music", - "artwork", - "mixed media", - "live" - ], - "programs": [ - "premiere", - "photoshop", - "blender" - ], - "videos": [ - "pr7Z7ntzoUY", - "wZdugQuDjoY", - "liRyKcRLuxU" - ], - "images": [ - { - "image": "01.jpg", - "title": "skydeath presentation thumbnail" - }, - { - "image": "02.jpg", - "title": "skydeath live thumbnail" - }, - { - "image": "03.jpg", - "title": "recovery signal thumbnail" - } - ] - } - } -} \ No newline at end of file diff --git a/portfolio/mcbs_presentation_anxiety/img/01.jpg b/portfolio/mcbs_presentation_anxiety/img/01.jpg deleted file mode 100644 index 92f2c07..0000000 Binary files a/portfolio/mcbs_presentation_anxiety/img/01.jpg and /dev/null differ diff --git a/portfolio/mcbs_presentation_anxiety/index.html b/portfolio/mcbs_presentation_anxiety/index.html deleted file mode 100644 index cb0b529..0000000 --- a/portfolio/mcbs_presentation_anxiety/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - MCBS Presents: Presentation Anxiety - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    MCBS Presents: Presentation Anxiety

    -

    This video was a student project created by me and my MCBS peers at Full Sail University before I graduated. The goal of this project was to create an informative experience for recently enrolled students on campus who have presentation anxiety. We had a total of nine students working on the different components you can see here in the video, such as writing, camerawork, and project management. I was the lead video editor in this project, in which I pieced the produced assets together to create the final product.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/mcbs_presentation_anxiety/thumb.jpg b/portfolio/mcbs_presentation_anxiety/thumb.jpg deleted file mode 100644 index 6e9e7b3..0000000 Binary files a/portfolio/mcbs_presentation_anxiety/thumb.jpg and /dev/null differ diff --git a/portfolio/mob_attacks/img/01.jpg b/portfolio/mob_attacks/img/01.jpg deleted file mode 100644 index bc9dcb8..0000000 Binary files a/portfolio/mob_attacks/img/01.jpg and /dev/null differ diff --git a/portfolio/mob_attacks/index.html b/portfolio/mob_attacks/index.html deleted file mode 100644 index 5213595..0000000 --- a/portfolio/mob_attacks/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - The MOB Attacks - inktrinket - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    The MOB Attacks

    -

    "The MOB Attacks" is a gameplay series I like editing in my spare time. These videos primarily consist of me and our friend group (whom we like to call "The MOB") playing video games and having a good time. I practice a lot of visual and pacing-related editing with this series, which may take longer process-wise, but makes the result very fun.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/mob_attacks/thumb.jpg b/portfolio/mob_attacks/thumb.jpg deleted file mode 100644 index a773a6f..0000000 Binary files a/portfolio/mob_attacks/thumb.jpg and /dev/null differ diff --git a/portfolio/proj_page.css b/portfolio/proj_page.css deleted file mode 100644 index 9e57d97..0000000 --- a/portfolio/proj_page.css +++ /dev/null @@ -1,204 +0,0 @@ -.disabled{display: none;} - -#main_wrapper{ - min-height: 100vh !important; -} - -/* General grid */ -.grid-main{ - display: grid; - grid-template-columns: repeat(2, 50%); - grid-template-areas: - "video info"; - gap: var(--space-large); - max-width: 65%; - margin: 0 auto; -} - -#grid-main__hero-gallery{ - grid-area: video; - display: grid; - gap: var(--space-smallest); - place-items: start; - align-content: flex-start; - grid-auto-flow: column; - grid-template-columns: 100%; - grid-template-rows: repeat(2, auto); -} - -.hero-gallery__image-container{ - position: relative; - aspect-ratio: 16/9; - width: 100%; -} - -.hero-gallery__image-container *{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-height: 100%; - overflow: hidden; - object-fit: contain; - border-radius: var(--space-smallest); -} - -.hero-gallery__image-reel{ - width: 100%; -} - -#hero-image{ - cursor: pointer; -} - -#image-reel{ - display: flex; - flex-direction: row; - justify-content: flex-start; - gap: var(--space-smallest); - overflow-x: auto; - max-height: 100%; - padding-bottom: var(--space-smallest); -} - -.reel-item{ - cursor: pointer; -} - -.reel-thumb{ - aspect-ratio: 16 / 9; - border-radius: var(--space-smallest); - height: calc(var(--space-largest) * 2); -} - -#blackout{ - position: fixed; - width: 100%; - height: 100%; - background-color: #000; - z-index: 150; - opacity: 0; - transition: opacity 500ms ease; - pointer-events: none; - user-select: none; -} - -#blackout.zoomed{ - opacity: 0.5; - pointer-events: auto; - user-select: auto; -} - -#image-zoom{ - position: fixed; - - top: 50vh; - left: 50vw; - top: 50lvh; - left: 50lvw; - - width: 55%; - height: 55%; - z-index: 150; - transform: translate(-50%, -100%); - opacity: 0; - transition: transform 500ms ease, opacity 500ms ease; - pointer-events: none; - user-select: none; - display: grid; - place-items: center; -} -#image-zoom.zoomed{ - transform: translate(-50%, -50%); - opacity: 1; -} - -#image-zoom img{ - aspect-ratio: 16/9; - width: 100%; -} - -.grid-main__info{ - grid-area: info; - display: grid; - grid-template-areas: - "a" - "b" - "c"; - gap: var(--space-small); - place-items: start; -} - -.grid-main__heading{ - grid-area: a; - line-height: calc(var(--txt-lh) * 1.25); -} -.grid-main__paragraph{ - grid-area: b; - place-self: start; -} -.grid-main__programs{ - grid-area: c; - display: grid; - gap: var(--space-smallest); - width: 100%; -} - -#program-list{ - display: flex; - flex-direction: row; - justify-content: flex-start; - align-content: start; - gap: calc(var(--space-smallest) / 2); - flex-wrap: wrap; - list-style: none; - max-width: 50%; -} -#program-list li img{ - max-width: var(--space-largest); -} - -@media only screen and (max-width: 1050px){ - .grid-main{ - grid-template-columns: 100%; - grid-template-rows: auto; - grid-template-areas: - "video" - "info"; - max-width: 80%; - padding-block: calc(var(--space-largest) * 2); - } - - #image-zoom{ - width: 100%; - height: 100%; - } - - @media only screen and (orientation: landscape){ - .grid-main{ - max-width: 60%; - } - #image-zoom{ - width: 80%; - height: 80%; - } - } -} - - - - -@supports not (aspect-ratio: 16/9) { /* Fallback for aspect-ratio */ - .hero-gallery__image-container::before, - #image-zoom img::before{ - float: left; - padding-top: 56.25%; - content: ""; - } - .hero-gallery__image-container::after, - #image-zoom img::after{ - display: block; - content: ""; - clear: both; - } -} \ No newline at end of file diff --git a/portfolio/rabbit_hole/img/01.jpg b/portfolio/rabbit_hole/img/01.jpg deleted file mode 100644 index a02dd7e..0000000 Binary files a/portfolio/rabbit_hole/img/01.jpg and /dev/null differ diff --git a/portfolio/rabbit_hole/index.html b/portfolio/rabbit_hole/index.html deleted file mode 100644 index ed1f96d..0000000 --- a/portfolio/rabbit_hole/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - The Rabbit Hole - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    The Rabbit Hole Podcast

    -

    These videos were a set of commissions I created for "The Rabbit Hole" Podcast, in which the host of the show (Sheree) interviews various guests, establishing a safe space for unconventional discussion topics. I edited these hour-long recordings to remove unneeded material and create additional edits where necessary.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/rabbit_hole/thumb.jpg b/portfolio/rabbit_hole/thumb.jpg deleted file mode 100644 index 6802c9d..0000000 Binary files a/portfolio/rabbit_hole/thumb.jpg and /dev/null differ diff --git a/portfolio/steamvr_tutorial/img/01.jpg b/portfolio/steamvr_tutorial/img/01.jpg deleted file mode 100644 index bb30e98..0000000 Binary files a/portfolio/steamvr_tutorial/img/01.jpg and /dev/null differ diff --git a/portfolio/steamvr_tutorial/index.html b/portfolio/steamvr_tutorial/index.html deleted file mode 100644 index 9431828..0000000 --- a/portfolio/steamvr_tutorial/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - OpenVR2Key Tutorial - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    OpenVR2Key Tutorial

    -

    This tutorial video teaches viewers how they can use "OpenVR2Key" with their VR controllers to manipulate keyboard controls. I am a big fan of Virtual Reality and I noticed that nobody talked about this surprisingly helpful software, so I felt that I had to make a video about it. feel This video was made possible thanks to everyone who helped provide assets for the video, such as animated graphics and music.

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/steamvr_tutorial/thumb.jpg b/portfolio/steamvr_tutorial/thumb.jpg deleted file mode 100644 index dfa896b..0000000 Binary files a/portfolio/steamvr_tutorial/thumb.jpg and /dev/null differ diff --git a/portfolio/thxmcbs/img/01.jpg b/portfolio/thxmcbs/img/01.jpg deleted file mode 100644 index 6973c5e..0000000 Binary files a/portfolio/thxmcbs/img/01.jpg and /dev/null differ diff --git a/portfolio/thxmcbs/index.html b/portfolio/thxmcbs/index.html deleted file mode 100644 index 8dc107f..0000000 --- a/portfolio/thxmcbs/index.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - "THXMCBS" - inktrinket - - - - - - - - - - - - - - - - - - - -
    -
    - -
    - full image -
    - - -
    -
    - - - - - -
    - - -
    - -
    - -
    -
    -
    - - -
    - -
    - -
    -

    "THXMCBS" Photo & Video Collage

    -

    "THXMCBS" is a photo/video collage I created for my MCBS (Media Communications) peers at Full Sail University before graduation. I used various photos and videos that I collected from past school projects and memories I created with my time spent at Full Sail. It was my last project presentation, so why not make it count, right?

    -
    -

    Programs Used

    -
      - -
    -
    -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio/thxmcbs/thumb.jpg b/portfolio/thxmcbs/thumb.jpg deleted file mode 100644 index 097988d..0000000 Binary files a/portfolio/thxmcbs/thumb.jpg and /dev/null differ diff --git a/portfolio_personal.html b/portfolio_personal.html deleted file mode 100644 index a415917..0000000 --- a/portfolio_personal.html +++ /dev/null @@ -1,219 +0,0 @@ - - - - - - personal portfolio - inktrinket - - - - - - - - - - - - - - - - - - - -
    - -
    -
    - - - - - -
    - - -
    - -
    - - - - - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - - - - - - - - personal - - -

    Here are some things that I have created for my own interests.

    - -
    - -
    -
      - -
    - -
    -
    -
    - - - - \ No newline at end of file diff --git a/portfolio_professional.html b/portfolio_professional.html deleted file mode 100644 index d932b0c..0000000 --- a/portfolio_professional.html +++ /dev/null @@ -1,199 +0,0 @@ - - - - - - professional portfolio - inktrinket - - - - - - - - - - - - - - - - - - - -
    - -
    -
    - - - - - -
    - - -
    - -
    - - - - - - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - professional - - - portfolio - - -

    Here are some things that I have made for work, school, or commissions.

    - -
    - -
    -
      - -
    - -
    -
    -
    - - - - \ No newline at end of file diff --git a/styles_index.css b/styles_index.css new file mode 100644 index 0000000..38fd360 --- /dev/null +++ b/styles_index.css @@ -0,0 +1,552 @@ +@charset "utf-8"; + +*{ + margin: 0; + padding: 0; +} + +/* Marion's Hand */ +@font-face { + font-family: 'Alternate'; + src: url('Fonts/AAAlternate.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'RockwellStd-Condensed'; + src: url('Fonts/RockwellStd-Condensed.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} + +body{ + color: #fff; + background-color: #000; + -webkit-overflow: hidden; /* Safari */ + -moz-overflow: hidden; /* Firefox */ + -ms-overflow: hidden; /* IE10+/Edge */ + overflow: hidden; /* Standard */ +} + +header{ + padding: 5em 5em; +} + +/* Dropdown Container */ +.dropbtn{ + grid-column: 2/3; + grid-row: 1/2; + display: block; + margin: 0 auto; + color: #fff; + border: none; + animation: example-2 8s infinite; + background: rgba(0,0,0,0); +} +.dropbtn p{ + font-family: 'Alternate',serif; + font-size: 7rem; + line-height: 1em; + transition: all .5s; +} + +/* The container
    - needed to position the dropdown content */ +.dropdown{ + display: grid; + grid-template-columns: repeat(3,1fr); + grid-template-rows: repeat(3,auto); + justify-content: center; + width: 100%; + padding: 4em 0; + position: absolute; + bottom: 0; + background: rgb(0,0,0); + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); + transition: all .5s; + animation: appear2 1.5s ease-out; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-item1{ + grid-row: 2/3; +} +.dropdown-item2{ + grid-row: 3/4; +} +.dropdown-content{ + grid-column: 2/3; + display: flex; + flex-direction: row; + justify-content: space-around; + visibility: hidden; + opacity: 0; + transform: translateY(-100px); + transition: all .5s; +} + +/* Links inside the dropdown */ +.dropdown-content a{ + font-family: 'RockwellStd-Condensed',serif; + font-size: 2rem; + letter-spacing: -0.25em; + text-decoration: none; + display: block; + transition: all .15s linear; + animation: example-2b 8s infinite; +} + +.dropdown-content a.home{ + animation: example-2c 8s infinite; +} + +/* Change color of dropdown links on hover */ +a .mask{ + transition: color .1s linear; +} +a .maskNo{ + transition: color .1s linear; +} + +.hide{ + font-family: 'RockwellStd-Condensed',serif; + visibility: hidden; + opacity: 0; + margin: 0 auto; + text-align: center; + line-height: 0; + transform-origin: center; + transition: all .1s linear; + animation: example-2e 8s infinite; + transform: translateY(10px); +} + +.dropdown-content > div{ + animation: example-2d 8s infinite; +} + +/* All Hover */ +a:hover .mask, a:active .mask{ + color: #fff; +} +a:hover .maskNo, a:active .maskNo{ + color: #555; +} +.dropdown-content a:hover + .hide, .dropdown-content a:active + .hide{ + visibility: visible; + transform: translateY(-10px); + opacity: 1; +} + +/* Show the dropdown menu on hover */ +.dropdown:hover, .dropdown:active{ + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); +} +.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content{ + display: flex; + flex-direction: row; + justify-content: space-around; + visibility: visible; + transform: translateY(0px); + opacity: 1; +} +.dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{ + font-size: 3rem; + letter-spacing: 0em; + padding: 12px 20px; +} + +.dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{ + transform-origin: center; + transform: rotateX(180deg) rotateZ(720deg); + font-size: 5rem; + line-height: 2em; +} +.dropdown:hover .dropbtn p:before, .dropdown:active .dropbtn p:before{ + content: ""; +} +.dropdown:hover .dropbtn p:after, .dropdown:active .dropbtn p:after{ + content: ""; +} + +.dropdown .dropbtn p:before{ + content: "?"; +} +.dropdown .dropbtn p:after{ + content: "?"; +} + +/* Title */ +.titleContainer{ + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 3em; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ + animation: appear 1s ease-out; + z-index: 100; +} + +.wrapper{ + animation: example-1 8s infinite; + animation-timing-function: ease-in-out; +} +.wrapper2{ + animation: example-2 10s infinite; + animation-timing-function: ease-in-out; +} +.wrapper3{ + animation: example-3 8s infinite; + animation-timing-function: ease-in-out; +} +.wrapper3 h1{ + font-family: 'Alternate',serif; + font-size: 20rem; + line-height: 1.1em; +} +.wrapper h5{ + font-family: 'RockwellStd-Condensed',serif; + font-size: 4rem; + line-height: 1em; +} +.wrapper3 h6{ + font-family: 'Alternate',serif; + font-size: 2rem; +} + +/* General Text Styles */ + +/* Animation Keyframes */ +@keyframes appear{ + 0%{ + transform-origin: bottom; + transform: translateY(1000px) rotateY(270deg); + opacity: 0; + letter-spacing: 5em; + } + 100%{ + transform-origin: bottom; + transform: translateY(0px) rotateY(0deg); + opacity: 100; + letter-spacing: 0.25em; + } +} + +@keyframes appear2{ + 0%{ + transform: translateY(1000px) rotateY(-270deg); + opacity: 0; + } + 100%{ + transform: translateY(0px) rotateY(0deg); + opacity: 100; + } +} + +@keyframes example-1 { + 0%{ + color: #888; + transform: scale(1); + letter-spacing: 0.25em; + } + 25%{ + color: #884444; + transform: scale(0.90); + letter-spacing: 1em; + } + 50%{ + color: #888; + transform: scale(1); + letter-spacing: 0.25em; + } + 75%{ + color: #444488; + transform: scale(0.90); + letter-spacing: 1em; + } + 100%{ + color: #888; + transform: scale(1); + letter-spacing: 0.25em; + } +} + +@keyframes example-2 { + 0%{ + transform: rotate(5deg) translateY(-10px); + } + 50%{ + transform: rotate(-5deg) translateY(10px); + } + 100%{ + transform: rotate(5deg) translateY(-10px); + } +} +@keyframes example-2b { + 0%{ + color: #ff8888; + transform: rotate(5deg); + } + 50%{ + color: #8888ff; + transform: rotate(-5deg); + } + 100%{ + color: #ff8888; + transform: rotate(5deg); + } +} +@keyframes example-2b2 { + 0%{ + color: #ff8888; + } + 50%{ + color: #8888ff; + } + 100%{ + color: #ff8888; + } +} +@keyframes example-2c { + 0%{ + color: #8888ff; + transform: rotate(5deg); + } + 50%{ + color: #ff8888; + transform: rotate(-5deg); + } + 100%{ + color: #8888ff; + transform: rotate(5deg); + } +} +@keyframes example-2c2 { + 0%{ + color: #8888ff; + } + 50%{ + color: #ff8888; + } + 100%{ + color: #8888ff; + } +} +@keyframes example-2d { + 0%{ + transform: translateY(-10px); + } + 50%{ + transform: translateY(10px); + } + 100%{ + transform: translateY(-10px); + } +} +@keyframes example-2e { + 0%{ + transform: rotate(5deg) translateY(-10px); + } + 50%{ + transform: rotate(-5deg) translateY(-10px); + } + 100%{ + transform: rotate(5deg) translateY(-10px); + } +} + +@keyframes example-3 { + 0%{ + color: #fff; + transform: scale(0.90); + letter-spacing: 0.25em; + } + 25%{ + color: #ff8888; + transform: scale(1); + letter-spacing: 1.25em; + } + 50%{ + color: #fff; + transform: scale(0.90); + letter-spacing: 0.25em; + } + 75%{ + color: #8888ff; + transform: scale(1); + letter-spacing: 1.25em; + } + 100%{ + color: #fff; + transform: scale(0.90); + letter-spacing: 0.25em; + } +} + +@media all and (max-height: 600px){ + + header{ + padding-top: 0.5em; + } + + .dropdown{ + grid-template-columns: 1fr; + } + .dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{ + font-size: 2rem; + padding: 12px 10px; + } + + .hide{ + font-size: 1rem; + } + + .dropbtn{ + grid-column: 1/-1; + } + .dropbtn p{ + font-size: 3rem; + } + .dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{ + font-size: 2.6rem; + } + + .dropdown-content{ + grid-column: 1/-1; + } + + .titleContainer{ + line-height: 3em; + } + + .wrapper3 h1{ + font-size: 10rem; + line-height: 1.1em; + } + .wrapper h5{ + font-size: 2rem; + line-height: 1em; + } + .wrapper3 h6{ + font-size: 1rem; + } + +} + +@media all and (max-width: 600px){ + + header{ + padding: 5em 0; + } + + .upperGradient{ + background: rgb(0,0,0); + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); + } + + /* The container
    - needed to position the dropdown content */ + .dropdown{ + grid-template-columns: 1fr 1fr; + padding: 4em 0; + } + + /* Dropdown Content (Hidden by Default) */ + .dropdown-item1{ + grid-row: 2/3; + } + .dropdown-item2{ + grid-row: 3/4; + padding: 0; + } + .dropdown-content{ + grid-column: 1/2; + flex-direction: column; + justify-content: center; + transform: translateY(-100px); + } + + /* Links inside the dropdown */ + .dropdown-content a{ + font-size: 1rem; + letter-spacing: -0.25em; + transform-origin: left; + } + + .dropdown-content a.home{ + transform-origin: left; + } + + .hide{ + text-align: left; + transform-origin: left; + transform: translate(100px,0px); + font-size: 1.25rem; + } + + .dropbtn{ + grid-column: 1/-1; + padding-bottom: -10em; + } + .dropbtn p{ + text-align: left; + font-size: 3rem; + } + + /* All hover */ + .dropdown-content a:hover + .hide, .dropdown-content a:active + .hide{ + transform: translate(0px,-10px); + padding: 0 2em; + } + .dropdown:hover{ + background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); + } + + .dropdown:hover .dropdown-content, .dropdown:active .dropdown-content{ + flex-direction: column; + justify-content: center; + transform: translateY(0px); + } + .dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{ + font-size: 2rem; + letter-spacing: 0em; + padding: 12px 20px; + } + + .dropdown:hover .dropbtn, .dropdown:active .dropbtn{ + margin: 0 2em; + margin-right: auto; + margin-bottom: 0em; + transform-origin: left; + } + .dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{ + text-align: left; + transform-origin: center; + transform: rotateX(180deg) rotateZ(720deg); + font-size: 2.6rem; + line-height: 2em; + } + + /* Title */ + .titleContainer{ + margin: 0 auto; + padding: 0 auto; + } + .wrapper3 h1{ + font-family: 'Alternate',serif; + font-size: 10rem; + line-height: 1.1em; + } + .wrapper h5{ + font-family: 'RockwellStd-Condensed',serif; + font-size: 2.2rem; + line-height: 1em; + } + .wrapper3 h6{ + font-family: 'Alternate',serif; + font-size: 2rem; + } + +} \ No newline at end of file diff --git a/styles_pageroots.css b/styles_pageroots.css new file mode 100644 index 0000000..6b4f3d3 --- /dev/null +++ b/styles_pageroots.css @@ -0,0 +1,594 @@ +@charset "utf-8"; + +*{ + margin: 0; + padding: 0; +} + +/* Marion's Hand */ +@font-face { + font-family: 'Alternate'; + src: url('Fonts/AAAlternate.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'RockwellStd'; + src: url('Fonts/RockwellStd-Light.otf') format('opentype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'RockwellStd'; + src: url('Fonts/RockwellStd.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} +@font-face { + font-family: 'RockwellStd'; + src: url('Fonts/RockwellStd-Bold.otf') format('opentype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'RockwellStd-Condensed'; + src: url('Fonts/RockwellStd-Condensed.otf') format('opentype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Oswald'; + src: url('Fonts/OswaldLight.otf') format('opentype'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Oswald'; + src: url('Fonts/Oswald.otf') format('opentype'); + font-weight: 400; + font-style: normal; +} + +#gridContainer_Main{ + display: grid; + grid-template-columns: repeat(3,1fr); + grid-template-rows: repeat(2,auto); + width: 960px; + margin: 2em auto 4em; + background: rgba(0,0,0,0); + -webkit-animation: appear2 1s ease-out; + -moz-animation: appear2 1s ease-out; + -ms-animation: appear2 1s ease-out; + animation: appear2 1s ease-out; + z-index: 100; +} + +#gridContainer_Footer{ + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(2,auto); + width: 960px; + margin: 0 auto; + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); +} + +body{ + color: #fff; + background-color: #000; + -webkit-overflow-x: hidden; /* Safari */ + -moz-overflow-x: hidden; /* Firefox */ + -ms-overflow-x: hidden; /* IE10+/Edge */ + overflow-x: hidden; /* Standard */ +} + +/* Header */ +header{ + text-align: center; + padding: 5em 5em; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} +header h1{ + font-family: 'Alternate',serif; + font-size: 10rem; + line-height: 1.1em; + color: #fff; + animation: example-2 8s infinite ease-in-out; +} +header h4{ + font-family: 'RockwellStd-Condensed',serif; + font-size: 4rem; + line-height: 1em; + color: #888; + animation: example-2 8s infinite ease-in-out; +} +.headerAnim{ + -webkit-animation: appear 1s ease-out; + -moz-animation: appear 1s ease-out; + -ms-animation: appear 1s ease-out; + animation: appear 1s ease-out; +} + +main{ + grid-column: 1/-1; + padding: 3em 3em; + z-index: 100; +} + +section{ + grid-column: 1/-1; + padding: 3em 3em; + z-index: 100; + text-align: center; +} + +#grid_miscList{ + grid-column: 1/-1; + display: grid; + grid-template-columns: repeat(3,1fr); + grid-template-rows: repeat(4,auto); + grid-gap: 20px; + width: 100%; + margin: 0 auto; + z-index: 100; + text-align: left; +} +#grid_miscList > div{ + +} +.year4{ + grid-column: 2/3; + grid-row: 2/3; +} + +ul{ + list-style: none; + display: block; + margin: 0 auto; + width: 480px; +} + +li{ + +} + +#gridContainer_Main .bodyHeader{ + padding: 1.5em 0 1em; + text-align: center; +} +#gridContainer_Main .bodyHeader:first-child{ + padding-top: 0em; + text-align: center; +} + +.aboutFlex{ + display: flex; + flex-direction: row; + justify-content: center; + text-align: left; + margin-bottom: 1em; +} + +.aboutMe_Pic{ + float: left; + max-width: 17.5vw; + max-height: 17.5vw; +} + +/* Text Styles */ +h1{ + font-family: 'RockwellStd',serif; + font-weight: 500; + color: #ff6666; + font-size: 2.75rem; + line-height: 1.25em; +} + +h2{ + font-family: 'RockwellStd',serif; + font-weight: 400; + color: #ff6666; + font-size: 2rem; + line-height: 1.25em; +} + +h3{ + font-family: 'RockwellStd',serif; + font-weight: 300; + color: #ff6666; + font-size: 1.5rem; + line-height: 1.25em; +} + +p{ + font-family: 'Oswald',sans-serif; + font-weight: 300; + color: #ddd; + font-size: 1.5rem; + padding-bottom: 1em; +} +#gridContainer_Main p:last-child{ + padding-bottom: 0; +} + +#gridContainer_Main a:link{ + font-family: 'Oswald',sans-serif; + color: #ff8888; + font-size: 1.5rem; + text-align: left; + padding-bottom: 1em; +} +#gridContainer_Main a:hover{ + color: #FFC3C3; +} +#gridContainer_Main a:active{ + color: #fff; +} +#gridContainer_Main a:visited{ + color: #FF8383; +} + +hr{ + margin: 1em 0 0em; + border: 2px solid #ff6666; +} + +/* Dropdown Container */ +nav{ + grid-column: 1/-1; + grid-row: 1/2; + display: flex; + flex-direction: row; + flex-grow: 1; + flex-basis: 0; + justify-content: space-around; + text-align: center; + padding: 2em; +} + +.homeNav{ + grid-column: 1/-1; + grid-row: 2/3; + display: flex; + flex-direction: row; + text-align: center; + padding-top: 0em; +} + +.footerAppear{ + animation: appear2 1s ease-out; +} + +a{ + text-decoration: none; +} + +footer a{ + padding-top: -0.25em; + padding-bottom: 0.25em; +} + +/* Change color of dropdown links on hover */ +a .mask{ + transition: color .1s linear; +} +a .maskNo{ + transition: color .1s linear; +} + +nav a{ + font-family: 'RockwellStd-Condensed',serif; + font-size: 2rem; + letter-spacing: 0em; + text-decoration: none; + display: block; + transition: all .15s linear; + animation: example-2b 8s infinite; +} + +nav a.home{ + animation: example-2c 8s infinite; +} + +.hide{ + font-family: 'RockwellStd-Condensed',serif; + font-size: 0.9em; + visibility: hidden; + opacity: 0; + margin: 0 auto; + text-align: center; + line-height: 0; + transform-origin: center; + transform: translateY(10px); + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ + animation: example-2e 8s infinite; + transition: all .1s linear; +} +nav a:hover + .hide, nav a:active + .hide{ + visibility: visible; + opacity: 1; +} + +nav > div{ + animation: example-2d 8s infinite; +} + +/* All Hover */ +a:hover .mask, a:active .mask{ + color: #fff; +} +a:hover .maskNo, a:active .maskNo{ + color: #555; +} + +/* Show the dropdown menu on hover */ +.dropdown:hover, .dropdown:active{ + background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); +} +.dropdown:hover .dropdown-content, .dropdown:active .dropdown-content{ + display: flex; + flex-direction: row; + justify-content: space-around; + visibility: visible; + transform: translateY(0px); + opacity: 1; +} +.dropdown:hover .dropdown-content a, .dropdown:active .dropdown-content a{ + font-size: 3rem; + letter-spacing: 0em; + padding: 12px 20px; +} + +.dropdown:hover .dropbtn p, .dropdown:active .dropbtn p{ + transform-origin: center; + transform: rotateX(180deg) rotateZ(720deg); + font-size: 5rem; + line-height: 2em; +} +.dropdown:hover .dropbtn p:before, .dropdown:active .dropbtn p:before{ + content: ""; +} +.dropdown:hover .dropbtn p:after, .dropdown:active .dropbtn p:after{ + content: ""; +} + +.dropdown .dropbtn p:before{ + content: "?"; +} +.dropdown .dropbtn p:after{ + content: "?"; +} + +/* Animation Keyframes */ +@keyframes appear{ + 0%{ + transform: translateY(1000px) rotateY(270deg); + opacity: 0; + } + 100%{ + transform: translateY(0px) rotateY(0deg); + opacity: 100; + } +} +@keyframes appear2{ + 0%{ + transform: translateY(1000px); + opacity: 0; + } + 100%{ + transform: translateY(0px); + opacity: 100; + } +} + +@keyframes example-1 { + 0%{ + color: #888; + transform: scale(1); + letter-spacing: 0.25em; + } + 25%{ + color: #884444; + transform: scale(0.90); + letter-spacing: 1em; + } + 50%{ + color: #888; + transform: scale(1); + letter-spacing: 0.25em; + } + 75%{ + color: #444488; + transform: scale(0.90); + letter-spacing: 1em; + } + 100%{ + color: #888; + transform: scale(1); + letter-spacing: 0.25em; + } +} + +@keyframes example-2 { + 0%{ + transform: rotate(5deg) translateY(-10px); + } + 50%{ + transform: rotate(-5deg) translateY(10px); + } + 100%{ + transform: rotate(5deg) translateY(-10px); + } +} +@keyframes example-2b { + 0%{ + color: #ff8888; + transform: rotate(5deg); + } + 50%{ + color: #8888ff; + transform: rotate(-5deg); + } + 100%{ + color: #ff8888; + transform: rotate(5deg); + } +} +@keyframes example-2b2 { + 0%{ + color: #ff8888; + } + 50%{ + color: #8888ff; + } + 100%{ + color: #ff8888; + } +} +@keyframes example-2c { + 0%{ + color: #8888ff; + transform: rotate(5deg); + } + 50%{ + color: #ff8888; + transform: rotate(-5deg); + } + 100%{ + color: #8888ff; + transform: rotate(5deg); + } +} +@keyframes example-2c2 { + 0%{ + color: #8888ff; + } + 50%{ + color: #ff8888; + } + 100%{ + color: #8888ff; + } +} +@keyframes example-2d { + 0%{ + transform: translateY(-10px); + } + 50%{ + transform: translateY(10px); + } + 100%{ + transform: translateY(-10px); + } +} +@keyframes example-2e { + 0%{ + transform: rotate(5deg); + } + 50%{ + transform: rotate(-5deg); + } + 100%{ + transform: rotate(5deg); + } +} + +@keyframes example-3 { + 0%{ + color: #fff; + transform: scale(0.90); + letter-spacing: 0.25em; + } + 25%{ + color: #ff8888; + transform: scale(1); + letter-spacing: 1.25em; + } + 50%{ + color: #fff; + transform: scale(0.90); + letter-spacing: 0.25em; + } + 75%{ + color: #8888ff; + transform: scale(1); + letter-spacing: 1.25em; + } + 100%{ + color: #fff; + transform: scale(0.90); + letter-spacing: 0.25em; + } +} + +@media all and (max-width: 600px){ + + header{ + padding: 2em 1em; + } + header h1{ + font-size: 5rem; + } + header h4{ + font-size: 2.5rem; + } + + #gridContainer_Main{ + grid-template-columns: 1fr; + width: 100%; + } + #gridContainer_Footer{ + width: 100%; + } + + #gridContainer_Main h1{ + font-size: 2.5rem; + } + #gridContainer_Main h2{ + font-size: 1.75rem; + } + + #grid_miscList{ + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(12,auto); + grid-gap: 20px; + margin: 0 auto; + z-index: 100; + text-align: left; + } + + nav{ + flex-direction: column; + } + + .homeNav{ + flex-direction: column; + } + + .aboutFlex{ + flex-direction: column; + justify-content: space-between; + } + .aboutMe_Pic{ + display: inline-block; + margin: 0 auto; + width: 100%; + height: 100%; + min-width: 100%; + min-height: 100%; + max-width: 100%; + max-height: 100%; + padding-bottom: 2em; + } + + .hide{ + animation: example-2e 8s infinite; + } + +} \ No newline at end of file diff --git a/video/websitevid_01.mp4 b/video/websitevid_01.mp4 deleted file mode 100644 index a7d7bcd..0000000 Binary files a/video/websitevid_01.mp4 and /dev/null differ diff --git a/video/websitevid_02.mp4 b/video/websitevid_02.mp4 deleted file mode 100644 index d41d163..0000000 Binary files a/video/websitevid_02.mp4 and /dev/null differ