From d52310f4bdcc9a3602642f8d2dd3ca2e28eaad67 Mon Sep 17 00:00:00 2001
From: hoseacodes <dominique11h@yahoo.com>
Date: Sun, 25 Feb 2024 16:09:06 -0600
Subject: [PATCH] fix(*): adj pic and add titleFont

---
 src/Components/Fonts/TileFont.jsx    | 42 ++++++++++++++++++++++++++++
 src/Components/Technologies/Tech.jsx | 31 ++++++++++++++++----
 2 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 src/Components/Fonts/TileFont.jsx

diff --git a/src/Components/Fonts/TileFont.jsx b/src/Components/Fonts/TileFont.jsx
new file mode 100644
index 00000000..20079d33
--- /dev/null
+++ b/src/Components/Fonts/TileFont.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { HeroText } from "../../Layout/Hero/styledHero";
+
+export const TitleFont = ({
+    primary,
+    position,
+    size,
+    label,
+    icon,
+    ...props
+}) => {
+  const mode = primary ? "button--primary" : "button--secondary";
+  return (
+    <HeroText
+      position
+      {...props}
+      className={[`button--${size}`, mode].join(" ")}
+    >
+      {label}
+    </HeroText>
+  );
+};
+
+TitleFont.propTypes = {
+  primary: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  icon: PropTypes.element,
+  position: PropTypes.oneOf(["Left", "Right"])
+};
+
+TitleFont.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: "medium",
+  onClick: undefined,
+  icon: null,
+  position: "Left",
+};
diff --git a/src/Components/Technologies/Tech.jsx b/src/Components/Technologies/Tech.jsx
index e3a283b5..8c0cc50a 100755
--- a/src/Components/Technologies/Tech.jsx
+++ b/src/Components/Technologies/Tech.jsx
@@ -27,12 +27,31 @@ import './Technologies.css';
 class Tech extends Component {
 
     render() {
-        const imgSlide = {"AWS": AWS, "azure": Azure, "Architecture": Arch, 
-        "firebase": Firebase, "github": Github, "gitlab": GitLab, "splunk": Splunk, "npm": NPM,
-        "springboot": SpringBoot, "terraform": Terraform, "react": Reactt, "tailwind": Tailwind,
-        "DevOps": DevOps, "bootstrap": Bootstrap, "javascript": JS, "Django": Django, "mongodb": MongoDB,
-        "nodejs": Node, "postgresql": postgresql, "python": Py, 
-        "swift": Swift,"jquery": JQuery, "java": 'https://i.imgur.com/wiEM1zo.png',"solidity": 'https://i.imgur.com/NhpXJN2.png'
+        const imgSlide = {
+          AWS: AWS,
+          azure: Azure,
+          Architecture: Arch,
+          firebase: Firebase,
+          github: Github,
+          gitlab: GitLab,
+          splunk: Splunk,
+          npm: NPM,
+          springboot: SpringBoot,
+          terraform: Terraform,
+          react: Reactt,
+          tailwind: Tailwind,
+          DevOps: DevOps,
+          bootstrap: Bootstrap,
+          javascript: JS,
+          Django: Django,
+          mongodb: MongoDB,
+          nodejs: Node,
+          postgresql: postgresql,
+          python: Py,
+          swift: Swift,
+          jquery: JQuery,
+          java: "https://i.imgur.com/wiEM1zo.png",
+          solidity: "https://i.imgur.com/K662O2U.png",
         };
         function getRandomObjectKeys(obj, count) {
           const keys = Object.keys(obj);