Contact Page

web/src/pages/ContactPage/ContactPage.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { Metadata } from '@redwoodjs/web'
+
+import ContactCardCell from 'src/components/ContactCard/ContactCardCell'
+
+const ContactPage = () => {
+  const [width, setWidth] = useState()
+  const [height, setHeight] = useState()
+
+  const observedDiv = useRef(null)
+
+  useEffect(() => {
+    if (!observedDiv.current) return
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (observedDiv.current.offsetWidth !== width)
+        setWidth(observedDiv.current.offsetWidth)
+
+      if (observedDiv.current.offsetHeight !== height)
+        setHeight(observedDiv.current.offsetHeight)
+    })
+
+    resizeObserver.observe(observedDiv.current)
+
+    return function cleanup() {
+      resizeObserver.disconnect()
+    }
+  }, [width, height])
+
+  return (
+    <>
+      <Metadata title={`${process.env.NAME} | Contact`} />
+
+      <div className="flex min-h-[calc(100vh-6rem)] items-center justify-center">
+        <ContactCardCell />
+      </div>
+    </>
+  )
+}
+
+export default ContactPage

web/src/pages/Portrait/PortraitPage/PortraitPage.tsx

@@ -0,0 +1,5 @@
+import PortraitCell from 'src/components/Portrait/PortraitCell'
+
+const PortraitPage = () => <PortraitCell />
+
+export default PortraitPage

web/src/pages/Social/NewSocialPage/NewSocialPage.tsx

@@ -1,7 +1,5 @@
-import NewSocial from 'src/components/Social/NewSocial'
+import NewSocial from 'src/components/Social/NewSocial/NewSocial'
 
-const NewSocialPage = () => {
-  return <NewSocial />
-}
+const NewSocialPage = () => <NewSocial />
 
 export default NewSocialPage