project updates and blog

src/components/project-card/ProjectCard.css

@@ -0,0 +1,171 @@
+.project-card {
+
+    padding: 3px;
+}
+
+.project-card-int {
+    background-color: #222;
+    padding: 2px;
+    background-size: cover;
+    background-position: center;
+    transition: .5s;
+    border-radius: 10px;
+}
+
+.project-card-int:hover {
+    transform: translateY(-5px);
+    transition: .5s;
+    cursor: pointer;
+}
+
+.project-card-modal {
+    background-color: #000000;
+    color: #FFFFFF;
+    width: 100vmin;
+    height: max-content;
+    position: absolute;
+
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+
+    outline: none;
+    padding: 5vmin;
+}
+
+.ReactModal__Overlay  {
+    background-color: rgba(20,20,20,.8) !important;
+    backdrop-filter: blur(5px);
+}
+
+.back-button {
+    color: #2F74C0;
+}
+
+.back-button:hover {
+    cursor: pointer;
+}
+
+.lang-card {
+    border-radius: 5px;
+    font-family: monospace;
+    background-color: #00AA00;
+}
+
+.lang-card-modal {
+    border-radius: 5px;
+    font-family: monospace;
+    align-content: center;
+    justify-content: center;
+    display: flex;
+    margin: 2px;
+    width: max-content;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: #00AA00;
+}
+
+.kubernetes {
+    background-color: #326ce5;
+}
+
+.c\# {
+    background-color: #800080FF;
+}
+
+.html {
+    background-color: #e34c26;
+}
+
+.react {
+    background-color: #61DAFB;
+}
+
+.typescript {
+    background-color: #2F74C0;
+}
+
+.bootstrap {
+    background-color: #7952B3;
+}
+
+.nws {
+    background-color: #DB4437;
+}
+
+.docker {
+    background-color: #2496ED;
+}
+
+.dotnet {
+    background-color: #5C2D91;
+}
+
+.nosql {
+    background-color: #4EA94B;
+}
+
+.nginx {
+    background-color: #269539;
+}
+
+.react-native {
+    background-color: #61DBFB;
+}
+
+.cloudflare {
+    background-color: #F38020;
+}
+
+.html {
+    background-color: #E44D26;
+}
+
+.javascript {
+    background-color: #b9a617;
+}
+
+.css {
+    background-color: #1572B6;
+}
+
+.xenhtml {
+    background-color: #3A6A81;
+}
+
+.xeninfo {
+    background-color: #3E4E57;
+}
+
+.java {
+    background-color: #007396;
+}
+
+.apple-script {
+    background-color: #D9D9D9;
+}
+
+.spotify {
+    background-color: #1DB954;
+}
+
+.nodejs {
+    background-color: #339933;
+}
+
+.rancher {
+    background-color: #0075A8;
+}
+
+.azure-devops {
+    background-color: #0078D7;
+}
+
+.mongodb {
+    background-color: #47A248;
+}
+
+.mssql {
+    background-color: #CC2927;
+}

src/components/project-card/ProjectCard.tsx

@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+import "./ProjectCard.css";
+import ProjectCardProps from "../../types/ProjectCardProps";
+import Modal from "react-modal";
+
+export default function ProjectCard(props: {info: ProjectCardProps}) {
+    const [isModalOpen, setModalOpen] = useState(false);
+
+    return (
+        <div className={"project-card col-md-4 p-2"}>
+            <div className={"project-card-int pb-2"} style={{backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, .60) 50%, rgba(0, 0, 0, 0.75) 100%), url(\""+props.info.imageUrl+"\")"}} onClick={()=>{setModalOpen(true)}}>
+                <h3>{props.info.title}</h3>
+                <p>{props.info.shortDescription}</p>
+                <div>
+                    <div className={"row"} style={{fontFamily: "monospace"}}>
+                        {props.info.techUsed.slice(0, 3).map(s =>
+                            <div className={"col-md-4 col-12 mt-2"}>
+                                <div className={"lang-card "+s.toLowerCase().replace(" ", "")}>
+                                    <p  style={{fontSize: 16, margin: 0}}>{s}</p>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <Modal className={"project-card-modal"} isOpen={isModalOpen}>
+                <p className={"back-button"} onClick={()=>{setModalOpen(false)}}>Back</p>
+                <h1>{props.info.title}</h1>
+                <a href={props.info.link}>{props.info.linkTitle}</a>
+                <p>{props.info.description}</p>
+                <h3>All technologies used:</h3>
+                <div className={"d-flex flex-wrap mw-100"}>
+                    {props.info.techUsed.map(s =>
+                        <div className={""}>
+                            <div className={"lang-card-modal "+s.toLowerCase().replace(" ", "")}>
+                                <p  style={{fontSize: 16, margin: 0}}>{s}</p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </Modal>
+        </div>
+    );
+}