diff --git a/colorpallete.png b/colorpallete.png new file mode 100644 index 0000000..d0ace96 Binary files /dev/null and b/colorpallete.png differ diff --git a/css/hex-logo.animate.css b/css/hex-logo.animate.css new file mode 100644 index 0000000..e198e44 --- /dev/null +++ b/css/hex-logo.animate.css @@ -0,0 +1,108 @@ +/* -- INITIAL OBJECT SETUP */ + +#hex-svg * { + fill: white; +} + +#hex-logo-h { + transform-origin: center; + transform-box: fill-box; + fill-opacity: 0; + animation: fade-in 4s 1 normal ease-in-out forwards 3s; +} + +#hex-logo-e { + transform-origin: center; + transform-box: fill-box; + fill-opacity: 0; + animation: fade-in 4s 1 normal ease-in-out forwards 3s; +} + +#hex-logo-hexagon { + transform-origin: center; + transform-box: fill-box; + fill-opacity: 0; + stroke-opacity: 0; + animation: fade-in-hexagon 4s 1 normal ease-in-out forwards 3s; + stroke: white; +} + +#hex-logo-greater { + transform-origin: center; + transform-box: fill-box; + transform: translateX(-10px); + animation: reset-translations 1s 1 normal ease-in-out forwards 1s; + stroke: white; +} + +#hex-logo-lesser { + transform-origin: center; + transform-box: fill-box; + transform: translateX(-32px); + animation: reset-translations 1s 1 normal ease-in-out forwards 1s; + stroke: white; +} + +#hex-logo-slash { + transform-origin: center; + transform-box: fill-box; + fill-opacity: 100; + transform: translate(-1px, -8px) rotate(15deg); + animation: fade-out 0.001s 1 normal ease-out forwards 1s; +} + +/* -- ANIMATION BEGIN -- */ +@keyframes fade-in { + 0% { + fill-opacity: 0; + } + + 50% { + fill-opacity: 50; + } + + 100% { + fill-opacity: 100; + } +} + +@keyframes fade-in-hexagon { + 0% { + stroke-opacity: 0; + fill-opacity: 0; + } + + 50% { + stroke-opacity: 50; + fill-opacity: 50; + } + + 100% { + stroke-opacity: 100; + fill-opacity: 100; + } +} + +@keyframes fade-out { + 0% { + fill-opacity: 100; + } + + 50% { + fill-opacity: 50; + } + + 100% { + fill-opacity: 0; + } +} + +@keyframes reset-translations { + 0% { + + } + + 100% { + transform: translate(0, 0); + } +} \ No newline at end of file diff --git a/css/master.css b/css/master.css new file mode 100644 index 0000000..a7893a3 --- /dev/null +++ b/css/master.css @@ -0,0 +1,125 @@ +:root { + --color-pallete-red: #a80000; + --color-pallete-dark-red: #731010; + --color-pallete-dark-grey: #1f1f1f; + --color-pallete-grey: #707070; + --color-pallete-light-grey: #d4d4d4; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + color: var(--color-pallete-light-grey); + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; +} + +::selection { + background-color: var(--color-pallete-red); +} + +a { + text-decoration: none; +} +a:visited { + color: var(--color-pallete-light-grey); +} + +html { + background-color: var(--color-pallete-dark-grey); +} + +body { + text-align: center; +} + +#header { + display: flex; + height: 80vh; + justify-content: center; + align-items: center; + background-color: black; +} + +#content { + background-color: var(--color-pallete-dark-grey); +} + +#footer { + background-color: black; +} + +#fader { + height: 150px; + background-color: var(--color-pallete-red); + background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); + display: block; +} + +/* CONTENT */ + +.content-title { + padding: 20px 0 20px 0; +} + +.content-break { + width: 50vw; + height: 2px; + border-color: var(--color-pallete-red); + margin: auto; +} + +@media (max-width: 650px) +{ + .content-break { + width: 90vw; + } +} + +/* ABOUT ME SECTION */ + +#aboutme { + width: 100%; + padding: 20px 0 20px 0; +} + +.aboutme-box { + display: flex; + margin: auto; + max-width: 1000px; + overflow: hidden; +} +.aboutme-box img { + height: auto; + width: auto; + border-radius: 15%; + border: var(--color-pallete-dark-red) solid 2px; +} .aboutme-box p { + text-align: left; +} .aboutme-box h2 { + text-align: left; + margin-bottom: 20px; +} +.aboutme-box-left { + margin-right: 30px; +} +.aboutme-box-left img { + height: auto; + width: 100%; +} + +.aboutme-box-right { + width: 100%; +} + +/*Mobile*/ +@media (max-width: 650px) +{ + .aboutme-box { + display: block; + margin: 0 30px 0 30px; + } + .aboutme-box-left { + margin: 0 10px 0 10px; + } +} \ No newline at end of file diff --git a/hex-logo-animate.html b/hex-logo-animate.html new file mode 100644 index 0000000..6401ca5 --- /dev/null +++ b/hex-logo-animate.html @@ -0,0 +1,33 @@ + + + + + + + + Hex Logo Animation Test + + +
+ + + +
+ + \ No newline at end of file diff --git a/index.html b/index.html index 0e76edd..a303d63 100755 --- a/index.html +++ b/index.html @@ -1 +1,62 @@ + + + + + + + + Hex Studios + + + +
+
+ +

This Is HEX Studios

+
+ +
+
+
+ +
+
+

About Me

+

Hi! I'm Chris Bell. I am a programmer, musician, and nerd. My passion has been Game Development for over 5 years, using Unreal Engine, Unity, and Godot. I am currently a Jr. Unity Developer, but have knowledge in C/C++, C#, Java, HTML/CSS, and a few other languages.

+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/res/chris.jpg b/res/chris.jpg new file mode 100644 index 0000000..9e42090 Binary files /dev/null and b/res/chris.jpg differ diff --git a/res/hex-logo.svg b/res/hex-logo.svg new file mode 100644 index 0000000..7c19035 --- /dev/null +++ b/res/hex-logo.svg @@ -0,0 +1,21 @@ + + +