Add little avatar

codecoolture · Jul 9, 2024 · 08fde27 · 08fde27
1 parent 50fb912
commit 08fde27
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,6 @@
 import { orderBy } from "lodash";
 import { GetStaticProps } from "next";
+import Image from "next/image";
 
 import { ApiArticle } from "@/cms/api/ApiArticle";
 import { getBlogpostRepository, getNotesRepository } from "@/cms/repositories";
@@ -20,11 +21,13 @@ export default function Homepage({ publications }: HomepageProps) {
       <section className="Homepage">
         <div className="Application__Column">
           <Heading el="h1" size="jumbo">
-            Hola! 👋
+            Hola 👋
           </Heading>
 
           <Text size="l">
-            I’m Sergio, a software engineer advocating for software development best practices and good software design.
+            I’m Sergio{" "}
+            <Image className="Homepage__Avatar" src="/static/img/sergio.jpg" alt="" width={120} height={120} />, a
+            software engineer advocating for software development best practices and good software design.
           </Text>
 
           <Text size="m">

diff --git a/public/static/img/sergio.jpg b/public/static/img/sergio.jpg
diff --git a/styles/pages/index.css b/styles/pages/index.css
@@ -2,6 +2,15 @@
   padding: 5vh 0;
 }
 
+.Homepage__Avatar {
+  height: 60px;
+  width: 60px;
+
+  border-radius: 100%;
+
+  translate: 0 20%;
+}
+
 .Homepage__Heading {
   margin-bottom: 1em;
   margin-top: 1.5em;