Project Portfolio Kasia

README.md

@@ -1 +1,4 @@
 # Portfolio
+
+Netlify link: https://portfolio-kasia.netlify.app/
+

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "project",
+  "name": "js-project-portfolio",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

src/App.jsx

@@ -1,8 +1,29 @@
+import { Introduction } from "./components/about/Introduction";
+import { Tech } from "./components/Tech";
+import { Projects } from "./components/projects/Projects";
+import { Skills } from "./components/Skills";
+import { Contact } from "./components/about/Contact";
+import { Footer } from "./components/Footer";
+
+import { styled } from "styled-components";
+
+const StyledDiv = styled.div`
+  body {
+    margin: 0;
+  }
+`;
+
 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>
-    </>
-  )
-}
+    <StyledDiv>
+      <main>
+        <Introduction />
+        <Tech />
+        <Projects />
+        <Skills />
+        <Contact />
+      </main>
+      <Footer />
+    </StyledDiv>
+  );
+};

src/components/Footer.jsx

@@ -0,0 +1,80 @@
+//import "./Footer.css"
+import { styled } from "styled-components";
+
+const StyledFooter = styled.footer`
+  .ticker-wrap {
+    width: 100%;
+    height: 80px;
+    margin: 0 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    bottom: 0;
+    height: 114px;
+    background-color: var(--color-foreground);
+  }
+
+  .ticker {
+    display: inline-block;
+    margin-top: 5px;
+    animation: marquee 40s linear infinite;
+  }
+  .item-collection-1 {
+    position: relative;
+    left: 0%;
+    animation: swap 40s linear infinite;
+  }
+
+  .item {
+    display: inline-block;
+    color: var(--color-white);
+    font-family: "Montserrat", sans-serif;
+    font-size: 26.038px;
+    font-weight: 600;
+    padding-top: 41px;
+    padding-bottom: 35px;
+  }
+
+  /* Transition */
+  @keyframes marquee {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes swap {
+    0%,
+    50% {
+      left: 0%;
+    }
+    50.01%,
+    100% {
+      left: 100%;
+    }
+  }
+`;
+
+export const Footer = () => {
+  return (
+    <StyledFooter>
+      <div className="ticker-wrap">
+        <div className="ticker">
+          <span className="item-collection-1">
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Devełoper ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+          </span>
+          <span className="item-collection-2">
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+          </span>
+        </div>
+      </div>
+    </StyledFooter>
+  );
+};

src/components/PageTopic.jsx

@@ -0,0 +1,5 @@
+export const PageTopic = ({pageTopic, className})=>{
+    return (
+        <h2 className={className}>{pageTopic}</h2>
+    )
+}

src/components/Skills.jsx

@@ -0,0 +1,187 @@
+import { PageTopic } from "./PageTopic";
+import { styled } from "styled-components";
+
+const StyledSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  background-color: var(--color-background);
+  padding: 128px 16px 157px 16px;
+  gap: 64px;
+
+  .skills {
+    font-size: 56px;
+    font-weight: 700;
+    color: var(--color-white);
+  }
+
+  .skill-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 64px;
+  }
+
+  .skillbox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .listbox p {
+    font-size: 18px;
+    color: var(--color-white);
+    font-weight: 400;
+    font-family: "Hind", sans-serif;
+    line-height: normal;
+    text-align: center;
+    padding: 2px;
+  }
+
+  .listbox p:hover {
+    background-color: var(--color-foreground);
+    cursor: default;
+  }
+
+  .skill-container h3 {
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  .code-head {
+    color: var(--color-white);
+    background-color: var(--color-code);
+  }
+
+  .toolbox-head {
+    color: var(--color-white);
+    background-color: var(--color-background);
+  }
+
+  .upcoming-head {
+    color: var(--color-white);
+    background-color: var(--color-upcoming);
+  }
+
+  .more-head {
+    color: var(--color-foreground);
+    background-color: var(--color-more);
+  }
+
+  .skill-container h3:hover {
+    background-color: var(--color-test);
+    color: var(--color-code);
+    cursor: default;
+  }
+
+  @media (min-width: 667px) and (max-width: 1024px) {
+    padding: 128px 32px 148px 32px;
+    width: auto;
+
+    .skill-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      align-items: flex-start;
+      gap: 64px;
+    }
+
+    .skillbox {
+      align-items: flex-start;
+    }
+
+    .listbox p {
+      text-align: left;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 128px 161px;
+    gap: 128px;
+
+    .skill-container {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    .skills {
+      font-size: 80px;
+    }
+
+    .listbox p {
+      text-align: left;
+    }
+
+    .skill-container h3 {
+      font-size: 32px;
+    }
+
+    .skillbox {
+      align-items: flex-start;
+      gap: 8px;
+    }
+  }
+`;
+
+export const Skills = () => {
+  return (
+    <StyledSection className="skill-wrapper">
+      <PageTopic className={"skills"} pageTopic={"Skills"} />
+      <div className="skill-container" aria-label="Tech skills">
+        <div className="skillbox">
+          <h3 className="code-head">Code</h3>
+          <div className="listbox">
+            <p>React</p>
+            <p>Global State Management</p>
+            <p>DOM Manipulation</p>
+            <p>Javascript ES6</p>
+            <p>HTML5</p>
+            <p>CSS3</p>
+            <p>Tailwind CSS</p>
+            <p>Styled Components</p>
+            <p>Node</p>
+            <p>REST API</p>
+            <p>Authentication</p>
+          </div>
+        </div>
+        <div className="skillbox">
+          <h3 className="toolbox-head">Toolbox</h3>
+          <div className="listbox">
+            <p>GitHub</p>
+            <p>Git</p>
+            <p>Postman</p>
+            <p>VS code</p>
+            <p>Netlify</p>
+            <p>Figma</p>
+            <p>Chrome dev tools</p>
+          </div>
+        </div>
+        <div className="skillbox">
+          <h3 className="upcoming-head">Upcoming</h3>
+          <div className="listbox">
+            <p>TypeScript</p>
+            <p>Python</p>
+          </div>
+        </div>
+        <div className="skillbox">
+          <h3 className="more-head">More</h3>
+          <div className="listbox">
+            <p>Problem-Solving</p>
+            <p>Agile methodology</p>
+            <p>Accessibility</p>
+            <p>Responsive Design</p>
+            <p>Team work</p>
+            <p>Mob programming</p>
+            <p>Pair programming</p>
+            <p>Remote working</p>
+            <p>Design hand-off</p>
+          </div>
+        </div>
+      </div>
+    </StyledSection>
+  );
+};