chrisbell/hexstudios-co
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop'

Browse Source
This commit is contained in:
Chris Bell 2023-08-09 09:09:34 -05:00
commit a984a1f5c0
No known key found for this signature in database
9 changed files with 163 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/hex-logo.animate.css
View File

@ -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;
}
}

113
css/master.css
View File

@ -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%;
}

51
index.html
View File

@ -36,27 +36,66 @@
<div id="fader"></div>
<h1 class="content-title">This Is HEX Studios</h1>
<hr class="content-break"></div>
<hr class="content-break">
<div id="aboutme">
<div class="aboutme-box">
<div class="aboutme-box-left">
<img src="res/chris.jpg" alt="">
<img src="res/chris2.jpg" alt="">
</div>
<div class="aboutme-box-right">
<h2>About Me</h2>
<p>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.</p>
<p>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 <a class="hexlink" href="https://github.com/spudnut2000">personal GitHub</a> or my <a class="hexlink" href="https://github.com/HexStudios">Hex Studios GitHub</a> pages.</p>
</div>
</div>
</div>
<h1 class="content-title">PROJECTS</h1>
<hr class="content-break">
<div id="projects">
<div class="projects-box">
<!-- Shots in the Dark -->
<div class="card"><div class="upper"><a href="https://github.com/hexstudios/shotsinthedarkremaster"><img src="res/shots.png"></a></div><div class="lower">
<h2>Shots in the Dark - Remastered</h2>
<p>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.</p>
</div></div>
<!-- Project 7 -->
<div class="card"><div class="upper"><a href="projectvii.html"><img src="res/project7-card.png"></a></div><div class="lower">
<h2>Project VII</h2>
<p>Project VII is an ongoing story-driven game. Details are not yet disclosed.</p>
</div></div>
<div class="card"><div class="upper"></div><div class="lower">
</div></div>
</div>
</div>
<h1 class="content-title">CONTACT</h1>
<hr class="content-break">
</div>
<div id="contact">
<div class="contact-box">
<ul>
<li>Email: <a class="hexlink" href="mailto:chrisbell@hexstudios.co">chrisbell@hexstudios.co</a></li>
</ul>
</div>
</div>
<div id="fader-reverse"></div>
<div id="footer">
<p>&copy; Copyright 2022 HEX Studios&trade;</p>
<br>
<div class="footer-nav">
<ul>
<li><a class="hexlink" href="#aboutme">About</a></li>
<li><a class="hexlink" href="#projects">Projects</a></li>
<li><a class="hexlink" href="#contact">Contact</a></li>
<li><a class="hexlink" href="https://github.com/HexStudios/hexstudios-co">Page Source</a></li>
</ul>
</div>
</div>
</body>
</html>

11
projectvii.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/master.css">
</head>
<body style="background-color: #10191d; width: 100vw; height: 100vh;">
<img src="res/project7-1080p.png" alt="" style="height: auto; width: 75%; margin-top: 5vh;">
</body>
</html>

BIN
res/chris2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
res/project7-1080p.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
res/project7-card.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
res/project7-splash.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 879 KiB

BIN
res/shots.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB