diff --git a/public/cd-icon.svg b/public/cd-icon.svg new file mode 100644 index 0000000..09d8f03 --- /dev/null +++ b/public/cd-icon.svg @@ -0,0 +1,771 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/three-background/index.ts b/src/components/three-background/index.ts index 2f1bff3..04e89d8 100644 --- a/src/components/three-background/index.ts +++ b/src/components/three-background/index.ts @@ -1,5 +1,5 @@ import "./styles.css"; -import {initCamera, initCanvas, initScene, initStage, renderer} from "./scene.ts"; +import {initCamera, initScene, initStage, renderer} from "./scene.ts"; import {initBgMeshes} from "./particules.ts"; import {initPostProcess} from "./post-process.ts"; import {animate} from "./animation-loop.ts"; @@ -9,7 +9,6 @@ import {animate} from "./animation-loop.ts"; export function animatedBackground() { initStage(); initScene(); - initCanvas(); initCamera(); initBgMeshes(); initPostProcess(); diff --git a/src/components/three-background/scene.ts b/src/components/three-background/scene.ts index 413ab52..3e602f9 100644 --- a/src/components/three-background/scene.ts +++ b/src/components/three-background/scene.ts @@ -8,10 +8,7 @@ export let renderer: THREE.WebGLRenderer, windowWidth = window.innerWidth, windowHeight = window.innerHeight; -let graphicCanvas, - canvasWidth = 240, - canvasHeight = 240, - mouseX = 0, +let mouseX = 0, mouseY = 0, windowHalfWidth: number, windowHalfHeight: number; @@ -31,7 +28,7 @@ export const initStage = () => { export const initScene = () => { scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x010102, 1, 3000); - scene.add( new THREE.AmbientLight( 0xcccccc ) ); + scene.add( new THREE.AmbientLight( 0x000000 ) ); renderer = new THREE.WebGLRenderer({ @@ -56,11 +53,7 @@ export const initCamera = () => { camera.position.z = 800; } -export const initCanvas = () => { - graphicCanvas = document.createElement('canvas'); - graphicCanvas.width = canvasWidth; - graphicCanvas.height = canvasHeight; -} + //----------------------------------------------------------------------- diff --git a/src/components/three-radar-chart/animation-loop.ts b/src/components/three-radar-chart/animation-loop.ts new file mode 100644 index 0000000..e5307e7 --- /dev/null +++ b/src/components/three-radar-chart/animation-loop.ts @@ -0,0 +1,9 @@ +import {renderWithPostProcess} from "./post-process.ts"; +import {sceneAnimation} from "./scene.ts"; + + +export const animate = () => { + requestAnimationFrame(animate); + sceneAnimation(); + renderWithPostProcess(); +} \ No newline at end of file diff --git a/src/components/three-radar-chart/index.ts b/src/components/three-radar-chart/index.ts new file mode 100644 index 0000000..41f2c94 --- /dev/null +++ b/src/components/three-radar-chart/index.ts @@ -0,0 +1,17 @@ +import {initCamera, initScene, initStage, renderer} from "./scene.ts"; +import {animate} from "./animation-loop.ts"; +import {initRadar, TechUsage} from "./radar.ts"; +import {initPostProcess} from "./post-process.ts"; + +export function threeDataViewer(radarValues: TechUsage[]) { + initStage(); + initScene(); + initCamera(); + initRadar(radarValues); + initPostProcess(); + animate(); + + return renderer.domElement; +} + +//----------------------------------------------------------------------- diff --git a/src/components/three-radar-chart/label.ts b/src/components/three-radar-chart/label.ts new file mode 100644 index 0000000..fcb1de6 --- /dev/null +++ b/src/components/three-radar-chart/label.ts @@ -0,0 +1,50 @@ +import * as THREE from "three"; +import {scene} from "./scene.ts"; + +const offset = 1.35; +const labelMeshes: THREE.Mesh[] = []; + + +//----------------------------------------------------------------------- + +export const label = (label: string, spawnPoint: {x: number, y: number}) => { + const texture = createLabelTexture(label); + const labelMesh = createLabelPlane(texture); + + labelMesh.position.set(spawnPoint.x, spawnPoint.y * offset, 0); + scene.add(labelMesh); + labelMeshes.push(labelMesh); +} + +//----------------------------------------------------------------------- + +const createLabelPlane = (texture: THREE.CanvasTexture) => { + const geometry = new THREE.PlaneGeometry(2, 1); + const material = new THREE.MeshBasicMaterial({ + map: texture, + side: THREE.DoubleSide, + transparent: true, + }); + + const plane = new THREE.Mesh(geometry, material); + return plane; +} + +const createLabelTexture = (label: string) => { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d'); + const width = 256; + const height = 128; + canvas.width = width; + canvas.height = height; + + context!.fillStyle = 'white'; + context!.font = '48px Arial'; + context!.textAlign = 'center'; + context!.textBaseline = 'middle'; + context!.fillText(label, width / 2, height / 2); + + const texture = new THREE.CanvasTexture(canvas); + return texture; +} + diff --git a/src/components/three-radar-chart/post-process.ts b/src/components/three-radar-chart/post-process.ts new file mode 100644 index 0000000..14d58b3 --- /dev/null +++ b/src/components/three-radar-chart/post-process.ts @@ -0,0 +1,39 @@ +import {camera, canvasHeight, canvasWidth, renderer, scene} from "./scene.ts"; +import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; +import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; +import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; +import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; +import {Vector2} from "three"; + +let composer: EffectComposer; + +const postProcessConfigs = { + size: Vector2, + threshold: 0.6, + strength: 0.3, + radius: 0.5, + exposure: 0 +}; + + +export const initPostProcess = () => { + const renderScene = new RenderPass( scene, camera ); + + const bloomPass = new UnrealBloomPass( + new Vector2( canvasWidth, canvasHeight ), // size + postProcessConfigs.strength, // strength + postProcessConfigs.radius, // radius + postProcessConfigs.threshold // threshold + ); + + const outputPass = new OutputPass(); + + composer = new EffectComposer( renderer ); + composer.addPass( renderScene ); + composer.addPass( bloomPass ); + composer.addPass( outputPass ); +} + +export const renderWithPostProcess = () => { + composer.render(); +} diff --git a/src/components/three-radar-chart/radar.ts b/src/components/three-radar-chart/radar.ts new file mode 100644 index 0000000..636190b --- /dev/null +++ b/src/components/three-radar-chart/radar.ts @@ -0,0 +1,109 @@ +import * as THREE from "three"; +import {scene} from "./scene.ts"; +import {label} from "./label.ts"; + +const graphicSize = 1.5; + +export type TechUsage = { + technology: string, + percentage: number +} + +const triangle = [ + {x: -graphicSize, y: -graphicSize}, + {x: 0, y: graphicSize}, + {x: graphicSize, y: -graphicSize} +] + +const extrudeSettings = { + steps: 1, + depth: 0, + bevelEnabled: false, +}; + + +//----------------------------------------------------------------------- + +export const initRadar = (techs: TechUsage[]) => { + const radarSize = determineRadarSize(techs.length); + if (radarSize == undefined) { return; } + + const shape = drawShape(radarSize); + const mainMesh = buildMesh(shape, 0xffffff); + scene.add(mainMesh); + + for (let i = 0; i < 4; i++) { + createDepthMesh(shape, i); + } + + for (let i = 0; i < techs.length; i++) { + label(techs[i].technology, radarSize[i]); + } + + const valueShape = determineValueShape(techs.map(tech => tech.percentage)); + const valueMesh = buildMesh(valueShape, 0x3BFFC5); + scene.add(valueMesh); +} + +//----------------------------------------------------------------------- + +const buildMesh = (shape: THREE.Shape, shapeColor: THREE.ColorRepresentation) => { + const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); + const material = new THREE.MeshBasicMaterial({ + color: shapeColor, + wireframe: true + }); + + return new THREE.Mesh(geometry, material); +} + +const createDepthMesh = (depthShape: THREE.Shape, iteration: number) => { + const mesh = buildMesh(depthShape, 0x333333); + const size = iteration * 0.25; + const offset = 2.5; + + mesh.scale.set(size, size, size); + mesh.position.z = iteration * 0.6 - offset; + scene.add(mesh); +} + +const drawShape = (points: {x: number, y: number}[]) => { + const shape = new THREE.Shape(); + + if (points.length > 0) { + shape.moveTo(points[0].x, points[0].y); + for (let i = 1; i < points.length; i++) { + shape.lineTo(points[i].x, points[i].y); + } + shape.lineTo(points[0].x, points[0].y); + } + + return shape; +} + +const determineValueShape = (values: number[]) => { + let valueShape: {x: number, y: number}[] = []; + const score = values.map(value => ((100 - value) / 100) * graphicSize); + + valueShape = [ + {x: triangle[0].x + score[0], y: triangle[0].y + score[0]}, + {x: triangle[1].x, y: triangle[1].y - score[1]}, + {x: triangle[2].x - score[2], y: triangle[2].y + score[2]} + ]; + + return drawShape(valueShape); +} + +const determineRadarSize = (size: number) => { + if (size == 3) { + return triangle; + } + else { + console.log("Invalid number of technology. Create a new radar size or modify the number of technologies."); + return; + } +} + + + + diff --git a/src/components/three-radar-chart/scene.ts b/src/components/three-radar-chart/scene.ts new file mode 100644 index 0000000..f855479 --- /dev/null +++ b/src/components/three-radar-chart/scene.ts @@ -0,0 +1,122 @@ +import * as THREE from "three"; + +export let renderer: THREE.WebGLRenderer, + scene: THREE.Scene, + camera: THREE.PerspectiveCamera, + cameraTarget = new THREE.Vector3(0, 0 ,3.75), + canvasWidth = 185, + canvasHeight = 185; + +let isDragging = false, + previousMousePosition = { x: 0, y: 0 }, + cameraLookAt = new THREE.Vector3(0, 0, 0); + +const initialCameraPosition = new THREE.Vector3(), + initialCameraRotation = new THREE.Euler(), + initialCameraTarget = new THREE.Vector3(0, 0, 3.75), + cameraTiltLimit = 2; + +//----------------------------------------------------------------------- +export const initStage = () => { + window.addEventListener('mousemove', onMouseMove, false); + window.addEventListener('mouseup', onMouseUp, false); +} + +export const initScene = () => { + scene = new THREE.Scene(); + //scene.fog = new THREE.Fog(0x010102, 1, 10); + createBackdrop(); + + renderer = new THREE.WebGLRenderer({ + antialias: true + }); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(canvasWidth, canvasHeight); + renderer.setClearColor(0x000000, 1); + + renderer.domElement.addEventListener('mousedown', onMouseDown, false); +} + +export const initCamera = () => { + const fieldOfView = 75; + const aspectRatio = canvasWidth / canvasHeight; + const nearPlane = 1; + const farPlane = 30000; + camera = new THREE.PerspectiveCamera( + fieldOfView, + aspectRatio, + nearPlane, + farPlane); + camera.position.z = 3.75; + + initialCameraPosition.copy(camera.position); + initialCameraRotation.copy(camera.rotation); +} + +export const sceneAnimation = () => { + if (!isDragging) { + cameraTarget.lerp(initialCameraTarget, 0.1); + } + + camera.position.lerp(cameraTarget, 0.2); + camera.lookAt(cameraLookAt); +} + +//----------------------------------------------------------------------- + +const createBackdrop = () => { + const geometry = new THREE.PlaneGeometry(100, 100); + const material = new THREE.MeshStandardMaterial({ + color: 0xffffff, + }); + const mesh = new THREE.Mesh(geometry, material); + + const light1 = new THREE.PointLight( 0xffffff, 5 ); + light1.position.set( 0, -5, -3 ); + scene.add( light1 ); + + mesh.position.z = -16; + scene.add(mesh); +} + +const onMouseDown = (event: MouseEvent) => { + isDragging = true; + previousMousePosition = { + x: event.clientX, + y: event.clientY + }; +} + +const onMouseMove = (event: MouseEvent) => { + if (isDragging) { + const deltaMove = { + x: event.clientX - previousMousePosition.x, + y: event.clientY - previousMousePosition.y + }; + + const moveSpeed = 0.01; + const offsetX = deltaMove.x * moveSpeed; + const offsetY = deltaMove.y * moveSpeed; + + cameraTarget.x += offsetX; + cameraTarget.y -= offsetY; + + cameraTarget.clamp( + new THREE.Vector3(-cameraTiltLimit, -cameraTiltLimit, cameraTarget.z), + new THREE.Vector3(cameraTiltLimit, cameraTiltLimit, cameraTarget.z) + ); + + camera.lookAt(cameraTarget); + + previousMousePosition = { + x: event.clientX, + y: event.clientY + }; + } +} + +const onMouseUp = () => { + isDragging = false; +} + + diff --git a/src/components/thumbnail-project/index.ts b/src/components/thumbnail-project/index.ts new file mode 100644 index 0000000..a127cbe --- /dev/null +++ b/src/components/thumbnail-project/index.ts @@ -0,0 +1,55 @@ +import './styles.css'; +import {EVENT_BUS} from "../../core"; + + +export type thumbnailContent = { + readonly thumbnail: string; + readonly title: string; + readonly summary: string; + readonly tag: string; + readonly thumbnailColor: string; + readonly path: string; +} + +//----------------------------------------------------------------------- + +export function projectThumbnail(content: thumbnailContent, showcase: boolean) { + const itemBox = document.createElement('li'); + const itemThumbnail = document.createElement('img'); + const itemTitle = document.createElement('h5'); + const itemTag = document.createElement('p'); + const hoverBox = document.createElement('div'); + const projectLink = document.createElement('a'); + const itemSummary = document.createElement('p'); + const clearFix = document.createElement('div'); + + itemBox.id = 'item-box'; + itemBox.style.backgroundColor = content.thumbnailColor; + itemTag.className = 'tag'; + hoverBox.className = 'hover-box'; + clearFix.className = 'clearfix'; + + if (showcase) { + itemBox.className += 'showcase'; + } + + itemThumbnail.src = content.thumbnail; + itemTitle.textContent = content.title; + itemTag.textContent = content.tag; + itemSummary.textContent = content.summary; + projectLink.textContent = "View Project"; + + itemBox.appendChild(itemTitle); + itemBox.appendChild(itemTag); + hoverBox.appendChild(itemSummary); + hoverBox.appendChild(projectLink); + itemBox.appendChild(hoverBox); + itemBox.appendChild(itemThumbnail); + itemBox.appendChild(clearFix); + + itemBox.addEventListener('click', () => { + EVENT_BUS.dispatch('page_navigation', { pageReference: 'interactive/' + content.path }); + }); + + return itemBox; +} \ No newline at end of file diff --git a/src/components/thumbnail-project/styles.css b/src/components/thumbnail-project/styles.css new file mode 100644 index 0000000..3270a29 --- /dev/null +++ b/src/components/thumbnail-project/styles.css @@ -0,0 +1,104 @@ +ul { + width: 100%; + list-style-type: none; + margin: 0; + padding: 0; +} + +#item-box { + width: 31%; + margin-right: 1%; + height: 265px; + color: white; + float: left; + overflow: hidden; + position: relative; + box-sizing: border-box; + padding: 30px 25px; + border-radius: 10px; +} + +#item-box img { + position: absolute; + bottom: -10%; + right: 0; + width: 100%; + height: auto; + z-index: 1; + transition: filter 0.3s; +} + +#item-box h5, #item-box p, #item-box a { + position: relative; + z-index: 2; +} + +#item-box h5 { + font-family: Cabin, sans-serif; + color: white; + text-transform: lowercase; + font-size: 2.25em; + line-height: 75%; + font-weight: bold; + margin: 0; +} + +#item-box .tag { + font-family: "Handjet", serif; + text-transform: lowercase; + font-size: 1em; + font-weight: bold; + color: #505050; + margin-top: 10px; +} + +#item-box p { + color: white; + font-size: 1em; +} + +#item-box a { + display: block; + width: 100%; + font-family: "Handjet", serif; + font-size: 1.2em; + padding: 20px 0; + border-radius: 0 0 5px 5px; + border: none; + color: white; + text-decoration: none; + font-weight: bold; + text-transform: uppercase; + text-align: center; + background-color: #FF523B; +} + +#item-box .hover-box { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + transform: translateY(100%); + transition: transform 0.3s; + z-index: 20; +} + +#item-box .hover-box p { + padding: 10px 25px; +} + +.clearfix { + clear: both; +} + +#item-box:hover { + cursor: pointer; +} + +#item-box:hover img { + filter: blur(25px); +} + +#item-box:hover .hover-box { + transform: translateY(0); +} \ No newline at end of file diff --git a/src/components/thumbnail/index.ts b/src/components/thumbnail/index.ts deleted file mode 100644 index f9a0f21..0000000 --- a/src/components/thumbnail/index.ts +++ /dev/null @@ -1,51 +0,0 @@ -import './styles.css'; -import {EventBus} from "../../event-bus"; -import {Events} from "../../consts/events"; -import {handlers} from "../../consts/handlers"; - -const EVENT_BUS = new EventBus(); -EVENT_BUS.subscribe('page_navigation', handlers.page_navigation); - -export type thumbnailContent = { - readonly thumbnail: string; - readonly title: string; - readonly description: string; - readonly tags: string[]; - readonly path: string; -} - -//----------------------------------------------------------------------- - -export function createThumbnail(content: thumbnailContent, showcase: boolean) { - const itemBox = document.createElement('li'); - const itemThumbnail = document.createElement('img'); - const itemTexts = document.createElement('div'); - const itemTitle = document.createElement('h5'); - const itemDescription = document.createElement('p'); - const itemCategory = document.createElement('p'); - const clearFix = document.createElement('div'); - - itemBox.className = 'item-box'; - itemTexts.className = 'item-texts'; - itemDescription.className = 'description' - clearFix.className = 'clearfix'; - - if (showcase) { - itemBox.className += '-showcase'; - } - - itemThumbnail.src = content.thumbnail; - itemTitle.textContent = content.title; - itemDescription.textContent = content.description; - - itemBox.appendChild(itemThumbnail); - itemBox.appendChild(itemTexts); - itemTexts.appendChild(itemTitle); - itemTexts.appendChild(itemDescription); - itemTexts.appendChild(itemCategory); - itemBox.appendChild(clearFix); - - itemThumbnail.addEventListener('click', () => EVENT_BUS.dispatch('page_navigation', {path: "Button A", pageReference: content.path})); - - return itemBox; -} \ No newline at end of file diff --git a/src/components/thumbnail/styles.css b/src/components/thumbnail/styles.css deleted file mode 100644 index f9a081b..0000000 --- a/src/components/thumbnail/styles.css +++ /dev/null @@ -1,43 +0,0 @@ -ul { - width: 100%; - list-style-type: none; - margin: 0; - padding: 0; -} - -.item-box { - width: 100%; - color: white; - border-bottom: 1px solid #1D1D1D; - padding-bottom: 25px; - margin-bottom: 25px; - - img { - border-radius: 5px; - border: 2px solid #141414; - float: left; - width: 25%; - } - - .item-texts { - float: left; - width: 65%; - padding-left: 5%; - } - - h5 { - font-family: "Handjet", serif; - font-size: 2em; - font-weight: 600; - margin: 0; - } - - .description { - - } - - .clearfix { - clear: both; - } -} - diff --git a/src/components/vertical-nav/index.ts b/src/components/vertical-nav/index.ts index bb9e89e..3e0c6d5 100644 --- a/src/components/vertical-nav/index.ts +++ b/src/components/vertical-nav/index.ts @@ -11,7 +11,6 @@ const linkedinProfile: string = "https://www.linkedin.com/in/charlesdouc/" const instagramProfile: string = "https://www.instagram.com/charlesdouc/" const footerCopyrights: string = "© 2025 Charles Doucet - All Rights Reserved"; - type SocialLink = [ path: string, image: string, @@ -23,25 +22,23 @@ const FOO_SOCIALS: SocialLink[] = [ [instagramProfile, instagramIcon] ] - //----------------------------------------------------------------------- export function buildVerticalNav() { const navBox = document.createElement("div"); - const navWrapper = document.createElement("div"); + const navHeader = header(); const navBreadcrumbs = document.createElement("div"); const navInfo = document.createElement("div"); + const navFooter = footer(); navBox.id = "vertical-nav"; - navWrapper.id = "nav-wrapper"; navBreadcrumbs.id = "nav-breadcrumbs"; navInfo.id = "nav-info"; - navBox.appendChild(header()); - navBox.appendChild(navWrapper); - navWrapper.appendChild(navBreadcrumbs); - navWrapper.appendChild(navInfo); - navBox.appendChild(footer()); + navBox.appendChild(navHeader); + navHeader.appendChild(navBreadcrumbs); + navBox.appendChild(navInfo); + navBox.appendChild(navFooter); return navBox; } @@ -58,7 +55,7 @@ export function renderNavInfo(info: HTMLElement) { //----------------------------------------------------------------------- -function header() { +const header = () => { const container = document.createElement("div"); const topTriangle = document.createElement("div"); const logo = document.createElement("div"); @@ -83,7 +80,7 @@ function header() { } -function footer() { +const footer = () => { const container = document.createElement("div"); const socials = document.createElement("ul"); const copyrights = document.createElement("p"); diff --git a/src/components/vertical-nav/info-project.ts b/src/components/vertical-nav/info-project.ts index e12255e..0f6d00d 100644 --- a/src/components/vertical-nav/info-project.ts +++ b/src/components/vertical-nav/info-project.ts @@ -1,34 +1,26 @@ -import {renderer} from "./project-data-cube.ts"; +import {threeDataViewer} from "../three-radar-chart"; +import {TechUsage} from "../three-radar-chart/radar.ts"; -export type OutsideLink = [ - name: string, - path: string, -] - -export type LinkCollection = [ - title: string, - links: OutsideLink[], -] -export type LinkButton = [ +export type ButtonLink = [ label: string, + path: string, + highlight: boolean, ] //----------------------------------------------------------------------- -export function projectInfo(collections: LinkCollection[], buttons: LinkButton[]) { +export function projectInfo(buttons: ButtonLink[], techs: TechUsage[]) { const container = document.createElement('div'); - container.className = "project-info"; - container.appendChild(dataSection()); + const buttonList = document.createElement('ul'); - collections.forEach(collection => { - const [title, links] = collection; - container.appendChild(linkSection(title, links)); - }) + container.className = "project-info"; + buttonList.className = "button-list"; + container.appendChild(dataSection(techs)); + container.appendChild(buttonList); buttons.forEach(button => { - const [label] = button; - container.appendChild(buttonSection(label)); + buttonList.appendChild(createButton(button)); }) return container; @@ -36,51 +28,32 @@ export function projectInfo(collections: LinkCollection[], buttons: LinkButton[] //----------------------------------------------------------------------- -function linkSection(title: string, links: OutsideLink[]) { - const section = document.createElement('section'); - const sectionTitle = document.createElement("h4"); - const linkList = document.createElement('ul'); - - sectionTitle.textContent = title; - - section.appendChild(sectionTitle); - section.appendChild(linkList); - - links.forEach(link => { - const [name, path] = link; - const linkLine = document.createElement('li'); - const linkElement = document.createElement("a"); - - linkElement.href = path; - linkElement.target = "_blank"; - linkElement.textContent = name; - - linkList.appendChild(linkLine); - linkLine.appendChild(linkElement); - }) - - return section; -} -function buttonSection(label: string) { - const section = document.createElement('section'); - const buttonLine = document.createElement('button'); +function createButton(newButton: ButtonLink) { + const btn = document.createElement('li'); + const btnLine = document.createElement('a'); + const [label, path, highlight] = newButton; - buttonLine.type = "button"; - buttonLine.textContent = label; + if (highlight) { + btn.className = "btn-highlight"; + } - section.appendChild(buttonLine); + btnLine.type = "button"; + btnLine.textContent = label; + btnLine.href = path; + btnLine.target = "_blank"; - return section; + btn.appendChild(btnLine); + return btn; } -function dataSection() { +function dataSection(newTechRadar: TechUsage[]) { const detailSection = document.createElement("section"); const detailTitle = document.createElement("h4"); - detailTitle.textContent = "Tech Distribution"; + detailTitle.textContent = "Made with"; detailSection.appendChild(detailTitle); - detailSection.appendChild(renderer.domElement); + detailSection.appendChild(threeDataViewer(newTechRadar)); return detailSection; } diff --git a/src/components/vertical-nav/project-data-cube.ts b/src/components/vertical-nav/project-data-cube.ts deleted file mode 100644 index 355919e..0000000 --- a/src/components/vertical-nav/project-data-cube.ts +++ /dev/null @@ -1,30 +0,0 @@ -import * as THREE from 'three'; - -// TO REVIEW -// @ts-ignore -import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"; - -const scene = new THREE.Scene(); -const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 ); - -export const renderer = new THREE.WebGLRenderer(); -renderer.setSize( 230, 230 ); -renderer.setAnimationLoop( animate ); - -const geometry = new THREE.BoxGeometry( 1, 1, 1 ); -const material = new THREE.MeshBasicMaterial( { color: 0x111111 } ); -const cube = new THREE.Mesh( geometry, material ); - -const controls = new OrbitControls( camera, renderer.domElement ); -scene.add( cube ); - -camera.position.z = 2; -controls.panSpeed = 0; -controls.rotateSpeed = 0.5; -controls.update(); - -//----------------------------------------------------------------------- - -function animate() { - renderer.render( scene, camera ); -} \ No newline at end of file diff --git a/src/components/vertical-nav/styles.css b/src/components/vertical-nav/styles.css index c93647b..b6550ff 100644 --- a/src/components/vertical-nav/styles.css +++ b/src/components/vertical-nav/styles.css @@ -1,18 +1,75 @@ #vertical-nav { position: fixed; - top: 0; - left: 0; - width: 300px; - height: 100%; - background-color: #080808; - box-shadow: 0 0 0 16px rgba(8,8,8,0.5), 0 0 0 8px rgba(8,8,8,0.5); + top: 60px; + left: 30px; + width: 215px; + + .header { + background-color: #101010; + border-radius: 15px; + padding: 0 0 5px 0; + box-shadow: #030303 0px 0px 56px 0px; + + + .top-triangle { + position: relative; + width: 100%; + height: 100px; + clip-path: polygon(0 0, 100% 0, 0 100%); + background-color: #3BFFC5; + z-index: 1; + border-radius: 15px 15px 0 0; + } + + .info { + text-align: center; + margin-top: -85px; + } + + .icon { + position: relative; + width: 96px; + image-rendering: pixelated; + z-index: 2; + } + + h5 { + font-family: "Handjet", serif; + color: white; + margin: 0; + font-weight: 300; + font-size: 3em; + } + } + + #nav-info { + margin-top: 20px; + width: 100%; + background-color: #101010; + box-shadow: #030303 0px 0px 56px 0px; + border-radius: 15px; + + .project-info { + padding: 20px 15px; + } + + canvas { + width: 100%; + height: 100%; + border-radius: 5px; + } + + canvas:hover { + cursor: pointer; + } + + canvas:active { + cursor: grabbing; + } - #nav-wrapper { - width: 230px; - margin: 0 auto; section { - padding: 0 0 30px 0; + padding: 10px 0; h4 { font-family: "Cabin", sans-serif; @@ -23,198 +80,76 @@ margin: 0 0 15px 0; padding: 0; } + } - ul { - list-style-type: none; - padding: 0; - margin: 0; - list-style-position: inside; - } + .button-list { + list-style-type: none; + padding: 0; li { - display: block; - line-height: 150%; - font-family: "handjet", serif; - font-size: 1.1em; - font-weight: 500; - color: white; - } + margin: 5px 0; - a { - color: #a1a1a1; - text-decoration-color: #3BFFC5; } - button { + a { + display: block; width: 100%; - color: white; font-family: "Handjet", serif; - font-size: 1.5em; - font-weight: bold; - text-transform: uppercase; + font-size: 1.2em; padding: 10px 0; - background-color: #FF523B; border-radius: 5px; border: none; + color: white; + text-decoration: none; + font-weight: bold; + text-transform: uppercase; + text-align: center; + background-color: #252525; } - } - } - .top-triangle { - position: relative; - width: 100%; - height: 100px; - clip-path: polygon(0 0, 100% 0, 0 100%); - background-color: #3BFFC5; - z-index: -1; - } - - .info { - text-align: center; - margin-top: -85px; - } - - .icon { - width: 96px; - image-rendering: pixelated; + .btn-highlight a { + background-color: #FF523B; + } + } } - h5 { - font-family: "Handjet", serif; - color: white; - margin: 0; - font-weight: 300; - font-size: 3em; - } .nav-footer { - position: absolute; - bottom: 10px; + margin-top: 20px; width: 100%; text-align: center; color: white; font-family: "Cabin", sans-serif; - } - - .socials { - list-style-type: none; - margin: 0; - padding: 0; - } - .socials li { - display: inline-block; - width: 17px; - margin: 0 5px; - } - - .socials li:hover { - opacity: 0.5; - } - - .socials img { - color: white; - z-index: 500; - - } - - .copyrights { - font-size: 0.6em; - color: #a1a1a1; - } - - .button-container { - width: 100%; - } - - .button { - width: 100%; - height: 50px; - color: black; - } - - .breadcrumbs-nav { - list-style-type: none; - margin: 0; - padding: 0; - } - - .breadcrumbs-nav h3 { - font-family: "Cabin", sans-serif; - color: #a1a1a1; - font-weight: bold; - text-transform: uppercase; - margin: 15px 0 5px 0; - padding: 0; - } - - .breadcrumbs-nav ul { - list-style-type: none; - margin: 0; - padding: 0; - } - - .breadcrumbs-nav li { - display: inline-block; - margin: 0 5px; - line-height: 210%; - color: white; - font-family: "handjet", serif; - } - - .breadcrumbs-nav li a { - font-family: "handjet", serif; - font-weight: 700; - text-decoration: none; - color: black; - padding: 4px 6px; - margin-right: 5px; - - } - - .breadcrumbs-nav li:last-child { - a { - color: white; - } - span { - display: none; + .socials { + list-style-type: none; + margin: 0; + padding: 0; } - } - - .detail-section { - padding: 15px 0; - } + .socials li { + display: inline-block; + width: 17px; + margin: 0 5px; + } - .detail-section h4 { - font-family: "Cabin", sans-serif; - color: white; - text-transform: uppercase; - font-weight: bold; - font-size: 1em; - } + .socials li:hover { + opacity: 0.5; + } - .detail-section ul { - list-style-type: none; - padding: 0; - margin: 0; - } + .socials img { + color: white; + z-index: 500; - .detail-section ul li { - font-family: "Cabin", sans-serif; - font-size: 0.9em; - } + } - .detail-section ul li a { - color: #a1a1a1; - } + .copyrights { + font-size: 0.6em; + color: #a1a1a1; + } - .detail-section p { - font-family: "Cabin", sans-serif; - color: #a1a1a1; - font-size: 0.9em; - line-height: 45%; + .button-container { + width: 100%; + } } - -} - +} \ No newline at end of file diff --git a/src/consts/events/index.ts b/src/consts/events/index.ts deleted file mode 100644 index 059ff12..0000000 --- a/src/consts/events/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./events"; \ No newline at end of file diff --git a/src/consts/handlers/handlers.ts b/src/consts/handlers/handlers.ts deleted file mode 100644 index 616a96b..0000000 --- a/src/consts/handlers/handlers.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {Events} from "../events"; -import {buildProjectPage} from "../../content/projects"; - -export const handlers = { - page_navigation: (value: Events['page_navigation']): void => { - buildProjectPage(value.pageReference); - }, -}; \ No newline at end of file diff --git a/src/consts/handlers/index.ts b/src/consts/handlers/index.ts deleted file mode 100644 index c7db3bf..0000000 --- a/src/consts/handlers/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./handlers"; \ No newline at end of file diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-1.png b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-1.png new file mode 100644 index 0000000..a2e4ad7 Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-1.png differ diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-2.png b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-2.png new file mode 100644 index 0000000..954932a Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-2.png differ diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-3.png b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-3.png new file mode 100644 index 0000000..d786821 Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-3.png differ diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-4.png b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-4.png new file mode 100644 index 0000000..e32dbbf Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-screenshot-4.png differ diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-showcase.mp4 b/src/content/projects/gbjam-12/assets/gbjam-12-showcase.mp4 new file mode 100644 index 0000000..228ec9c Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-showcase.mp4 differ diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-showcase.webm b/src/content/projects/gbjam-12/assets/gbjam-12-showcase.webm new file mode 100644 index 0000000..3a3602e Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-showcase.webm differ diff --git a/src/content/projects/gbjam-12/assets/gbjam-12-thumbnail.png b/src/content/projects/gbjam-12/assets/gbjam-12-thumbnail.png new file mode 100644 index 0000000..eba1a76 Binary files /dev/null and b/src/content/projects/gbjam-12/assets/gbjam-12-thumbnail.png differ diff --git a/src/content/projects/gbjam-12/index.ts b/src/content/projects/gbjam-12/index.ts new file mode 100644 index 0000000..3d7536f --- /dev/null +++ b/src/content/projects/gbjam-12/index.ts @@ -0,0 +1,55 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/gbjam-12-showcase.webm"; +import SHOWCASE_MP4 from "./assets/gbjam-12-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/gbjam-12-screenshot-1.png" +import SCREENSHOT_2 from "./assets/gbjam-12-screenshot-2.png" +import SCREENSHOT_3 from "./assets/gbjam-12-screenshot-3.png" +import SCREENSHOT_4 from "./assets/gbjam-12-screenshot-4.png" + +import THUMBNAIL from "./assets/gbjam-12-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "GBJAM-12", // Title + "Game Release - September 2024", // Subtitle + "Hide in perspective", // Tagline + + // Paragraphs + [ + "A covert game that adopts a 2D perspective from above and the side, with a retro Game Boy-esque aesthetic and constraints." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Godot", percentage: 80}, + {technology: "Aseprite", percentage: 70}, + {technology: "Figma", percentage: 10} + ], + + //Buttons + [ + ["Play it online", "https://cd-bash.itch.io/cd-yesterday-at-823-pm-pumpys-spooky-worlds", true], + ["Access the Repo", "https://github.com/cd-bash/GBJAM-12", false] + ], + + // Thumbnail + THUMBNAIL, + "Game submission for the Game Boy Jam.", + "Game Release", + "#10140C", + "gbjam-12", + + // Credits + [ + ["Kevin Chiasson", "#"], + ["Jean-Philippe Dandeneault", "#"], + ["Félix Gagné", "#"], + ], +); \ No newline at end of file diff --git a/src/content/projects/index.ts b/src/content/projects/index.ts index a4b99cb..e255a8b 100644 --- a/src/content/projects/index.ts +++ b/src/content/projects/index.ts @@ -1,16 +1,43 @@ -import {projectView} from "../../views/project-view"; +import {projectView, renderView} from "../../views"; import {projectInfo} from "../../components/vertical-nav/info-project.ts"; -import {renderView} from "../../views/utils"; import {renderBreadcrumbs, renderNavInfo} from "../../components/vertical-nav"; -import {createThumbnail} from "../../components/thumbnail"; +import {projectThumbnail} from "../../components/thumbnail-project"; import {BreadcrumbCategory, breadcrumbs, BreadcrumbsLink} from "../../components/breadcrumbs"; +import {interactiveView} from "../../views/interactive.ts"; +import * as gbjam12 from "./gbjam-12"; import * as spaceCompass from "./space-compass"; - +import * as nextUx from "./next-ux"; +import * as voxcoIdentity from "./voxco-identity"; +import * as spaceProgram from "./space-program"; +import * as interval from "./interval"; +import * as kiriko from "./kiriko"; +import * as specter from "./specter"; +import * as tank from "./tank"; +import * as youAreTwo from "./you-are-two"; +import * as typograzoo from "./typograzoo"; +import * as literal from "./literal"; +import * as swanLake from "./swan-lake"; +import * as theFall from "./the-fall"; +import * as switcher from "./switcher"; const pageReferences: { [key: string]: any } = { + "gbjam-12": gbjam12, + "next-ux": nextUx, "space-compass": spaceCompass, + "voxco-identity": voxcoIdentity, + "space-program": spaceProgram, + "interval": interval, + "kiriko": kiriko, + "specter": specter, + "tank": tank, + "you-are-two": youAreTwo, + "typograzoo": typograzoo, + "literal": literal, + "swan-lake": swanLake, + "the-fall": theFall, + "switcher": switcher }; @@ -24,21 +51,32 @@ export function buildProjectPage(pageReference: string) { console.error(`Project page reference "${pageReference}" not found.`); return; } - const viewContent = projectView(page!.content); - const navInfo = projectInfo(page!.linkSections, page!.buttons); + const { content, techs, buttons } = page; + const viewContent = projectView(content); + const navInfo = projectInfo(buttons, techs); - renderBreadcrumbs(breadcrumbs(trackBreadcrumbs(page!.content.title))); + renderBreadcrumbs(breadcrumbs(trackBreadcrumbs(content.title))); renderNavInfo(navInfo); renderView(viewContent); } +export function buildInteractivePage() { + const viewContent = interactiveView(); + + renderView(viewContent); + +} + export function buildThumbnailList() { const list = document.createElement('ul'); + const pages = Object.values(pageReferences); - Object.values(pageReferences).forEach((page: any) => { - const item = createThumbnail(page.thumbnail, false); + + for (let i = 0; i < pages.length; i++) { + const { thumbnail } = pages[i]; + const item = projectThumbnail(thumbnail, false); list.appendChild(item); - }); + } return list; } diff --git a/src/content/projects/interval/assets/interval-screenshot-1.jpg b/src/content/projects/interval/assets/interval-screenshot-1.jpg new file mode 100644 index 0000000..a76bf34 Binary files /dev/null and b/src/content/projects/interval/assets/interval-screenshot-1.jpg differ diff --git a/src/content/projects/interval/assets/interval-screenshot-2.jpg b/src/content/projects/interval/assets/interval-screenshot-2.jpg new file mode 100644 index 0000000..ef56c44 Binary files /dev/null and b/src/content/projects/interval/assets/interval-screenshot-2.jpg differ diff --git a/src/content/projects/interval/assets/interval-screenshot-3.jpg b/src/content/projects/interval/assets/interval-screenshot-3.jpg new file mode 100644 index 0000000..79f2f21 Binary files /dev/null and b/src/content/projects/interval/assets/interval-screenshot-3.jpg differ diff --git a/src/content/projects/interval/assets/interval-screenshot-4.jpg b/src/content/projects/interval/assets/interval-screenshot-4.jpg new file mode 100644 index 0000000..7555304 Binary files /dev/null and b/src/content/projects/interval/assets/interval-screenshot-4.jpg differ diff --git a/src/content/projects/interval/assets/interval-showcase.mp4 b/src/content/projects/interval/assets/interval-showcase.mp4 new file mode 100644 index 0000000..7430a57 Binary files /dev/null and b/src/content/projects/interval/assets/interval-showcase.mp4 differ diff --git a/src/content/projects/interval/assets/interval-showcase.webm b/src/content/projects/interval/assets/interval-showcase.webm new file mode 100644 index 0000000..0398f4e Binary files /dev/null and b/src/content/projects/interval/assets/interval-showcase.webm differ diff --git a/src/content/projects/interval/assets/interval-thumbnail.png b/src/content/projects/interval/assets/interval-thumbnail.png new file mode 100644 index 0000000..f8a2d1c Binary files /dev/null and b/src/content/projects/interval/assets/interval-thumbnail.png differ diff --git a/src/content/projects/interval/index.ts b/src/content/projects/interval/index.ts new file mode 100644 index 0000000..b3b9b27 --- /dev/null +++ b/src/content/projects/interval/index.ts @@ -0,0 +1,48 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/interval-showcase.webm"; +import SHOWCASE_MP4 from "./assets/interval-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/interval-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/interval-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/interval-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/interval-screenshot-4.jpg" + +import THUMBNAIL from "./assets/interval-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Interval", // Title + "Game Prototype - Spring 2019", // Subtitle + "What if you can feel time?", // Tagline + + // Paragraphs + [ + "In Interval, players can travel to another dimension, capturing the present moment. However, defying natural laws comes with consequences." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 80}, + {technology: "Blender", percentage: 80}, + {technology: "Substance", percentage: 60} + ], + + //Buttons + [ + ["Process Journal", "https://github.com/cd-bash/Independent-Study/wiki", true], + ["Access the Repo", "https://github.com/cd-bash/Independent-Study", false] + ], + + // Thumbnail + THUMBNAIL, + "Use a time device to stop motion.", + "Game Prototype", + "#010010", + "interval" +); \ No newline at end of file diff --git a/src/content/projects/kiriko/assets/kiriko-screenshot-1.jpg b/src/content/projects/kiriko/assets/kiriko-screenshot-1.jpg new file mode 100644 index 0000000..4f96966 Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-screenshot-1.jpg differ diff --git a/src/content/projects/kiriko/assets/kiriko-screenshot-2.jpg b/src/content/projects/kiriko/assets/kiriko-screenshot-2.jpg new file mode 100644 index 0000000..07d07c2 Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-screenshot-2.jpg differ diff --git a/src/content/projects/kiriko/assets/kiriko-screenshot-3.jpg b/src/content/projects/kiriko/assets/kiriko-screenshot-3.jpg new file mode 100644 index 0000000..d764a51 Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-screenshot-3.jpg differ diff --git a/src/content/projects/kiriko/assets/kiriko-screenshot-4.jpg b/src/content/projects/kiriko/assets/kiriko-screenshot-4.jpg new file mode 100644 index 0000000..b4118fd Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-screenshot-4.jpg differ diff --git a/src/content/projects/kiriko/assets/kiriko-showcase.mp4 b/src/content/projects/kiriko/assets/kiriko-showcase.mp4 new file mode 100644 index 0000000..7378bed Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-showcase.mp4 differ diff --git a/src/content/projects/kiriko/assets/kiriko-showcase.webm b/src/content/projects/kiriko/assets/kiriko-showcase.webm new file mode 100644 index 0000000..933aab9 Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-showcase.webm differ diff --git a/src/content/projects/kiriko/assets/kiriko-thumbnail.png b/src/content/projects/kiriko/assets/kiriko-thumbnail.png new file mode 100644 index 0000000..f91d561 Binary files /dev/null and b/src/content/projects/kiriko/assets/kiriko-thumbnail.png differ diff --git a/src/content/projects/kiriko/index.ts b/src/content/projects/kiriko/index.ts new file mode 100644 index 0000000..8c22100 --- /dev/null +++ b/src/content/projects/kiriko/index.ts @@ -0,0 +1,56 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/kiriko-showcase.webm"; +import SHOWCASE_MP4 from "./assets/kiriko-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/kiriko-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/kiriko-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/kiriko-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/kiriko-screenshot-4.jpg" + +import THUMBNAIL from "./assets/kiriko-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Kiriko", // Title + "Immersive Experience - Fall 2018", // Subtitle + "A VR Installation", // Tagline + + // Paragraphs + [ + "Users wear VR headsets, passively observing the environment’s evolution. Another participant makes modifications, manipulating a tangible interface to alter the virtual world." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 90}, + {technology: "Illustrator", percentage: 75}, + {technology: "Build", percentage: 55} + ], + + //Buttons + [ + ["LABEL", "LINK", true], + ["LABEL", "LINK", false] + ], + + // Thumbnail + THUMBNAIL, + "SUMMARY", + "Immersive Experience", + "#0D0328", + "kiriko", + + // Credits + [ + ["Ali Egseem", "#"], + ["Valerie Bourdon", "https://www.instagram.com/valeriebourdon_/"], + ["Michaël Petitclerc", "#"], + ["Codrin Mihail", "https://codrinmihail.com/"], + ] +); \ No newline at end of file diff --git a/src/content/projects/literal/assets/literal-screenshot-1.jpg b/src/content/projects/literal/assets/literal-screenshot-1.jpg new file mode 100644 index 0000000..c8bcd0f Binary files /dev/null and b/src/content/projects/literal/assets/literal-screenshot-1.jpg differ diff --git a/src/content/projects/literal/assets/literal-screenshot-2.jpg b/src/content/projects/literal/assets/literal-screenshot-2.jpg new file mode 100644 index 0000000..50dbbd6 Binary files /dev/null and b/src/content/projects/literal/assets/literal-screenshot-2.jpg differ diff --git a/src/content/projects/literal/assets/literal-screenshot-3.jpg b/src/content/projects/literal/assets/literal-screenshot-3.jpg new file mode 100644 index 0000000..7114f7d Binary files /dev/null and b/src/content/projects/literal/assets/literal-screenshot-3.jpg differ diff --git a/src/content/projects/literal/assets/literal-screenshot-4.jpg b/src/content/projects/literal/assets/literal-screenshot-4.jpg new file mode 100644 index 0000000..31faff5 Binary files /dev/null and b/src/content/projects/literal/assets/literal-screenshot-4.jpg differ diff --git a/src/content/projects/literal/assets/literal-showcase.mp4 b/src/content/projects/literal/assets/literal-showcase.mp4 new file mode 100644 index 0000000..2ebe9d1 Binary files /dev/null and b/src/content/projects/literal/assets/literal-showcase.mp4 differ diff --git a/src/content/projects/literal/assets/literal-showcase.webm b/src/content/projects/literal/assets/literal-showcase.webm new file mode 100644 index 0000000..3ee2493 Binary files /dev/null and b/src/content/projects/literal/assets/literal-showcase.webm differ diff --git a/src/content/projects/literal/assets/literal-thumbnail.png b/src/content/projects/literal/assets/literal-thumbnail.png new file mode 100644 index 0000000..5945763 Binary files /dev/null and b/src/content/projects/literal/assets/literal-thumbnail.png differ diff --git a/src/content/projects/literal/index.ts b/src/content/projects/literal/index.ts new file mode 100644 index 0000000..ecf0539 --- /dev/null +++ b/src/content/projects/literal/index.ts @@ -0,0 +1,47 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/literal-showcase.webm"; +import SHOWCASE_MP4 from "./assets/literal-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/literal-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/literal-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/literal-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/literal-screenshot-4.jpg" + +import THUMBNAIL from "./assets/literal-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Literal", // Title + "Game prototype - Fall 2017", // Subtitle + "Physics engine for words", // Tagline + + // Paragraphs + [ + "I incorporated typographic elements into a simulated environment, allowing them to respond to physics and player interactions." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 80}, + {technology: "Photoshop", percentage: 10}, + {technology: "Illustrator", percentage: 60} + ], + + //Buttons + [ + ["Try it online", "LINK", true], + ], + + // Thumbnail + THUMBNAIL, + "Typography in physics-based environments.", + "Game prototype", + "#F05924", + "literal" +); \ No newline at end of file diff --git a/src/content/projects/next-ux/assets/next-ux-screenshot-1.jpg b/src/content/projects/next-ux/assets/next-ux-screenshot-1.jpg new file mode 100644 index 0000000..2d4ff2d Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-screenshot-1.jpg differ diff --git a/src/content/projects/next-ux/assets/next-ux-screenshot-2.jpg b/src/content/projects/next-ux/assets/next-ux-screenshot-2.jpg new file mode 100644 index 0000000..e2f647f Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-screenshot-2.jpg differ diff --git a/src/content/projects/next-ux/assets/next-ux-screenshot-3.jpg b/src/content/projects/next-ux/assets/next-ux-screenshot-3.jpg new file mode 100644 index 0000000..652ec89 Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-screenshot-3.jpg differ diff --git a/src/content/projects/next-ux/assets/next-ux-screenshot-4.jpg b/src/content/projects/next-ux/assets/next-ux-screenshot-4.jpg new file mode 100644 index 0000000..d7cd0c1 Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-screenshot-4.jpg differ diff --git a/src/content/projects/next-ux/assets/next-ux-showcase.mp4 b/src/content/projects/next-ux/assets/next-ux-showcase.mp4 new file mode 100644 index 0000000..43fbdcb Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-showcase.mp4 differ diff --git a/src/content/projects/next-ux/assets/next-ux-showcase.webm b/src/content/projects/next-ux/assets/next-ux-showcase.webm new file mode 100644 index 0000000..ca5fe48 Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-showcase.webm differ diff --git a/src/content/projects/next-ux/assets/next-ux-thumbnail.png b/src/content/projects/next-ux/assets/next-ux-thumbnail.png new file mode 100644 index 0000000..5638ce4 Binary files /dev/null and b/src/content/projects/next-ux/assets/next-ux-thumbnail.png differ diff --git a/src/content/projects/next-ux/index.ts b/src/content/projects/next-ux/index.ts new file mode 100644 index 0000000..5ebd764 --- /dev/null +++ b/src/content/projects/next-ux/index.ts @@ -0,0 +1,48 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/next-ux-showcase.webm"; +import SHOWCASE_MP4 from "./assets/next-ux-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/next-ux-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/next-ux-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/next-ux-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/next-ux-screenshot-4.jpg" + +import THUMBNAIL from "./assets/next-ux-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Next Ux", // Title + "web app ux & ui - 2021", // Subtitle + "Clear Workflows", // Tagline + + // Paragraphs + [ + "Complete overhaul of Voxco's product line, including a redesigned user flow and interface." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "React", percentage: 30}, + {technology: "Blazor", percentage: 40}, + {technology: "Adobe XD", percentage: 80} + ], + + //Buttons + [ + ["LABEL", "LINK", true], + ["LABEL", "LINK", false] + ], + + // Thumbnail + THUMBNAIL, + "UX initiative taken over Voxco’s software.", + "Ux / Ui Design", + "#0C0A1F", + "next-ux" +); \ No newline at end of file diff --git a/src/content/projects/space-compass/assets/spaceCompass-screenshot-1.jpg b/src/content/projects/space-compass/assets/space-compass-screenshot-1.jpg similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-screenshot-1.jpg rename to src/content/projects/space-compass/assets/space-compass-screenshot-1.jpg diff --git a/src/content/projects/space-compass/assets/spaceCompass-screenshot-2.jpg b/src/content/projects/space-compass/assets/space-compass-screenshot-2.jpg similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-screenshot-2.jpg rename to src/content/projects/space-compass/assets/space-compass-screenshot-2.jpg diff --git a/src/content/projects/space-compass/assets/spaceCompass-screenshot-3.jpg b/src/content/projects/space-compass/assets/space-compass-screenshot-3.jpg similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-screenshot-3.jpg rename to src/content/projects/space-compass/assets/space-compass-screenshot-3.jpg diff --git a/src/content/projects/space-compass/assets/spaceCompass-screenshot-4.jpg b/src/content/projects/space-compass/assets/space-compass-screenshot-4.jpg similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-screenshot-4.jpg rename to src/content/projects/space-compass/assets/space-compass-screenshot-4.jpg diff --git a/src/content/projects/space-compass/assets/spaceCompass-showcase.jpg b/src/content/projects/space-compass/assets/space-compass-showcase.jpg similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-showcase.jpg rename to src/content/projects/space-compass/assets/space-compass-showcase.jpg diff --git a/src/content/projects/space-compass/assets/spaceCompass-showcase.mp4 b/src/content/projects/space-compass/assets/space-compass-showcase.mp4 similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-showcase.mp4 rename to src/content/projects/space-compass/assets/space-compass-showcase.mp4 diff --git a/src/content/projects/space-compass/assets/spaceCompass-showcase.webm b/src/content/projects/space-compass/assets/space-compass-showcase.webm similarity index 100% rename from src/content/projects/space-compass/assets/spaceCompass-showcase.webm rename to src/content/projects/space-compass/assets/space-compass-showcase.webm diff --git a/src/content/projects/space-compass/assets/space-compass-thumbnail.png b/src/content/projects/space-compass/assets/space-compass-thumbnail.png new file mode 100644 index 0000000..b387b05 Binary files /dev/null and b/src/content/projects/space-compass/assets/space-compass-thumbnail.png differ diff --git a/src/content/projects/space-compass/assets/spaceCompass-thumbnail.jpg b/src/content/projects/space-compass/assets/spaceCompass-thumbnail.jpg deleted file mode 100644 index 3d7d88f..0000000 Binary files a/src/content/projects/space-compass/assets/spaceCompass-thumbnail.jpg and /dev/null differ diff --git a/src/content/projects/space-compass/index.ts b/src/content/projects/space-compass/index.ts index ebc4250..a4cc3d6 100644 --- a/src/content/projects/space-compass/index.ts +++ b/src/content/projects/space-compass/index.ts @@ -1,62 +1,48 @@ -import {ProjectContent} from "../../../views/project-view"; -import {LinkButton, LinkCollection, OutsideLink} from "../../../components/vertical-nav/info-project.ts"; -import {thumbnailContent} from "../../../components/thumbnail"; +import {createProjectContent} from "../template.ts"; -import WEBM_VIDEO from "./assets/spaceCompass-showcase.webm"; -import MP4_VIDEO from "./assets/spaceCompass-showcase.mp4"; +import SHOWCASE_WEBM from "./assets/space-compass-showcase.webm"; +import SHOWCASE_MP4 from "./assets/space-compass-showcase.mp4"; -import SCREENSHOT_1 from "./assets/spaceCompass-screenshot-1.jpg" -import SCREENSHOT_2 from "./assets/spaceCompass-screenshot-2.jpg" -import SCREENSHOT_3 from "./assets/spaceCompass-screenshot-3.jpg" -import SCREENSHOT_4 from "./assets/spaceCompass-screenshot-4.jpg" +import SCREENSHOT_1 from "./assets/space-compass-screenshot-1.jpg"; +import SCREENSHOT_2 from "./assets/space-compass-screenshot-2.jpg"; +import SCREENSHOT_3 from "./assets/space-compass-screenshot-3.jpg"; +import SCREENSHOT_4 from "./assets/space-compass-screenshot-4.jpg"; -import THUMBNAIL from "./assets/spaceCompass-thumbnail.jpg"; +import THUMBNAIL from "./assets/space-compass-thumbnail.png"; +//----------------------------------------------------------------------- -export const content: ProjectContent = { - title: "Space Compass", - subtitle: "game prototype - winter 2020", +export const { content, techs, buttons, thumbnail } = createProjectContent( + "Space Compass", // Title + "game prototype - winter 2020", // Subtitle + "Radial Navigation", // Tagline - tagline: "Radial Navigation", - paragraphs: [ + // Paragraphs + [ "This space-themed shooter features circular movement constraints, requiring players to evade or eliminate various asteroids and structures." ], - heroVideo: [ - WEBM_VIDEO, - MP4_VIDEO + // Medias + [ SHOWCASE_WEBM, SHOWCASE_MP4 ], + [ SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4 ], + + // Techs Used + [ + { technology: "Unity 3D", percentage: 90 }, + { technology: "Blender", percentage: 80 }, + { technology: "Adobe XD", percentage: 25 } + ], + + //Buttons + [ + ["Try It Online", "https://play.unity.com/mg/other/space-compass", true], + ["Access the Repo", "https://github.com/cd-bash", false] ], - imageGallery: [ - SCREENSHOT_1, - SCREENSHOT_2, - SCREENSHOT_3, - SCREENSHOT_4 - ] -} - -const relatedLinksInfo: OutsideLink[] = [ - ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"], - ["GitHub Project", "https://github.com/charlesDouc/CART-415/wiki"] -] - -const creditLinks: OutsideLink[] = [ - ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"], -] - -export const linkSections: LinkCollection[] = [ - ["Related Links", relatedLinksInfo], - ["Credits", creditLinks] -] - -export const buttons: LinkButton[] = [ - ["Try It Online"] -] - -export const thumbnail: thumbnailContent = { - thumbnail: THUMBNAIL, - title: content.title, - description: "A space shooter where players must dodge and destroy asteroids for high scores.", - tags: ["Unity", "Game Design"], - path: "space-compass" -} \ No newline at end of file + // Thumbnail + THUMBNAIL, + "A spinning space shooter prototype", + "Game Prototype", + "#000000", + "space-compass", +); \ No newline at end of file diff --git a/src/content/projects/space-program/assets/space-program-screenshot-1.jpg b/src/content/projects/space-program/assets/space-program-screenshot-1.jpg new file mode 100644 index 0000000..82922f0 Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-screenshot-1.jpg differ diff --git a/src/content/projects/space-program/assets/space-program-screenshot-2.jpg b/src/content/projects/space-program/assets/space-program-screenshot-2.jpg new file mode 100644 index 0000000..d52b563 Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-screenshot-2.jpg differ diff --git a/src/content/projects/space-program/assets/space-program-screenshot-3.jpg b/src/content/projects/space-program/assets/space-program-screenshot-3.jpg new file mode 100644 index 0000000..5b593dc Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-screenshot-3.jpg differ diff --git a/src/content/projects/space-program/assets/space-program-screenshot-4.jpg b/src/content/projects/space-program/assets/space-program-screenshot-4.jpg new file mode 100644 index 0000000..1280976 Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-screenshot-4.jpg differ diff --git a/src/content/projects/space-program/assets/space-program-showcase.mp4 b/src/content/projects/space-program/assets/space-program-showcase.mp4 new file mode 100644 index 0000000..7aef8af Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-showcase.mp4 differ diff --git a/src/content/projects/space-program/assets/space-program-showcase.webm b/src/content/projects/space-program/assets/space-program-showcase.webm new file mode 100644 index 0000000..13050d3 Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-showcase.webm differ diff --git a/src/content/projects/space-program/assets/space-program-thumbnail.jpg b/src/content/projects/space-program/assets/space-program-thumbnail.jpg new file mode 100644 index 0000000..c9db5db Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-thumbnail.jpg differ diff --git a/src/content/projects/space-program/assets/space-program-thumbnail.png b/src/content/projects/space-program/assets/space-program-thumbnail.png new file mode 100644 index 0000000..3cfc294 Binary files /dev/null and b/src/content/projects/space-program/assets/space-program-thumbnail.png differ diff --git a/src/content/projects/space-program/index.ts b/src/content/projects/space-program/index.ts new file mode 100644 index 0000000..9c175bf --- /dev/null +++ b/src/content/projects/space-program/index.ts @@ -0,0 +1,55 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/space-program-showcase.webm"; +import SHOWCASE_MP4 from "./assets/space-program-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/space-program-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/space-program-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/space-program-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/space-program-screenshot-4.jpg" + +import THUMBNAIL from "./assets/space-program-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Space Program", // Title + "Game Prototype - Winter 2019", // Subtitle + "An Internship in Space", // Tagline + + // Paragraphs + [ + "A solo space game where you play as an astronaut intern tasked with maintaining a series of utility terminals. But hey, at least you’re in space. " + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 80}, + {technology: "Blender", percentage: 30}, + {technology: "Illustrator", percentage: 60} + ], + + //Buttons + [ + ["See it in action", "https://www.youtube.com/watch?v=6FLp1SuoFXA&t=5s&ab_channel=cd-bash", true], + ], + + // Thumbnail + THUMBNAIL, + "Astronauts during a training internship.", + "Game Prototype", + "#020C11", + "space-program", + + // Credits + [ + ["Ali Egseem", "#"], + ["Valerie Bourdon", "https://www.instagram.com/valeriebourdon_/"], + ["Michaël Petitclerc", "#"], + ["Codrin Mihail", "https://codrinmihail.com/"], + ], +); \ No newline at end of file diff --git a/src/content/projects/specter/assets/specter-screenshot-1.jpg b/src/content/projects/specter/assets/specter-screenshot-1.jpg new file mode 100644 index 0000000..562cfe1 Binary files /dev/null and b/src/content/projects/specter/assets/specter-screenshot-1.jpg differ diff --git a/src/content/projects/specter/assets/specter-screenshot-2.jpg b/src/content/projects/specter/assets/specter-screenshot-2.jpg new file mode 100644 index 0000000..ed6d1f7 Binary files /dev/null and b/src/content/projects/specter/assets/specter-screenshot-2.jpg differ diff --git a/src/content/projects/specter/assets/specter-screenshot-3.jpg b/src/content/projects/specter/assets/specter-screenshot-3.jpg new file mode 100644 index 0000000..83bbf7f Binary files /dev/null and b/src/content/projects/specter/assets/specter-screenshot-3.jpg differ diff --git a/src/content/projects/specter/assets/specter-screenshot-4.jpg b/src/content/projects/specter/assets/specter-screenshot-4.jpg new file mode 100644 index 0000000..adb31c4 Binary files /dev/null and b/src/content/projects/specter/assets/specter-screenshot-4.jpg differ diff --git a/src/content/projects/specter/assets/specter-showcase.mp4 b/src/content/projects/specter/assets/specter-showcase.mp4 new file mode 100644 index 0000000..5c93780 Binary files /dev/null and b/src/content/projects/specter/assets/specter-showcase.mp4 differ diff --git a/src/content/projects/specter/assets/specter-showcase.webm b/src/content/projects/specter/assets/specter-showcase.webm new file mode 100644 index 0000000..7131a53 Binary files /dev/null and b/src/content/projects/specter/assets/specter-showcase.webm differ diff --git a/src/content/projects/specter/assets/specter-thumbnail.png b/src/content/projects/specter/assets/specter-thumbnail.png new file mode 100644 index 0000000..8b9fa04 Binary files /dev/null and b/src/content/projects/specter/assets/specter-thumbnail.png differ diff --git a/src/content/projects/specter/index.ts b/src/content/projects/specter/index.ts new file mode 100644 index 0000000..d7cd73c --- /dev/null +++ b/src/content/projects/specter/index.ts @@ -0,0 +1,48 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/specter-showcase.webm"; +import SHOWCASE_MP4 from "./assets/specter-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/specter-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/specter-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/specter-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/specter-screenshot-4.jpg" + +import THUMBNAIL from "./assets/specter-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Specter", // Title + "Game release - Winter 2018", // Subtitle + "Console-Based Puzzle Game", // Tagline + + // Paragraphs + [ + "The user must navigate through a sequence of stages in a software program that is reminiscent of the 1990s hacking culture and the early days of the internet." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 90}, + {technology: "Blender", percentage: 20}, + {technology: "Console", percentage: 30} + ], + + //Buttons + [ + ["Try it online", "LINK", true], + ["Download the game", "LINK", false] + ], + + // Thumbnail + THUMBNAIL, + "Puzzle game based on text commands.", + "Game release", + "#0A0A0A", + "specter" +); \ No newline at end of file diff --git a/src/content/projects/swan-lake/assets/swan-lake-screenshot-1.jpg b/src/content/projects/swan-lake/assets/swan-lake-screenshot-1.jpg new file mode 100644 index 0000000..7d8fcf5 Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-screenshot-1.jpg differ diff --git a/src/content/projects/swan-lake/assets/swan-lake-screenshot-2.jpg b/src/content/projects/swan-lake/assets/swan-lake-screenshot-2.jpg new file mode 100644 index 0000000..ca9dbf6 Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-screenshot-2.jpg differ diff --git a/src/content/projects/swan-lake/assets/swan-lake-screenshot-3.jpg b/src/content/projects/swan-lake/assets/swan-lake-screenshot-3.jpg new file mode 100644 index 0000000..de75722 Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-screenshot-3.jpg differ diff --git a/src/content/projects/swan-lake/assets/swan-lake-screenshot-4.jpg b/src/content/projects/swan-lake/assets/swan-lake-screenshot-4.jpg new file mode 100644 index 0000000..feb0b9c Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-screenshot-4.jpg differ diff --git a/src/content/projects/swan-lake/assets/swan-lake-showcase.mp4 b/src/content/projects/swan-lake/assets/swan-lake-showcase.mp4 new file mode 100644 index 0000000..8fba04b Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-showcase.mp4 differ diff --git a/src/content/projects/swan-lake/assets/swan-lake-showcase.webm b/src/content/projects/swan-lake/assets/swan-lake-showcase.webm new file mode 100644 index 0000000..6d41ef8 Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-showcase.webm differ diff --git a/src/content/projects/swan-lake/assets/swan-lake-thumbnail.png b/src/content/projects/swan-lake/assets/swan-lake-thumbnail.png new file mode 100644 index 0000000..fa7bd14 Binary files /dev/null and b/src/content/projects/swan-lake/assets/swan-lake-thumbnail.png differ diff --git a/src/content/projects/swan-lake/index.ts b/src/content/projects/swan-lake/index.ts new file mode 100644 index 0000000..c5c6572 --- /dev/null +++ b/src/content/projects/swan-lake/index.ts @@ -0,0 +1,47 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/swan-lake-showcase.webm"; +import SHOWCASE_MP4 from "./assets/swan-lake-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/swan-lake-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/swan-lake-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/swan-lake-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/swan-lake-screenshot-4.jpg" + +import THUMBNAIL from "./assets/swan-lake-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Swan Lake", // Title + "Animation - Fall 2017", // Subtitle + "The Letter Company", // Tagline + + // Paragraphs + [ + "Interpretation of the classic ballet Swan Lake using only letters and typography in a minimalist landscape." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Illustrator", percentage: 10}, + {technology: "After Effect", percentage: 80}, + {technology: "Premiere Pro", percentage: 60} + ], + + //Buttons + [ + ["See the movie", "https://www.youtube.com/watch?v=MGab-x3gMIg&ab_channel=cd-bash", true], + ], + + // Thumbnail + THUMBNAIL, + "Animation of the dramatic story.", + "Animation", + "#5A06A2", + "swan-lake" +); \ No newline at end of file diff --git a/src/content/projects/switcher/assets/switcher-screenshot-1.jpg b/src/content/projects/switcher/assets/switcher-screenshot-1.jpg new file mode 100644 index 0000000..a965d2f Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-screenshot-1.jpg differ diff --git a/src/content/projects/switcher/assets/switcher-screenshot-2.jpg b/src/content/projects/switcher/assets/switcher-screenshot-2.jpg new file mode 100644 index 0000000..0e0976a Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-screenshot-2.jpg differ diff --git a/src/content/projects/switcher/assets/switcher-screenshot-3.jpg b/src/content/projects/switcher/assets/switcher-screenshot-3.jpg new file mode 100644 index 0000000..6ce94f4 Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-screenshot-3.jpg differ diff --git a/src/content/projects/switcher/assets/switcher-screenshot-4.jpg b/src/content/projects/switcher/assets/switcher-screenshot-4.jpg new file mode 100644 index 0000000..3326cc9 Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-screenshot-4.jpg differ diff --git a/src/content/projects/switcher/assets/switcher-showcase.mp4 b/src/content/projects/switcher/assets/switcher-showcase.mp4 new file mode 100644 index 0000000..b5568d5 Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-showcase.mp4 differ diff --git a/src/content/projects/switcher/assets/switcher-showcase.webm b/src/content/projects/switcher/assets/switcher-showcase.webm new file mode 100644 index 0000000..43c0191 Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-showcase.webm differ diff --git a/src/content/projects/switcher/assets/switcher-thumbnail.png b/src/content/projects/switcher/assets/switcher-thumbnail.png new file mode 100644 index 0000000..39d39be Binary files /dev/null and b/src/content/projects/switcher/assets/switcher-thumbnail.png differ diff --git a/src/content/projects/switcher/index.ts b/src/content/projects/switcher/index.ts new file mode 100644 index 0000000..32adcea --- /dev/null +++ b/src/content/projects/switcher/index.ts @@ -0,0 +1,48 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/switcher-showcase.webm"; +import SHOWCASE_MP4 from "./assets/switcher-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/switcher-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/switcher-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/switcher-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/switcher-screenshot-4.jpg" + +import THUMBNAIL from "./assets/switcher-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Switcher", // Title + "Game prototype - Winter 2017", // Subtitle + "A geometrical ballet", // Tagline + + // Paragraphs + [ + "A primitive interactive medium where users fill in blank squares over different rhythmic scenes." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Photoshop", percentage: 10}, + {technology: "Processing", percentage: 90}, + {technology: "Illustrator", percentage: 10} + ], + + //Buttons + [ + ["See the demo", "https://www.youtube.com/watch?v=Z89hsC-cPM0&ab_channel=cd-bash", true], + ["Access the repo", "https://github.com/cd-bash/switcher", false] + ], + + // Thumbnail + THUMBNAIL, + "Interact with a geometrical ballet.", + "Game prototype", + "#000000", + "switcher" +); \ No newline at end of file diff --git a/src/content/projects/tank/assets/tank-screenshot-1.jpg b/src/content/projects/tank/assets/tank-screenshot-1.jpg new file mode 100644 index 0000000..a9aa934 Binary files /dev/null and b/src/content/projects/tank/assets/tank-screenshot-1.jpg differ diff --git a/src/content/projects/tank/assets/tank-screenshot-2.jpg b/src/content/projects/tank/assets/tank-screenshot-2.jpg new file mode 100644 index 0000000..c3161b6 Binary files /dev/null and b/src/content/projects/tank/assets/tank-screenshot-2.jpg differ diff --git a/src/content/projects/tank/assets/tank-screenshot-3.jpg b/src/content/projects/tank/assets/tank-screenshot-3.jpg new file mode 100644 index 0000000..d4ec8f2 Binary files /dev/null and b/src/content/projects/tank/assets/tank-screenshot-3.jpg differ diff --git a/src/content/projects/tank/assets/tank-screenshot-4.jpg b/src/content/projects/tank/assets/tank-screenshot-4.jpg new file mode 100644 index 0000000..5359a65 Binary files /dev/null and b/src/content/projects/tank/assets/tank-screenshot-4.jpg differ diff --git a/src/content/projects/tank/assets/tank-screenshot-5.jpg b/src/content/projects/tank/assets/tank-screenshot-5.jpg new file mode 100644 index 0000000..c826d56 Binary files /dev/null and b/src/content/projects/tank/assets/tank-screenshot-5.jpg differ diff --git a/src/content/projects/tank/assets/tank-screenshot-6.jpg b/src/content/projects/tank/assets/tank-screenshot-6.jpg new file mode 100644 index 0000000..4a6b2f6 Binary files /dev/null and b/src/content/projects/tank/assets/tank-screenshot-6.jpg differ diff --git a/src/content/projects/tank/assets/tank-showcase.mp4 b/src/content/projects/tank/assets/tank-showcase.mp4 new file mode 100644 index 0000000..7553167 Binary files /dev/null and b/src/content/projects/tank/assets/tank-showcase.mp4 differ diff --git a/src/content/projects/tank/assets/tank-showcase.webm b/src/content/projects/tank/assets/tank-showcase.webm new file mode 100644 index 0000000..a19ecf8 Binary files /dev/null and b/src/content/projects/tank/assets/tank-showcase.webm differ diff --git a/src/content/projects/tank/assets/tank-thumbnail.png b/src/content/projects/tank/assets/tank-thumbnail.png new file mode 100644 index 0000000..fc70ace Binary files /dev/null and b/src/content/projects/tank/assets/tank-thumbnail.png differ diff --git a/src/content/projects/tank/index.ts b/src/content/projects/tank/index.ts new file mode 100644 index 0000000..b5ad92d --- /dev/null +++ b/src/content/projects/tank/index.ts @@ -0,0 +1,50 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/tank-showcase.webm"; +import SHOWCASE_MP4 from "./assets/tank-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/tank-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/tank-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/tank-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/tank-screenshot-4.jpg" +import SCREENSHOT_5 from "./assets/tank-screenshot-5.jpg" +import SCREENSHOT_6 from "./assets/tank-screenshot-6.jpg" + +import THUMBNAIL from "./assets/tank-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Tank", // Title + "Game Release - Winter 2018", // Subtitle + "A game collection", // Tagline + + // Paragraphs + [ + "An exploration of mechanics and discovery of new environments. It’s an experimental journey designed to pique your interest, leading you to discover the remains of a forgotten civilization." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4, SCREENSHOT_5, SCREENSHOT_6], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 90}, + {technology: "Blender", percentage: 30}, + {technology: "Substance", percentage: 10} + ], + + //Buttons + [ + ["Download the game", "https://cd-bash.itch.io/tank", true], + ["Process Journal", "https://github.com/cd-bash/TANK/wiki", false] + ], + + // Thumbnail + THUMBNAIL, + "Lonely tank exploring mysterious environments.", + "Game Release", + "#000000", + "tank" +); \ No newline at end of file diff --git a/src/content/projects/template.ts b/src/content/projects/template.ts new file mode 100644 index 0000000..939399f --- /dev/null +++ b/src/content/projects/template.ts @@ -0,0 +1,47 @@ +import {ProjectContent, ProjectCredits} from "../../views/project.ts"; +import {ButtonLink} from "../../components/vertical-nav/info-project.ts"; +import {thumbnailContent} from "../../components/thumbnail-project"; +import {TechUsage} from "../../components/three-radar-chart/radar.ts"; + +export function createProjectContent( + title: string, + subtitle: string, + tagline: string, + paragraphs: string[], + heroVideo: string[], + imageGallery: string[], + techs: TechUsage[], + buttons: ButtonLink[], + thumbnail: string, + summary: string, + tag: string, + thumbnailColor: string, + path: string, + credits?: ProjectCredits[], +): { + content: ProjectContent, + techs: TechUsage[], + buttons: ButtonLink[], + thumbnail: thumbnailContent +} { + const content: ProjectContent = { + title, + subtitle, + tagline, + paragraphs, + heroVideo, + imageGallery, + credits: credits || [] + }; + + const thumbnailContent: thumbnailContent = { + thumbnail, + title, + summary, + tag, + thumbnailColor, + path + }; + + return { content, techs, buttons, thumbnail: thumbnailContent }; +} \ No newline at end of file diff --git a/src/content/projects/the-fall/assets/the-fall-screenshot-1.jpg b/src/content/projects/the-fall/assets/the-fall-screenshot-1.jpg new file mode 100644 index 0000000..3ad0073 Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-screenshot-1.jpg differ diff --git a/src/content/projects/the-fall/assets/the-fall-screenshot-2.jpg b/src/content/projects/the-fall/assets/the-fall-screenshot-2.jpg new file mode 100644 index 0000000..b775a79 Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-screenshot-2.jpg differ diff --git a/src/content/projects/the-fall/assets/the-fall-screenshot-3.jpg b/src/content/projects/the-fall/assets/the-fall-screenshot-3.jpg new file mode 100644 index 0000000..0ff63e3 Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-screenshot-3.jpg differ diff --git a/src/content/projects/the-fall/assets/the-fall-screenshot-4.jpg b/src/content/projects/the-fall/assets/the-fall-screenshot-4.jpg new file mode 100644 index 0000000..25323d5 Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-screenshot-4.jpg differ diff --git a/src/content/projects/the-fall/assets/the-fall-showcase.mp4 b/src/content/projects/the-fall/assets/the-fall-showcase.mp4 new file mode 100644 index 0000000..40b6b2d Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-showcase.mp4 differ diff --git a/src/content/projects/the-fall/assets/the-fall-showcase.webm b/src/content/projects/the-fall/assets/the-fall-showcase.webm new file mode 100644 index 0000000..2d40288 Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-showcase.webm differ diff --git a/src/content/projects/the-fall/assets/the-fall-thumbnail.png b/src/content/projects/the-fall/assets/the-fall-thumbnail.png new file mode 100644 index 0000000..211c968 Binary files /dev/null and b/src/content/projects/the-fall/assets/the-fall-thumbnail.png differ diff --git a/src/content/projects/the-fall/index.ts b/src/content/projects/the-fall/index.ts new file mode 100644 index 0000000..9cd230e --- /dev/null +++ b/src/content/projects/the-fall/index.ts @@ -0,0 +1,48 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/the-fall-showcase.webm"; +import SHOWCASE_MP4 from "./assets/the-fall-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/the-fall-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/the-fall-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/the-fall-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/the-fall-screenshot-4.jpg" + +import THUMBNAIL from "./assets/the-fall-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "The Fall", // Title + "Game prototype - Winter 2017", // Subtitle + "A glitchy situation", // Tagline + + // Paragraphs + [ + "Little game all made in Processing where players fall into glitch and try to escape a malicious system error." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4], + + // Techs Used + [ + {technology: "Photoshop", percentage: 10}, + {technology: "Processing", percentage: 85}, + {technology: "Illustrator", percentage: 15} + ], + + //Buttons + [ + ["See the Demo", "https://www.youtube.com/watch?v=0GVSPCsy9E8&ab_channel=cd-bash", true], + ["See the repo", "https://github.com/cd-bash/The-Fall", false] + ], + + // Thumbnail + THUMBNAIL, + "Getting stuck in a computer bug.", + "Game prototype", + "#130A23", + "the-fall" +); \ No newline at end of file diff --git a/src/content/projects/typograzoo/assets/typograzoo-screenshot-1.jpg b/src/content/projects/typograzoo/assets/typograzoo-screenshot-1.jpg new file mode 100644 index 0000000..5b96e65 Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-screenshot-1.jpg differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-screenshot-2.jpg b/src/content/projects/typograzoo/assets/typograzoo-screenshot-2.jpg new file mode 100644 index 0000000..e514fc4 Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-screenshot-2.jpg differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-screenshot-3.jpg b/src/content/projects/typograzoo/assets/typograzoo-screenshot-3.jpg new file mode 100644 index 0000000..5a5380c Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-screenshot-3.jpg differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-screenshot-4.jpg b/src/content/projects/typograzoo/assets/typograzoo-screenshot-4.jpg new file mode 100644 index 0000000..4cfd85b Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-screenshot-4.jpg differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-screenshot-5.jpg b/src/content/projects/typograzoo/assets/typograzoo-screenshot-5.jpg new file mode 100644 index 0000000..b7a38e8 Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-screenshot-5.jpg differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-screenshot-6.jpg b/src/content/projects/typograzoo/assets/typograzoo-screenshot-6.jpg new file mode 100644 index 0000000..046b062 Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-screenshot-6.jpg differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-showcase.mp4 b/src/content/projects/typograzoo/assets/typograzoo-showcase.mp4 new file mode 100644 index 0000000..5dd05a8 Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-showcase.mp4 differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-showcase.webm b/src/content/projects/typograzoo/assets/typograzoo-showcase.webm new file mode 100644 index 0000000..7000cdf Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-showcase.webm differ diff --git a/src/content/projects/typograzoo/assets/typograzoo-thumbnail.png b/src/content/projects/typograzoo/assets/typograzoo-thumbnail.png new file mode 100644 index 0000000..4ca5131 Binary files /dev/null and b/src/content/projects/typograzoo/assets/typograzoo-thumbnail.png differ diff --git a/src/content/projects/typograzoo/index.ts b/src/content/projects/typograzoo/index.ts new file mode 100644 index 0000000..9825de1 --- /dev/null +++ b/src/content/projects/typograzoo/index.ts @@ -0,0 +1,49 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/typograzoo-showcase.webm"; +import SHOWCASE_MP4 from "./assets/typograzoo-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/typograzoo-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/typograzoo-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/typograzoo-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/typograzoo-screenshot-4.jpg" +import SCREENSHOT_5 from "./assets/typograzoo-screenshot-5.jpg" +import SCREENSHOT_6 from "./assets/typograzoo-screenshot-6.jpg" + +import THUMBNAIL from "./assets/typograzoo-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "Typograzoo", // Title + "Game Prototype - Fall 2017", // Subtitle + "No creatures, just alphabets and symbols", // Tagline + + // Paragraphs + [ + "Walking simulator where the player visits a zoo and observes the behaviour of typographic shapes." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4, SCREENSHOT_5, SCREENSHOT_6], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 80}, + {technology: "Blender", percentage: 40}, + {technology: "Illustrator", percentage: 20} + ], + + //Buttons + [ + ["See it in action", "https://www.youtube.com/watch?v=o3TwD0hZYfs&ab_channel=cd-bash", true], + ], + + // Thumbnail + THUMBNAIL, + "Alive, letters and symbols.", + "Game prototype", + "#2F4769", + "typograzoo" +); \ No newline at end of file diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-1.jpg b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-1.jpg new file mode 100644 index 0000000..0497df0 Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-1.jpg differ diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-2.jpg b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-2.jpg new file mode 100644 index 0000000..2d775f5 Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-2.jpg differ diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-3.jpg b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-3.jpg new file mode 100644 index 0000000..8843c5a Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-3.jpg differ diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-4.jpg b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-4.jpg new file mode 100644 index 0000000..92d59bb Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-screenshot-4.jpg differ diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-showcase.mp4 b/src/content/projects/voxco-identity/assets/voxco-identity-showcase.mp4 new file mode 100644 index 0000000..72fb750 Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-showcase.mp4 differ diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-showcase.webm b/src/content/projects/voxco-identity/assets/voxco-identity-showcase.webm new file mode 100644 index 0000000..000823a Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-showcase.webm differ diff --git a/src/content/projects/voxco-identity/assets/voxco-identity-thumbnail.png b/src/content/projects/voxco-identity/assets/voxco-identity-thumbnail.png new file mode 100644 index 0000000..ba358b9 Binary files /dev/null and b/src/content/projects/voxco-identity/assets/voxco-identity-thumbnail.png differ diff --git a/src/content/projects/voxco-identity/index.ts b/src/content/projects/voxco-identity/index.ts new file mode 100644 index 0000000..da6dfc0 --- /dev/null +++ b/src/content/projects/voxco-identity/index.ts @@ -0,0 +1,47 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/voxco-identity-showcase.webm"; +import SHOWCASE_MP4 from "./assets/voxco-identity-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/voxco-identity-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/voxco-identity-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/voxco-identity-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/voxco-identity-screenshot-4.jpg" + +import THUMBNAIL from "./assets/voxco-identity-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const { content, techs, buttons, thumbnail } = createProjectContent( + "Voxco Identity", // Title + "Graphic Design - 2020", // Subtitle + "Trying a new dimension", // Tagline + + // Paragraphs + [ + "A marketing team initiative aspiring to create a distinctive brand identity for a B2B software company using orthographic 3D visuals." + ], + + // Medias + [ SHOWCASE_WEBM, SHOWCASE_MP4 ], + [ SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4 ], + + // Techs Used + [ + { technology: "Divi", percentage: 30 }, + { technology: "Blender", percentage: 80 }, + { technology: "Adobe XD", percentage: 20 } + ], + + //Buttons + [ + ["Assets Gym", "LINK", true] + ], + + // Thumbnail + THUMBNAIL, + "New visual identity for Voxco’s website.", + "Graphic Design", + "#1FA1B9", + "voxco-identity", +); \ No newline at end of file diff --git a/src/content/projects/you-are-two/assets/you-are-two-screenshot-1.jpg b/src/content/projects/you-are-two/assets/you-are-two-screenshot-1.jpg new file mode 100644 index 0000000..e50151c Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-screenshot-1.jpg differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-screenshot-2.jpg b/src/content/projects/you-are-two/assets/you-are-two-screenshot-2.jpg new file mode 100644 index 0000000..7a6b498 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-screenshot-2.jpg differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-screenshot-3.jpg b/src/content/projects/you-are-two/assets/you-are-two-screenshot-3.jpg new file mode 100644 index 0000000..0b38255 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-screenshot-3.jpg differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-screenshot-4.jpg b/src/content/projects/you-are-two/assets/you-are-two-screenshot-4.jpg new file mode 100644 index 0000000..109da86 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-screenshot-4.jpg differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-screenshot-5.jpg b/src/content/projects/you-are-two/assets/you-are-two-screenshot-5.jpg new file mode 100644 index 0000000..e6e7772 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-screenshot-5.jpg differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-screenshot-6.jpg b/src/content/projects/you-are-two/assets/you-are-two-screenshot-6.jpg new file mode 100644 index 0000000..4984680 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-screenshot-6.jpg differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-showcase.mp4 b/src/content/projects/you-are-two/assets/you-are-two-showcase.mp4 new file mode 100644 index 0000000..fededa4 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-showcase.mp4 differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-showcase.webm b/src/content/projects/you-are-two/assets/you-are-two-showcase.webm new file mode 100644 index 0000000..0d14b5a Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-showcase.webm differ diff --git a/src/content/projects/you-are-two/assets/you-are-two-thumbnail.png b/src/content/projects/you-are-two/assets/you-are-two-thumbnail.png new file mode 100644 index 0000000..0241b51 Binary files /dev/null and b/src/content/projects/you-are-two/assets/you-are-two-thumbnail.png differ diff --git a/src/content/projects/you-are-two/index.ts b/src/content/projects/you-are-two/index.ts new file mode 100644 index 0000000..6a06b51 --- /dev/null +++ b/src/content/projects/you-are-two/index.ts @@ -0,0 +1,48 @@ +import {createProjectContent} from "../template.ts"; + +import SHOWCASE_WEBM from "./assets/you-are-two-showcase.webm"; +import SHOWCASE_MP4 from "./assets/you-are-two-showcase.mp4"; + +import SCREENSHOT_1 from "./assets/you-are-two-screenshot-1.jpg" +import SCREENSHOT_2 from "./assets/you-are-two-screenshot-2.jpg" +import SCREENSHOT_3 from "./assets/you-are-two-screenshot-3.jpg" +import SCREENSHOT_4 from "./assets/you-are-two-screenshot-4.jpg" +import SCREENSHOT_5 from "./assets/you-are-two-screenshot-5.jpg" +import SCREENSHOT_6 from "./assets/you-are-two-screenshot-6.jpg" + +import THUMBNAIL from "./assets/you-are-two-thumbnail.png"; + +//----------------------------------------------------------------------- + +export const {content, techs, buttons, thumbnail} = createProjectContent( + "You are two", // Title + "Game prototype - Winter 2018", // Subtitle + "Sanity check", // Tagline + + // Paragraphs + [ + "Concordia's entry for the Ubisoft Game Lab Competition is a cooperative game about mental health with online multiplayer." + ], + + // Medias + [SHOWCASE_WEBM, SHOWCASE_MP4], + [SCREENSHOT_1, SCREENSHOT_2, SCREENSHOT_3, SCREENSHOT_4, SCREENSHOT_5, SCREENSHOT_6], + + // Techs Used + [ + {technology: "Unity 3D", percentage: 90}, + {technology: "Blender", percentage: 60}, + {technology: "Substance", percentage: 30} + ], + + //Buttons + [ + ], + + // Thumbnail + THUMBNAIL, + "Ubisoft Game Lab Competition entry.", + "Game prototype", + "#1D1007", + "you-are-two" +); \ No newline at end of file diff --git a/src/event-bus/index.ts b/src/core/event-bus.ts similarity index 50% rename from src/event-bus/index.ts rename to src/core/event-bus.ts index 173a53c..71882c7 100644 --- a/src/event-bus/index.ts +++ b/src/core/event-bus.ts @@ -3,31 +3,32 @@ type EventKey = keyof T; type EventHandler = (value: T) => void; export class EventBus { - private subscribers: Partial[]>> = {}; + private subscribers: Map, EventHandler[]> = new Map(); subscribe>(event: E, handler: EventHandler): void { - if (!this.subscribers[event]) { - this.subscribers[event] = []; + if (!this.subscribers.has(event)) { + this.subscribers.set(event, []); } - - this.subscribers[event].push(handler); + this.subscribers.get(event)!.push(handler); } unsubscribe>(event: E, handler: EventHandler): void { - if (!this.subscribers[event]) { + const handlers = this.subscribers.get(event); + if (!handlers) { return; } - - this.subscribers[event] = this.subscribers[event]!.filter( - (listener) => listener !== handler - ); + const index = handlers.indexOf(handler); + if (index !== -1) { + handlers.splice(index, 1); + } } dispatch>(event: E, value: T[E]): void { - if (!this.subscribers[event]) { + const handlers = this.subscribers.get(event); + if (!handlers) { return; } - this.subscribers[event]!.forEach((listener) => { + handlers.forEach((listener) => { listener(value); }); } diff --git a/src/consts/events/events.ts b/src/core/events.ts similarity index 77% rename from src/consts/events/events.ts rename to src/core/events.ts index 03b4641..abb679f 100644 --- a/src/consts/events/events.ts +++ b/src/core/events.ts @@ -1,6 +1,5 @@ export type Events = { readonly page_navigation: { - readonly path: string; readonly pageReference: string; } }; \ No newline at end of file diff --git a/src/core/handlers.ts b/src/core/handlers.ts new file mode 100644 index 0000000..9427617 --- /dev/null +++ b/src/core/handlers.ts @@ -0,0 +1,9 @@ +import {Events} from "./events"; +import {router} from "./router.ts"; + + +export const handlers = { + page_navigation: (value: Events['page_navigation']): void => { + router.handleRoute(value.pageReference); + }, +}; \ No newline at end of file diff --git a/src/core/index.ts b/src/core/index.ts new file mode 100644 index 0000000..b21d423 --- /dev/null +++ b/src/core/index.ts @@ -0,0 +1,9 @@ +import {EventBus} from "./event-bus"; +import {Events} from "./events"; +import {handlers} from "./handlers"; + +const EVENT_BUS = new EventBus(); + +EVENT_BUS.subscribe('page_navigation', handlers.page_navigation); + +export {EVENT_BUS}; \ No newline at end of file diff --git a/src/core/router.ts b/src/core/router.ts new file mode 100644 index 0000000..eb4b49b --- /dev/null +++ b/src/core/router.ts @@ -0,0 +1,60 @@ +import { EVENT_BUS } from "./"; +import {buildErrorPage} from "../views/error404.ts"; + +type RouteHandler = (params?: Record) => void; + +class Router { + private routes: Map = new Map(); + + constructor() { + window.addEventListener('popstate', () => this.handleRoute(window.location.pathname)); + EVENT_BUS.subscribe('page_navigation', (data: { pageReference: string }) => this.navigate(data.pageReference)); + } + + public registerRoute(path: string, handler: RouteHandler) { + this.routes.set(path, handler); + } + + public navigate(path: string) { + window.history.pushState({}, '', path); + this.handleRoute(path); + } + + public handleRoute(path: string) { + for (const [route, handler] of this.routes.entries()) { + const match = this.matchRoute(route, path); + if (match) { + handler(match.params); + return; + } + } + buildErrorPage(); + console.error(`No handler found for path: ${path}`); + } + + private matchRoute(route: string, path: string) { + const routeParts = route.split('/').filter(Boolean); + const pathParts = path.split('/').filter(Boolean); + + if (routeParts.length !== pathParts.length) { + return null; + } + + const params: Record = {}; + for (let i = 0; i < routeParts.length; i++) { + const routePart = routeParts[i]; + const pathPart = pathParts[i]; + + if (routePart.startsWith(':')) { + const paramName = routePart.slice(1); + params[paramName] = pathPart; + } else if (routePart !== pathPart) { + return null; + } + } + + return { params }; + } +} + +export const router = new Router(); \ No newline at end of file diff --git a/src/heads/default.ts b/src/heads/default.ts index 5f3b894..5ea62fc 100644 --- a/src/heads/default.ts +++ b/src/heads/default.ts @@ -1,6 +1,6 @@ document.querySelector('#main')!.innerHTML += ` - + diff --git a/src/index.ts b/src/index.ts index 02af705..f334d57 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,20 @@ -import './views/home-view/styles.css'; +import { router } from "./core/router"; import {buildVerticalNav} from "./components/vertical-nav"; -import {buildViewBase} from "./views/utils"; -import {buildProjectPage} from "./content/projects"; +import {buildInteractivePage, buildProjectPage} from "./content/projects"; +import {homeView} from "./views/home.ts"; +import {buildViewBase} from "./views"; +const routes = [ + { path: '/', handler: homeView }, + { path: '/interactive', handler: buildInteractivePage }, + { path: '/interactive/:id', handler: (params) => buildProjectPage(params?.id) } +]; + +routes.forEach(route => router.registerRoute(route.path, route.handler)); + +//----------------------------------------------------------------------- + function init() { const body = document.getElementsByTagName("body")[0]; const contentPage = buildViewBase(); @@ -12,7 +23,9 @@ function init() { body.appendChild(contentPage); contentPage.appendChild(verticalNav); - buildProjectPage("space-compass"); + router.handleRoute(window.location.pathname); } -init(); \ No newline at end of file +init(); + + diff --git a/src/views/error404.ts b/src/views/error404.ts new file mode 100644 index 0000000..3410f92 --- /dev/null +++ b/src/views/error404.ts @@ -0,0 +1,17 @@ +import {writeTitle} from "./utils"; +import {renderView} from "./index.ts"; + + +function errorView() { + const article = document.createElement('article'); + const viewTitle = writeTitle("h1", "Page not found 404"); + + article.appendChild(viewTitle); + return article; +} + +//----------------------------------------------------------------------- + +export function buildErrorPage() { + renderView(errorView()); +} \ No newline at end of file diff --git a/src/views/home-view/styles.css b/src/views/home-view/styles.css deleted file mode 100644 index e535057..0000000 --- a/src/views/home-view/styles.css +++ /dev/null @@ -1,99 +0,0 @@ -body { - background: #000; - height: 100%; - margin: 0; -} - -.corner-triangle { - position: absolute; - top: 0; - left: 0; - border-left: 0px solid transparent; - border-right: 25vw solid transparent; - border-top: 55vh solid #3BFFC5; -} - -.hero-visual { - position: absolute; - top: 0; - right: 0; - width: 90vw; - height: 100%; - clip-path: polygon(0 0, 100% 0, 100% 100%, 60vw 100%); - background-image: url("/img/home/hero-visual-test.png"); - background-repeat: no-repeat; - background-size: cover; - z-index: -1; -} - -.main-title { - position: relative; -} - -.main-title h3 { - font-size: 12vw; - font-family: "Cabin", sans-serif; - color: white; - text-align: center; - margin: 50vh auto 0; - transform: translateY(-50%); - text-shadow: 0px 0px 22px black; -} - -.business-card { - position: absolute; - bottom: 10vh; - left: 5vw; - width: 33vw; -} - -.business-card img { - float: left; - width: 10vw; - image-rendering: pixelated; -} - -.business-card article { - float: left; - color: white; - font-family: "Handjet", serif; - margin: 1.2vw 0 0 2vw; -} - -.business-card article h2 { - font-size: 2vw; - font-weight: 700; - margin: 0px; -} - -.business-card article h1 { - font-size: 5vw; - font-weight: 300; - margin: 0vw 0 0 0; -} - - -footer { - position: fixed; - bottom: 0; - width: 100%; - height: 40px; - background: #000; -} - -footer .logs-title { - float: left; - background: white; - height: 100%; - text-transform: uppercase; -} - -footer .logs-title h6 { - color: #000; - font-family: "Handjet", serif; - font-size: 1em; - font-weight: 900; - vertical-align: middle; - line-height: 100%; - margin: 12px 10px; -} \ No newline at end of file diff --git a/src/views/home-view/home-view.ts b/src/views/home.ts similarity index 98% rename from src/views/home-view/home-view.ts rename to src/views/home.ts index 93023c3..22c9f9f 100644 --- a/src/views/home-view/home-view.ts +++ b/src/views/home.ts @@ -1,7 +1,7 @@ import cdIcon from "/img/common/cd_icon_green.png"; -export function BuildView() { +export function homeView() { const view = document.createElement("main"); const mainVisuals = DrawVisuals(); const mainTitle = BuildMainTitle("bonjour, hi"); diff --git a/src/views/utils/view-utils.ts b/src/views/index.ts similarity index 69% rename from src/views/utils/view-utils.ts rename to src/views/index.ts index 043b05a..bdec125 100644 --- a/src/views/utils/view-utils.ts +++ b/src/views/index.ts @@ -1,8 +1,10 @@ -/* - VIEW-UTILITIESed to - Are functions usbuild the skeleton of content pages. - They are mostly used when building templates. - */ +import "./styles.css"; + +export * from "./home"; +export * from "./interactive.ts"; +export * from "./project.ts"; + +// -------------------------------------------------------------------------------- export function buildViewBase() { const viewBox = document.createElement('div'); @@ -19,6 +21,7 @@ export function renderView(view: HTMLElement) { viewWrapper.appendChild(view); } +// -------------------------------------------------------------------------------- function clearView() { const cleanViewWrapper = document.getElementById('view-wrapper')!; @@ -28,4 +31,3 @@ function clearView() { return cleanViewWrapper; } - diff --git a/src/views/interactive-view/index.ts b/src/views/interactive.ts similarity index 59% rename from src/views/interactive-view/index.ts rename to src/views/interactive.ts index ff261f4..67461ce 100644 --- a/src/views/interactive-view/index.ts +++ b/src/views/interactive.ts @@ -1,23 +1,20 @@ -import {writeTitle} from "../utils"; -import {buildThumbnailList} from "../../content/projects"; - +import {writeTitle} from "./utils"; +import {buildThumbnailList} from "../content/projects"; //----------------------------------------------------------------------- export function interactiveView() { - const viewWrapper = document.getElementById('view-wrapper')!; const article = document.createElement('article'); - const latestProject = document.createElement('div'); + const latestProject = document.createElement('section'); const listProject = document.createElement('div'); - const viewTitle = writeTitle("h1", "interactive"); - const allProjectTitle = writeTitle("h3", "give me more"); + const viewTitle = writeTitle("h1", "project collection"); + const allProjectTitle = writeTitle("h2", "latest entries"); latestProject.className = 'latest-project'; listProject.className = 'list-project'; - viewWrapper.appendChild(article); article.appendChild(viewTitle); article.appendChild(latestProject); article.appendChild(listProject); diff --git a/src/views/project-view/styles.css b/src/views/project-view/styles.css deleted file mode 100644 index 0d2814f..0000000 --- a/src/views/project-view/styles.css +++ /dev/null @@ -1,4 +0,0 @@ -section { - margin:0; - padding: 58px 0; -} \ No newline at end of file diff --git a/src/views/project-view/index.ts b/src/views/project.ts similarity index 73% rename from src/views/project-view/index.ts rename to src/views/project.ts index bc3291e..fb01861 100644 --- a/src/views/project-view/index.ts +++ b/src/views/project.ts @@ -1,10 +1,9 @@ -import "./styles.css"; -import { +import { writeTitle, createVideoShowcase, writeParagraph, createContentGallery, createBackground -} from "../utils" +} from "./utils" export type ProjectContent = { @@ -14,8 +13,15 @@ export type ProjectContent = { readonly tagline: string; readonly paragraphs: ReadonlyArray; readonly imageGallery: ReadonlyArray; + readonly credits: ReadonlyArray; } +export type ProjectCredits = [ + name: string, + link: string, +] + + //----------------------------------------------------------------------- export function projectView(content: ProjectContent) { @@ -27,6 +33,10 @@ export function projectView(content: ProjectContent) { article.appendChild(description(content.tagline, content.paragraphs)); article.appendChild(gallery(content.imageGallery)); + if (content.credits && content.credits.length > 0) { + article.appendChild(credits(content.credits)); + } + return article; } @@ -73,4 +83,23 @@ function gallery(imageRefs: ReadonlyArray) { gallery.appendChild(projectGallery); return gallery; -} \ No newline at end of file +} + + +function credits(creditsRef: ReadonlyArray) { + const credits = document.createElement('section'); + credits.className = "credits"; + + credits.appendChild(writeTitle("h2", "With the help of")); + + creditsRef.forEach(credit => { + const creditLink = document.createElement('a'); + creditLink.href = credit[1]; + creditLink.textContent = credit[0]; + creditLink.target = "_blank"; + credits.appendChild(creditLink); + }); + + return credits; +} + diff --git a/src/views/utils/styles.css b/src/views/styles.css similarity index 59% rename from src/views/utils/styles.css rename to src/views/styles.css index 17f805f..10f5b08 100644 --- a/src/views/utils/styles.css +++ b/src/views/styles.css @@ -1,5 +1,53 @@ -#view-box { - padding-left: 300px; +body { + background-color: black; +} + +h1 { + margin: 0; + max-width: 75%; + font-size: 6em; + line-height: 75%; + color: white; + text-transform: lowercase; +} + +h2 { + margin: 0 0 20px 0; + font-size: 1.2em; + color: white; + text-transform: uppercase; +} + +h3 { + font-family: "Handjet", serif; + font-size: 2.8em; + font-weight: 600; + color: #828282; +} + +h5 { + font-family: "Handjet", serif; + font-size: 1.5em; + font-weight: 600; + color: #828282; +} + +p { + font-size: 2em; + font-weight: normal; + color: #828282; + line-height: 150%; + margin: 0; +} + +p.description { + font-family: "Cabin", sans-serif; + color: #A1A1A1; + font-size: 0.9em; +} + +#view-box { + padding-left: 280px; height: 100%; font-family: "Cabin", sans-serif; @@ -7,8 +55,12 @@ #view-wrapper { width: 720px; margin: 0 auto; - padding-top: 100px; + padding-top: 60px; + section { + margin:0; + padding: 58px 0; + } .showcase { margin: 50px 0; @@ -22,7 +74,7 @@ width: 100%; padding-top: 65px; z-index: -2; - background-image: url("./assets/video-showcase-decoration.png"); + background-image: url("utils/assets/video-showcase-decoration.png"); background-blend-mode: multiply; background-repeat: repeat-x; filter: invert(100%) sepia(100%) hue-rotate(240deg) saturate(100%); @@ -58,49 +110,18 @@ border-radius: 10px; } - h1 { - margin: 0; - max-width: 75%; - font-size: 6em; - line-height: 75%; - color: white; - text-transform: lowercase; - } - - h2 { - margin: 0 0 20px 0; - font-size: 1.2em; - color: white; - text-transform: uppercase; - } - - h3 { + .credits a { font-family: "Handjet", serif; - font-size: 2.8em; - font-weight: 600; - color: #828282; - } - - h5 { - font-family: "Handjet", serif; - font-size: 1.5em; - font-weight: 600; - color: #828282; - } - - p { - font-size: 2em; + display: inline-block; + color: #828282;; + font-size: 2.5em; font-weight: normal; - color: #828282; - line-height: 150%; - margin: 0; + padding: 0 30px 15px 0; + text-align: center; + text-decoration-color: #3BFFC5; } - p.description { - font-family: "Cabin", sans-serif; - color: #A1A1A1; - font-size: 0.9em; - } + } .backgrounds { @@ -114,7 +135,7 @@ .layer-a { position: fixed; - background-image: url("./assets/background-test.png"); + background-image: url("utils/assets/background-test.png"); width: 100%; height: 100%; z-index: -11; diff --git a/src/views/utils/index.ts b/src/views/utils/index.ts index 1ae2ad7..d6f030c 100644 --- a/src/views/utils/index.ts +++ b/src/views/utils/index.ts @@ -1,6 +1,3 @@ -import './styles.css'; - -export * from "./text-utils.ts"; +export * from "./text-utils.ts"; export * from "./visual-utils.ts"; -export * from "./view-utils.ts"; export * from "./backgrounds-utils.ts"; \ No newline at end of file diff --git a/src/views/utils/visual-utils.ts b/src/views/utils/visual-utils.ts index 0baf144..ffe2b87 100644 --- a/src/views/utils/visual-utils.ts +++ b/src/views/utils/visual-utils.ts @@ -13,6 +13,7 @@ export function createVideoShowcase(assetLinks: ReadonlyArray) { videoContainer.appendChild(video); video.autoplay = true; + video.muted = true; video.loop = true; assetLinks.forEach(link => {