Technigo · Demijuls · Nov 28, 2025 · Nov 29, 2025 · Nov 30, 2025 · Nov 30, 2025
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
 # Portfolio
+https://julia-demi-portfolio.netlify.app/
diff --git a/index.html b/index.html
@@ -1,10 +1,12 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <title>Julia's Portfolio</title>
+    <!-- Fav Icon -->
+    <link rel="icon" type="image/png" href="/icons/fav_icon.png" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.19"
   },
   "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.7.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/icons/Btn - github.svg b/public/icons/Btn - github.svg
diff --git a/public/icons/Btn - instagram.svg b/public/icons/Btn - instagram.svg
diff --git a/public/icons/Btn - linkedin.svg b/public/icons/Btn - linkedin.svg
diff --git a/public/icons/Ic-ArrowDown.svg b/public/icons/Ic-ArrowDown.svg
diff --git a/public/icons/Ic-Github.svg b/public/icons/Ic-Github.svg
diff --git a/public/icons/Ic-Web.svg b/public/icons/Ic-Web.svg
diff --git a/public/icons/fav_icon.png b/public/icons/fav_icon.png
diff --git a/public/img/project1.jpg b/public/img/project1.jpg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,15 @@
+import GlobalStyle from "./globalStyles";
+import { Header } from "./components/layout/Header";
+import { MainSection } from "./components/layout/MainSection";
+import { Footer } from "./components/layout/Footer";
+
 export 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>
+      <GlobalStyle />
+      <Header />
+      <MainSection />
+      <Footer />
     </>
-  )
-}
+  );
+};
diff --git a/src/assets/AvatarFooter.png b/src/assets/AvatarFooter.png
diff --git a/src/assets/avatar.JPG b/src/assets/avatar.JPG
diff --git a/src/assets/codepicture.jpg b/src/assets/codepicture.jpg
diff --git a/src/assets/footer_av.png b/src/assets/footer_av.png
diff --git a/src/assets/project1.jpg b/src/assets/project1.jpg
diff --git a/src/assets/wordspicture.jpg b/src/assets/wordspicture.jpg
diff --git a/src/components/ArticleDate.jsx b/src/components/ArticleDate.jsx
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { media } from "../media";
+import { BodyText } from "./Typography";
+
+const StyledText = styled(BodyText)`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  border-radius: 4px;
+  border: 1px solid #000;
+
+  ${media.mobile} {
+    flex-wrap: wrap;
+  }
+`;
+
+export const ArticleDate = ({ date }) => {
+  return (
+    <StyledText size="16px" padding="2px 6px">
+      {date}
+    </StyledText>
+  );
+};
diff --git a/src/components/BlogCard.jsx b/src/components/BlogCard.jsx
@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import { H3, BodyText } from "./Typography";
+import { ButtonFilled } from "./Buttons/ButtonFilled";
+import { media } from "../media";
+import { ArticleDate } from "../components/ArticleDate";
+
+const ArticleImg = styled.img`
+  width: 479px;
+  align-self: stretch;
+  object-fit: cover;
+  border-radius: 12px;
+
+  ${media.tablet} {
+    width: 200px;
+  }
+
+  ${media.mobile} {
+    width: 100%;
+    height: 200px;
+    align-self: stretch;
+  }
+`;
+
+const CardContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 125px;
+  align-self: stretch;
+
+  ${media.tablet} {
+    gap: 32px;
+  }
+
+  ${media.mobile} {
+    flex-direction: column;
+    gap: 32px;
+  }
+`;
+
+const CardInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  width: 580px;
+  align-self: stretch;
+
+  ${media.tablet} {
+    gap: 32px;
+    flex: 1 0 0;
+    width: auto;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  ${media.mobile} {
+    width: auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 32px;
+    align-self: stretch;
+  }
+`;
+
+export const BlogCard = (props) => {
+  return (
+    <CardContent role="article" aria-labelledby={`blog-title-${props.id}`}>
+      <ArticleImg src={props.imgSrc} alt="" role="presentation" />
+      <CardInfo>
+        <ArticleDate date={props.date} />
+        <H3>{props.title}</H3>
+        <BodyText>{props.about}</BodyText>
+        <ButtonFilled
+          text="Read article"
+          link={props.link}
+          aria-label={`Read full article: ${props.title}`}
+        />
+      </CardInfo>
+    </CardContent>
+  );
+};
diff --git a/src/components/Buttons/ButtonFilled.jsx b/src/components/Buttons/ButtonFilled.jsx
@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+const ButtonStyled = styled.a`
+  display: flex;
+  width: 303px;
+  height: 48px;
+  padding: 0 16px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  border-radius: 12px;
+  background: #000;
+  color: #fff;
+  text-decoration: none;
+  font-family: Poppins, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+
+  /* Icons */
+  img {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+  }
+
+  /* Hover */
+  &:hover {
+    background: #222;
+  }
+
+  /* Keyboard focus */
+  &:focus-visible {
+    outline: 3px solid #fff;
+    outline-offset: 3px;
+  }
+`;
+
+export const ButtonFilled = (props) => {
+  return (
+    <ButtonStyled
+      href={props.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      role="button"
+      aria-label={props.ariaLabel || props.text}
+    >
+      {props.icon && <img src={props.icon} alt="" aria-hidden="true" />}
+      {props.text}
+    </ButtonStyled>
+  );
+};
diff --git a/src/components/Buttons/ButtonGhost.jsx b/src/components/Buttons/ButtonGhost.jsx
@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+const ButtonStyled = styled.a`
+  display: flex;
+  width: 303px;
+  height: 48px;
+  padding: 0 16px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  border-radius: 12px;
+  border: 2px solid #000;
+  background: #fff;
+  color: #000;
+  text-decoration: none;
+  font-family: Poppins, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+
+  /* Icon */
+  img {
+    width: 30px;
+    height: 30px;
+    flex-shrink: 0;
+  }
+
+  /* Hover */
+  &:hover {
+    background: #f2f2f2;
+  }
+
+  /* Keyboard focus */
+  &:focus-visible {
+    outline: 3px solid #000;
+    outline-offset: 3px;
+  }
+`;
+
+export const ButtonGhost = (props) => {
+  return (
+    <ButtonStyled
+      href={props.link}
+      target="_blank"
+      rel="noopener noreferrer"
+      role="button"
+      aria-label={props.ariaLabel || props.text}
+    >
+      {props.icon && <img src={props.icon} alt="" aria-hidden="true" />}
+      {props.text}
+    </ButtonStyled>
+  );
+};
diff --git a/src/components/FooterAvatar.jsx b/src/components/FooterAvatar.jsx
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+import avatarFooter from "../Assets/AvatarFooter.png";
+
+const AvatarStyled = styled.img`
+  width: 164px;
+  height: 164px;
+  border-radius: 100px;
+`;
+
+const FooterAvatar = () => {
+  return (
+    <AvatarStyled
+      src={avatarFooter}
+      alt="round portrait with orange background"
+    />
+  );
+};
+
+export default FooterAvatar;
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		# Portfolio
		https://julia-demi-portfolio.netlify.app/