multiple full screens of projects

Author: beumsk

README.md

@@ -31,28 +31,24 @@ Trigger it with Commit and Push to master.
 
 ## TODO
 
+- add more images of pro project: features/pages !!
 - add new projects (kineval, tarava?, todolist?)
 - shorten cv old web experience? + add senior dev? + new skills to filter?
 - review images (avoid bg-img, use different resolutions: https://dev.to/builderio/optimal-images-in-html-5bg9)
 - review design: https://anthonyhobday.com/sideprojects/saferules/
 
 X.X
+- advertisements in blog posts ?
 - back to top button
 - site search ??
-- add more images of features/pages?
 
-Blog posts => ads ?
-- series of posts: links inside the posts
+Blog posts
 - firebase series: rules, cloud fx, diff env., backup
-- react advanced?
 - use prism in your nextjs markdown (+scss)
 - css posts: dropdown, input with label animation
 - use mdx with nextjs
-- local ssg site with python
-- props to parent/child
 - md to html
 - SSG vs SSR
-- dev.to
 
 ## BLOG POSTS
 
@@ -71,6 +67,7 @@ Blog posts => ads ?
 - Write the post with keywords, speaking with we, code examples and a final result on codepen or codesandbox
 - Review spell on https://languagetool.org/
 - Create blog post image and upload in /public/images/posts 
+  - Dimensions of 1200x630px reduced to 600x315px in .jpg
   - `yarn screen:bm <file-name.extension>` (eg. `yarn screen:bm article.jpg`)
   - OR https://codepen.io/beumsk/full/wvjYygY
 - Create blog content image and upload in /public/images/content
@@ -103,10 +100,11 @@ Blog posts => ads ?
   ```
 - Create an optimized miniature image and upload in /public/images/projects
   - Dimensions of 1366x768px reduced to 683x384px in .jpg (or 1200x630px & 600x315px)
-  - `yarn screen:pm <project-url> <file-name.extension>` (eg. `yarn screen:pm https://remybeumier.be rb.jpg`)
-- Create an optimized full size screenshot of live version and upload in /public/images/projects
-  - Dimensions of 1920x100% (reduced?) in .jpg
-  - `yarn screen:pf <project-url> <file-name-screen.extension>` (eg. `yarn screen:pf https://remybeumier.be rb-screen.jpg`)
+  - `yarn screen:pm <project-url> <project-name.extension>` (eg. `yarn screen:pm https://remybeumier.be remybeumier.jpg`)
+- Create one or more optimized full size screenshots of live version and upload in /public/images/projects
+  - Dimensions of 1200x100% (reduced?) in .jpg
+  - `yarn screen:pf <project-url> <project-name-screen.extension>` (eg. `yarn screen:pf https://remybeumier.be remybeumier-screen.jpg`)
+  - `yarn screen:pf <project-url> <project-name-screen-index.extension>` (eg. `yarn screen:pf https://remybeumier.be remybeumier-screen-1.jpg`)
 
 ### PERSO
 
@@ -132,7 +130,7 @@ Blog posts => ads ?
   ```
 - Create an optimized miniature image and upload in /public/images/projects
   - Dimensions of 1366x768px reduced to 683x384px in .jpg (or 1200x630px & 600x315px)
-  - `yarn screen:pm <project-url> <file-name.extension>` (eg. `yarn screen:pm https://remybeumier.be rb.jpg`)
+  - `yarn screen:pm <project-url> <project-name.extension>` (eg. `yarn screen:pm https://remybeumier.be rb.jpg`)
 
 ## DATA (COMMITS)
 

components/screens.tsx

@@ -0,0 +1,85 @@
+import { HTMLAttributes, useEffect, useState } from 'react';
+import { AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
+import { MdHeight } from 'react-icons/md';
+import useJavaScriptEnabled from '@hooks/useJavaScript';
+import { ProjectType } from '@types';
+
+type LinkType = {
+  project: ProjectType;
+} & HTMLAttributes<HTMLDivElement>;
+
+export default function Screens({ project, ...props }: LinkType) {
+  const isJavaScriptEnabled = useJavaScriptEnabled();
+  const [index, setIndex] = useState(0);
+  const [isFull, setIsFull] = useState(true);
+
+  function handleSwipe(dir: 'left' | 'right') {
+    if (dir === 'left') {
+      setIndex((prev) => (prev === 0 ? project.screens.length - 1 : prev - 1));
+    } else {
+      setIndex((prev) => (prev === project.screens.length - 1 ? 0 : prev + 1));
+    }
+  }
+
+  useEffect(() => {
+    setIndex(0);
+  }, [project.link]);
+
+  return (
+    <>
+      {isJavaScriptEnabled ? (
+        <div className="space-between-x mb-4">
+          {project.screens.length > 1 ? (
+            <button title="See previous screenshot" onClick={() => handleSwipe('left')}>
+              <AiFillCaretLeft className="mr-1" />
+              Previous
+            </button>
+          ) : null}
+          <button onClick={() => setIsFull((c) => !c)}>
+            <MdHeight className="mr-1" />
+            {isFull ? 'Set screenshot scrollable' : 'Set screenshot full size'}
+            <MdHeight className="ml-1" />
+          </button>
+          {project.screens.length > 1 ? (
+            <button title="See next screenshot" onClick={() => handleSwipe('right')}>
+              Next
+              <AiFillCaretRight className="ml-1" />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      <div className="project__screen" {...props}>
+        <figure className={isFull ? '' : 'scrollable'}>
+          <img
+            src={project.screens[index]}
+            alt={`Screenshot of ${project.current}`}
+            width="300"
+            height="400"
+            loading="lazy"
+          />
+          <figcaption className="sr-only">{`Full size screenshot of ${project.title} website`}</figcaption>
+        </figure>
+        {isJavaScriptEnabled && project.screens.length > 1 ? (
+          <>
+            <div
+              title="See previous screenshot"
+              onClick={() => handleSwipe('left')}
+              tabIndex={0}
+              role="button"
+              aria-label="See previous screenshot"
+              className="left"
+            ></div>
+            <div
+              title="See next screenshot"
+              onClick={() => handleSwipe('right')}
+              tabIndex={0}
+              role="button"
+              aria-label="See next screenshot"
+              className="right"
+            ></div>
+          </>
+        ) : null}
+      </div>
+    </>
+  );
+}

data/projects.js

@@ -6,7 +6,7 @@ const projects = [
   //   current: 'https://kine-clarinval.be/',
   //   past: '',
   //   img: '/images/projects/kine-clarinval.jpg',
-  //   screen: '/images/projects/kine-clarinval-screen.png',
+  //   screens: ['/images/projects/kine-clarinval-screen.png'],
   //   modified: '2024-07-27',
   //   intro: '',
   //   tech: ['react', 'firebase','next.js',  'typescript', 'mdx', 'sass'],
@@ -21,8 +21,12 @@ const projects = [
     current: 'https://tripser.blog/',
     past: 'https://web.archive.org/web/20240403175710/https://tripser.blog/',
     img: '/images/projects/tripser-blog.jpg',
-    screen: '/images/projects/tripser-blog-screen.jpg',
-    modified: '2024-07-15',
+    screens: [
+      '/images/projects/tripser-blog-screen.jpg',
+      '/images/projects/tripser-blog-screen-1.jpg',
+      '/images/projects/tripser-blog-screen-2.jpg',
+    ],
+    modified: '2024-12-23',
     intro: 'Tripser blog built with Next.js, Sass, i18n and MDX.',
     tech: ['react', 'next.js', 'typescript', 'mdx', 'sass', 'i18n'],
     chall: [
@@ -41,7 +45,7 @@ const projects = [
     current: 'https://www.parispadelmajor.com/',
     past: 'https://web.archive.org/web/20220714150729/https://www.parispadelmajor.com/',
     img: '/images/projects/padel.jpg',
-    screen: '/images/projects/padel-screen.png',
+    screens: ['/images/projects/padel-screen.png'],
     modified: '2023-11-27',
     intro:
       'Paris Premier Padel Major website built with React. PPPM official website giving access to the latest news, pictures and videos as well as live scoring and ticketing system.',
@@ -63,7 +67,7 @@ const projects = [
     current: 'https://www.parcomega.ca/',
     past: 'https://web.archive.org/web/20211213130150/https://app.staging.parcomega.ca/en/',
     img: '/images/projects/omega.jpg',
-    screen: '/images/projects/omega-screen.png',
+    screens: ['/images/projects/omega-screen.png'],
     modified: '2023-11-27',
     intro:
       'Omega zoo booking website with React. Information about the park and its animals as well as ability to book your stay, table or entrance via ticketing system.',
@@ -84,7 +88,7 @@ const projects = [
     current: 'https://www.onomohotels.com/',
     past: 'https://web.archive.org/web/20211213130244/https://app.staging.onomohotels.com/',
     img: '/images/projects/onomo.jpg',
-    screen: '/images/projects/onomo-screen.png',
+    screens: ['/images/projects/onomo-screen.png'],
     modified: '2023-11-27',
     intro:
       'Onomo hotels booking website with React. Possibility to search and book hotels through a complete booking journey.',
@@ -104,7 +108,7 @@ const projects = [
     current: 'https://www.eliparis.com/',
     past: 'http://web.archive.org/web/20220120123422/https://www.eliparis.com/accueil',
     img: '/images/projects/eli-paris.jpg',
-    screen: '/images/projects/eli-paris-screen.png',
+    screens: ['/images/projects/eli-paris-screen.png'],
     modified: '2023-04-27',
     intro:
       'Eli Paris jewelry store website built with Angular, Node and Strapi. Complete back office to manage the content of the site. Cart, payment and invoice processes.',
@@ -124,7 +128,7 @@ const projects = [
     current: 'https://careers.kpmg.be/',
     past: 'https://web.archive.org/web/20200803122755/https://careers.kpmg.be/',
     img: '/images/projects/kpmg-careers.jpg',
-    screen: '/images/projects/kpmg-careers-screen.png',
+    screens: ['/images/projects/kpmg-careers-screen.png'],
     modified: '2022-04-25',
     intro: 'KPMG Belgium recruitment website built with Umbraco CMS.',
     tech: ['umbraco', 'c#', 'html', 'css', 'javascript', 'sass'],
@@ -145,7 +149,7 @@ const projects = [
     current: 'https://www.kpmglaw.be/',
     past: 'https://web.archive.org/web/20200812114928/https://www.klaw.be/',
     img: '/images/projects/kpmg-law.jpg',
-    screen: '/images/projects/kpmg-law-screen.png',
+    screens: ['/images/projects/kpmg-law-screen.png'],
     modified: '2022-04-25',
     intro: 'KPMG Law (previously Klaw) website built with Umbraco CMS.',
     tech: ['umbraco', 'c#', 'html', 'css', 'javascript', 'sass'],

pages/projects/[slug].tsx

@@ -6,6 +6,7 @@ import Codesandbox from '@components/codesandbox';
 import Grid from '@components/grid';
 import Layout from '@components/layout';
 import Linkk from '@components/linkk';
+import Screens from '@components/screens';
 import Tech from '@components/tech';
 import { ProjectType } from '@types';
 
@@ -52,21 +53,25 @@ export default function DynamicProject({ project, relatedLinks, img, url }: Dyna
             </>
           ) : null}
 
-          {!isPro && project.pen ? <Codepen pen={project.pen} title={project.title} /> : null}
+          {!isPro && project.pen ? (
+            <>
+              <h2>Demo</h2>
+              <Codepen pen={project.pen} title={project.title} />
+            </>
+          ) : null}
 
-          {!isPro && project.sandbox ? <Codesandbox sandbox={project.sandbox} title={project.title} /> : null}
+          {!isPro && project.sandbox ? (
+            <>
+              <h2>Demo</h2>
+              <Codesandbox sandbox={project.sandbox} title={project.title} />
+            </>
+          ) : null}
 
-          {isPro && project.screen ? (
-            <figure className="project__screen">
-              <img
-                src={project.screen}
-                alt={`Screenshot of ${project.current}`}
-                width="300"
-                height="400"
-                loading="lazy"
-              />
-              <figcaption className="sr-only">{`Full size screenshot of ${project.title} website homepage`}</figcaption>
-            </figure>
+          {isPro && project.screens.length ? (
+            <>
+              <h2>Visual{project.screens.length > 1 ? 's' : ''}</h2>
+              <Screens project={project} className="project__screen" />
+            </>
           ) : null}
 
           <div className="mb-15">

public/images/projects/tripser-blog-screen-1.jpg

@@ -160,10 +160,17 @@ figure {
   margin: 0;
 }
 
+input,
+optgroup,
+select,
+textarea {
+  color: var(--text);
+  background: var(--bg);
+}
+
 select {
   padding: 0.25rem 0.5rem;
   cursor: pointer;
-  background: var(--bg);
 }
 
 button {

public/images/projects/tripser-blog-screen-2.jpg

@@ -39,4 +39,47 @@
   border: solid 1px var(--primary);
   box-shadow: var(--shadows6);
   margin-bottom: calc(2.5rem + 12px);
+  position: relative;
+
+  figure.scrollable {
+    max-height: 80vh;
+    overflow: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .left,
+  .right {
+    position: absolute;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 10%;
+    height: 100%;
+    background: var(--bg);
+    z-index: 1;
+    transition: all var(--transition);
+    cursor: pointer;
+    --gradient-color: var(--text40);
+
+    &:hover,
+    &:focus {
+      opacity: 0.5;
+    }
+  }
+
+  .left {
+    left: 0;
+    background: linear-gradient(to right, var(--gradient-color), transparent);
+  }
+
+  .right {
+    right: 0;
+    background: linear-gradient(to left, var(--gradient-color), transparent);
+  }
 }

public/images/projects/tripser-blog-screen.jpg

@@ -5,8 +5,8 @@ const [url, output] = process.argv.slice(2);
 
 if (url && output) {
   console.log(`Taking project screenshot of ${url} and saving it to ${output}.jpg`);
-  takeScreenshot(url, output, { w: 1920, h: 1080 }, true, false)
-    .then((path) => sharpit(path, {}, 80, true))
+  takeScreenshot(url, output, { w: 1200, h: 1080 }, true, false)
+    // .then((path) => sharpit(path, {}, 40, true))
     .catch((err) => console.error(err));
 } else {
   console.error('Invalid or missing arguments');