Merge pull request #49 from peterpeterparker/rebelscan

feat: rebel scan

src/components/layout/layout.js

@@ -11,6 +11,7 @@ import { graphql, StaticQuery } from "gatsby"
 
 import "../../theme/variables.scss"
 import "../../theme/main.scss"
+import "../../theme/frame.scss"
 import "../../theme/section.scss"
 import "../../theme/blog.scss"
 import "../../theme/project.scss"

src/components/projects/projects.js

@@ -80,6 +80,8 @@ class Projects extends React.Component {
  </Chapter>
 
  <div className="projects preview">
+ {this.renderRebelScan()}
+
  {this.renderWooof()}
 
  {this.renderWatamato()}
@@ -290,6 +292,28 @@ class Projects extends React.Component {
  }
  }
 
+ renderRebelScan() {
+ if (!this.props || this.props.filter !== "rebelscan") {
+ return <Link to="/portfolio/rebelscan" aria-label="Rebel Scan">
+ <article className={this.state.mobile ? "rebelscan mobile" : "rebelscan"}>
+ <div className="summary">
+ <Img fluid={this.props.data.rebelscanImage.childImageSharp.fluid}/>
+
+ <h3>Rebel Scan</h3>
+ </div>
+
+ <div className="details">
+ <h2>Rebel Scan</h2>
+
+ <p>Details</p>
+ </div>
+ </article>
+ </Link>
+ } else {
+ return undefined
+ }
+ }
+
  renderWooof() {
  if (!this.props || this.props.filter !== "wooof") {
  return <Link to="/portfolio/wooof" aria-label="Wooof">
@@ -410,6 +434,13 @@ export default ({ filter, all }) => (
  }
  }
  },
+ rebelscanImage: file(relativePath: { eq: "portfolio/rebelscan-icon.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 240) {
+ ...GatsbyImageSharpFluid
+ }
+ }
+ },
  watamatoImage: file(relativePath: { eq: "portfolio/watamato-icon.png" }) {
  childImageSharp {
  fluid(maxWidth: 240) {

src/components/projects/projects.scss

@@ -126,6 +126,16 @@ section.portfolio, section.other-projects {
  }
  }
 
+ &.rebelscan {
+ > div {
+ background: linear-gradient(135deg, #00a5cf, #9fffcb);
+
+ &.details {
+ background: #af2bbf;
+ }
+ }
+ }
+
  &.wooof {
  > div {
  &.details {

src/pages/portfolio/rebelscan.js

@@ -0,0 +1,119 @@
+import React from "react"
+import SEO from "../../components/seo/seo"
+import Layout from "../../components/layout/layout"
+import { graphql, StaticQuery } from "gatsby"
+
+import Chapter from "../../components/chapter/chapter"
+import Projects from "../../components/projects/projects"
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+import { debounce } from "@deckdeckgo/utils"
+
+class RebelScanPage extends React.Component {
+
+ async componentDidMount() {
+ this.initFrameSize()
+
+ window.addEventListener("resize", debounce(() => {
+ this.initFrameSize()
+ }))
+ }
+
+ initFrameSize() {
+ const frameElement = document.querySelector("iframe")
+
+ if (frameElement) {
+ const width = frameElement.parentElement.offsetWidth > 560 ? frameElement.parentElement.offsetWidth / 2 : frameElement.parentElement.offsetWidth
+ frameElement.width = `${width}`
+ frameElement.height = `${(width * 3) / 4}`
+ }
+ }
+
+ render() {
+ return <Layout fixNav={true}>
+ <SEO title="Rebel Scan"/>
+
+ <section className="project extrabigspace">
+ <main>
+ <Chapter img={this.props.data.rebelscanImage.childImageSharp.fluid}>
+ <h1>Rebel Scan</h1>
+ </Chapter>
+
+ <article className="info">
+ <div>
+ <p>This last Christmas holidays, except visiting my parents for a couple of days, after having forced myself in a sort of auto-lockdown period first, I did not have any big plans. That's why, I took the opportunity to improve my software development knowledge.</p>
+ <p>Therefore, I defined the following objectives I never had tried before and, which I was eager to test:</p>
+
+ <ol>
+ <li>Give a try to <a href="https://nextjs.org/" rel="noopener noreferrer">Next.js</a></li>
+ <li>Capture and crop a video stream using the <a href="https://developer.mozilla.org/fr/docs/Web/API/MediaDevices/getUserMedia" rel="noopener noreferrer">MediaDevices.getUserMedia()</a> API</li>
+ <li>Generate <a href="https://reactjs.org/" rel="noopener noreferrer">React</a> bindings for a Web Component developed with <a href="https://stenciljs.com/" rel="noopener noreferrer">StencilJS</a></li>
+ <li>Share files using strictly only the <a href="https://developer.mozilla.org/fr/docs/Web/API/Navigator/share" rel="noopener noreferrer">Web Share</a> API</li>
+ </ol>
+
+ <p>I called the prototype <a href="https://rebelscan.com/" rel="noopener noreferrer">Rebel Scan</a> because, it is just a little scanner app, you rebel scum!</p>
+ </div>
+
+ <iframe title="Rebel Scan demo" src="https://www.youtube.com/embed/D3gfjqAo_Qs" frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
+ </article>
+ </main>
+ </section>
+
+ <section className="factsheet">
+ <main>
+ <Chapter icon="info-circle">
+ <h2>Fact sheet</h2>
+ </Chapter>
+
+ <article>
+ <div>
+ <p><strong>Available:</strong> <a href="http://rebelscan.com" rel="noopener noreferrer">Progressive Web Apps</a></p>
+ <p><strong>Technology:</strong> <a href="https://nextjs.org/" rel="noopener noreferrer">Next.js</a>, <a
+ href="https://reactjs.org/">React</a>, <a href="https://stenciljs.com/" rel="noopener noreferrer">StencilJS</a> and Web APIs</p>
+ </div>
+
+ <div>
+ <p><strong>Infrastructure:</strong> <a href="https://vercel.com" rel="noopener noreferrer">Vercel</a></p>
+ </div>
+ </article>
+ </main>
+ </section>
+
+ <section className="open-source">
+ <main>
+ <Chapter icon="code-branch">
+ <h2>Open source</h2>
+ </Chapter>
+
+ <article>
+ <p>This project is open source and available on <a href="https://github.com/peterpeterparker/rebelscan" rel="noopener noreferrer">GitHub<FontAwesomeIcon
+ icon={["fab", "github"]}/></a></p>
+ </article>
+ </main>
+ </section>
+
+ <Projects filter={"rebelscan"}/>
+ </Layout>
+ }
+
+}
+
+export default () => (
+ <StaticQuery
+ query={graphql`
+ query {
+ rebelscanImage: file(relativePath: { eq: "portfolio/rebelscan-icon.png" }) {
+ childImageSharp {
+ fluid(maxWidth: 240) {
+ ...GatsbyImageSharpFluid
+ }
+ }
+ }
+ }
+ `}
+ render={(data) => (
+ <RebelScanPage data={data}/>
+ )}
+ />
+)

src/theme/blog.scss

@@ -29,7 +29,7 @@ section.post {
  margin: 1.75rem auto;
  }
 
- img, iframe {
+ img {
  box-shadow: 1px 1px var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 0.5rem;

src/theme/frame.scss

@@ -0,0 +1,5 @@
+iframe {
+ box-shadow: 1px 1px var(--color-primary);
+ border: 1px solid var(--color-primary);
+ border-radius: 0.5rem;
+}