feat(layout): add main layout; temp. design

src/App.tsx

@@ -1,24 +1,18 @@
 import { AnimatePresence } from 'framer-motion';
-import { Spinner } from 'gestalt';
 import { Suspense } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import './App.css';
 import { Routes } from './Routes';
+import { Loader } from './components';
 import './index.css';
 
 function App() {
   return (
     <AnimatePresence>
       <RecoilRoot key="anonymous">
         <Router>
-          <Suspense
-            fallback={
-              <div className="empty-centered">
-                <Spinner show />
-              </div>
-            }
-          >
+          <Suspense fallback={<Loader />}>
             <Routes />
           </Suspense>
         </Router>

src/components/Loader.tsx

@@ -0,0 +1,9 @@
+import clsx from 'clsx';
+
+export const Loader: React.FC<{ className?: string }> = ({
+  className = 'h-20 w-20 border-gray-300 border-t-blue-600',
+}) => (
+  <div className="flex h-screen w-screen content-center items-center justify-center">
+    <div className={clsx(className, 'animate-spin rounded-full border-8')} />
+  </div>
+);

src/components/icons/AdobeIllustratorIcon.tsx

@@ -0,0 +1,35 @@
+export const AdobeIllustratorIcon: React.FC = () => (
+  <svg
+    fill="#000000"
+    width="100px"
+    height="100px"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 231.597 231.597"
+    xmlSpace="preserve"
+  >
+    <g id="XMLID_449_">
+      <path
+        id="XMLID_450_"
+        d="M2.499,211.77h42.076c1.123,0,2.109-0.749,2.41-1.832l12.271-44.237h47.637l13.313,44.289
+c0.318,1.057,1.291,1.78,2.395,1.78h43.672c0.008,0,0.016,0,0.02,0c1.381,0,2.5-1.119,2.5-2.5c0-0.369-0.078-0.719-0.223-1.034
+l-55.564-179.19c-0.324-1.046-1.293-1.76-2.389-1.76h-53.26c-1.1,0-2.07,0.718-2.391,1.769L0.109,208.539
+c-0.23,0.758-0.09,1.581,0.381,2.218C0.962,211.394,1.706,211.77,2.499,211.77z M99.554,130.342H66.511l9.764-34.902
+c1.773-6.289,3.449-13.731,5.07-20.928c0.371-1.653,0.736-3.275,1.098-4.861c2.145,8.622,4.504,17.937,6.869,25.815L99.554,130.342
+z"
+      />
+      <path
+        id="XMLID_453_"
+        d="M187.288,76.551c-1.381,0-2.5,1.119-2.5,2.5V209.27c0,1.381,1.119,2.5,2.5,2.5h40.477
+c1.381,0,2.5-1.119,2.5-2.5V79.051c0-1.381-1.119-2.5-2.5-2.5H187.288z"
+      />
+      <path
+        id="XMLID_454_"
+        d="M207.261,65.571c14.102,0,24.336-9.563,24.336-22.795c-0.307-13.512-10.205-22.949-24.07-22.949
+c-7.078,0-13.363,2.442-17.697,6.878c-4.067,4.16-6.234,9.886-6.108,16.127c-0.129,6.043,2.043,11.666,6.119,15.84
+C194.185,63.121,200.372,65.571,207.261,65.571z"
+      />
+    </g>
+  </svg>
+);

src/components/icons/AdobePhotoshopIcon.tsx

@@ -0,0 +1,12 @@
+export const AdobePhotoshopIcon: React.FC = () => (
+  <svg
+    fill="#000000"
+    width="100px"
+    height="100px"
+    viewBox="0 0 24 24"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M9.85 8.42c-.37-.15-.77-.21-1.18-.2-.26 0-.49 0-.68.01-.2-.01-.34 0-.41.01v3.36c.14.01.27.02.39.02h.53c.39 0 .78-.06 1.15-.18.32-.09.6-.28.82-.53.21-.25.31-.59.31-1.03.01-.31-.07-.62-.23-.89a1.45 1.45 0 0 0-.7-.57zM19.75.3H4.25C1.9.3 0 2.2 0 4.55v14.899c0 2.35 1.9 4.25 4.25 4.25h15.5c2.35 0 4.25-1.9 4.25-4.25V4.55C24 2.2 22.1.3 19.75.3zm-7.391 11.65c-.399.56-.959.98-1.609 1.22-.68.25-1.43.34-2.25.34-.24 0-.4 0-.5-.01s-.24-.01-.43-.01v3.209c.01.07-.04.131-.11.141H5.52c-.08 0-.12-.041-.12-.131V6.42c0-.07.03-.11.1-.11.17 0 .33 0 .56-.01.24-.01.49-.01.76-.02s.56-.01.87-.02c.31-.01.61-.01.91-.01.82 0 1.5.1 2.06.31.5.17.96.45 1.34.82.32.32.57.71.73 1.14.149.42.229.85.229 1.3.001.86-.199 1.57-.6 2.13zm7.091 3.89c-.28.4-.671.709-1.12.891-.49.209-1.09.318-1.811.318-.459 0-.91-.039-1.359-.129-.35-.061-.7-.17-1.02-.32-.07-.039-.121-.109-.111-.189v-1.74c0-.029.011-.07.041-.09.029-.02.06-.01.09.01.39.23.8.391 1.24.49.379.1.779.15 1.18.15.38 0 .65-.051.83-.141.16-.07.27-.24.27-.42 0-.141-.08-.27-.24-.4-.16-.129-.489-.279-.979-.471-.51-.18-.979-.42-1.42-.719a2.625 2.625 0 0 1-.761-.85 2.158 2.158 0 0 1-.229-1.021c0-.43.12-.84.341-1.21.25-.4.619-.72 1.049-.92.469-.239 1.059-.349 1.769-.349.41 0 .83.03 1.24.09.3.04.59.12.86.23.039.01.08.05.1.09.01.04.02.08.02.12v1.63c0 .04-.02.08-.05.1-.09.02-.14.02-.18 0-.3-.16-.62-.27-.96-.34-.37-.08-.74-.13-1.12-.13-.2-.01-.41.02-.601.07-.129.03-.24.1-.31.2-.05.08-.08.18-.08.27s.04.18.101.26c.09.11.209.2.34.27.229.12.47.23.709.33.541.18 1.061.43 1.541.73.33.209.6.49.789.83.16.318.24.67.23 1.029.011.471-.129.94-.389 1.331z" />
+  </svg>
+);

src/components/icons/MicrosoftOfficeIcon.tsx

@@ -0,0 +1,13 @@
+export const MicrosoftOfficeIcon: React.FC = () => (
+  <svg
+    fill="#000000"
+    width="100px"
+    height="100px"
+    viewBox="0 0 24 24"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Microsoft Office icon</title>
+    <path d="M21.53 4.306V19.67q0 .807-.471 1.433-.472.627-1.253.85l-6.888 1.974q-.136.037-.291.055-.155.019-.292.019-.397 0-.72-.105-.322-.106-.657-.292l-4.505-2.544q-.248-.137-.391-.366-.143-.23-.143-.515 0-.434.304-.738.304-.305.739-.305h5.832V4.964l-4.38 1.563q-.534.187-.857.658-.322.472-.322 1.03v8.079q0 .496-.248.912-.249.416-.683.651l-2.072 1.13q-.286.148-.571.148-.497 0-.844-.347-.348-.347-.348-.844V6.564q0-.62.33-1.19.328-.572.874-.882L11.07.285q.248-.136.534-.21.285-.075.57-.075.212 0 .38.031.167.031.365.093l6.888 1.899q.384.111.7.329.317.217.547.52.23.305.353.67.125.367.125.764zM19.943 19.67V4.306q0-.273-.161-.478-.162-.204-.422-.279l-3.388-.93q-.397-.112-.794-.23-.397-.118-.794-.217v19.681l4.976-1.427q.26-.074.422-.28.161-.204.161-.477Z" />
+  </svg>
+);

src/components/icons/index.ts

@@ -0,0 +1,3 @@
+export * from './AdobeIllustratorIcon';
+export * from './AdobePhotoshopIcon';
+export * from './MicrosoftOfficeIcon';

src/components/index.ts

@@ -1,5 +1,7 @@
 export * from './ErrorElement';
 export * from './Footer';
 export * from './Header';
+export * from './Loader';
 export * from './SocialMediaContactRow';
+export * from './icons';
 export * from './layouts';

src/components/layouts/MotionLayoutWrapper.tsx

@@ -0,0 +1,23 @@
+import { motion } from 'framer-motion';
+
+interface MotionLayoutWrapperProps {
+  children: React.ReactNode;
+}
+
+export const MotionLayoutWrapper: React.FC<MotionLayoutWrapperProps> = ({
+  children,
+}) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{
+        ease: 'easeInOut',
+        duration: 0.7,
+        delay: 0.15,
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};

src/components/layouts/index.ts

@@ -1 +1,2 @@
 export * from './Layout';
+export * from './MotionLayoutWrapper';

src/components/projects/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { MotionLayoutWrapper } from 'components';
 import { Project as ProjectType } from 'interfaces';
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
@@ -14,6 +14,7 @@ import { activeProjectAtom } from '../../store/projects/activeProjectAtom';
  *
  * @returns {JSX.Element} The rendered component
  */
+
 export const ProjectCard: FC<{ project?: ProjectType }> = ({ project }) => {
   const setProjectIdInStore = useSetRecoilState(activeProjectAtom);
 
@@ -32,15 +33,7 @@ export const ProjectCard: FC<{ project?: ProjectType }> = ({ project }) => {
   // }, [setProjectId]);
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{
-        ease: 'easeInOut',
-        duration: 0.7,
-        delay: 0.15,
-      }}
-    >
+    <MotionLayoutWrapper>
       <Link
         to={`/ji-yun/projects/${project?.id}`}
         aria-label="Single Project"
@@ -64,6 +57,6 @@ export const ProjectCard: FC<{ project?: ProjectType }> = ({ project }) => {
           </div>
         </div>
       </Link>
-    </motion.div>
+    </MotionLayoutWrapper>
   );
 };

src/index.css

@@ -15,9 +15,9 @@
 html,
 body {
   box-sizing: border-box;
-  font-size: 16px;
   scroll-behavior: smooth;
   height: 100%;
+  width: 100%;
 }
 
 *,
@@ -37,11 +37,9 @@ body {
 #root {
   display: flex;
   flex-direction: column;
-  /* height: 100%; */
 }
 
 main {
   flex-grow: 1;
   overflow-y: auto;
-  /* flex-grow: 1; */
 }

src/pages/About.tsx

@@ -1,8 +1,39 @@
+import { MotionLayoutWrapper } from 'components';
+import aboutImg from '../assets/about.jpeg';
+
 const About = () => {
   return (
-    <div>
-      <h1>About me</h1>
-    </div>
+    <MotionLayoutWrapper>
+      <div className="relative isolate overflow-hidden bg-white px-6 py-8 lg:overflow-visible lg:px-0">
+        <div className="mx-auto grid grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
+          <div className="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
+            <div className="lg:pr-4">
+              <div className="lg:max-w-lg">
+                <h1 className="mt-2 text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+                  A bit about me...
+                </h1>
+                <p className="mt-6 text-xl/8 text-gray-700">
+                  As a berlin-based brand designer, with a multicultural
+                  background and I blend organization and analytical thinking to
+                  craft impactful, culturally resonant brand strategies with a
+                  focus on “diversity”. My work highlights identity, heritage
+                  and unity delivering meaningful brand experiences.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="-mt-12 p-12 lg:sticky lg:top-4 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden">
+            <img
+              className="rounded-xl bg-gray-900 shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem]"
+              src={aboutImg}
+              alt=""
+            />
+          </div>
+
+          <div className="lg:col-span-2 lg:col-start-1 lg:row-start-2 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8"></div>
+        </div>
+      </div>
+    </MotionLayoutWrapper>
   );
 };