Technigo · Bianka2112 · Apr 16, 2025 · Apr 16, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
 # Portfolio
+
+Deployed Site:
+
+Figma link: https://www.figma.com/design/hFjGb9pVuXS6SbxUAGdCkL/--Bianka---Figma-designs-for-students--Copy-?node-id=3084-966&p=f&t=rOSwChuyln6MbyrC-0
diff --git a/index.html b/index.html
@@ -1,11 +1,48 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <meta
+      name="description"
+      content="Web developer portfolio showcasing tech stack, projects and contact info"
+    />
+    <meta name="author" content="Bianka Romero" />
+    <meta
+      name="keywords"
+      content="web developer, portfolio, frontend, React, JavaScript, Bianka Romero"
+    />
+
+    <meta
+      property="og:title"
+      content="Bianka Romero | Web Developer Portfolio"
+    />
+    <meta
+      property="og:description"
+      content="Creative web developer portfolio showcasing modern projects and skills."
+    />
+    <meta property="og:image" content="/images/preview.dev.site.png" />
+    <meta property="og:url" content="https://biankaromero.netlify.app" />
+    <meta property="og:type" content="website" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500;1,700;1,800&display=swap"
+      rel="stylesheet"
+    />
+
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/images/only.logo.onWhite.svg"
+    />
+    <link rel="icon" type="image/png" href="/images/logoTransparent.png" />
+    <link rel="apple-touch-icon" href="/images/logoBlack.png" />
+
+    <title>Dev Portfolio - BLR</title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>

diff --git a/package.json b/package.json
@@ -11,13 +11,16 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "styled-components": "^6.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

diff --git a/public/images/a11y-app.png b/public/images/a11y-app.png
diff --git a/public/images/abstract-unsplash.jpg b/public/images/abstract-unsplash.jpg
diff --git a/public/images/articlesPlaceholder-unsplash.jpg b/public/images/articlesPlaceholder-unsplash.jpg
diff --git a/public/images/logoBlack.png b/public/images/logoBlack.png
diff --git a/public/images/logoTransparent.png b/public/images/logoTransparent.png
diff --git a/public/images/only.logo.onWhite.svg b/public/images/only.logo.onWhite.svg
diff --git a/public/images/preview.dev.site.png b/public/images/preview.dev.site.png
diff --git a/public/images/recipe-library-app.png b/public/images/recipe-library-app.png
diff --git a/public/images/stockholm-buzz-app.png b/public/images/stockholm-buzz-app.png
diff --git a/public/images/weather-app.png b/public/images/weather-app.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,31 @@
-export const App = () => {
+import projects from "./data/projects.json"
+import skills from "./data/skills.json"
+import articles from "./data/articles.json"
+import FeaturedProjects from "./sections/FeaturedProjects"
+import Footer from "./sections/Footer"
+import Header from "./sections/Header"
+import Skills from "./sections/Skills"
+import Tech from "./sections/Tech"
+import Reflections from "./sections/Reflections"
+import { GlobalStyle } from "./styles/GlobalStyle"
+import { ThemeProvider } from "styled-components"
+import { theme } from "./styles/theme"
+
+const App = () => {
   return (
-    <>
-      <h1>Portfolio</h1>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laborum! Maxime animi nostrum facilis distinctio neque labore consectetur beatae eum ipsum excepturi voluptatum, dicta repellendus incidunt fugiat, consequatur rem aperiam.</p>
-    </>
+    <ThemeProvider theme={theme}>
+    <GlobalStyle />
+      <Header />
+      <Tech />
+      <FeaturedProjects 
+        projects={projects.projects} />
+        <Skills 
+          skills={skills.skills}/>
+      <Reflections 
+        articles={articles.articles}/>
+      <Footer />
+    </ThemeProvider>
   )
 }
+
+export default App
diff --git a/src/assets/BiankaRomero.jpg b/src/assets/BiankaRomero.jpg
diff --git a/src/assets/camera-BG.jpg b/src/assets/camera-BG.jpg
diff --git a/src/assets/laptop-BG.jpg b/src/assets/laptop-BG.jpg
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -0,0 +1,50 @@
+import styled from "styled-components"
+import { media } from "../styles/media"
+
+const Tag = styled.li`
+  display: block;
+
+  @media ${media.desktop} {
+    align-self: left;
+  }
+`
+const TagsContainer = styled.ul`
+
+`
+const CardTitle = styled.h2`
+  padding-top: 16px;
+`
+const CardText = styled.p`
+  font-size: 16px;
+  padding-top: 16px;
+
+  @media ${media.desktop} {
+    font-size: 18px;
+  }
+`
+
+const Card = ({ title, text, tags, TitleComponent = CardTitle }) => {
+   const cardContent = (
+    <>
+     {tags && (
+       <TagsContainer>
+        {tags.map((tag, index) => (
+          <Tag key={index}>{tag}</Tag>
+        ))}
+      </TagsContainer>
+    )} 
+    {text && (
+      <CardText>{text}</CardText>
+    )}
+    </>
+  )
+
+  return (
+    <article>
+      <TitleComponent>{title}</TitleComponent>
+      {cardContent}
+    </article>
+  )
+}
+
+export default Card
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -0,0 +1,70 @@
+import styled from "styled-components"
+import { media } from "../styles/media"
+import { IoCallOutline, IoChatbubbleEllipsesOutline, IoMailOutline } from "react-icons/io5";
+
+const ContactContainer = styled.div`
+  display: block;
+  padding: 64px 0;
+
+  @media ${media.tablet} {
+      font-size: 24px;
+    }
+
+    @media ${media.desktop} {
+        font-size: 30px;
+      }
+
+  a {
+    color: inherit;
+    display: block;
+    margin-top: 8px;
+  }
+`
+
+const ContactItem = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+    color: #0077ff; 
+  }
+
+  svg {
+    flex-shrink: 0;
+    font-size: 1em;
+    vertical-align: middle;
+  }
+`
+
+const ContactName = styled.h3`
+  margin-bottom: 12px;
+`
+
+const Contact = ({ name, phone, email }) => {
+  // Clean phone number for tel and sms links (remove spaces, parentheses, dashes)
+  const cleanPhone = phone.replace(/[^+\d]/g, "");
+
+  return (
+    <ContactContainer>
+      <ContactName>{name}</ContactName>
+
+      <ContactItem href={`tel:${cleanPhone}`} aria-label={`Call ${phone}`}>
+        <IoCallOutline /> {phone}
+      </ContactItem>
+
+      <ContactItem href={`sms:${cleanPhone}`} aria-label={`Send SMS to ${phone}`}>
+        <IoChatbubbleEllipsesOutline /> Send SMS
+      </ContactItem>
+
+      <ContactItem href={`mailto:${email}`} aria-label={`Send email to ${email}`}>
+        <IoMailOutline /> {email}
+      </ContactItem>
+    </ContactContainer>
+  )
+}
+
+export default Contact
diff --git a/src/components/HeroImages.jsx b/src/components/HeroImages.jsx
@@ -0,0 +1,90 @@
+import laptopBG from "../assets/laptop-BG.jpg"
+import cameraBG from "../assets/camera-BG.jpg"
+import BiankaRomero from "../assets/BiankaRomero.jpg"
+import styled, { keyframes } from "styled-components"
+
+
+const HeroContainer = styled.div`
+  max-width: 100vw;
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+  margin: 0 auto;
+
+`
+const HeroImg = styled.img`
+  width: 30%;
+  height: auto;
+  max-width: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+`
+
+const fadeUpCenter = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+
+const slideInLeft = keyframes`
+  from {
+    opacity: 0;
+    transform: rotate(-4.7deg) translateX(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(-4.7deg) translateX(50px);
+  }
+`
+
+const slideInRight = keyframes`
+  from {
+    opacity: 0;
+    transform: rotate(4.7deg) translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(4.7deg) translateX(-50px);
+  }
+`
+
+
+const LeftHeroImg = styled(HeroImg)`
+  animation: ${slideInLeft} 1s ease forwards;
+  z-index: -1;
+`
+
+const CenterHeroImg = styled(HeroImg)`
+  animation: ${fadeUpCenter} 1s ease forwards;
+  z-index: 0;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+`
+
+const RightHeroImg = styled(HeroImg)`
+  animation: ${slideInRight} 1s ease forwards;
+  z-index: -1;
+`
+
+const HeroImages = () => {
+  return (
+    <HeroContainer>
+      <LeftHeroImg src={laptopBG} alt="Laptop background" />
+      <CenterHeroImg src={BiankaRomero} alt="Bianka Romero" />
+      <RightHeroImg src={cameraBG} alt="Camera background" />
+    </HeroContainer>
+  )
+}
+
+export default HeroImages
diff --git a/src/components/LinkButton.jsx b/src/components/LinkButton.jsx
@@ -0,0 +1,51 @@
+import styled from "styled-components"
+
+const LinkButtonStyle = styled.a`
+  font-size: 18px;
+  border-radius: 12px;
+  border: 2px solid black;
+  background: #000;
+  color: white;
+  display: flex;
+  width: 100%;
+  max-width: 303px;
+  height: 48px;
+  padding: 0px 16px;
+  align-items: center;
+  gap: 16px;
+  flex-shrink: 0;
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+`
+
+const IconStyle = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  line-height: 0;
+  font-size: 32px;
+`
+
+const LinkButton = ({ link, linkUse, IconComponent, ...props }) => {
+  return (
+      <LinkButtonStyle 
+        href={link} 
+        target="_blank" 
+        rel="noopener noreferrer"
+        {...props}>
+
+        {IconComponent && (
+          <IconStyle aria-hidden="true"> 
+           <IconComponent />
+          </IconStyle>
+        )}
+        {linkUse}
+      </LinkButtonStyle>
+  )
+}
+
+export default LinkButton