diff --git a/src/App.tsx b/src/App.tsx index 15545c6..48dd5f6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ 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() { @@ -12,13 +12,7 @@ function App() { - - - - } - > + }> diff --git a/src/assets/about.jpeg b/src/assets/about.jpeg new file mode 100644 index 0000000..09ef984 Binary files /dev/null and b/src/assets/about.jpeg differ diff --git a/src/assets/adobe-illustrator-svgrepo-com.svg b/src/assets/adobe-illustrator-svgrepo-com.svg new file mode 100644 index 0000000..6f4658d --- /dev/null +++ b/src/assets/adobe-illustrator-svgrepo-com.svg @@ -0,0 +1,18 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/adobephotoshop-svgrepo-com.svg b/src/assets/adobephotoshop-svgrepo-com.svg new file mode 100644 index 0000000..13eeccd --- /dev/null +++ b/src/assets/adobephotoshop-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/profile.svg b/src/assets/profile.svg new file mode 100644 index 0000000..d5e9704 --- /dev/null +++ b/src/assets/profile.svg @@ -0,0 +1,2 @@ + +Microsoft Office icon \ No newline at end of file diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx new file mode 100644 index 0000000..1071e3f --- /dev/null +++ b/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', +}) => ( +
+
+
+); diff --git a/src/components/icons/AdobeIllustratorIcon.tsx b/src/components/icons/AdobeIllustratorIcon.tsx new file mode 100644 index 0000000..18ae778 --- /dev/null +++ b/src/components/icons/AdobeIllustratorIcon.tsx @@ -0,0 +1,35 @@ +export const AdobeIllustratorIcon: React.FC = () => ( + + + + + + + +); diff --git a/src/components/icons/AdobePhotoshopIcon.tsx b/src/components/icons/AdobePhotoshopIcon.tsx new file mode 100644 index 0000000..c5c733e --- /dev/null +++ b/src/components/icons/AdobePhotoshopIcon.tsx @@ -0,0 +1,12 @@ +export const AdobePhotoshopIcon: React.FC = () => ( + + + +); diff --git a/src/components/icons/MicrosoftOfficeIcon.tsx b/src/components/icons/MicrosoftOfficeIcon.tsx new file mode 100644 index 0000000..f97f436 --- /dev/null +++ b/src/components/icons/MicrosoftOfficeIcon.tsx @@ -0,0 +1,13 @@ +export const MicrosoftOfficeIcon: React.FC = () => ( + + Microsoft Office icon + + +); diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts new file mode 100644 index 0000000..39d168e --- /dev/null +++ b/src/components/icons/index.ts @@ -0,0 +1,3 @@ +export * from './AdobeIllustratorIcon'; +export * from './AdobePhotoshopIcon'; +export * from './MicrosoftOfficeIcon'; diff --git a/src/components/index.ts b/src/components/index.ts index 9609aef..f411431 100644 --- a/src/components/index.ts +++ b/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'; diff --git a/src/components/layouts/MotionLayoutWrapper.tsx b/src/components/layouts/MotionLayoutWrapper.tsx new file mode 100644 index 0000000..932e2f1 --- /dev/null +++ b/src/components/layouts/MotionLayoutWrapper.tsx @@ -0,0 +1,23 @@ +import { motion } from 'framer-motion'; + +interface MotionLayoutWrapperProps { + children: React.ReactNode; +} + +export const MotionLayoutWrapper: React.FC = ({ + children, +}) => { + return ( + + {children} + + ); +}; diff --git a/src/components/layouts/index.ts b/src/components/layouts/index.ts index 9877e7f..7574674 100644 --- a/src/components/layouts/index.ts +++ b/src/components/layouts/index.ts @@ -1 +1,2 @@ export * from './Layout'; +export * from './MotionLayoutWrapper'; diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx index 657ecbf..af24a58 100644 --- a/src/components/projects/ProjectCard.tsx +++ b/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 ( - + = ({ project }) => {
- + ); }; diff --git a/src/index.css b/src/index.css index 25ca05c..b7759cc 100644 --- a/src/index.css +++ b/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; */ } diff --git a/src/pages/About.tsx b/src/pages/About.tsx index 80c37bf..999fbb8 100644 --- a/src/pages/About.tsx +++ b/src/pages/About.tsx @@ -1,8 +1,39 @@ +import { MotionLayoutWrapper } from 'components'; +import aboutImg from '../assets/about.jpeg'; + const About = () => { return ( -
-

About me

-
+ +
+
+
+
+
+

+ A bit about me... +

+

+ 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. +

+
+
+
+
+ +
+ +
+
+
+ ); }; diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx index 1caf8f4..8384a7f 100644 --- a/src/pages/Profile.tsx +++ b/src/pages/Profile.tsx @@ -1,68 +1,144 @@ -import { motion } from 'framer-motion'; +import { + AdobeIllustratorIcon, + AdobePhotoshopIcon, + MicrosoftOfficeIcon, + MotionLayoutWrapper, +} from 'components'; import profileImg from '../assets/profile.jpeg'; const Profile = () => { return ( - +
- {/*
- -
*/}
-

- My profile -

-

- A bit about me... -

-

+

+ + „{' '} + 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. + + {' '} + ” +

+
+
+
+
    +
  • + + + + Identity. + {' '} + Cohesive visual and conceptual elements that define and + communicate a brand's unique persona and values. + +
    • +
  • + + + + Heritage. + {' '} + Rich history, legacy, and cultural significance of a + brand, which informs its identity and values, connecting + past traditions with present and future brand + expressions. + +
    • +
  • + + + + Unity. + {' '} + Harmonious integration of all brand elements—such as + logo, typography, color palette, and messaging—creating + a cohesive and consistent visual and experiential + identity across all touchpoints. + +
    • +
+
+ + + +
+
+
+
{ alt="" />
- -
- + ); }; export default Profile; - -{ - /*
-
-
    -
  • - - - - Identity. - {' '} - Cohesive visual and conceptual elements that define and - communicate a brand's unique persona and values. - -
    • -
  • - - - - Heritage. - {' '} - Rich history, legacy, and cultural significance of a brand, - which informs its identity and values, connecting past - traditions with present and future brand expressions. - -
    • -
  • - - - - Unity. - {' '} - Harmonious integration of all brand elements—such as logo, - typography, color palette, and messaging—creating a cohesive - and consistent visual and experiential identity across all - touchpoints. - -
    • -
-
-
*/ -}