feat: change font and color of main greeting

martapanc · Oct 8, 2023 · 26304b9 · 26304b9
1 parent 9f093f0
commit 26304b9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
@@ -41,6 +41,10 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <style>
             @import
             url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
+            @import
+            url('https://fonts.googleapis.com/css2?family=Gabarito&display=swap');
+            @import
+            url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Poppins&family=Roboto:ital,wght@0,100;0,300;0,500;0,700;1,100;1,300;1,900&family=Salsa&family=Young+Serif&display=swap');
           </style>
         </head>
         <body>

diff --git a/src/components/organisms/home/Intro.tsx b/src/components/organisms/home/Intro.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactMarkdown from 'react-markdown';
 
 import { shuffleArray } from '@/lib/helper';
 
@@ -17,7 +16,7 @@ const Intro = ({ greeting, codeSnippets }: IntroProps) => {
   return (
     <div className='mb-6 flex h-fit flex-col pb-6'>
       <h1 className='pb-4 text-5xl antialiased'>
-        <ReactMarkdown>{greeting}</ReactMarkdown>
+        <span className='greeting drop-shadow-lg'>{greeting}</span> 👋🏻
       </h1>
 
       <div className='mt-8 flex flex-col lg:flex-row'>

diff --git a/src/components/organisms/home/home.css b/src/components/organisms/home/home.css
@@ -23,5 +23,19 @@
 
 .photo-description {
   font-family: 'Young Serif', serif;
-  /* font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif */
+  /* font-family: */
+}
+
+.greeting {
+  font-family: 'Salsa', cursive;
+  font-size: 3.5rem;
+  font-weight: 700;
+  background-image: linear-gradient(
+    89deg,
+    rgb(21, 74, 189) 0.1%,
+    rgb(26, 138, 211) 51.5%,
+    rgb(72, 177, 234) 100.2%
+  );
+  background-clip: text;
+  color: transparent;
 }