-
-
+ 
@@ -402,16 +466,80 @@ exports[`app renders correctly 1`] = `
-
+ 
+
+ 
-
-
+
@@ -431,16 +559,80 @@ exports[`app renders correctly 1`] = `
-
+ 
+
+
-
-
+
@@ -460,16 +652,80 @@ exports[`app renders correctly 1`] = `
-
+ 
+
+
-
-
+
@@ -489,16 +745,80 @@ exports[`app renders correctly 1`] = `
-
+ 
+
+
-
-
+
@@ -518,16 +838,80 @@ exports[`app renders correctly 1`] = `
-
+ 
+
+
-
-
+
@@ -554,23 +938,91 @@ exports[`app renders correctly 1`] = `
+ 
+
+
-
-
+
- 2020
+ 2021
-
-
-
+
+
-
+
+
+ 
-
@@ -630,7 +1082,7 @@ exports[`app renders correctly 1`] = ` /> - 2020 + 2021
{
- const imgRef = useRef(null)
+ // const imgRef = useRef(null)
- async function getImage() {
- // console.log("WOAH")
- try {
- const image = await fetch(src).catch((error) => {
- throw error
- })
+ // async function getImage() {
+ // // console.log("WOAH")
+ // try {
+ // const image = await fetch(src).catch((error) => {
+ // throw error
+ // })
- if (!image.ok) return
+ // if (!image.ok) return
- const blob = await image.blob()
+ // const blob = await image.blob()
- if (imgRef.current) {
- imgRef.current.src = URL.createObjectURL(blob)
- imgRef.current.classList.add(sharpen)
- } else {
- console.warn('imgRef does not have a current reference!')
- }
- } catch (error) {
- console.error(error)
- }
- }
+ // if (imgRef.current) {
+ // imgRef.current.src = URL.createObjectURL(blob)
+ // imgRef.current.classList.add(sharpen)
+ // } else {
+ // console.warn('imgRef does not have a current reference!')
+ // }
+ // } catch (error) {
+ // console.error(error)
+ // }
+ // }
- function createIntersectionObserver(): IntersectionObserver {
- const observer = new IntersectionObserver((entries, observer) => {
- // console.log(entries.length)
- entries.forEach((entry) => {
- if (entry.isIntersecting && imgRef.current) {
- getImage()
- observer.unobserve(imgRef.current)
- }
- })
- })
- if (imgRef.current) observer.observe(imgRef.current)
- return observer
- }
+ // function createIntersectionObserver(): IntersectionObserver {
+ // const observer = new IntersectionObserver((entries, observer) => {
+ // // console.log(entries.length)
+ // entries.forEach((entry) => {
+ // if (entry.isIntersecting && imgRef.current) {
+ // getImage()
+ // observer.unobserve(imgRef.current)
+ // }
+ // })
+ // })
+ // if (imgRef.current) observer.observe(imgRef.current)
+ // return observer
+ // }
- useEffect(() => {
- if (!loadOnObserve) getImage()
- else {
- const observer = createIntersectionObserver()
- return () => {
- if (imgRef.current) observer.unobserve(imgRef.current)
- }
- }
- })
+ // useEffect(() => {
+ // if (!loadOnObserve) getImage()
+ // else {
+ // const observer = createIntersectionObserver()
+ // return () => {
+ // if (imgRef.current) observer.unobserve(imgRef.current)
+ // }
+ // }
+ // })
- const containerClasses = [styles.container, className].join(' ')
+ // const containerClasses = [styles.container, className].join(' ')
- return (
-
-
- )
+ // return (
+ //
+ //
+ // )
}
export default Image
diff --git a/src/components/Main/__tests__/__snapshots__/Main.tests.tsx.snap b/src/components/Main/__tests__/__snapshots__/Main.tests.tsx.snap
index b5dd5ab4..bf6bb251 100644
--- a/src/components/Main/__tests__/__snapshots__/Main.tests.tsx.snap
+++ b/src/components/Main/__tests__/__snapshots__/Main.tests.tsx.snap
@@ -147,16 +147,80 @@ exports[`main renders correctly 1`] = `
-
-
-
+
@@ -176,16 +240,80 @@ exports[`main renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -205,16 +333,80 @@ exports[`main renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -234,16 +426,80 @@ exports[`main renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -263,16 +519,80 @@ exports[`main renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -292,16 +612,80 @@ exports[`main renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -328,23 +712,91 @@ exports[`main renders correctly 1`] = `
+
+
+
-
-
+
-
-
-
+
+
-
+
+
+
-
@@ -404,7 +856,7 @@ exports[`main renders correctly 1`] = ` /> - 2020 + 2021
-
-
-
+
@@ -173,16 +237,80 @@ exports[`middle renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -202,16 +330,80 @@ exports[`middle renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -231,16 +423,80 @@ exports[`middle renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -260,16 +516,80 @@ exports[`middle renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -289,16 +609,80 @@ exports[`middle renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -325,23 +709,91 @@ exports[`middle renders correctly 1`] = `
+
+
+
-
-
+
diff --git a/src/components/Portfolio/Portfolio.tsx b/src/components/Portfolio/Portfolio.tsx
index 8642ee33..1a818500 100644
--- a/src/components/Portfolio/Portfolio.tsx
+++ b/src/components/Portfolio/Portfolio.tsx
@@ -3,12 +3,12 @@ import Image from 'next/image'
import style from './portfolio.module.css'
-import Space from '../../assets/images/space.webp'
-import Particlez from '../../assets/images/particlez.webp'
-import Guardian from '../../assets/images/guardian.webp'
-import Tensorflow from '../../assets/images/tensorflow.webp'
-import Juice from '../../assets/images/juice.webp'
-import Keyboard from '../../assets/images/keyboard.webp'
+const Space = '/images/space.webp'
+const Particlez = '/images/particlez.webp'
+const Guardian = '/images/guardian.webp'
+const Tensorflow = '/images/tensorflow.webp'
+const Juice = '/images/juice.webp'
+const Keyboard = '/images/keyboard.webp'
const projects = [
{
@@ -67,7 +67,7 @@ export default function Portfolio(): ReactElement {
-
-
-
+
+
-
+
+
+
-
diff --git a/src/components/Portfolio/Portfolio.tsx b/src/components/Portfolio/Portfolio.tsx
index 8642ee33..1a818500 100644
--- a/src/components/Portfolio/Portfolio.tsx
+++ b/src/components/Portfolio/Portfolio.tsx
@@ -3,12 +3,12 @@ import Image from 'next/image'
import style from './portfolio.module.css'
-import Space from '../../assets/images/space.webp'
-import Particlez from '../../assets/images/particlez.webp'
-import Guardian from '../../assets/images/guardian.webp'
-import Tensorflow from '../../assets/images/tensorflow.webp'
-import Juice from '../../assets/images/juice.webp'
-import Keyboard from '../../assets/images/keyboard.webp'
+const Space = '/images/space.webp'
+const Particlez = '/images/particlez.webp'
+const Guardian = '/images/guardian.webp'
+const Tensorflow = '/images/tensorflow.webp'
+const Juice = '/images/juice.webp'
+const Keyboard = '/images/keyboard.webp'
const projects = [
{
@@ -67,7 +67,7 @@ export default function Portfolio(): ReactElement {
-
-
-
+
+
+
+
@@ -46,16 +110,80 @@ exports[`portfolio renders correctly 1`] = `
-
-
-
+
+
+
+
@@ -75,16 +203,80 @@ exports[`portfolio renders correctly 1`] = `
-
-
-
+
+
+
+
@@ -104,16 +296,80 @@ exports[`portfolio renders correctly 1`] = `
-
-
-
+
+
+
+
@@ -133,16 +389,80 @@ exports[`portfolio renders correctly 1`] = `
-
-
-
+
+
+
+
@@ -162,16 +482,80 @@ exports[`portfolio renders correctly 1`] = `
-
-
-
+
+
+
+
diff --git a/src/components/RecentArticles/RecentArticles.tsx b/src/components/RecentArticles/RecentArticles.tsx
index 3ce87e25..74df323c 100644
--- a/src/components/RecentArticles/RecentArticles.tsx
+++ b/src/components/RecentArticles/RecentArticles.tsx
@@ -23,11 +23,13 @@ export default function RecentArticles(): ReactElement {
{recentArticles.map((article) => (
-
+
+
+
{article.name}
diff --git a/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap b/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap
index 0333b635..a0c36ac4 100644
--- a/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap
+++ b/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap
@@ -8,23 +8,91 @@ exports[`recent articles renders correctly 1`] = `
-
-
+
-
-
-
+
+
+
-
-
+
+
diff --git a/src/components/RecentArticles/recent-articles.module.css b/src/components/RecentArticles/recent-articles.module.css
index 844202fb..49ff5b5f 100644
--- a/src/components/RecentArticles/recent-articles.module.css
+++ b/src/components/RecentArticles/recent-articles.module.css
@@ -4,21 +4,25 @@
column-gap: 5%;
}
-.card img {
+.image {
width: 100%;
height: 100px;
- border-radius: 0.5em;
- object-fit: cover; /* Do not scale the image */
- object-position: center;
+ /* object-fit: cover; */
+ /* object-position: center; */
transform: scale(1);
transition: all 0.2s ease-in-out;
}
+.imageContainer {
+ overflow: hidden;
+ border-radius: 0.5em;
+}
+
.card h3 {
margin-top: 0px;
}
-.card img:hover {
+.image:hover {
transform: scale(1.1);
}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 00ff9e50..fab09415 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -4,8 +4,8 @@ import { Connections } from '..'
import style from './sidebar.module.css'
-import avatar from '../../assets/images/me.webp'
-import background from '../../assets/images/background-2.webp'
+const avatar = '/images/me.webp'
+const background = '/images/background-2.webp'
const Sidebar = (): ReactElement => {
const canvas = useRef(null)
diff --git a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap
index 9189ed1d..11f646f1 100644
--- a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`sidebar renders correctly 1`] = `
>
{
+ if (!hasGetInitialPropsRun && err) {
+ // getInitialProps is not called in case of
+ // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
+ // err via _app.js so it can be captured
+ Sentry.captureException(err)
+ // Flushing is not required in this case as it only happens on the client
+ }
+
+ return
-
-
+
@@ -46,16 +110,80 @@ exports[`portfolio renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -75,16 +203,80 @@ exports[`portfolio renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -104,16 +296,80 @@ exports[`portfolio renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -133,16 +389,80 @@ exports[`portfolio renders correctly 1`] = `
-
+
+
+
-
-
+
@@ -162,16 +482,80 @@ exports[`portfolio renders correctly 1`] = `
-
+
+
+
-
-
+
diff --git a/src/components/RecentArticles/RecentArticles.tsx b/src/components/RecentArticles/RecentArticles.tsx
index 3ce87e25..74df323c 100644
--- a/src/components/RecentArticles/RecentArticles.tsx
+++ b/src/components/RecentArticles/RecentArticles.tsx
@@ -23,11 +23,13 @@ export default function RecentArticles(): ReactElement {
+
+
+
{recentArticles.map((article) => (
-
+
+
+
{article.name}
diff --git a/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap b/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap index 0333b635..a0c36ac4 100644 --- a/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap +++ b/src/components/RecentArticles/__tests__/__snapshots__/RecentArticles.test.tsx.snap @@ -8,23 +8,91 @@ exports[`recent articles renders correctly 1`] = `
-
-
+
diff --git a/src/components/RecentArticles/recent-articles.module.css b/src/components/RecentArticles/recent-articles.module.css
index 844202fb..49ff5b5f 100644
--- a/src/components/RecentArticles/recent-articles.module.css
+++ b/src/components/RecentArticles/recent-articles.module.css
@@ -4,21 +4,25 @@
column-gap: 5%;
}
-.card img {
+.image {
width: 100%;
height: 100px;
- border-radius: 0.5em;
- object-fit: cover; /* Do not scale the image */
- object-position: center;
+ /* object-fit: cover; */
+ /* object-position: center; */
transform: scale(1);
transition: all 0.2s ease-in-out;
}
+.imageContainer {
+ overflow: hidden;
+ border-radius: 0.5em;
+}
+
.card h3 {
margin-top: 0px;
}
-.card img:hover {
+.image:hover {
transform: scale(1.1);
}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 00ff9e50..fab09415 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -4,8 +4,8 @@ import { Connections } from '..'
import style from './sidebar.module.css'
-import avatar from '../../assets/images/me.webp'
-import background from '../../assets/images/background-2.webp'
+const avatar = '/images/me.webp'
+const background = '/images/background-2.webp'
const Sidebar = (): ReactElement => {
const canvas = useRef
-
-
-
+
+
-
+
+
+
-
diff --git a/src/components/RecentArticles/recent-articles.module.css b/src/components/RecentArticles/recent-articles.module.css
index 844202fb..49ff5b5f 100644
--- a/src/components/RecentArticles/recent-articles.module.css
+++ b/src/components/RecentArticles/recent-articles.module.css
@@ -4,21 +4,25 @@
column-gap: 5%;
}
-.card img {
+.image {
width: 100%;
height: 100px;
- border-radius: 0.5em;
- object-fit: cover; /* Do not scale the image */
- object-position: center;
+ /* object-fit: cover; */
+ /* object-position: center; */
transform: scale(1);
transition: all 0.2s ease-in-out;
}
+.imageContainer {
+ overflow: hidden;
+ border-radius: 0.5em;
+}
+
.card h3 {
margin-top: 0px;
}
-.card img:hover {
+.image:hover {
transform: scale(1.1);
}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 00ff9e50..fab09415 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -4,8 +4,8 @@ import { Connections } from '..'
import style from './sidebar.module.css'
-import avatar from '../../assets/images/me.webp'
-import background from '../../assets/images/background-2.webp'
+const avatar = '/images/me.webp'
+const background = '/images/background-2.webp'
const Sidebar = (): ReactElement => {
const canvas = useRef(null)
diff --git a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap
index 9189ed1d..11f646f1 100644
--- a/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/Sidebar/__tests__/__snapshots__/Sidebar.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`sidebar renders correctly 1`] = `
>
{
+ if (!hasGetInitialPropsRun && err) {
+ // getInitialProps is not called in case of
+ // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
+ // err via _app.js so it can be captured
+ Sentry.captureException(err)
+ // Flushing is not required in this case as it only happens on the client
+ }
+
+ return