diff --git a/src/components/vertical-nav/info-project.ts b/src/components/vertical-nav/info-project.ts new file mode 100644 index 0000000..e12255e --- /dev/null +++ b/src/components/vertical-nav/info-project.ts @@ -0,0 +1,89 @@ +import {renderer} from "./project-data-cube.ts"; + +export type OutsideLink = [ + name: string, + path: string, +] + +export type LinkCollection = [ + title: string, + links: OutsideLink[], +] + +export type LinkButton = [ + label: string, +] + +//----------------------------------------------------------------------- + +export function projectInfo(collections: LinkCollection[], buttons: LinkButton[]) { + const container = document.createElement('div'); + container.className = "project-info"; + container.appendChild(dataSection()); + + collections.forEach(collection => { + const [title, links] = collection; + container.appendChild(linkSection(title, links)); + }) + + buttons.forEach(button => { + const [label] = button; + container.appendChild(buttonSection(label)); + }) + + return container; +} + +//----------------------------------------------------------------------- + +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'); + + buttonLine.type = "button"; + buttonLine.textContent = label; + + section.appendChild(buttonLine); + + return section; +} + +function dataSection() { + const detailSection = document.createElement("section"); + const detailTitle = document.createElement("h4"); + detailTitle.textContent = "Tech Distribution"; + + detailSection.appendChild(detailTitle); + detailSection.appendChild(renderer.domElement); + + return detailSection; +} + + + diff --git a/src/components/vertical-nav/project-nav.ts b/src/components/vertical-nav/project-nav.ts deleted file mode 100644 index 700bf76..0000000 --- a/src/components/vertical-nav/project-nav.ts +++ /dev/null @@ -1,97 +0,0 @@ -import {renderer} from "./project-data-cube.ts"; - -export type AboutProject = { - readonly release: string; - readonly platforms: string; - readonly developer: string; -} - -export type RelatedLinks = [ - name: string, - path: string, -] - -//----------------------------------------------------------------------- - -export function projectInfo(about: AboutProject, links: RelatedLinks[]) { - const navWrapper = document.getElementById('nav-wrapper'); - const section = document.createElement('section'); - - navWrapper?.appendChild(section); - - section.appendChild(sectionData()); - - if (typeof about === "object" && typeof links === "object") { - section.appendChild(sectionAboutTheGame(about)); - section.appendChild(sectionRelatedLinks(links)); - } - else { - throw new Error("Infos are not well formatted") - } - - return section; -} - -//----------------------------------------------------------------------- - -function sectionData() { - const detailSection = document.createElement("div"); - const detailTitle = document.createElement("h4"); - - detailSection.className = "detail-section"; - detailTitle.textContent = "Tech Distribution"; - - detailSection.appendChild(detailTitle); - detailSection.appendChild(renderer.domElement); - - return detailSection; -} - -function sectionAboutTheGame(about: AboutProject) { - const detailSection = document.createElement('div'); - const detailTitle = document.createElement("h4"); - const releaseDate = document.createElement("p"); - const platformAvailable = document.createElement("p"); - const developerNames = document.createElement("p"); - - detailSection.className = "detail-section"; - detailTitle.textContent = "About the Project" - releaseDate.innerHTML = "Release date: " + about.release; - platformAvailable.innerHTML = "Platforms: " + about.platforms; - developerNames.innerHTML = "Developer: " + about.developer; - - detailSection.appendChild(detailTitle); - detailSection.appendChild(releaseDate); - detailSection.appendChild(platformAvailable); - detailSection.appendChild(developerNames); - - return detailSection; -} - - -function sectionRelatedLinks(relatedLinks: RelatedLinks[]) { - const detailSection = document.createElement('div'); - const detailTitle = document.createElement("h4"); - const linkList = document.createElement('ul'); - - detailSection.className = "detail-section"; - detailTitle.textContent = "Related Links"; - - detailSection.appendChild(detailTitle); - detailSection.appendChild(linkList); - - relatedLinks.forEach(relatedLink => { - const [name, path] = relatedLink; - const linkLine = document.createElement('li'); - const link = document.createElement("a"); - - link.href = path; - link.target = "_blank"; - link.textContent = name; - - linkList.appendChild(linkLine); - linkLine.appendChild(link); - }) - - return detailSection; -} \ No newline at end of file diff --git a/src/components/vertical-nav/styles.css b/src/components/vertical-nav/styles.css index 6d66782..971e270 100644 --- a/src/components/vertical-nav/styles.css +++ b/src/components/vertical-nav/styles.css @@ -5,11 +5,57 @@ width: 300px; height: 100%; background-color: #080808; - box-shadow: 0px 0px 0px 16px rgba(8,8,8,0.5), 0px 0px 0px 8px rgba(8,8,8,0.5); + box-shadow: 0 0 0 16px rgba(8,8,8,0.5), 0 0 0 8px rgba(8,8,8,0.5); #nav-wrapper { width: 230px; margin: 0 auto; + + section { + padding: 60px 0 0 0; + + h4 { + font-family: "Cabin", sans-serif; + color: white; + text-transform: uppercase; + font-weight: bold; + font-size: 1em; + margin: 0 0 20px 0; + padding: 0; + } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + + li { + display: block; + line-height: 180%; + font-family: "handjet", serif; + font-size: 1em; + color: white; + } + + a { + color: #a1a1a1; + text-decoration-color: #3BFFC5; + } + + button { + width: 100%; + color: white; + font-family: "Handjet", serif; + font-size: 1.5em; + font-weight: bold; + text-transform: uppercase; + padding: 10px 0; + background-color: #FF523B; + border-radius: 5px; + border: none; + } + } } .top-triangle { diff --git a/src/content/projects/index.ts b/src/content/projects/index.ts index b7522c6..a8d0e74 100644 --- a/src/content/projects/index.ts +++ b/src/content/projects/index.ts @@ -1,19 +1,14 @@ import {projectView} from "../../views/project-view"; -import {projectInfo} from "../../components/vertical-nav/project-nav.ts"; +import {projectInfo} from "../../components/vertical-nav/info-project.ts"; import {renderView} from "../../views/utils"; import {renderNavInfo} from "../../components/vertical-nav"; import {createThumbnail} from "../../components/thumbnail"; -import * as nextUx from "./next-ux"; -import * as tank from "./tank"; import * as spaceCompass from "./space-compass"; const pageReferences: { [key: string]: any } = { - "next-ux": nextUx, "space-compass": spaceCompass, - "tank": tank, - }; //----------------------------------------------------------------------- @@ -25,7 +20,7 @@ export function buildProjectPage(pageReference: string) { return; } const viewContent = projectView(page!.content); - const navInfo = projectInfo(page!.aboutInfo, page!.relatedLinksInfo); + const navInfo = projectInfo(page!.linkSections, page!.buttons); renderNavInfo(navInfo); renderView(viewContent); diff --git a/src/content/projects/next-ux/assets/nextUx-screenshot-1.jpg b/src/content/projects/next-ux/assets/nextUx-screenshot-1.jpg deleted file mode 100644 index 2d4ff2d..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-screenshot-1.jpg and /dev/null differ diff --git a/src/content/projects/next-ux/assets/nextUx-screenshot-2.jpg b/src/content/projects/next-ux/assets/nextUx-screenshot-2.jpg deleted file mode 100644 index e2f647f..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-screenshot-2.jpg and /dev/null differ diff --git a/src/content/projects/next-ux/assets/nextUx-screenshot-3.jpg b/src/content/projects/next-ux/assets/nextUx-screenshot-3.jpg deleted file mode 100644 index 652ec89..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-screenshot-3.jpg and /dev/null differ diff --git a/src/content/projects/next-ux/assets/nextUx-screenshot-4.jpg b/src/content/projects/next-ux/assets/nextUx-screenshot-4.jpg deleted file mode 100644 index d7cd0c1..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-screenshot-4.jpg and /dev/null differ diff --git a/src/content/projects/next-ux/assets/nextUx-showcase.mp4 b/src/content/projects/next-ux/assets/nextUx-showcase.mp4 deleted file mode 100644 index 43fbdcb..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-showcase.mp4 and /dev/null differ diff --git a/src/content/projects/next-ux/assets/nextUx-showcase.webm b/src/content/projects/next-ux/assets/nextUx-showcase.webm deleted file mode 100644 index ca5fe48..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-showcase.webm and /dev/null differ diff --git a/src/content/projects/next-ux/assets/nextUx-thumbnail.jpg b/src/content/projects/next-ux/assets/nextUx-thumbnail.jpg deleted file mode 100644 index 7d182d0..0000000 Binary files a/src/content/projects/next-ux/assets/nextUx-thumbnail.jpg and /dev/null differ diff --git a/src/content/projects/next-ux/index.ts b/src/content/projects/next-ux/index.ts deleted file mode 100644 index 112449d..0000000 --- a/src/content/projects/next-ux/index.ts +++ /dev/null @@ -1,56 +0,0 @@ -import {ProjectContent} from "../../../views/project-view"; -import {AboutProject, RelatedLinks} from "../../../components/vertical-nav/project-nav.ts"; -import {thumbnailContent} from "../../../components/thumbnail"; - -import WEBM_VIDEO from "./assets/nextUX-showcase.webm"; -import MP4_VIDEO from "./assets/nextUX-showcase.mp4"; - -import SCREENSHOT_1 from "./assets/nextUX-screenshot-1.jpg" -import SCREENSHOT_2 from "./assets/nextUX-screenshot-2.jpg" -import SCREENSHOT_3 from "./assets/nextUX-screenshot-3.jpg" -import SCREENSHOT_4 from "./assets/nextUX-screenshot-4.jpg" - -import THUMBNAIL from "./assets/nextUX-thumbnail.jpg"; - - -export const content: ProjectContent = { - name: "Next UX", - tagline: "Not just a visual revamp", - path: "www.charlesdoucet.com/interactive/", - - paragraphs: [ - "Bringing a UX perspective to Voxco’s software. This includes a complete revamp of the user interfaces, but also a shift in the development’s mindset. The new UI is more user-friendly and gives user flexibility on the customization of their workspaces.", - "While I’m leading the UX initiative, it’s crucial for me to establish a collaborative environment between developers, users and the other important actors. That said, even if I design and make prototypes, this is by far the most team-based project I had the chance to work on. And it’s evolving every day." - ], - - heroVideo: [ - WEBM_VIDEO, - MP4_VIDEO - ], - - imageGallery: [ - SCREENSHOT_1, - SCREENSHOT_2, - SCREENSHOT_3, - SCREENSHOT_4 - ] -} - -export const aboutInfo: AboutProject = { - release: "March 20, 2021", - platforms: "Web, React", - developer: "Charles Doucet" -} - -export const relatedLinksInfo: RelatedLinks[] = [ - ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"], - ["GitHub Project", "https://github.com/charlesDouc/CART-415/wiki"] -] - -export const thumbnail: thumbnailContent = { - thumbnail: THUMBNAIL, - title: content.name, - description: "A complete revamp of the user interfaces for a better experience.", - tags: ["UX Design", "React"], - path: "next-ux" -} \ No newline at end of file diff --git a/src/content/projects/space-compass/index.ts b/src/content/projects/space-compass/index.ts index dcd6e4e..ebc4250 100644 --- a/src/content/projects/space-compass/index.ts +++ b/src/content/projects/space-compass/index.ts @@ -1,5 +1,5 @@ import {ProjectContent} from "../../../views/project-view"; -import {AboutProject, RelatedLinks} from "../../../components/vertical-nav/project-nav.ts"; +import {LinkButton, LinkCollection, OutsideLink} from "../../../components/vertical-nav/info-project.ts"; import {thumbnailContent} from "../../../components/thumbnail"; import WEBM_VIDEO from "./assets/spaceCompass-showcase.webm"; @@ -14,13 +14,12 @@ import THUMBNAIL from "./assets/spaceCompass-thumbnail.jpg"; export const content: ProjectContent = { - name: "Space Compass", - tagline: "A 360 Odyssey", - path: "www.charlesdoucet.com/interactive/", + title: "Space Compass", + subtitle: "game prototype - winter 2020", + tagline: "Radial Navigation", paragraphs: [ - "The core goal in the making of Space Compass was to end up with a playable game in short delays. A bit like a personal game jam! The game is a space shooter, where players’ movement is limited around a circle’s circumference. Player needs to dodge or destroy several asteroids, as well as some structures in the way.", - "I’ve put a lot of effort in the UI elements like the main menu and the in-game interfaces. I wanted those interfaces to be dynamic and attractive while being in a minimal environment." + "This space-themed shooter features circular movement constraints, requiring players to evade or eliminate various asteroids and structures." ], heroVideo: [ @@ -36,21 +35,28 @@ export const content: ProjectContent = { ] } -export const aboutInfo: AboutProject = { - release: "March 20, 2020", - platforms: "Web, Windows, Mac", - developer: "Charles Doucet" -} - -export const relatedLinksInfo: RelatedLinks[] = [ +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.name, - description: "A space shooter where the player has to dodge and destroy asteroids to get the highest score.", + 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 diff --git a/src/content/projects/tank/assets/tank-screenshot-1.jpg b/src/content/projects/tank/assets/tank-screenshot-1.jpg deleted file mode 100644 index c3161b6..0000000 Binary files a/src/content/projects/tank/assets/tank-screenshot-1.jpg and /dev/null differ diff --git a/src/content/projects/tank/assets/tank-screenshot-2.jpg b/src/content/projects/tank/assets/tank-screenshot-2.jpg deleted file mode 100644 index a9aa934..0000000 Binary files a/src/content/projects/tank/assets/tank-screenshot-2.jpg and /dev/null differ diff --git a/src/content/projects/tank/assets/tank-screenshot-3.jpg b/src/content/projects/tank/assets/tank-screenshot-3.jpg deleted file mode 100644 index 5359a65..0000000 Binary files a/src/content/projects/tank/assets/tank-screenshot-3.jpg and /dev/null differ diff --git a/src/content/projects/tank/assets/tank-screenshot-4.jpg b/src/content/projects/tank/assets/tank-screenshot-4.jpg deleted file mode 100644 index d4ec8f2..0000000 Binary files a/src/content/projects/tank/assets/tank-screenshot-4.jpg and /dev/null differ diff --git a/src/content/projects/tank/assets/tank-showcase.mp4 b/src/content/projects/tank/assets/tank-showcase.mp4 deleted file mode 100644 index a547c9d..0000000 Binary files a/src/content/projects/tank/assets/tank-showcase.mp4 and /dev/null differ diff --git a/src/content/projects/tank/assets/tank-showcase.webm b/src/content/projects/tank/assets/tank-showcase.webm deleted file mode 100644 index d489fbd..0000000 Binary files a/src/content/projects/tank/assets/tank-showcase.webm and /dev/null differ diff --git a/src/content/projects/tank/assets/tank-thumbnail.jpg b/src/content/projects/tank/assets/tank-thumbnail.jpg deleted file mode 100644 index 5436ec5..0000000 Binary files a/src/content/projects/tank/assets/tank-thumbnail.jpg and /dev/null differ diff --git a/src/content/projects/tank/index.ts b/src/content/projects/tank/index.ts deleted file mode 100644 index 7fb03e4..0000000 --- a/src/content/projects/tank/index.ts +++ /dev/null @@ -1,56 +0,0 @@ -import {ProjectContent} from "../../../views/project-view/"; -import {AboutProject, RelatedLinks} from "../../../components/vertical-nav/project-nav.ts"; -import {thumbnailContent} from "../../../components/thumbnail"; - -import WEBM_VIDEO from "./assets/tank-showcase.webm"; -import MP4_VIDEO 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 THUMBNAIL from "./assets/tank-thumbnail.jpg"; - -export const content: ProjectContent = { - name: "TANK", - tagline: "A collection of three unique iterations", - path: "www.charlesdoucet.com/interactive/", - - paragraphs: [ - "TANK assemble three different games, each based on the original TANKS! game made by Unity Technologies. It’s an exploration of mechanics and the discovery of new environment. The game is experimental and has the goal to dig the player’s curiosity. Prepare yourself as you step into unknown territory, revealing the ruins of a lost civilization.", - "The game includes three chapters: Projection, Dialogue and Farewell. Each of them offers a unique gameplay while evolving around a common theme." - ], - - heroVideo: [ - WEBM_VIDEO, - MP4_VIDEO - ], - - imageGallery: [ - SCREENSHOT_1, - SCREENSHOT_2, - SCREENSHOT_3, - SCREENSHOT_4 - ] -} - -export const aboutInfo: AboutProject = { - release: "April 29, 2018", - platforms: "Windows, Mac", - developer: "Charles Doucet" -} - -export const relatedLinksInfo: RelatedLinks[] = [ - ["Process Journal", "https://github.com/charlesDouc/CART-415/wiki"], - ["GitHub Project", "https://github.com/charlesDouc/CART-415/wiki"], - ["TANKS!", "https://github.com/charlesDouc/CART-415/wiki"] -] - -export const thumbnail: thumbnailContent = { - thumbnail: THUMBNAIL, - title: content.name, - description: "A collection of three different games. Each showcasing a lonely tank on its explorations of mysterious environments.", - tags: ["Unity", "Game Design"], - path: "tank" -} diff --git a/src/content/projects/voxco-proposal/index.ts b/src/content/projects/voxco-proposal/index.ts deleted file mode 100644 index 0cace8a..0000000 --- a/src/content/projects/voxco-proposal/index.ts +++ /dev/null @@ -1,56 +0,0 @@ -import {ProjectContent} from "../../../views/project-view/"; -import {AboutProject, RelatedLinks} from "../../../components/vertical-nav/project-nav.ts"; -import {thumbnailContent} from "../../../components/thumbnail"; - -import WEBM_VIDEO from "./assets/voxco-proposal-showcase.webm"; -import MP4_VIDEO from "./assets/voxco-proposal-showcase.mp4"; - -import SCREENSHOT_1 from "./assets/voxco-proposal-screenshot-1.jpg" -import SCREENSHOT_2 from "./assets/voxco-proposal-screenshot-2.jpg" -import SCREENSHOT_3 from "./assets/voxco-proposal-screenshot-3.jpg" -import SCREENSHOT_4 from "./assets/voxco-proposal-screenshot-4.jpg" - -import THUMBNAIL from "./assets/voxco-proposal-thumbnail.jpg"; - -export const content: ProjectContent = { - name: "INSERT", - tagline: "INSERT", - path: "INSERT", - - paragraphs: [ - "INSERT", - "INSERT" - ], - - heroVideo: [ - WEBM_VIDEO, - MP4_VIDEO - ], - - imageGallery: [ - SCREENSHOT_1, - SCREENSHOT_2, - SCREENSHOT_3, - SCREENSHOT_4 - ] -} - -export const aboutInfo: AboutProject = { - release: "INSERT", - platforms: "INSERT", - developer: "INSERT" -} - -export const relatedLinksInfo: RelatedLinks[] = [ - ["INSERT", "INSERT URL"], - ["INSERT", "INSERT URL"], - ["INSERT", "INSERT URL"] -] - -export const thumbnail: thumbnailContent = { - thumbnail: THUMBNAIL, - title: content.name, - description: "INSERT", - tags: ["INSERT", "INSERT"], - path: "voxco-proposal" -} diff --git a/src/index.ts b/src/index.ts index cd076b5..3649af7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ import './views/home-view/styles.css'; import {buildVerticalNav} from "./components/vertical-nav"; import {buildViewBase} from "./views/utils"; -import {interactiveView} from "./views/interactive-view"; +import {buildProjectPage} from "./content/projects"; function init() { @@ -13,7 +13,7 @@ function init() { contentPage.appendChild(verticalNav); - interactiveView(); + buildProjectPage("space-compass"); } init(); \ No newline at end of file diff --git a/src/views/project-view/index.ts b/src/views/project-view/index.ts index 956800a..8a90d4a 100644 --- a/src/views/project-view/index.ts +++ b/src/views/project-view/index.ts @@ -1,4 +1,5 @@ -import { +import "./styles.css"; +import { writeTitle, createVideoShowcase, writeParagraph, @@ -7,37 +8,68 @@ export type ProjectContent = { - readonly name: string; + readonly title: string; + readonly subtitle: string; + readonly heroVideo: ReadonlyArray; readonly tagline: string; - readonly path: string; - readonly paragraphs: ReadonlyArray; - readonly heroVideo: ReadonlyArray; readonly imageGallery: ReadonlyArray; } //----------------------------------------------------------------------- export function projectView(content: ProjectContent) { - const viewWrapper = document.getElementById('view-wrapper')!; const article = document.createElement('article'); - const projectTitle = writeTitle("h1", content.name); - const projectShowcase = createVideoShowcase(content.heroVideo); - const projectSubtitle = writeTitle("h2", content.tagline) + article.appendChild(header(content.title, content.subtitle)); + article.appendChild(videoShowcase(content.heroVideo)); + article.appendChild(description(content.tagline, content.paragraphs)); + article.appendChild(gallery(content.imageGallery)); + + return article; +} + +//----------------------------------------------------------------------- + +function header(title: string, subtitle: string) { + const header = document.createElement('header'); + + header.appendChild(writeTitle("h1", title)); + header.appendChild(writeTitle("h5", subtitle)); + + return header; +} + + +function videoShowcase(videoRefs: ReadonlyArray) { + const videoShowcase = document.createElement('section'); + videoShowcase.appendChild(createVideoShowcase(videoRefs)); + + return videoShowcase; +} + - viewWrapper.appendChild(article); - article.appendChild(projectTitle); - article.appendChild(projectShowcase); - article.appendChild(projectSubtitle); +function description(tagline: string, paragraphs: ReadonlyArray) { + const description = document.createElement('section'); + description.className = "description"; - content.paragraphs.forEach(paragraph => { + description.appendChild(writeTitle("h2", tagline)); + paragraphs.forEach(paragraph => { const text = writeParagraph(paragraph); - article.appendChild(text); - }) + description.appendChild(text); + }); - const projectGallery = createContentGallery(content.imageGallery); - article.appendChild(projectGallery); + return description; +} - return article; + +function gallery(imageRefs: ReadonlyArray) { + const gallery = document.createElement('section'); + gallery.className = "gallery"; + + gallery.appendChild(writeTitle("h2", "Media Gallery")); + const projectGallery = createContentGallery(imageRefs); + gallery.appendChild(projectGallery); + + return gallery; } \ No newline at end of file diff --git a/src/views/project-view/styles.css b/src/views/project-view/styles.css new file mode 100644 index 0000000..0d2814f --- /dev/null +++ b/src/views/project-view/styles.css @@ -0,0 +1,4 @@ +section { + margin:0; + padding: 58px 0; +} \ No newline at end of file diff --git a/src/views/utils/assets/video-showcase-decoration.png b/src/views/utils/assets/video-showcase-decoration.png new file mode 100644 index 0000000..c524240 Binary files /dev/null and b/src/views/utils/assets/video-showcase-decoration.png differ diff --git a/src/views/utils/styles.css b/src/views/utils/styles.css index e0dc852..335ddf7 100644 --- a/src/views/utils/styles.css +++ b/src/views/utils/styles.css @@ -17,21 +17,46 @@ border: #080808 solid 3px; } - .video-showcase { - margin: 50px 0; + .video-showcase::before, .video-showcase::after { + content: ""; + display: block; width: 100%; - border: #080808 solid 3px; + padding-top: 65px; + z-index: -2; + background-image: url("./assets/video-showcase-decoration.png"); + background-blend-mode: multiply; + background-repeat: repeat-x; + filter: invert(100%) sepia(100%) hue-rotate(240deg) saturate(100%); } - .gallery { - margin: 40px 0; - padding-top: 30px; - border-top: #3BFFC5 solid 3px; + .video-showcase::before { + margin-bottom: -15px; } - .gallery img { + .video-showcase::after { + margin-top: -15px; + transform: scaleY(-1); + } + + .video-showcase video { width: 100%; - margin: 20px 0; + border-radius: 15px; + z-index: 5; + position: relative; + } + + .gallery-content { + padding-top: 20px; + } + + .gallery-content img { + object-fit: cover; + width: 45%; + aspect-ratio:1/1; + margin: 10px 0; + margin-right: 4%; + border: 2px solid #505050; + border-radius: 10px; } h1 { @@ -44,9 +69,10 @@ } h2 { - margin: 0; - font-size: 2.8em; - color: #828282; + margin: 0 0 20px 0; + font-size: 1.2em; + color: white; + text-transform: uppercase; } h3 { @@ -56,11 +82,19 @@ color: #828282; } + h5 { + font-family: "Handjet", serif; + font-size: 1.5em; + font-weight: 600; + color: #828282; + } + p { - font-size: 1.2em; + font-size: 2em; + font-weight: normal; color: #828282; - line-height: 115%; - margin: 15px 0; + line-height: 150%; + margin: 0; } p.description { diff --git a/src/views/utils/visual-utils.ts b/src/views/utils/visual-utils.ts index 8ee8f31..88237fa 100644 --- a/src/views/utils/visual-utils.ts +++ b/src/views/utils/visual-utils.ts @@ -4,10 +4,17 @@ They are mainly used in content templates. */ + + export function createVideoShowcase(assetLinks: ReadonlyArray) { + const videoContainer = document.createElement("div"); const video = document.createElement("video"); - video.className = "video-showcase"; + + videoContainer.className = "video-showcase"; + videoContainer.appendChild(video); + video.autoplay = true; + video.loop = true; assetLinks.forEach(link => { const source = document.createElement("source"); @@ -15,12 +22,12 @@ export function createVideoShowcase(assetLinks: ReadonlyArray) { video.appendChild(source); }); - return video; + return videoContainer; } export function createContentGallery(assetLinks: ReadonlyArray) { const gallery = document.createElement("div"); - gallery.className = "gallery"; + gallery.className = "gallery-content"; assetLinks.forEach(link => { const screenshot = document.createElement("img");