From f304c6ad2316a8d077a41160e81a14b42a63be3c Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Tue, 20 Aug 2024 14:07:25 -0700 Subject: [PATCH 01/10] Updated Footer Box Gap --- src/styles/component_styles/Footer.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/component_styles/Footer.css b/src/styles/component_styles/Footer.css index 5856025..d65d51c 100644 --- a/src/styles/component_styles/Footer.css +++ b/src/styles/component_styles/Footer.css @@ -54,7 +54,7 @@ @media (max-width: 900px) { .footer-block-container { flex-direction: column; - gap: 25px; + gap: 1px; } } From 66a6ef2c139dea466cbcc3d966ee41e5788d221f Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Tue, 20 Aug 2024 14:13:40 -0700 Subject: [PATCH 02/10] Added hover color effect --- src/components/Footer.js | 2 +- src/styles/component_styles/Footer.css | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Footer.js b/src/components/Footer.js index 4e7c54b..209e158 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -34,7 +34,7 @@ const Footer = () => { alt="Mention Icon" className="mention-icon" /> - gsolis5114@gmail.com + gsolis5114@gmail.com diff --git a/src/styles/component_styles/Footer.css b/src/styles/component_styles/Footer.css index d65d51c..0bc34bc 100644 --- a/src/styles/component_styles/Footer.css +++ b/src/styles/component_styles/Footer.css @@ -23,7 +23,12 @@ padding: 15px; } - .cert-link, .resume-link, .linkedin-link, .github-link, .instagram-link, .discord-link { + .cert-link, .resume-link, .linkedin-link, .github-link, .instagram-link, .discord-link, .email-text { + color: #ff5555; /* Change this to your desired color */ + text-decoration: none; /* Optional: remove underline */ +} + +.cert-link:hover, .resume-link:hover, .linkedin-link:hover, .github-link:hover, .instagram-link:hover, .discord-link:hover { color: #50fa7b; /* Change this to your desired color */ text-decoration: none; /* Optional: remove underline */ } From d83ee5ebf75ac0a74b047c404736c0cef6202ca9 Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Tue, 20 Aug 2024 14:19:40 -0700 Subject: [PATCH 03/10] Updated footer color --- src/styles/component_styles/Footer.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/component_styles/Footer.css b/src/styles/component_styles/Footer.css index 0bc34bc..3218070 100644 --- a/src/styles/component_styles/Footer.css +++ b/src/styles/component_styles/Footer.css @@ -24,12 +24,12 @@ } .cert-link, .resume-link, .linkedin-link, .github-link, .instagram-link, .discord-link, .email-text { - color: #ff5555; /* Change this to your desired color */ + color: #50fa7b; /* Change this to your desired color */ text-decoration: none; /* Optional: remove underline */ } .cert-link:hover, .resume-link:hover, .linkedin-link:hover, .github-link:hover, .instagram-link:hover, .discord-link:hover { - color: #50fa7b; /* Change this to your desired color */ + color: #ff5555; /* Change this to your desired color */ text-decoration: none; /* Optional: remove underline */ } From 6ce1b3b187c50f2779672af9eac1c72314e01e8f Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Tue, 20 Aug 2024 16:25:37 -0700 Subject: [PATCH 04/10] Increased nametag font size --- src/styles/component_styles/Body.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/component_styles/Body.css b/src/styles/component_styles/Body.css index e5dac17..fffbf4e 100644 --- a/src/styles/component_styles/Body.css +++ b/src/styles/component_styles/Body.css @@ -56,7 +56,7 @@ .name-tag-subtext { color: white; font-family: "Outfit", sans-serif; - font-size: 10px; + font-size: 11px; } /************* Post ****************/ From 8ebdcdb59e8e64e83def991874b5f9dda199b7a8 Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Wed, 21 Aug 2024 12:00:01 -0700 Subject: [PATCH 05/10] Refactored home page --- src/components/Body.js | 62 +------- src/components/BodyContent.js | 21 +++ src/components/ContactInfo.js | 28 ++++ src/components/Footer.js | 136 ++++++------------ src/components/FooterBlockComponent.js | 12 ++ src/components/PortraitContent.js | 32 +++++ src/components/PostContent.js | 34 +++++ src/components/SocialLink.js | 24 ++++ src/pages/About.js | 1 + src/styles/component_styles/Body.css | 122 +--------------- src/styles/component_styles/ContactInfo.css | 14 ++ src/styles/component_styles/Footer.css | 20 --- .../component_styles/PortraitContent.css | 45 ++++++ src/styles/component_styles/PostContent.css | 72 ++++++++++ src/styles/component_styles/SocialInfo.css | 21 +++ src/svg/CertIcon.js | 29 ++++ src/svg/MailIcon.js | 24 ++++ 17 files changed, 407 insertions(+), 290 deletions(-) create mode 100644 src/components/BodyContent.js create mode 100644 src/components/ContactInfo.js create mode 100644 src/components/FooterBlockComponent.js create mode 100644 src/components/PortraitContent.js create mode 100644 src/components/PostContent.js create mode 100644 src/components/SocialLink.js create mode 100644 src/styles/component_styles/ContactInfo.css create mode 100644 src/styles/component_styles/PortraitContent.css create mode 100644 src/styles/component_styles/PostContent.css create mode 100644 src/styles/component_styles/SocialInfo.css create mode 100644 src/svg/CertIcon.js create mode 100644 src/svg/MailIcon.js diff --git a/src/components/Body.js b/src/components/Body.js index bb0bb10..7a10cf1 100644 --- a/src/components/Body.js +++ b/src/components/Body.js @@ -1,64 +1,16 @@ import React from "react"; import "../styles/component_styles/Body.css"; -import BG_Portrait from "../svg/BG_Portrait"; -import BG_Square from "../svg/BG_Square"; -import BG_Square_2 from "../svg/BG_Square_2"; -import portrait from "../assets/body/Portrait.png"; -import { ReactComponent as Name_Tag } from "../assets/body/Name_Tag.svg"; -import { ReactComponent as BoxBody } from "../assets/body/BoxBody.svg"; -import { ReactComponent as BoxHeader } from "../assets/body/BoxHeader.svg"; +import BodyContent from "./BodyContent"; +import PostContent from "./PostContent"; +import PortraitContent from "./PortraitContent"; const Body = () => { return (
- - {/* eslint-disable-next-line react/jsx-pascal-case */} - - - - {/* eslint-disable-next-line react/jsx-pascal-case */} - - {"Gerardo - -
- -
-
Gerardo Solis
-
- Software Engineering | Offensive Security | Game Development -
-
-
-
-
-
-
Malware Analysis
- -
- -
-
-
-
Malware Development
- -
- -
-
-
-
Software Engineering
- -
- -
-
- - - + + + +
); }; diff --git a/src/components/BodyContent.js b/src/components/BodyContent.js new file mode 100644 index 0000000..458f2f1 --- /dev/null +++ b/src/components/BodyContent.js @@ -0,0 +1,21 @@ +import React from "react"; +import BG_Square from "../svg/BG_Square"; +import BG_Square_2 from "../svg/BG_Square_2"; +import "../styles/component_styles/Body.css"; + +const BodyContent = ({ children }) => { + return ( +
+
+ {/* eslint-disable-next-line react/jsx-pascal-case */} + +
+ {children} {/* This will render the content passed to BodyContent */} +
+ +
+
+ ); +}; + +export default BodyContent; diff --git a/src/components/ContactInfo.js b/src/components/ContactInfo.js new file mode 100644 index 0000000..f3c8ea4 --- /dev/null +++ b/src/components/ContactInfo.js @@ -0,0 +1,28 @@ +import React from "react"; +import "../styles/component_styles/ContactInfo.css"; + +const ContactInfo = ({ icon, text, href, isLink }) => { + return ( +
+ {`${text} + {isLink ? ( + + {text} + + ) : ( + {text} + )} +
+ ); +}; + +export default ContactInfo; diff --git a/src/components/Footer.js b/src/components/Footer.js index 209e158..851724d 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -1,110 +1,58 @@ import React from "react"; -import "../styles/component_styles/Footer.css"; -import FooterBlock from "../svg/FooterBlock"; +/* icons */ import Pdf from "../assets/docs/Gerardo-Solis-Resume.pdf"; import fileIcon from "../assets/footer/file.png"; -import mentionIcon from "../assets/footer/mention.png"; +import mailIcon from "../assets/footer/mention.png"; import linkedinIcon from "../assets/footer/linkedin.png"; import githubIcon from "../assets/footer/github.png"; import instagramIcon from "../assets/footer/instagram.png"; import discordIcon from "../assets/footer/discord.png"; +/* styles */ +import "../styles/component_styles/Footer.css"; + +/* components */ +import ContactInfo from "./ContactInfo"; +import FooterBlockComponent from "./FooterBlockComponent"; +import SocialLink from "./SocialLink"; const Footer = () => { return (
diff --git a/src/components/FooterBlockComponent.js b/src/components/FooterBlockComponent.js new file mode 100644 index 0000000..3dba350 --- /dev/null +++ b/src/components/FooterBlockComponent.js @@ -0,0 +1,12 @@ +import React from "react"; +import FooterBlock from "../svg/FooterBlock"; +const FooterBlockComponent = ({ children }) => { + return ( +
+
{children}
+ +
+ ); +}; + +export default FooterBlockComponent; diff --git a/src/components/PortraitContent.js b/src/components/PortraitContent.js new file mode 100644 index 0000000..6cc3bad --- /dev/null +++ b/src/components/PortraitContent.js @@ -0,0 +1,32 @@ +import React from "react"; +import BG_Portrait from "../svg/BG_Portrait"; +import portrait from "../assets/body/Portrait.png"; +import { ReactComponent as Name_Tag } from "../assets/body/Name_Tag.svg"; +import "../styles/component_styles/PortraitContent.css"; + +const PortraitContent = () => { + return ( +
+
+ {/* eslint-disable-next-line react/jsx-pascal-case */} + + {"Gerardo +
+
+ +
+
Gerardo Solis
+
+ Software Engineering | Offensive Security | Game Development +
+
+
+
+ ); +}; + +export default PortraitContent; diff --git a/src/components/PostContent.js b/src/components/PostContent.js new file mode 100644 index 0000000..e781155 --- /dev/null +++ b/src/components/PostContent.js @@ -0,0 +1,34 @@ +import React from "react"; +import { ReactComponent as BoxBody } from "../assets/body/BoxBody.svg"; +import { ReactComponent as BoxHeader } from "../assets/body/BoxHeader.svg"; +import "../styles/component_styles/PostContent.css"; + +const PostContent = () => { + return ( +
+
+
+
Malware Analysis
+ +
+ +
+
+
+
Malware Development
+ +
+ +
+
+
+
Software Engineering
+ +
+ +
+
+ ); +}; + +export default PostContent; diff --git a/src/components/SocialLink.js b/src/components/SocialLink.js new file mode 100644 index 0000000..2b5d7c2 --- /dev/null +++ b/src/components/SocialLink.js @@ -0,0 +1,24 @@ +import React from "react"; +import "../styles/component_styles/SocialInfo.css"; + +const SocialLink = ({ href, icon, altText, linkText }) => { + return ( + + ); +}; + +export default SocialLink; diff --git a/src/pages/About.js b/src/pages/About.js index e69de29..6542df5 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -0,0 +1 @@ +import React from "react"; diff --git a/src/styles/component_styles/Body.css b/src/styles/component_styles/Body.css index fffbf4e..d90168e 100644 --- a/src/styles/component_styles/Body.css +++ b/src/styles/component_styles/Body.css @@ -1,5 +1,3 @@ - - .bg-container { display: flex; position: relative; @@ -12,122 +10,4 @@ position: relative; justify-content: flex-end; z-index: 0; -} - -.portrait-container { - padding: 20px; - display: flex; - position: relative; - align-items: center; - justify-content: center; - transform: translate(0px, -150px); - z-index: 1; -} - -.portrait-img { - position: absolute; -} - -/************* Name Tag ****************/ - -.name-tag { - display: flex; - align-items: center; - justify-content: center; - position: relative; - top: -150px; -} - -.name-tag-content { - display: flex; - flex-direction: column; - position: absolute; - align-items: center; - text-align: center; - top: 10px; -} - -.name-tag-text { - color: white; - font-family: "Outfit", sans-serif; - font-size: 30px; -} - -.name-tag-subtext { - color: white; - font-family: "Outfit", sans-serif; - font-size: 11px; -} - -/************* Post ****************/ -.post-container { - display: flex; - position: relative; - align-items: center; - justify-content: center; - top: -85px; - gap: 50px; -} - -.post { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - z-index: 1; -} - -.post-header { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - z-index: 2; -} - -.post-title { - position: absolute; - font-family: "Outfit", sans-serif; - font-size: 20px; - color: white; -} - -@media (max-width: 900px) { - .body { - position: relative; - width: 100%; - height: 100%; - } - - .BG-Square { - display: flex; - height: 100%; - } - - .BG-Square-2 { - display: flex; - height: 100%; - } - - .post-container { - display: flex; - position: relative; - align-items: center; - flex-direction: column; - gap: 10px; - } - .post { - position: relative; - } - .post-header { - position: absolute; - flex-direction: column; - align-items: center; - gap: 210px; - top: 0; - } - .post-title { - position: absolute; - } -} +} \ No newline at end of file diff --git a/src/styles/component_styles/ContactInfo.css b/src/styles/component_styles/ContactInfo.css new file mode 100644 index 0000000..9a609de --- /dev/null +++ b/src/styles/component_styles/ContactInfo.css @@ -0,0 +1,14 @@ +.certifications-link, .resume-link { + color: #50fa7b; /* Change this to your desired color */ + text-decoration: none; /* Optional: remove underline */ +} + +.cert-link:hover, .resume-link:hover { + color: #ff5555; /* Change this to your desired color */ + text-decoration: none; /* Optional: remove underline */ +} + +.cert-icon, .resume-icon, .mention-icon { + width: 25px; + height: 25px; +} diff --git a/src/styles/component_styles/Footer.css b/src/styles/component_styles/Footer.css index 3218070..b54f634 100644 --- a/src/styles/component_styles/Footer.css +++ b/src/styles/component_styles/Footer.css @@ -23,27 +23,7 @@ padding: 15px; } - .cert-link, .resume-link, .linkedin-link, .github-link, .instagram-link, .discord-link, .email-text { - color: #50fa7b; /* Change this to your desired color */ - text-decoration: none; /* Optional: remove underline */ -} - -.cert-link:hover, .resume-link:hover, .linkedin-link:hover, .github-link:hover, .instagram-link:hover, .discord-link:hover { - color: #ff5555; /* Change this to your desired color */ - text-decoration: none; /* Optional: remove underline */ -} - -.horizontal-align { - display: flex; - align-items: center; - gap: 5px; -} -.cert-icon, .resume-icon, .mention-icon, .linkedin-icon, -.github-icon, .instagram-icon, .discord-icon { - width: 25px; - height: 25px; -} .footer-content { display: flex; diff --git a/src/styles/component_styles/PortraitContent.css b/src/styles/component_styles/PortraitContent.css new file mode 100644 index 0000000..a8a0b71 --- /dev/null +++ b/src/styles/component_styles/PortraitContent.css @@ -0,0 +1,45 @@ +/************* Portrait ****************/ +.portrait-container { + padding: 20px; + display: flex; + position: relative; + align-items: center; + justify-content: center; + transform: translate(0px, -150px); + z-index: 1; +} + +.portrait-img { + position: absolute; +} + +.name-tag { + display: flex; + align-items: center; + justify-content: center; + position: relative; + top: -150px; +} + +.name-tag-content { + display: flex; + flex-direction: column; + position: absolute; + align-items: center; + text-align: center; + top: 10px; +} + +/************* Name Tag ****************/ + +.name-tag-text { + color: white; + font-family: "Outfit", sans-serif; + font-size: 30px; +} + +.name-tag-subtext { + color: white; + font-family: "Outfit", sans-serif; + font-size: 11px; +} \ No newline at end of file diff --git a/src/styles/component_styles/PostContent.css b/src/styles/component_styles/PostContent.css new file mode 100644 index 0000000..da1f52a --- /dev/null +++ b/src/styles/component_styles/PostContent.css @@ -0,0 +1,72 @@ +/************* Post ****************/ +.post-container { + display: flex; + position: relative; + align-items: center; + justify-content: center; + top: -85px; + gap: 50px; +} + +.post { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 1; +} + +.post-header { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + z-index: 2; +} + +.post-title { + position: absolute; + font-family: "Outfit", sans-serif; + font-size: 20px; + color: white; +} + +@media (max-width: 900px) { + .body { + position: relative; + width: 100%; + height: 100%; + } + + .BG-Square { + display: flex; + height: 100%; + } + + .BG-Square-2 { + display: flex; + height: 100%; + } + + .post-container { + display: flex; + position: relative; + align-items: center; + flex-direction: column; + gap: 10px; + } + .post { + position: relative; + } + .post-header { + position: absolute; + flex-direction: column; + align-items: center; + gap: 210px; + top: 0; + } + .post-title { + position: absolute; + } +} \ No newline at end of file diff --git a/src/styles/component_styles/SocialInfo.css b/src/styles/component_styles/SocialInfo.css new file mode 100644 index 0000000..3993c36 --- /dev/null +++ b/src/styles/component_styles/SocialInfo.css @@ -0,0 +1,21 @@ +.horizontal-align { + display: flex; + align-items: center; + gap: 5px; +} + +.linkedin-icon, +.github-icon, .instagram-icon, .discord-icon { + width: 25px; + height: 25px; +} + + .linkedin-link, .github-link, .instagram-link, .discord-link, .email-text { + color: #50fa7b; /* Change this to your desired color */ + text-decoration: none; /* Optional: remove underline */ +} + + .linkedin-link:hover, .github-link:hover, .instagram-link:hover, .discord-link:hover { + color: #ff5555; /* Change this to your desired color */ + text-decoration: none; /* Optional: remove underline */ +} diff --git a/src/svg/CertIcon.js b/src/svg/CertIcon.js new file mode 100644 index 0000000..54452f0 --- /dev/null +++ b/src/svg/CertIcon.js @@ -0,0 +1,29 @@ +const CertIcon = () => { + return ( + + + + + + ); +}; + +export default CertIcon; diff --git a/src/svg/MailIcon.js b/src/svg/MailIcon.js new file mode 100644 index 0000000..bcb3a44 --- /dev/null +++ b/src/svg/MailIcon.js @@ -0,0 +1,24 @@ +const mailIcon = () => { + return ( + + + + + ); +}; + +export default mailIcon; From a324258b4b8921b2c57894ee317b2fa4b7cad483 Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Thu, 22 Aug 2024 07:41:41 -0700 Subject: [PATCH 06/10] Added route to about page --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.js | 11 +++++++++-- src/components/Navbar.js | 21 +++++++++++---------- src/pages/About.js | 15 +++++++++++++++ 5 files changed, 75 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4e915b4..d264a69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3320,6 +3321,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz", + "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -15000,6 +15009,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz", + "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==", + "dependencies": { + "@remix-run/router": "1.19.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz", + "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==", + "dependencies": { + "@remix-run/router": "1.19.1", + "react-router": "6.26.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index b5b917e..203e94e 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-router-dom": "^6.26.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.js b/src/App.js index 222e1eb..5857278 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,17 @@ -import './App.css'; +import "./App.css"; import Home from "./pages/Home"; +import About from "./pages/About"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return (
- + + + } /> + } /> + +
); } diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 9641960..7fad179 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -2,6 +2,7 @@ import React from "react"; import "../styles/component_styles/Navbar.css"; +import { Link } from "react-router-dom"; const Navbar = () => { return ( @@ -9,34 +10,34 @@ const Navbar = () => { - + G.S. - + ); }; diff --git a/src/pages/About.js b/src/pages/About.js index 6542df5..336e983 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -1 +1,16 @@ import React from "react"; +import BodyContent from "../components/BodyContent"; +import Navbar from "../components/Navbar"; +import Footer from "../components/Footer"; + +const About = () => { + return ( +
+ + +
+
+ ); +}; + +export default About; From b89455f27d8287fb3dfe5992ec9cdfcb1e3ed5aa Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Thu, 29 Aug 2024 11:08:52 -0700 Subject: [PATCH 07/10] Fixed footer issue --- REACTREADME.md | 70 ------------------- src/App.css | 17 ++++- src/App.js | 23 +++++-- src/App.test.js | 8 --- src/components/Body.js | 18 ----- src/components/BodyContent.js | 21 ------ src/components/Footer.js | 74 ++++++++++----------- src/index.css | 3 - src/index.js | 13 ++-- src/pages/About.js | 11 +-- src/pages/Home.js | 10 ++- src/styles/component_styles/BG-Square.css | 25 +++++++ src/styles/component_styles/Body.css | 13 ---- src/styles/component_styles/Footer.css | 15 +---- src/styles/component_styles/Navbar.css | 1 + src/styles/component_styles/PostContent.css | 18 +---- 16 files changed, 111 insertions(+), 229 deletions(-) delete mode 100644 REACTREADME.md delete mode 100644 src/App.test.js delete mode 100644 src/components/Body.js delete mode 100644 src/components/BodyContent.js delete mode 100644 src/index.css create mode 100644 src/styles/component_styles/BG-Square.css delete mode 100644 src/styles/component_styles/Body.css diff --git a/REACTREADME.md b/REACTREADME.md deleted file mode 100644 index 58beeac..0000000 --- a/REACTREADME.md +++ /dev/null @@ -1,70 +0,0 @@ -# Getting Started with Create React App - -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. - -The page will reload when you make changes.\ -You may also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) diff --git a/src/App.css b/src/App.css index dadda04..0b802af 100644 --- a/src/App.css +++ b/src/App.css @@ -1,9 +1,22 @@ html, body { + display: flex; + flex-direction: column; width: 100%; - height: 100vh; + height: 100%; margin: 0; padding: 0; background-color: #282A36; + overflow: hidden; +} + +.App { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.content { + flex: 1; } @font-face { @@ -18,4 +31,4 @@ html, body { src: url("/src/assets/fonts/OldeEnglish.ttf") format("truetype"); font-weight: normal; font-style: normal; -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 5857278..55ac214 100644 --- a/src/App.js +++ b/src/App.js @@ -2,16 +2,31 @@ import "./App.css"; import Home from "./pages/Home"; import About from "./pages/About"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Footer from "./components/Footer"; +import Navbar from "./components/Navbar"; +import BG_Square_2 from "./svg/BG_Square_2"; +import BG_Square from "./svg/BG_Square"; +import "./styles/component_styles/BG-Square.css"; function App() { return (
- - } /> - } /> - + +
+ +
+
+ + } /> + } /> + +
+
+ +
+
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/Body.js b/src/components/Body.js deleted file mode 100644 index 7a10cf1..0000000 --- a/src/components/Body.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import "../styles/component_styles/Body.css"; -import BodyContent from "./BodyContent"; -import PostContent from "./PostContent"; -import PortraitContent from "./PortraitContent"; - -const Body = () => { - return ( -
- - - - -
- ); -}; - -export default Body; diff --git a/src/components/BodyContent.js b/src/components/BodyContent.js deleted file mode 100644 index 458f2f1..0000000 --- a/src/components/BodyContent.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import BG_Square from "../svg/BG_Square"; -import BG_Square_2 from "../svg/BG_Square_2"; -import "../styles/component_styles/Body.css"; - -const BodyContent = ({ children }) => { - return ( -
-
- {/* eslint-disable-next-line react/jsx-pascal-case */} - -
- {children} {/* This will render the content passed to BodyContent */} -
- -
-
- ); -}; - -export default BodyContent; diff --git a/src/components/Footer.js b/src/components/Footer.js index 851724d..8c0598f 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -17,45 +17,41 @@ import SocialLink from "./SocialLink"; const Footer = () => { return ( -
-
-
- - - - - - - - - - - - - -
-
-
+
+ + + + + + + + + + + + + +
); }; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index bf667ca..0000000 --- a/src/index.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background-color: #282A36; -} \ No newline at end of file diff --git a/src/index.js b/src/index.js index d563c0f..4816fd5 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,13 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + , ); // If you want to start measuring performance in your app, pass a function diff --git a/src/pages/About.js b/src/pages/About.js index 336e983..d20e5a5 100644 --- a/src/pages/About.js +++ b/src/pages/About.js @@ -1,16 +1,7 @@ import React from "react"; -import BodyContent from "../components/BodyContent"; -import Navbar from "../components/Navbar"; -import Footer from "../components/Footer"; const About = () => { - return ( -
- - -
-
- ); + return
; }; export default About; diff --git a/src/pages/Home.js b/src/pages/Home.js index 0f5bf8e..82a27df 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -1,14 +1,12 @@ import React from "react"; -import Navbar from "../components/Navbar"; -import Body from "../components/Body"; -import Footer from "../components/Footer"; +import PortraitContent from "../components/PortraitContent"; +import PostContent from "../components/PostContent"; const Home = () => { return (
- - -
+ +
); }; diff --git a/src/styles/component_styles/BG-Square.css b/src/styles/component_styles/BG-Square.css new file mode 100644 index 0000000..e451b8c --- /dev/null +++ b/src/styles/component_styles/BG-Square.css @@ -0,0 +1,25 @@ +.bg-square-top { + display: flex; + position: relative; +} + +.bg-square-bottom { + display: flex; + position: absolute; + right: 0; + bottom: 0; + +} + + +@media (max-width: 900px) { + .BG-Square { + display: flex; + height: 100%; + } + + .BG-Square-2 { + display: flex; + height: 100%; + } +} \ No newline at end of file diff --git a/src/styles/component_styles/Body.css b/src/styles/component_styles/Body.css deleted file mode 100644 index d90168e..0000000 --- a/src/styles/component_styles/Body.css +++ /dev/null @@ -1,13 +0,0 @@ -.bg-container { - display: flex; - position: relative; - align-items: flex-end; - z-index: 0; -} - -.bg-container-2 { - display: flex; - position: relative; - justify-content: flex-end; - z-index: 0; -} \ No newline at end of file diff --git a/src/styles/component_styles/Footer.css b/src/styles/component_styles/Footer.css index b54f634..f339451 100644 --- a/src/styles/component_styles/Footer.css +++ b/src/styles/component_styles/Footer.css @@ -1,20 +1,13 @@ .footer-container { display: flex; - flex-direction: column; + position: fixed; + bottom: 0; justify-content: center; align-items: center; width: 100%; background-color: #44475A; } -.footer-block-container { - display: flex; - justify-content: center; - align-items: center; - gap: 100px; - width: 100%; -} - .footer-block { display: flex; position: relative; @@ -23,8 +16,6 @@ padding: 15px; } - - .footer-content { display: flex; position: absolute; @@ -37,7 +28,7 @@ } @media (max-width: 900px) { - .footer-block-container { + .footer-container { flex-direction: column; gap: 1px; } diff --git a/src/styles/component_styles/Navbar.css b/src/styles/component_styles/Navbar.css index 9c11f5e..865b90c 100644 --- a/src/styles/component_styles/Navbar.css +++ b/src/styles/component_styles/Navbar.css @@ -14,6 +14,7 @@ box-sizing:border-box; overflow: hidden; overflow-x: auto; + z-index: 1; } @media (max-width: 900px) { diff --git a/src/styles/component_styles/PostContent.css b/src/styles/component_styles/PostContent.css index da1f52a..7a68ea5 100644 --- a/src/styles/component_styles/PostContent.css +++ b/src/styles/component_styles/PostContent.css @@ -6,6 +6,7 @@ justify-content: center; top: -85px; gap: 50px; + z-index: 0; } .post { @@ -33,28 +34,13 @@ } @media (max-width: 900px) { - .body { - position: relative; - width: 100%; - height: 100%; - } - - .BG-Square { - display: flex; - height: 100%; - } - - .BG-Square-2 { - display: flex; - height: 100%; - } - .post-container { display: flex; position: relative; align-items: center; flex-direction: column; gap: 10px; + overflow: auto; } .post { position: relative; From e56fae2387c01291440cfb1f57f79fd08e25772f Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Thu, 29 Aug 2024 11:22:14 -0700 Subject: [PATCH 08/10] Fixed PostContent css --- src/styles/component_styles/BG-Square.css | 2 ++ src/styles/component_styles/PostContent.css | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/component_styles/BG-Square.css b/src/styles/component_styles/BG-Square.css index e451b8c..abd7b82 100644 --- a/src/styles/component_styles/BG-Square.css +++ b/src/styles/component_styles/BG-Square.css @@ -1,6 +1,7 @@ .bg-square-top { display: flex; position: relative; + z-index: -1; } .bg-square-bottom { @@ -16,6 +17,7 @@ .BG-Square { display: flex; height: 100%; + z-index: -1; } .BG-Square-2 { diff --git a/src/styles/component_styles/PostContent.css b/src/styles/component_styles/PostContent.css index 7a68ea5..c41ea52 100644 --- a/src/styles/component_styles/PostContent.css +++ b/src/styles/component_styles/PostContent.css @@ -6,7 +6,7 @@ justify-content: center; top: -85px; gap: 50px; - z-index: 0; + z-index: 1; } .post { From 010a2324b230d11af1b1584a083e7dfed2c17116 Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Thu, 29 Aug 2024 11:25:02 -0700 Subject: [PATCH 09/10] Fixed Footer css --- src/styles/component_styles/BG-Square.css | 2 +- src/styles/component_styles/Footer.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/component_styles/BG-Square.css b/src/styles/component_styles/BG-Square.css index abd7b82..742c084 100644 --- a/src/styles/component_styles/BG-Square.css +++ b/src/styles/component_styles/BG-Square.css @@ -1,7 +1,7 @@ .bg-square-top { display: flex; position: relative; - z-index: -1; + z-index: 0; } .bg-square-bottom { diff --git a/src/styles/component_styles/Footer.css b/src/styles/component_styles/Footer.css index f339451..8e385e9 100644 --- a/src/styles/component_styles/Footer.css +++ b/src/styles/component_styles/Footer.css @@ -6,6 +6,7 @@ align-items: center; width: 100%; background-color: #44475A; + z-index: 100; } .footer-block { From bafc5c98861d9eeac9395e4d498aac2d20f5a424 Mon Sep 17 00:00:00 2001 From: Gerardo Solis Date: Thu, 29 Aug 2024 13:10:44 -0700 Subject: [PATCH 10/10] Added CI/CD config --- .github/workflows/deploy.yml | 0 appsec.yml | 14 ++++++++++++++ install_dependencies.sh | 3 +++ start_server.sh | 2 ++ 4 files changed, 19 insertions(+) create mode 100644 .github/workflows/deploy.yml create mode 100644 appsec.yml create mode 100644 install_dependencies.sh create mode 100644 start_server.sh diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..e69de29 diff --git a/appsec.yml b/appsec.yml new file mode 100644 index 0000000..ac741a6 --- /dev/null +++ b/appsec.yml @@ -0,0 +1,14 @@ +version: 0.0 +os: linux +files: + - source: / + destination: /var/www/gsoulis.blog +hooks: + AfterInstall: + - location: scripts/install_dependencies.sh + timeout: 300 + runas: root + ApplicationStart: + - location: scripts/start_server.sh + timeout: 300 + runas: root \ No newline at end of file diff --git a/install_dependencies.sh b/install_dependencies.sh new file mode 100644 index 0000000..29c3a14 --- /dev/null +++ b/install_dependencies.sh @@ -0,0 +1,3 @@ +#!/bin/zsh +sudo apt-get update +sudo apt-get install -y nginx \ No newline at end of file diff --git a/start_server.sh b/start_server.sh new file mode 100644 index 0000000..3105239 --- /dev/null +++ b/start_server.sh @@ -0,0 +1,2 @@ +#!/bin/zsh +sudo systemctl restart nginx \ No newline at end of file