create interpolate function and add aboutInfo text

app/components/About/index.tsx

@@ -1,14 +1,20 @@
 import React, { useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import { SECTIONS } from '../../constants/sections'
+import { aboutInfo } from '../../data/aboutInfo'
+import interpolate from '../../helpers/interpolate'
 import useScroll from '../../hooks/useScroll'
 import Container from '../ui/Container'
 import Subtitle from '../ui/Subtitle'
+import Text from '../ui/Text'
 import Title from '../ui/Title'
 import CodingSkills from './CodingSkills'
 
 const STRINGS = {
  title: 'about',
+ subtitle:
+ 'Hi there! I’m Marina Kinalone - developer and UX designer with a background in research and education.',
+ description: aboutInfo,
 }
 
 const MainContainer = styled(Container)`
@@ -21,7 +27,11 @@ const TitleContainer = styled(Container)`
 `
 
 const InnerContainer = styled(Container)`
- padding: ${(props) => props.theme.spacing.m};
+ padding: ${(props) => `${props.theme.spacing.m} ${props.theme.spacing.xl}`};
+`
+
+const Paragraph = styled(Text)`
+ margin-top: ${(props) => props.theme.spacing.m};
 `
 
 const Portrait = styled.img`
@@ -55,12 +65,10 @@ const About = () => {
  src="./portrait_marina_stormy.png"
  alt="portrait of Marina Kinalone Simonnet with her cat, Stormy"
  />
- <Subtitle>
- Hi, I&apos;m Marina Kinalone, frontend developer with a background in research and
- education.
- </Subtitle>
-
- <p> add about here!</p>
+ <Subtitle>{STRINGS.subtitle}</Subtitle>
+ {STRINGS.description.map((paragraph, index) => {
+ return <Paragraph key={index}>{interpolate(paragraph)}</Paragraph>
+ })}
  </InnerContainer>
  <CodingSkills />
  </MainContainer>

app/components/Hero/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import { SECTIONS } from '../../constants/sections'
+import interpolate from '../../helpers/interpolate'
 import useScroll from '../../hooks/useScroll'
 import Container from '../ui/Container'
 import SmallText from '../ui/SmallText'
@@ -15,7 +16,7 @@ const STRINGS = {
  animatedSubtitle: 'joyful',
  subtitle: ' frontend developer',
  description:
- 'Enthusiastic developer with a focus on user experience. Eager learner and researcher, I grow fast in the projects I’m involved with.',
+ '{{bold}}Enthusiastic developer{{/bold}} with a {{bold}}focus on user experience{{/bold}}. Eager learner and researcher, I grow fast in the projects I’m involved with.',
  copyright: 'p.s.: drawing is from ',
  copyrightLink: 'amazing artist Lu Lo',
 }
@@ -71,7 +72,7 @@ const Hero = () => {
  <RainbowText word={STRINGS.animatedSubtitle} />
  {STRINGS.subtitle}
  </Subtitle>
- <Text>{STRINGS.description}</Text>
+ <Text>{interpolate(STRINGS.description)}</Text>
  <SmallText>
  {STRINGS.copyright}
  <TextLink href="https://www.instagram.com/lulu.xalo/">{STRINGS.copyrightLink}</TextLink>
@@ -82,50 +83,3 @@ const Hero = () => {
 }
 
 export default Hero
-
-/*
-const Intro = () => {
- return (
- <section className="intro">
- <img className="intro__portrait" id="marina" src={portrait} alt="drawn portrait of Marina by artist Lu Lo"/>
- <div className="intro__content sub-containers">
- <h1 className="intro__title">Marina Kinalone Simonnet</h1>
- <h2 className="intro__subtitle">full-stack developer</h2>
- <p><span className="bolder">Enthusiastic</span> developer with a <span className="bolder">focus on user experience</span>. Eager learner and researcher, I grow fast in the projects I’m involved with.</p>
- <p className="intro__copyright">p.s.: drawing is from <a className="link-regular" href="https://www.instagram.com/lulu.xalo/" target="_blank" rel="noopener noreferrer">amazing artist Lu Lo</a></p>
- </div>
- </section>
- )
-}
-
-const HighlightedText = styled.span`
- color: #ff8c00; /* Set the color for highlighted words 
- font-weight: bold;
-`;
-
- // Words to highlight
- const highlightedWords = ['Enthusiastic', 'user experience', 'Avid learner', 'dedicated researcher'];
-
- // Split the description into words
- const words = description.split(' ');
-
- return (
- <>
- <Title>{title}</Title>
- <p>
- {words.map((word, index) => {
- // Check if the current word should be highlighted
- const isHighlighted = highlightedWords.includes(word);
-
- return isHighlighted ? (
- <HighlightedText key={index}>{word} </HighlightedText>
- ) : (
- <span key={index}>{word} </span>
- );
- })}
- </p>
- </>
- );
-};
-
-*/

app/components/ui/BolderText.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 const BolderText = styled.span`
- font-weight: 500;
+ font-weight: 600;
 `
 
 export default BolderText

app/components/ui/Text.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 const Text = styled.p`
  margin: ${(props) => props.theme.spacing.xs} auto;
+ line-height: 1.5rem;
 `
 
 export default Text

app/data/aboutInfo.ts

@@ -0,0 +1,28 @@
+/*
+Hi there! I’m Marina Kinalone - developer and UX designer with a background in research and education. 
+
+I'm currently working at Trustly, a fintech company based in Stockholm, Sweden.
+
+Specializing in {{bold}}frontend development{{/bold}}, I love to craft seamless, user-centered experiences. My approach is grounded in research methods honed during my art history days—always learning efficiently and staying at the tech forefront.
+
+From my career as an educator, I discovered my role as a facilitator, bridging gaps between individuals and knowledge. I thrive on building communities, encouraging personal growth, and fostering creativity through active communication.
+
+Championing diversity and collaboration, I'm recognized as a caring and supportive teammate, propelling projects forward with sharp problem-solving skills. I believe in challenging the status quo to unveil optimal, user-centered solutions that spark innovation.
+
+Beyond coding, I'm a fervent creator exploring my creativity through personal projects, dance, and teaching. I am active in social dance communities, and love to discover the world and take pictures with my analog camera.
+
+My coding assistant is my cat, Stormy. She is especially fond of printers.
+
+I come from France, have lived in California, USA, and now live in Stockholm, Sweden.
+
+*/
+
+export const aboutInfo = [
+ "I'm currently working at {{bold}}Trustly{{/bold}}, a fintech company based in Stockholm, Sweden.",
+ '{{bold}}Specializing in frontend development, I love to craft seamless, user-centered experiences{{/bold}}. My approach is grounded in research methods honed during my art history day — always {{bold}}learning efficiently{{/bold}} and {{bold}}staying at the tech forefront{{/bold}}.',
+ 'From my career as an educator, I discovered my role as a facilitator, bridging gaps between individuals and knowledge. {{bold}}I thrive on building communities, encouraging personal growth, and fostering creativity through active communication{{/bold}}.',
+ "Championing diversity and collaboration, {{bold}}I'm recognized as a caring and supportive teammate, propelling projects forward with sharp problem-solving skills{{/bold}}. I believe in challenging the status quo to unveil optimal, user-centered solutions that spark innovation.",
+ "Beyond coding, {{bold}}I'm a fervent creator exploring my creativity through personal projects, dance, and teaching{{/bold}}. I am active in social dance communities, and love to discover the world and take pictures with my analog camera.",
+ 'My coding assistant is my cat, Stormy. She is especially fond of printers.',
+ 'I come from France, have lived in California, USA, and {{bold}}now live in Stockholm, Sweden{{/bold}}.',
+]

app/data/contactInfo.ts

@@ -17,7 +17,7 @@ export const contactInfo = [
  id: 'github',
  title: 'github',
  link: 'https://github.com/marinakinalone',
- icon: 'github.png',
+ icon: 'github.svg',
  },
  {
  id: 'linkedin',

app/helpers/interpolate.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import BolderText from '../components/ui/BolderText'
+
+const interpolate = (text: string) => {
+ const parts = text.split(/({{bold}}|{{\/bold}})/)
+
+ let isBold = false
+ const interpolatedText = parts.map((part, index) => {
+ if (part === '{{bold}}') {
+ isBold = true
+ return null
+ } else if (part === '{{/bold}}') {
+ isBold = false
+ return null
+ } else {
+ return isBold ? <BolderText key={index}>{part}</BolderText> : part
+ }
+ })
+
+ return <React.Fragment>{interpolatedText}</React.Fragment>
+}
+
+export default interpolate