projects section

2026-05-03 05:28:16 +00:00 · 2023-09-02 15:00:48 +02:00
parent 613294e442
commit 6611006c0d
9 changed files with 223 additions and 50 deletions
@@ -0,0 +1,114 @@
+import { StyledCursor } from './styles/Cursor.styled';
+import { StyledProjects } from './styles/Projects.styled';
+import { StyledSectionHeader } from './styles/SectionHeader.styled';
+
+const badges = {
+  HTML: ' https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
+  CSS: ' https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white',
+  JS: ' https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E',
+  SASS: ' https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white',
+  TS: ' https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white',
+  Node: ' https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white',
+  Vue: ' https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D',
+  Express: ' https://img.shields.io/badge/Express.js-404D59?style=for-the-badge',
+  Mongo: ' https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white',
+  React: ' https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB',
+  Flutter: ' https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white',
+  NET: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
+  Python: ' https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white',
+  Java: ' https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white',
+  AWS: ' https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white',
+  Heroku: ' https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white',
+  NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white',
+  Discord: ' https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue',
+  Postgresql: ' https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white',
+  CSharp: ' https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
+  Dotnet: ' https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
+};
+
+function ProjectsSection() {
+  return (
+    <StyledProjects id="projects">
+      <StyledSectionHeader>
+        MY{' '}
+        <span className="text--accent" style={{ position: 'relative' }}>
+          PROJECTS
+          <StyledCursor />
+        </span>
+      </StyledSectionHeader>
+
+      <h1>ROZWIJANE PROJEKTY</h1>
+
+      <div className="projects-grid">
+        <div className="project-card">
+          <h2>Stacjownik</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+
+          <div className="project-actions">
+            <button>
+              <a href="#">GITHUB REPO</a>
+            </button>
+            <button>
+              <a href="#">STRONA</a>
+            </button>
+          </div>
+        </div>
+
+        <div className="project-card">
+          <h2>Pojazdownik</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+        </div>
+
+        <div className="project-card">
+          <h2>GeneraTOR</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+        </div>
+
+        <div className="project-card">
+          <h2>Stacjobot</h2>
+          <h3>Lorem ipsum dolor sit amet.</h3>
+          <div className="project-badges">
+            <img src={badges.TS} alt="typescript"></img>
+            <img src={badges.Vue} alt="vue.js"></img>
+            <img src={badges.SASS} alt="sass/scss"></img>
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, sunt fugiat vero modi excepturi ratione
+            ipsum inventore quidem unde dolore.
+          </p>
+        </div>
+      </div>
+    </StyledProjects>
+  );
+}
+
+export default ProjectsSection;