diff --git a/css/hex-logo.animate.css b/css/hex-logo.animate.css index e198e44..eb78fea 100644 --- a/css/hex-logo.animate.css +++ b/css/hex-logo.animate.css @@ -32,7 +32,7 @@ transform-box: fill-box; transform: translateX(-10px); animation: reset-translations 1s 1 normal ease-in-out forwards 1s; - stroke: white; + stroke: rgb(255, 255, 255); } #hex-logo-lesser { @@ -40,10 +40,11 @@ transform-box: fill-box; transform: translateX(-32px); animation: reset-translations 1s 1 normal ease-in-out forwards 1s; - stroke: white; + stroke: rgb(255, 255, 255); } #hex-logo-slash { + fill: rgb(255, 255, 255); transform-origin: center; transform-box: fill-box; fill-opacity: 100; @@ -99,10 +100,13 @@ @keyframes reset-translations { 0% { - + fill: white; + stroke: white; } 100% { transform: translate(0, 0); + fill: red; + stroke: red; } } \ No newline at end of file diff --git a/css/master.css b/css/master.css index a7893a3..0f2b292 100644 --- a/css/master.css +++ b/css/master.css @@ -1,9 +1,12 @@ :root { --color-pallete-red: #a80000; --color-pallete-dark-red: #731010; - --color-pallete-dark-grey: #1f1f1f; + --color-pallete-dark-grey: #101010; --color-pallete-grey: #707070; + --color-pallete-darkish-grey: #303030; --color-pallete-light-grey: #d4d4d4; + + --mobile-style-width: 1000px; } * { @@ -11,18 +14,26 @@ 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; + font-family: monospace; } ::selection { background-color: var(--color-pallete-red); } -a { +.hexlink { text-decoration: none; + font-style: italic; + color: #a80000; } -a:visited { - color: var(--color-pallete-light-grey); +.hexlink:visited { + color: #a80000; +} + +.hexlink:hover::before{ + content: ">"; +} .hexlink:hover::after{ + content: "<"; } html { @@ -35,7 +46,7 @@ body { #header { display: flex; - height: 80vh; + height: 70vh; justify-content: center; align-items: center; background-color: black; @@ -47,6 +58,7 @@ body { #footer { background-color: black; + height: 20vh; } #fader { @@ -56,20 +68,29 @@ body { display: block; } +#fader-reverse { + height: 150px; + background-color: var(--color-pallete-red); + background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); + display: block; +} + /* CONTENT */ .content-title { - padding: 20px 0 20px 0; + padding: 30px 0 30px 0; + font-family: monospace; } .content-break { - width: 50vw; + width: 70vw; height: 2px; border-color: var(--color-pallete-red); margin: auto; + margin-bottom: 30px; } -@media (max-width: 650px) +@media (max-width: 1000px) { .content-break { width: 90vw; @@ -80,7 +101,6 @@ body { #aboutme { width: 100%; - padding: 20px 0 20px 0; } .aboutme-box { @@ -92,13 +112,19 @@ body { .aboutme-box img { height: auto; width: auto; - border-radius: 15%; + /* border-radius: 15%; */ + border-top-right-radius: 10%; + border-bottom-right-radius: 10%; + border-top-left-radius: 1%; + border-bottom-left-radius: 1%; border: var(--color-pallete-dark-red) solid 2px; } .aboutme-box p { text-align: left; + font-size: larger; } .aboutme-box h2 { text-align: left; margin-bottom: 20px; + font-size: xx-large; } .aboutme-box-left { margin-right: 30px; @@ -112,8 +138,7 @@ body { width: 100%; } -/*Mobile*/ -@media (max-width: 650px) +@media (max-width: 1000px) { .aboutme-box { display: block; @@ -122,4 +147,66 @@ body { .aboutme-box-left { margin: 0 10px 0 10px; } +} + +/* PROJECTS SECTION */ +#projects { + width: 100%; +} + +.projects-box { + display: flex; + flex-wrap: wrap; + margin: auto; + max-width: 70%; + +} .projects-box .card { + margin: auto; + padding-bottom: 30px; +} .projects-box img { + width: 100%; + height: 100%; + border-top-right-radius: 10%; + border-top-left-radius: 1%; +} + +@media (max-width: 1000px) +{ + .projects-box { + display: block; + margin: 0 30px 0 30px; + } .projects-box .card { + margin: auto; + padding: 20px 0 20px 0; + } +} + +/* CONTACT SECTION */ +#contact { + width: 100%; +} + +.contact-box { + margin: auto; + width: auto; + height: auto; +} + +/* Cards */ +.card { + width: 300px; + height: 500px; +} .card .upper { + width: auto; + height: 60%; + background-color: var(--color-pallete-grey); + border-bottom: var(--color-pallete-red) solid 4px; + border-top-right-radius: 10%; + border-top-left-radius: 1%; +} .card .lower { + background-color: var(--color-pallete-darkish-grey); + height: 40%; + width: auto; + border-bottom-right-radius: 10%; + border-bottom-left-radius: 1%; } \ No newline at end of file diff --git a/index.html b/index.html index a303d63..2a64d05 100755 --- a/index.html +++ b/index.html @@ -36,27 +36,66 @@

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.

+

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 full-time Unity developer, but have knowledge in C/C++, C#, Java, HTML/CSS, and a few other languages. Most of my projects can be found on either my personal GitHub or my Hex Studios GitHub pages.

+

PROJECTS

+
+
+
+ +
+

Shots in the Dark - Remastered

+

Shots in the dark was a Brackeys Game Jam 2022.2 submission. This is my attempt to remake it from scratch and finally complete it.

+
+ +
+

Project VII

+

Project VII is an ongoing story-driven game. Details are not yet disclosed.

+
+
- +
+ +
+
- +

CONTACT

+
+ + +
+
+ +
+
+ +
\ No newline at end of file diff --git a/projectvii.html b/projectvii.html new file mode 100644 index 0000000..c0e2917 --- /dev/null +++ b/projectvii.html @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/res/chris2.jpg b/res/chris2.jpg new file mode 100644 index 0000000..beb8219 Binary files /dev/null and b/res/chris2.jpg differ diff --git a/res/project7-1080p.png b/res/project7-1080p.png new file mode 100644 index 0000000..d110016 Binary files /dev/null and b/res/project7-1080p.png differ diff --git a/res/project7-card.png b/res/project7-card.png new file mode 100644 index 0000000..951d491 Binary files /dev/null and b/res/project7-card.png differ diff --git a/res/project7-splash.png b/res/project7-splash.png new file mode 100644 index 0000000..35b92fd Binary files /dev/null and b/res/project7-splash.png differ diff --git a/res/shots.png b/res/shots.png new file mode 100644 index 0000000..5d011d0 Binary files /dev/null and b/res/shots.png differ