even better footer and title/ico
This commit is contained in:
Lah Shrimp
parent
e68142c61a
commit
a7715f6d0e
BIN
assets/dance-shrimp-dance.gif
Normal file
BIN
assets/dance-shrimp-dance.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
15
index.html
15
index.html
@ -1,9 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-CA">
|
||||
<head>
|
||||
<title>🦐🦐🦐</title>
|
||||
<link rel="icon" type="image/x-icon" href="./ss.ico">
|
||||
<link rel="stylesheet" href="shrimpy-styles.css"/>
|
||||
<link rel="stylesheet" href="shrimpy-grid.css"/>
|
||||
<script src="shrimply-the-best.js"></script>
|
||||
<script type="module">
|
||||
import { getProjectData, scrollToProjects} from "./shrimply-the-best.js"
|
||||
window.getProjectData = getProjectData;
|
||||
window.scrollToProjects = scrollToProjects;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="we-are-shrimp-squad">
|
||||
@ -35,7 +40,7 @@
|
||||
</section>
|
||||
</section>
|
||||
<section class="footer">
|
||||
<div>this is a cool footer</div>
|
||||
<div id="shrimp-gif"></div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
@ -48,9 +53,9 @@ todo list
|
||||
- style text in game descriptions
|
||||
- more shrimpy font
|
||||
- silly cookie bar (maybe)
|
||||
- replace photos for htp & website
|
||||
- htp description
|
||||
- shrimp profiles (about us)
|
||||
- menu i guess
|
||||
- animations
|
||||
- shirmp cursor for hover
|
||||
- shrimp rain when button
|
||||
-->
|
||||
32
shrimpjects.js
Normal file
32
shrimpjects.js
Normal file
@ -0,0 +1,32 @@
|
||||
export const projects = {
|
||||
"biotama":{
|
||||
content:
|
||||
`Biotama is a game where players attempt to convert wastelands into thriving ecosystems.<br/>
|
||||
The player starts with a "Mother Tree"
|
||||
which acts as the core component of the player's ecosystem.
|
||||
Trees grow roots that can connect together,
|
||||
allowing them to communicate and send resources between each other.
|
||||
Mycelial networks function similarly for fungi. <br/>
|
||||
Biotama aims to be educational as well as fun.
|
||||
It will feature real-world species with tooltips showing fun facts about those species.
|
||||
We are consulting with experts in biology where necessary to ensure accuracy to the real world.
|
||||
`,
|
||||
images: {
|
||||
left: {src:"biotama2.png",alt:"alt1"},
|
||||
right: {src:"biotama3.png",alt:"alt2"},
|
||||
central: {src:"biotama1.png",alt:"alt3"},
|
||||
},
|
||||
},
|
||||
"htp":{
|
||||
content: `A game by Shrimp Squad Studios made for the Epic MegaJam!
|
||||
One week to make a game and this is what we made! A game based on the movie Hackers.<br/>
|
||||
Your goal is to hack the Gibson computer and collect the garbage file.
|
||||
Which will then in turn let you HACK THE PLANET! <br/>
|
||||
<a href='https://megsum.itch.io/hack-the-planet'> Try it out!</a>`,
|
||||
images: {
|
||||
left: {src:"htp1.png",alt:""},
|
||||
right: {src:"htp2.png",alt:""},
|
||||
central: {src:"htp3.png",alt:""},
|
||||
},
|
||||
},
|
||||
}
|
||||
30
shrimple-functions.js
Normal file
30
shrimple-functions.js
Normal file
@ -0,0 +1,30 @@
|
||||
import { projects } from "./shrimpjects.js";
|
||||
|
||||
export function getProjectData(project){
|
||||
const leftImage = document.getElementById("image-left");
|
||||
const rightImage = document.getElementById("image-right");
|
||||
const centralImage = document.getElementById("image-central");
|
||||
const projectContent = document.getElementById("project-content");
|
||||
const projectData = projects[project];
|
||||
projectContent.innerHTML = projectData.content;
|
||||
|
||||
const assetPath = "assets/"
|
||||
|
||||
leftImage.src = assetPath + projectData.images.left.src;
|
||||
leftImage.alt = "altleft";
|
||||
rightImage.src = assetPath + projectData.images.right.src;
|
||||
centralImage.src = assetPath + projectData.images.central.src;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
export function scrollToProjects(){
|
||||
const projects = document.getElementsByClassName("shrimp-projects")[0];
|
||||
projects.scrollIntoView({behavior:"smooth"});
|
||||
}
|
||||
|
||||
export function createShrimpFooter() {
|
||||
const footer = document.getElementById("shrimp-gif");
|
||||
footer.innerHTML = "<img src='./assets/dance-shrimp-dance.gif'>".repeat(10);
|
||||
}
|
||||
@ -1,62 +1,8 @@
|
||||
import {getProjectData, scrollToProjects, createShrimpFooter} from "./shrimple-functions.js";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
getProjectData("biotama");
|
||||
createShrimpFooter();
|
||||
});
|
||||
|
||||
function getProjectData(project){
|
||||
const leftImage = document.getElementById("image-left");
|
||||
const rightImage = document.getElementById("image-right");
|
||||
const centralImage = document.getElementById("image-central");
|
||||
const projectContent = document.getElementById("project-content");
|
||||
projectData = projects[project];
|
||||
projectContent.innerHTML = projectData.content;
|
||||
|
||||
const assetPath = "assets/"
|
||||
|
||||
leftImage.src = assetPath + projectData.images.left.src;
|
||||
leftImage.alt = "altleft";
|
||||
rightImage.src = assetPath + projectData.images.right.src;
|
||||
centralImage.src = assetPath + projectData.images.central.src;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
function scrollToProjects(){
|
||||
const projects = document.getElementsByClassName("shrimp-projects")[0];
|
||||
projects.scrollIntoView({behavior:"smooth"});
|
||||
}
|
||||
|
||||
//todo move projects object into separate file
|
||||
|
||||
const projects = {
|
||||
"biotama":{
|
||||
content:
|
||||
`Biotama is a game where players attempt to convert wastelands into thriving ecosystems.<br/>
|
||||
The player starts with a “Mother Tree”
|
||||
which acts as the core component of the player’s ecosystem.
|
||||
Trees grow roots that can connect together,
|
||||
allowing them to communicate and send resources between each other.
|
||||
Mycelial networks function similarly for fungi. <br/>
|
||||
Biotama aims to be educational as well as fun.
|
||||
It will feature real-world species with tooltips showing fun facts about those species.
|
||||
We are consulting with experts in biology where necessary to ensure accuracy to the real world.
|
||||
`,
|
||||
images: {
|
||||
left: {src:"biotama2.png",alt:"alt1"},
|
||||
right: {src:"biotama3.png",alt:"alt2"},
|
||||
central: {src:"biotama1.png",alt:"alt3"},
|
||||
},
|
||||
},
|
||||
"htp":{
|
||||
content: `A game by Shrimp Squad Studios made for the Epic MegaJam!
|
||||
One week to make a game and this is what we made! A game based on the movie Hackers.<br/>
|
||||
Your goal is to hack the Gibson computer and collect the garbage file.
|
||||
Which will then in turn let you HACK THE PLANET! <br/>
|
||||
<a href='https://megsum.itch.io/hack-the-planet'> Try it out!</a>`,
|
||||
images: {
|
||||
left: {src:"htp1.png",alt:""},
|
||||
right: {src:"htp2.png",alt:""},
|
||||
central: {src:"htp3.png",alt:""},
|
||||
},
|
||||
},
|
||||
}
|
||||
export {getProjectData, scrollToProjects}
|
||||
@ -1,7 +1,3 @@
|
||||
/* style that shrimp
|
||||
todo
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations on button hover but with shrimp
|
||||
*/
|
||||
body {
|
||||
cursor: url("assets/shrimp_cursor.png"), auto;
|
||||
--space-shrimp-blue: #2C2C54;
|
||||
@ -106,6 +102,14 @@ body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#shrimp-gif {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#shrimp-gif > * {
|
||||
width:30%;
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
#shrimp-project-content .upper{
|
||||
flex-direction: column;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user