feat: improve style of photo element

martapanc · Oct 8, 2023 · 9f093f0 · 9f093f0
1 parent 756bb30
commit 9f093f0
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 8 deletions.
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
@@ -37,6 +37,11 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             src='https://analytics.eu.umami.is/script.js'
             data-website-id='ab53ae74-58ea-44ff-b5fa-451b4f52c364'
           ></Script>
+
+          <style>
+            @import
+            url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
+          </style>
         </head>
         <body>
           <LayoutClient>{children}</LayoutClient>

diff --git a/src/components/organisms/home/Code.tsx b/src/components/organisms/home/Code.tsx
@@ -57,7 +57,7 @@ const Code = ({ codeSnippets }: CodeSnippetsProps) => {
   }, [loading]);
 
   return (
-    <div className='me-4 h-56 w-full rounded border-double bg-slate-200 px-4 py-6 dark:bg-slate-800 md:h-[280px] md:w-1/2'>
+    <div className='me-4 h-56 w-full rounded border-double bg-slate-200 px-4 py-6 dark:bg-slate-800 lg:h-[280px] lg:w-1/2'>
       <div id='typed-strings'>
         {loading ? <span className='cursor-blink'>_</span> : null}
         {!loading &&

diff --git a/src/components/organisms/home/Intro.tsx b/src/components/organisms/home/Intro.tsx
@@ -15,12 +15,12 @@ export interface IntroProps {
 
 const Intro = ({ greeting, codeSnippets }: IntroProps) => {
   return (
-    <div className='mb-6 flex h-fit flex-col pb-6 md:h-96'>
+    <div className='mb-6 flex h-fit flex-col pb-6'>
       <h1 className='pb-4 text-5xl antialiased'>
         <ReactMarkdown>{greeting}</ReactMarkdown>
       </h1>
 
-      <div className='mt-8 flex flex-col md:flex-row'>
+      <div className='mt-8 flex flex-col lg:flex-row'>
         <Code codeSnippets={shuffleArray(codeSnippets)} />
 
         <Photo />

diff --git a/src/components/organisms/home/Photo.tsx b/src/components/organisms/home/Photo.tsx
@@ -28,12 +28,18 @@ const Photo = () => {
   }, [theme]);
 
   return (
-    <div className='flex h-[480px] w-full justify-center mt-6 md:h-[280px] md:w-1/2 md:justify-end md:mt-0'>
+    <div className='flex h-[480px] md:h-[300px] w-full justify-center mt-6 lg:h-[280px] lg:w-1/2 lg:justify-end lg:mt-0 bg-sky-100 dark:bg-blue-950 rounded-md'>
       <div className='flex items-center flex-col-reverse p-3 md:ms-3 md:flex-row'>
-        <div className='flex flex-col items-center md:me-6 md:items-end text-lg'>
-          <div className='mt-10 md:my-5'>Software Engineer</div>
-          <div className='mt-10 md:my-5'>Lifelong learner</div>
-          <div className='mt-10 md:my-5'>Remote work enthusiast</div>
+        <div className='flex flex-col items-center md:me-12 lg:me-6 md:items-end text-lg photo-description'>
+          <div className='mt-10 md:my-5 text-blue-600 dark:text-blue-300 text-xl md:text-end'>
+            Software Engineer
+          </div>
+          <div className='mt-10 md:my-5 text-blue-700 dark:text-blue-200 text-xl md:text-end'>
+            Lifelong learner
+          </div>
+          <div className='mt-10 md:my-5 text-blue-800 dark:text-blue-100 text-xl xs:text-md lg:text-lg md:text-end'>
+            Remote work enthusiast
+          </div>
         </div>
         <div className='flex flex-col items-center'>
           <Image

diff --git a/src/components/organisms/home/home.css b/src/components/organisms/home/home.css
@@ -20,3 +20,8 @@
     var(--secondary-color-dark) 100.2%
   );
 }
+
+.photo-description {
+  font-family: 'Young Serif', serif;
+  /* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif */
+}