diff --git a/shrimp-squad-site/.gitignore b/.gitignore similarity index 100% rename from shrimp-squad-site/.gitignore rename to .gitignore diff --git a/shrimp-squad-site/AGENTS.md b/AGENTS.md similarity index 100% rename from shrimp-squad-site/AGENTS.md rename to AGENTS.md diff --git a/shrimp-squad-site/CLAUDE.md b/CLAUDE.md similarity index 100% rename from shrimp-squad-site/CLAUDE.md rename to CLAUDE.md diff --git a/README.md b/README.md index e69de29..e215bc4 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/app/components/banner/banner.tsx b/app/components/banner/banner.tsx new file mode 100644 index 0000000..36c0fe4 --- /dev/null +++ b/app/components/banner/banner.tsx @@ -0,0 +1,28 @@ +import Image from "next/image"; +import shrimp3D from "./shrimp.png"; + +export default function Banner() { + return ( +
+ 3D modeled shrimp +

+ SHRIMP SQUAD +

+ 3D modeled shrimp +
+ ); +} diff --git a/assets/shrimp.png b/app/components/banner/shrimp.png similarity index 100% rename from assets/shrimp.png rename to app/components/banner/shrimp.png diff --git a/assets/hero-shrimp.png b/app/components/hero-shrimp/hero-shrimp.png similarity index 100% rename from assets/hero-shrimp.png rename to app/components/hero-shrimp/hero-shrimp.png diff --git a/app/components/hero-shrimp/hero-shrimp.tsx b/app/components/hero-shrimp/hero-shrimp.tsx new file mode 100644 index 0000000..cf9e069 --- /dev/null +++ b/app/components/hero-shrimp/hero-shrimp.tsx @@ -0,0 +1,17 @@ +import Image from "next/image"; +import heroShrimp from "./hero-shrimp.png"; + +export default function HeroShrimp() { + return ( +
+ photo of three gold shrimp on rocks underwater +
+ ); +} diff --git a/app/components/seafood-delights/seafood-button.tsx b/app/components/seafood-delights/seafood-button.tsx new file mode 100644 index 0000000..8d5486f --- /dev/null +++ b/app/components/seafood-delights/seafood-button.tsx @@ -0,0 +1,41 @@ +import { useState } from "react"; +import { createPortal } from "react-dom"; +import { ShrimpRain } from "./shrimp-rain"; + +export default function SeafoodButton() { + const [showShrimpOverlay, setShowShrimpOverlay] = useState(false); + + // set maxShrimp based on image size so not to overflow + const maxShrimp = 83; + const shrimpRainValues: number[] = []; + for (let i = 0; i < maxShrimp; i++) { + shrimpRainValues.push(Math.floor(Math.random() * 200)); + } + + function itsRainingShrimp() { + setShowShrimpOverlay(true); + // wait until after the animation plays to make the shrimp disappear 🪄 + setTimeout(() => { + setShowShrimpOverlay(false); + }, 2900); + } + + return ( + <> + + {showShrimpOverlay && + createPortal( + , + document.body + )} + + ); +} + +//todo nice to have: cooler button hover state - dancing shrimps diff --git a/app/components/seafood-delights/seafood-delights.tsx b/app/components/seafood-delights/seafood-delights.tsx new file mode 100644 index 0000000..0c13e48 --- /dev/null +++ b/app/components/seafood-delights/seafood-delights.tsx @@ -0,0 +1,16 @@ +import SeafoodButton from "./seafood-button"; + +export default function SeafoodDelights() { + return ( +
+
+

+ We are Shrimp Squad and we make things. +

+ There's no project we can't mantis punch. Shrimply take a look + at what we're known for. +
+ +
+ ); +} diff --git a/app/components/seafood-delights/shrimp-rain.tsx b/app/components/seafood-delights/shrimp-rain.tsx new file mode 100644 index 0000000..1c7bcc3 --- /dev/null +++ b/app/components/seafood-delights/shrimp-rain.tsx @@ -0,0 +1,32 @@ +import Image from "next/image"; +import Shrimp from "./shrimp.png"; + +export function ShrimpRain({ randomValues }: { randomValues: number[] }) { + const maxWidthToShrimp = randomValues.length; + + const shrimpImagesArray = Array.from(Array(maxWidthToShrimp).keys()); + const shrimpImagesArrayElements = shrimpImagesArray.map((index) => { + const left = "left-[" + (index + 1) + "%]"; + const bottom = "bottom-[" + randomValues[index] + "%]"; + return ( + 3D modeled shrimp + ); + }); + + return ( +
+ {shrimpImagesArrayElements} +
+ ); +} diff --git a/app/components/seafood-delights/shrimp.png b/app/components/seafood-delights/shrimp.png new file mode 100644 index 0000000..3c4323e Binary files /dev/null and b/app/components/seafood-delights/shrimp.png differ diff --git a/app/components/shrimp-feet/assets/Discord-Symbol-Blurple.svg b/app/components/shrimp-feet/assets/Discord-Symbol-Blurple.svg new file mode 100644 index 0000000..b636d15 --- /dev/null +++ b/app/components/shrimp-feet/assets/Discord-Symbol-Blurple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/components/shrimp-feet/assets/LI-In-Bug.png b/app/components/shrimp-feet/assets/LI-In-Bug.png new file mode 100644 index 0000000..8bc2d53 Binary files /dev/null and b/app/components/shrimp-feet/assets/LI-In-Bug.png differ diff --git a/assets/dance-shrimp-dance.gif b/app/components/shrimp-feet/assets/dance-shrimp-dance.gif similarity index 100% rename from assets/dance-shrimp-dance.gif rename to app/components/shrimp-feet/assets/dance-shrimp-dance.gif diff --git a/app/components/shrimp-feet/assets/mediawiki.png b/app/components/shrimp-feet/assets/mediawiki.png new file mode 100644 index 0000000..6b307c3 Binary files /dev/null and b/app/components/shrimp-feet/assets/mediawiki.png differ diff --git a/app/components/shrimp-feet/assets/shrimp.png b/app/components/shrimp-feet/assets/shrimp.png new file mode 100644 index 0000000..3c4323e Binary files /dev/null and b/app/components/shrimp-feet/assets/shrimp.png differ diff --git a/app/components/shrimp-feet/dancing-shrimps/dancing-shrimps.tsx b/app/components/shrimp-feet/dancing-shrimps/dancing-shrimps.tsx new file mode 100644 index 0000000..7d704d1 --- /dev/null +++ b/app/components/shrimp-feet/dancing-shrimps/dancing-shrimps.tsx @@ -0,0 +1,24 @@ +import Image from "next/image"; +import danceShrimp from "../assets/dance-shrimp-dance.gif"; + +export default function DancingShrimps() { + const shrimpArray = Array.from(Array(20).keys()); + const shrimpArrayElements = shrimpArray.map((index) => ( + dancing 3D modeled shrimp + )); + + return ( +
+ {shrimpArrayElements} +
+ ); +} + +//todo try out one line of shrimp only that change size diff --git a/app/components/shrimp-feet/shrimp-feet.tsx b/app/components/shrimp-feet/shrimp-feet.tsx new file mode 100644 index 0000000..4e8b445 --- /dev/null +++ b/app/components/shrimp-feet/shrimp-feet.tsx @@ -0,0 +1,82 @@ +import Image from "next/image"; +import shrimp3D from "./assets/shrimp.png"; +import discordSymbol from "./assets/Discord-Symbol-Blurple.svg"; +import linkedInSymbol from "./assets/LI-In-Bug.png"; +import mediawikiSymbol from "./assets/mediawiki.png"; +import DancingShrimps from "./dancing-shrimps/dancing-shrimps"; + +export default function ShrimpFeet() { + const currentYear = new Date().getFullYear(); + return ( +
+
+
+ 3D modeled shrimp +
+

+ Making games should be fun +

+

Shrimp Squad Inc.

+ + contact@shrimpsquad.ca + +

© {currentYear}

+
+
+
+ + discord symbol + + + discord symbol + + + linkedIn symbol + +
+
+ +
+ ); +} + +//todo get centered shrimp image diff --git a/app/components/shrimp-projects/project-content/index.tsx b/app/components/shrimp-projects/project-content/index.tsx new file mode 100644 index 0000000..534e187 --- /dev/null +++ b/app/components/shrimp-projects/project-content/index.tsx @@ -0,0 +1,6 @@ +import ProjectContent from "./project-content"; +import { ProjectImageProps, ProjectContentProps } from "../types"; + +export { ProjectContent }; + +export type { ProjectImageProps, ProjectContentProps }; diff --git a/app/components/shrimp-projects/project-content/project-content.tsx b/app/components/shrimp-projects/project-content/project-content.tsx new file mode 100644 index 0000000..9256b50 --- /dev/null +++ b/app/components/shrimp-projects/project-content/project-content.tsx @@ -0,0 +1,33 @@ +import Image from "next/image"; +import { ProjectContentProps } from "./"; + +export default function ProjectContent(projectContent: ProjectContentProps) { + return ( +
+
+ +
{projectContent.children}
+ +
+ +
+ ); +} diff --git a/app/components/shrimp-projects/project-descriptions/biotama.tsx b/app/components/shrimp-projects/project-descriptions/biotama.tsx new file mode 100644 index 0000000..91dda74 --- /dev/null +++ b/app/components/shrimp-projects/project-descriptions/biotama.tsx @@ -0,0 +1,23 @@ +export default function BiotamaText() { + return ( +
+

+ Biotama is a game where + players attempt to convert wastelands into thriving ecosystems. +

+

+ 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. +

+

+ 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. +

+
+ ); +} diff --git a/app/components/shrimp-projects/project-descriptions/htp.tsx b/app/components/shrimp-projects/project-descriptions/htp.tsx new file mode 100644 index 0000000..4928cc5 --- /dev/null +++ b/app/components/shrimp-projects/project-descriptions/htp.tsx @@ -0,0 +1,29 @@ +export default function HackThePlanetText() { + return ( +
+
+

+ 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. +

+

+ Your goal is to hack the Gibson computer and collect the + garbage file. Which will then in turn let you + HACK THE PLANET! +

+
+
+ + >> Try it out! + +
+
+ ); +} diff --git a/app/components/shrimp-projects/project-list/project-list.tsx b/app/components/shrimp-projects/project-list/project-list.tsx new file mode 100644 index 0000000..2c7381f --- /dev/null +++ b/app/components/shrimp-projects/project-list/project-list.tsx @@ -0,0 +1,31 @@ +import { ProjectListProps } from "../types"; + +export default function ProjectList({ + projects, + handleProjectClick, +}: { + projects: ProjectListProps[]; + handleProjectClick: any; +}) { + const projectList = projects.map((project) => ( + + )); + return ( +
+ {projectList} +
+ ); +} + +//todo nice to have: border-image on hover would be cool diff --git a/app/components/shrimp-projects/shrimp-projects.tsx b/app/components/shrimp-projects/shrimp-projects.tsx new file mode 100644 index 0000000..08dff9f --- /dev/null +++ b/app/components/shrimp-projects/shrimp-projects.tsx @@ -0,0 +1,35 @@ +import { useState } from "react"; +import ProjectList from "./project-list/project-list"; +import ProjectContent from "./project-content/project-content"; +import { + getCurrentProjectContent, + getProjectList, +} from "../../lib/project-content/getShrimps"; + +export default function ShrimpProjects() { + const [project, setProject] = useState("biotama"); + const [projectContent, setProjectContent] = useState( + getCurrentProjectContent(project) + ); + const [projectList, setProjectlist] = useState(getProjectList(project)); + + const handleProjectClick = (newProject: string) => { + setProject(newProject); + setProjectlist(getProjectList(newProject)); + setProjectContent(getCurrentProjectContent(newProject)); + }; + + const projectListProps = { + projects: projectList, + handleProjectClick: handleProjectClick, + }; + + return ( +
+ + + {projectContent.content} + +
+ ); +} diff --git a/app/components/shrimp-projects/types.tsx b/app/components/shrimp-projects/types.tsx new file mode 100644 index 0000000..47f16b4 --- /dev/null +++ b/app/components/shrimp-projects/types.tsx @@ -0,0 +1,25 @@ +import { StaticImageData } from "next/image"; +import { ReactNode } from "react"; + +export type ProjectImageProps = { + src: StaticImageData; + alt: string; +}; + +export type ProjectImages = { + left: ProjectImageProps; + right: ProjectImageProps; + central: ProjectImageProps; +}; + +export type ProjectContentProps = React.PropsWithChildren<{ + name: string; + content: ReactNode; + images: ProjectImages; +}>; + +export type ProjectListProps = { + id: string; + name: string; + selected: boolean; +}; diff --git a/shrimpmoji.ico b/app/favicon.ico similarity index 100% rename from shrimpmoji.ico rename to app/favicon.ico diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..d97c783 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,53 @@ +@import "tailwindcss"; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --color-space-shrimp-blue: #2c2c54; + --color-cherry-shrimp: #a40e4c; + --color-ashy-shrimp: #acc3a6; + --color-apricot-shrimp: #f5d6ba; + --color-tangerine-dream-shrimp: #f49d6e; +} + +@utility wave-border { + border-image: url("lib/waves-border.png") 27 fill / 35px / 25px 0 0 0 round; + position: relative; +} + +body { + background: var(--background); + color: var(--foreground); + font-family: Arial, Helvetica, sans-serif; + cursor: url("lib/cursors/shrimp_cursor.png"), auto; +} + +@theme { + --animate-blink: blink-border 0.75s step-end infinite; + @keyframes blink-border { + from, + to { + border-color: transparent; + } + 50% { + border-color: var(--ashy-shrimp); + } + } + + --animate-shrimply-rain: rain-down 3s linear 1; + @keyframes rain-down { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(200vh); + } + } +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..af96d67 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,33 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Dive into Seafood Delights", + description: "It's shrimp", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/assets/shrimp_cursor.png b/app/lib/cursors/shrimp_cursor.png similarity index 100% rename from assets/shrimp_cursor.png rename to app/lib/cursors/shrimp_cursor.png diff --git a/assets/biotama1.png b/app/lib/project-content/assets/biotama1.png similarity index 100% rename from assets/biotama1.png rename to app/lib/project-content/assets/biotama1.png diff --git a/assets/biotama2.png b/app/lib/project-content/assets/biotama2.png similarity index 100% rename from assets/biotama2.png rename to app/lib/project-content/assets/biotama2.png diff --git a/assets/biotama3.png b/app/lib/project-content/assets/biotama3.png similarity index 100% rename from assets/biotama3.png rename to app/lib/project-content/assets/biotama3.png diff --git a/assets/htp1.png b/app/lib/project-content/assets/htp1.png similarity index 100% rename from assets/htp1.png rename to app/lib/project-content/assets/htp1.png diff --git a/assets/htp2.png b/app/lib/project-content/assets/htp2.png similarity index 100% rename from assets/htp2.png rename to app/lib/project-content/assets/htp2.png diff --git a/assets/htp3.png b/app/lib/project-content/assets/htp3.png similarity index 100% rename from assets/htp3.png rename to app/lib/project-content/assets/htp3.png diff --git a/app/lib/project-content/getShrimps.tsx b/app/lib/project-content/getShrimps.tsx new file mode 100644 index 0000000..2612359 --- /dev/null +++ b/app/lib/project-content/getShrimps.tsx @@ -0,0 +1,17 @@ +import { projects } from "./shrimpjects"; + +export function getCurrentProjectContent(project: string) { + return { + name: projects[project].name, + content: projects[project].content, + images: projects[project].images, + }; +} + +export function getProjectList(currentProject: string) { + return Object.keys(projects).map((key) => ({ + id: key.toString(), + name: projects[key].name, + selected: key === currentProject, + })); +} diff --git a/app/lib/project-content/shrimpjects.tsx b/app/lib/project-content/shrimpjects.tsx new file mode 100644 index 0000000..79fa8ae --- /dev/null +++ b/app/lib/project-content/shrimpjects.tsx @@ -0,0 +1,74 @@ +import { StaticImageData } from "next/image"; +import { ReactNode } from "react"; + +import biotamaCentral from "./assets/biotama1.png"; +import biotamaLeft from "./assets/biotama2.png"; +import biotamaRight from "./assets/biotama3.png"; +import htpCentral from "./assets/htp3.png"; +import htpLeft from "./assets/htp1.png"; +import htpRight from "./assets/htp2.png"; +import BiotamaText from "@/app/components/shrimp-projects/project-descriptions/biotama"; +import HackThePlanetText from "@/app/components/shrimp-projects/project-descriptions/htp"; + +type ProjectImage = { + src: StaticImageData; + alt: string; +}; + +type ProjectImages = { + left: ProjectImage; + right: ProjectImage; + central: ProjectImage; +}; + +type ProjectContent = { + name: string; + content: ReactNode; + images: ProjectImages; +}; + +export type Project = { + [key: string]: ProjectContent; +}; + +export const projects: Project = { + biotama: { + name: "BIOTAMA", + content: , + images: { + left: { + src: biotamaLeft, + alt: "mother tree with a river and cliffs in the background", + }, + right: { + src: biotamaRight, + alt: "inside of an old brick house looking out the door onto a path leading to a bridge", + }, + central: { + src: biotamaCentral, + alt: "top down view of the mother tree and greenery", + }, + }, + }, + htp: { + name: "HACK THE PLANET", + content: , + images: { + left: { + src: htpLeft, + alt: "visual puzzle with different colours", + }, + right: { + src: htpRight, + alt: "the player character standing surrounded by various text characters", + }, + central: { + src: htpCentral, + alt: "top down camera view of a black screen with hex codes randomly placed", + }, + }, + }, +}; + +//todo add new images for biotama +//todo use image components instead of properties diff --git a/assets/waves-border.png b/app/lib/waves-border.png similarity index 100% rename from assets/waves-border.png rename to app/lib/waves-border.png diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..aea2c1b --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,26 @@ +"use client"; +import Banner from "./components/banner/banner"; +import HeroShrimp from "./components/hero-shrimp/hero-shrimp"; +import SeafoodDelights from "./components/seafood-delights/seafood-delights"; +import ShrimpFeet from "./components/shrimp-feet/shrimp-feet"; +import ShrimpProjects from "./components/shrimp-projects/shrimp-projects"; + +export default function Home() { + return ( +
+ + + + + +
+ ); +} + +/* todo list +- more shrimpy font +- shrimp profiles (about us) +- menu i guess, hamburger, but the lines are waves +- animations +- shirmp cursor for hover - colour swap +*/ diff --git a/assets/shrimp-tile.png b/assets/shrimp-tile.png deleted file mode 100644 index d3c3db5..0000000 Binary files a/assets/shrimp-tile.png and /dev/null differ diff --git a/shrimp-squad-site/eslint.config.mjs b/eslint.config.mjs similarity index 100% rename from shrimp-squad-site/eslint.config.mjs rename to eslint.config.mjs diff --git a/index.html b/index.html deleted file mode 100755 index aaff265..0000000 --- a/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - Dive into Seafood Delights - - - - - -
-
- -

SHRIMP SQUAD

- -
-
-
-
We are Shrimp Squad and we make things. There's no project we can't mantis punch. Shrimply take a look at what we're known for.
- -
-
-
- -
-
-
-
BIOTAMA
-
HACK THE PLANET
-
-
-
- -
- -
- -
-
-
-
-
- - - - - \ No newline at end of file diff --git a/shrimp-squad-site/next.config.ts b/next.config.ts similarity index 100% rename from shrimp-squad-site/next.config.ts rename to next.config.ts diff --git a/shrimp-squad-site/package-lock.json b/package-lock.json similarity index 99% rename from shrimp-squad-site/package-lock.json rename to package-lock.json index 43683ad..9bdda11 100644 --- a/shrimp-squad-site/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.2.4", + "prettier": "3.8.3", "tailwindcss": "^4", "typescript": "^5" } @@ -5487,6 +5488,22 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz", + "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==", + "dev": true, + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", diff --git a/shrimp-squad-site/package.json b/package.json similarity index 95% rename from shrimp-squad-site/package.json rename to package.json index 6476b8c..9ea24d5 100644 --- a/shrimp-squad-site/package.json +++ b/package.json @@ -20,7 +20,8 @@ "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.2.4", + "prettier": "3.8.3", "tailwindcss": "^4", "typescript": "^5" } -} +} diff --git a/shrimp-squad-site/postcss.config.mjs b/postcss.config.mjs similarity index 100% rename from shrimp-squad-site/postcss.config.mjs rename to postcss.config.mjs diff --git a/prettier.config.ts b/prettier.config.ts new file mode 100644 index 0000000..47ac22d --- /dev/null +++ b/prettier.config.ts @@ -0,0 +1,10 @@ +// prettier.config.ts, .prettierrc.ts, prettier.config.mts, or .prettierrc.mts + +import { type Config } from "prettier"; + +const config: Config = { + trailingComma: "es5", + tabWidth: 4, +}; + +export default config; diff --git a/shrimp-squad-site/public/file.svg b/public/file.svg similarity index 100% rename from shrimp-squad-site/public/file.svg rename to public/file.svg diff --git a/shrimp-squad-site/public/globe.svg b/public/globe.svg similarity index 100% rename from shrimp-squad-site/public/globe.svg rename to public/globe.svg diff --git a/shrimp-squad-site/public/next.svg b/public/next.svg similarity index 100% rename from shrimp-squad-site/public/next.svg rename to public/next.svg diff --git a/shrimp-squad-site/public/vercel.svg b/public/vercel.svg similarity index 100% rename from shrimp-squad-site/public/vercel.svg rename to public/vercel.svg diff --git a/shrimp-squad-site/public/window.svg b/public/window.svg similarity index 100% rename from shrimp-squad-site/public/window.svg rename to public/window.svg diff --git a/shrimp-squad-site/README.md b/shrimp-squad-site/README.md deleted file mode 100644 index e215bc4..0000000 --- a/shrimp-squad-site/README.md +++ /dev/null @@ -1,36 +0,0 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/shrimp-squad-site/app/favicon.ico b/shrimp-squad-site/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/shrimp-squad-site/app/favicon.ico and /dev/null differ diff --git a/shrimp-squad-site/app/globals.css b/shrimp-squad-site/app/globals.css deleted file mode 100644 index a2dc41e..0000000 --- a/shrimp-squad-site/app/globals.css +++ /dev/null @@ -1,26 +0,0 @@ -@import "tailwindcss"; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} diff --git a/shrimp-squad-site/app/layout.tsx b/shrimp-squad-site/app/layout.tsx deleted file mode 100644 index 976eb90..0000000 --- a/shrimp-squad-site/app/layout.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; - -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - -export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - {children} - - ); -} diff --git a/shrimp-squad-site/app/page.tsx b/shrimp-squad-site/app/page.tsx deleted file mode 100644 index 3f36f7c..0000000 --- a/shrimp-squad-site/app/page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
- -
-
- ); -} diff --git a/shrimpjects.js b/shrimpjects.js deleted file mode 100644 index b515fbc..0000000 --- a/shrimpjects.js +++ /dev/null @@ -1,32 +0,0 @@ -export const projects = { - "biotama":{ - content: - `

Biotama is a game where players attempt to convert wastelands into thriving ecosystems.

-

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.

-

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:"mother tree with a river and cliffs in the background"}, - right: {src:"biotama3.png",alt:"inside of an old brick house looking out the door onto a path leading to a bridge"}, - central: {src:"biotama1.png",alt:"top down view of the mother tree and greenery"}, - }, - }, - "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.

-

Your goal is to hack the Gibson computer and collect the garbage file. - Which will then in turn let you HACK THE PLANET!

-
>> Try it out!
`, - images: { - left: {src:"htp1.png",alt:"visual puzzle with different colours"}, - right: {src:"htp2.png",alt:"the player character standing surrounded by various text characters"}, - central: {src:"htp3.png",alt:"top down camera view of a black screen with hex codes randomly placed"}, - }, - }, -} \ No newline at end of file diff --git a/shrimple-functions.js b/shrimple-functions.js deleted file mode 100644 index e0e9669..0000000 --- a/shrimple-functions.js +++ /dev/null @@ -1,60 +0,0 @@ -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 clearSelectedProjectClass() { - document.getElementById("biotama").classList.remove("selected-project"); - document.getElementById("htp").classList.remove("selected-project"); -} - -export function createShrimpFooter() { - const footer = document.getElementById("shrimp-gif"); - footer.innerHTML = "a shrimp dancing".repeat(10); -} - -export function itsRainingShrimp() { - const shrimpyRain = document.getElementById("shrimply-the-rain"); - // push shrimp rain to the front. It's basically an overlay - shrimpyRain.style.zIndex = 2; - - var increment = 0; - var drops = ""; - - // maxWidthToShrimp is set based on image size so not to overflow - const maxWidthToShrimp = 83; - while (increment < maxWidthToShrimp) { - // how much you want shrimp to cover - var randomTwoHundo = (Math.floor(Math.random() * 200)); - - drops += '' - - increment++; - } - - shrimpyRain.innerHTML = drops; - - // wait until after the animation plays to make the shrimp disappear 🪄 - setTimeout(() => { - shrimpyRain.style.zIndex = -1; - shrimpyRain.innerHTML = ""; - }, 2950); - -} \ No newline at end of file diff --git a/shrimply-the-best.js b/shrimply-the-best.js deleted file mode 100644 index 317eb35..0000000 --- a/shrimply-the-best.js +++ /dev/null @@ -1,34 +0,0 @@ -import { - getProjectData, - clearSelectedProjectClass, - createShrimpFooter, - itsRainingShrimp -} from "./shrimple-functions.js"; - -const biotamaBtn = document.getElementById("biotama"); -const htpBtn = document.getElementById("htp"); -const seafoodBtn = document.getElementById("seafoodDelightsBtn"); - -document.addEventListener("DOMContentLoaded", function(event) { - biotamaBtn.click(); - createShrimpFooter(); -}); - -biotamaBtn.addEventListener("click", function() { - clearSelectedProjectClass(); - this.classList.add("selected-project"); - getProjectData("biotama"); -}); - -htpBtn.addEventListener("click", function() { - clearSelectedProjectClass(); - this.classList.add("selected-project"); - getProjectData("htp"); -}); - -seafoodBtn.addEventListener("click", function() { - itsRainingShrimp(); -}) - - -export {getProjectData, itsRainingShrimp} \ No newline at end of file diff --git a/shrimpy-styles.css b/shrimpy-styles.css deleted file mode 100644 index ca7fcdd..0000000 --- a/shrimpy-styles.css +++ /dev/null @@ -1,201 +0,0 @@ -body { - cursor: url("assets/shrimp_cursor.png"), auto; - --space-shrimp-blue: #2C2C54; - --cherry-shrimp: #A40E4C; - --ashy-shrimp: #ACC3A6; - --apricot-shrimp: #F5D6BA; - --tangerine-dream-shrimp: #F49D6E; - color: var(--space-shrimp-blue); - background: repeat url(assets/shrimp-tile.png); - background-size: 50px; - margin: 0 20px; -} - -.we-are-shrimp-squad { - width:100%; - height: 50%; - background-color: var(--tangerine-dream-shrimp); - font-size:30px; - display:flex; - align-items: center; - justify-content: center; - gap: 30px; -} - -.we-are-shrimp-squad img { - height:10%; - width: 10%; -} - -.flip { - transform: scaleX(-1); -} - -.shrimp-hero { - max-width:100%; - height:auto; - background-color: var(--apricot-shrimp); - display:flex; - align-items: center; - justify-content: center; - width:100%; -} - -.shrimp-hero img { - max-width:100%; - height:auto; - vertical-align: top; - -} - -.shrimp-hero div.inside-container, .shrimp-info { - background-color: var(--cherry-shrimp); - padding:10px; -} - -.shrimp-hero button, .shrimp-info button{ - border-radius: 10px; - background-color: var(--space-shrimp-blue); - color: var(--tangerine-dream-shrimp); - padding:10px; - margin-top:10px; - width: 100%; - cursor: unset; -} - -.shrimp-project-list { - padding: 10px 0; - display: flex; - gap: 20px; - justify-content: space-evenly; - border-image: url("./assets/waves-border.png") 27 fill / 35px / 25px 0 0 0 round; - position:relative; - color: var(--tangerine-dream-shrimp); - font-size: 24px; -} - -.shrimp-project-list div:hover { - text-decoration: underline overline var(--ashy-shrimp); -} - -.selected-project{ - text-shadow: 4px 3px 0 var(--cherry-shrimp); -} - -#shrimp-project-content { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - margin-top: 10px; -} - -#shrimp-project-content .upper{ - display: flex; - justify-content: space-between; - gap: 10px; -} - -#shrimp-project-content .upper > * { - flex-basis: 32%; -} - -#shrimp-project-content .upper > div{ - background-color:var(--tangerine-dream-shrimp); - padding: 0 10px; -} - -#shrimp-project-content .smol-image{ - width: 30%; -} - -#shrimp-project-content #image-central { - width: inherit; - margin-top: 15px; -} - -#shrimp-gif { - display: flex; - flex-flow: row wrap; -} - -#shrimp-gif > * { - width:50%; -} -#project-content{ - display:flex; - flex-flow:column; - margin-top: 0; - margin-bottom: 0; - justify-content: space-between; -} - -@media screen and (orientation: portrait) { - #shrimp-project-content .upper{ - flex-direction: column; - gap: 15px; - } - - #shrimp-project-content .smol-image{ - width: 100%; - } - - p { - font-size: 16px; - } - h1{ - font-size: 32px; - } -} - -.bold { - font-weight: bold; -} - -/* buttons */ - -.cta-wrapper{ - margin:16px 0; - background-color: var(--space-shrimp-blue); - border-radius: 5px; - padding:15px; - width:fit-content; -} -.cta-wrapper .cta { - text-decoration: none; - border-right: 2px solid var(--ashy-shrimp); - color: var(--ashy-shrimp); - font-size: 24px; - animation: blink-border .75s step-end infinite; -} - -@keyframes blink-border { - from, to { border-color: transparent } - 50% { border-color: var(--ashy-shrimp); } -} -/* end buttons */ - -/* shrimp rain animation */ -#shrimply-the-rain { - height:100%; - width:100%; - overflow: hidden; - position:fixed; - z-index: -1; -} - -#shrimply-the-rain > img { - animation: RainDown 3s linear 1; - position:absolute; - width:15%; -} - -@keyframes RainDown { - 0% { - transform: translateY(0); - } - 100% { - transform: translateY(200vh); - } -} -/* end shrimp rain animation */ \ No newline at end of file diff --git a/shrimp-squad-site/tsconfig.json b/tsconfig.json similarity index 100% rename from shrimp-squad-site/tsconfig.json rename to tsconfig.json