added skill tags

Xanazf · May 3, 2024 · ffa6f92 · ffa6f92
1 parent 56efa47
commit ffa6f92
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 11 deletions.
diff --git a/src/assets/components/Card/ExperienceCard.module.css b/src/assets/components/Card/ExperienceCard.module.css
@@ -5,7 +5,7 @@
   /* grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   grid-auto-flow: column; */
-  gap: 0.218em;
+  gap: 0.5em;
   padding: 0.369em;
   border-radius: 0.3em;
   background: hsl(var(--dark-hue) 50 15);
@@ -55,6 +55,23 @@
   letter-spacing: -0.07em;
 }
 
+.skills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.618em;
+}
+
+.skill {
+  text-align: center;
+  min-width: 3em;
+  padding: 0.318em;
+  padding-inline: 0.5em;
+  font-size: 0.875em;
+  border-radius: 100vh;
+  background: hsl(var(--primary-hue) 60 50);
+  flex: 0 1 max-content;
+}
+
 :global(.light) {
   & .experience_card_wrap {
     background: hsl(var(--light-hue) 75 50 / 0.6);
@@ -70,6 +87,5 @@
 @media only screen and (min-width: 45em) {
   .experience_card_wrap {
     grid-template-columns: 20em;
-    grid-template-rows: 1fr 1fr;
   }
 }
diff --git a/src/assets/components/Card/ExperienceCard.tsx b/src/assets/components/Card/ExperienceCard.tsx
@@ -1,3 +1,4 @@
+import { For } from 'solid-js';
 import type { ExperienceType } from '../ComponentTypes';
 import styles from './ExperienceCard.module.css';
 
@@ -9,6 +10,7 @@ function ExperienceCard(props: ExperienceType) {
   const location = props.location;
   const workType = props.workType;
   const desc = props.desc || null;
+  const skills = props.skills || null;
 
   return (
     <div class={styles.experience_card_wrap}>
@@ -20,6 +22,13 @@ function ExperienceCard(props: ExperienceType) {
         <section class={styles.caption}>{workType}</section>
       </div>
       {desc ? <pre class={styles.maintext}>{desc}</pre> : null}
+      {skills ? (
+        <section class={styles.skills}>
+          <For each={skills}>
+            {item => <div class={styles.skill}>{item}</div>}
+          </For>
+        </section>
+      ) : null}
     </div>
   );
 }

diff --git a/src/assets/components/Experience/index.tsx b/src/assets/components/Experience/index.tsx
@@ -13,6 +13,26 @@ const experienceObj: { [key: string]: ExperienceType } = {
     desc: `
 Working on remote freelance projects.
     `,
+    skills: [
+      'Typescript',
+      'Node.js',
+      'Git',
+      'Vercel',
+      'Nginx',
+      'Bash',
+      'Linux',
+      'Redis',
+      'MongoDB',
+      'React.js',
+      'Postman',
+      'CI/CD',
+      'CSS',
+      'Tailwind',
+      'Solid.js',
+      'Material UI',
+      'Next UI',
+      'REST API',
+    ],
   },
   pos1: {
     companyName: 'NDA',
@@ -30,6 +50,26 @@ Development achievements:
 - 2 Telegram bots that integrate with the API of the CRM to deliver information to the company Telegram accounts in real time;
   
 - Various API and Database solutions to facilitate the high throughput of traffic required in the business domain;`,
+    skills: [
+      'Typescript',
+      'Node.js',
+      'Git',
+      'Vercel',
+      'Next.js',
+      'Nginx',
+      'Bash',
+      'Linux',
+      'Redis',
+      'MongoDB',
+      'React.js',
+      'Docker',
+      'Kubernetes',
+      'Postman',
+      'CI/CD',
+      'CSS',
+      'Material UI',
+      'REST API',
+    ],
   },
   pos2: {
     companyName: 'PragmaticPlay',
@@ -45,6 +85,7 @@ Facilitated integration of Pragmatic Play's online gambling games with their cus
 
 The position did not offer much in ways of innovation, it was a straightforward job.
     `,
+    skills: ['Bash', 'Linux', 'CI/CD', 'Jira', 'SQL', 'REST API'],
   },
   pos3: {
     companyName: 'NewAge.io',
@@ -64,6 +105,28 @@ Used Postman, JavaScript, kubectl, and Bash scripts.
 
 This position was my first introduction into the DevOps side of things, it has taught me a lot, I much appreciate this experience.
     `,
+    skills: [
+      'Javascript',
+      'Git',
+      'Nginx',
+      'Bash',
+      'Linux',
+      'Kubernetes',
+      'Jenkins',
+      'Postman',
+      'Airflow',
+      'AWS',
+      'Python',
+      'BitBucket',
+      'CI/CD',
+      'ElasticSearch',
+      'Grafana',
+      'Kibana',
+      'Jira',
+      'SQL',
+      'Swagger',
+      'REST API',
+    ],
   },
   pos4: {
     companyName: 'LimTC',

diff --git a/src/index.css b/src/index.css
@@ -16,10 +16,10 @@
 
   color-scheme: light dark;
   background-color: #0f1729;
-  color: #ffffcd;
+  color: hsl(175, 90%, 92%);
 
   --dark-hue: 222;
-  --light-hue: 60;
+  --light-hue: 175;
 
   --primary-hue: 183;
   --accent-hue: 270;
@@ -139,13 +139,13 @@ footer {
 
 .light {
   color: #0f1729;
-  background-color: #ffffcd;
+  background-color: hsl(175, 90%, 92%);
 }
 
 @media (prefers-color-scheme: light) {
   :root.light {
     color: #0f1729;
-    background-color: #ffffcd;
+    background-color: #d8f0fd;
   }
 }
 

diff --git a/src/pages/footer/index.tsx b/src/pages/footer/index.tsx
@@ -1,14 +1,9 @@
-import { useSVG as DynamicSVG } from '../../assets/svg/SVGLoader';
 import styles from './Footer.module.css';
 
 function Footer() {
   return (
     <div class={styles.footer}>
       <h1>Oleksandr Marnov</h1>
-      <DynamicSVG
-        iconName={'typescript'}
-        brand
-      />
     </div>
   );
 }