Fix images + review intro

chicio · Dec 30, 2024 · 626c861 · 626c861
1 parent 6cb71ed
commit 626c861
Show file tree

Hide file tree

Showing 12 changed files with 371 additions and 43 deletions.
diff --git a/assets/chicio-coding-banner.pxd b/assets/chicio-coding-banner.pxd
diff --git a/assets/react-logo.pxd b/assets/react-logo.pxd
diff --git a/src/components/design-system/organism/technologies.tsx b/src/components/design-system/organism/technologies.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { ContainerFluid } from "../atoms/container-fluid";
 import { mediaQuery } from "../utils-css/media-query";
 import { FC } from "react";
+import { Container } from "../atoms/container";
 
 const TechnologiesContainer = styled(ContainerFluid)`
   margin: 0;
@@ -21,6 +22,7 @@ const TechnologyParagraph = styled(Paragraph)`
   text-align: center;
   margin-bottom: ${(props) => props.theme.spacing[7]};
   color: ${(props) => props.theme.light.textAbovePrimaryColor};
+  font-size: ${(props) => props.theme.fontSizes[3]};
 
   ${mediaQuery.dark} {
     color: ${(props) => props.theme.dark.textAbovePrimaryColor};
@@ -54,46 +56,17 @@ export interface TechnologiesProps {
 
 export const Technologies: FC<TechnologiesProps> = ({ author }) => (
   <TechnologiesContainer>
-    <TechnologyParagraph>
-      {`I’m ${author}, a software developer with over 15 years of experience, working in the field since 2008. I specialise in developing mobile and web applications. I also maintain smaller open-source projects and I have a blog where I speak about technology.`}
-    </TechnologyParagraph>
+    <Container>
+      <TechnologyParagraph>
+        {`I’m ${author}, a software developer with over 15 years of experience, working in the field since 2008. I specialise in developing mobile 📱 and web applications 🚀. I also maintain small open-source projects and I have a blog where I speak about technology.`}
+      </TechnologyParagraph>
+    </Container>
     <TechnologiesIconsContainer>
       <TechnologyImageContainer>
         <StaticImage
           objectFit={"contain"}
-          src={"../../../images/technologies/xcode.png"}
-          alt={"xcode"}
-          placeholder={"blurred"}
-        />
-      </TechnologyImageContainer>
-      <TechnologyImageContainer>
-        <StaticImage
-          src={"../../../images/technologies/swift.png"}
-          alt={"swift"}
-          placeholder={"blurred"}
-        />
-      </TechnologyImageContainer>
-      <TechnologyImageContainer>
-        <StaticImage
-          objectFit={"contain"}
-          src={"../../../images/technologies/android.png"}
-          alt={"android"}
-          placeholder={"blurred"}
-        />
-      </TechnologyImageContainer>
-      <TechnologyImageContainer>
-        <StaticImage
-          objectFit={"contain"}
-          src={"../../../images/technologies/cpp.png"}
-          alt={"c++"}
-          placeholder={"blurred"}
-        />
-      </TechnologyImageContainer>
-      <TechnologyImageContainer>
-        <StaticImage
-          objectFit={"contain"}
-          src={"../../../images/technologies/opengl-es.png"}
-          alt={"opengl"}
+          src={"../../../images/technologies/typescript.png"}
+          alt={"typescript"}
           placeholder={"blurred"}
         />
       </TechnologyImageContainer>
@@ -108,24 +81,23 @@ export const Technologies: FC<TechnologiesProps> = ({ author }) => (
       <TechnologyImageContainer>
         <StaticImage
           objectFit={"contain"}
-          src={"../../../images/technologies/php.png"}
-          alt={"php"}
+          src={"../../../images/technologies/xcode.png"}
+          alt={"xcode"}
           placeholder={"blurred"}
         />
       </TechnologyImageContainer>
       <TechnologyImageContainer>
         <StaticImage
-          objectFit={"contain"}
-          src={"../../../images/technologies/html-css-js.png"}
-          alt={"js"}
+          src={"../../../images/technologies/swift.png"}
+          alt={"swift"}
           placeholder={"blurred"}
         />
       </TechnologyImageContainer>
       <TechnologyImageContainer>
         <StaticImage
           objectFit={"contain"}
-          src={"../../../images/technologies/typescript.png"}
-          alt={"typescript"}
+          src={"../../../images/technologies/android.png"}
+          alt={"android"}
           placeholder={"blurred"}
         />
       </TechnologyImageContainer>