About - Added Page Print Formatting

package.json

@@ -3,23 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^1.9.0",
-    "@tensorflow/tfjs": "^4.0.0",
+    "@reduxjs/toolkit": "^1.9.3",
+    "@tensorflow/tfjs": "^4.2.0",
     "@tensorflow/tfjs-converter": "^4.0.0",
-    "axios": "^1.1.3",
+    "axios": "^1.3.4",
     "history": "^5.3.0",
     "memoize": "^0.1.1",
     "react": "^18.2.0",
-    "react-bootstrap-icons": "^1.9.1",
+    "react-bootstrap-icons": "^1.10.2",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router": "^6.4.3",
-    "react-router-dom": "^6.4.3",
+    "react-router-dom": "^6.8.2",
     "react-scripts": "^5.0.1",
-    "redux": "^4.2.0",
+    "redux": "^4.2.1",
     "redux-thunk": "^2.4.2",
     "tfjs": "^0.6.0",
-    "web-vitals": "^3.0.4"
+    "web-vitals": "^3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/About.js

@@ -10,15 +10,42 @@ class About extends React.Component {
    * This component doesn't require any props to be passed down.
    * Using different components, about is a page that displays about information.
    */
+
+  printRef = null;
+
+  constructor(props) {
+    super(props);
+
+    this.printRef = React.createRef();
+  }
+
   componentDidMount () {
     document.title = "About";
   }
 
+  printDiv(event) {
+
+    let printContents = this.printRef.current.innerHTML;
+    let originalContents = document.body.innerHTML;
+
+    document.body.classList = ["Print", ...document.body.classList];
+    document.body.innerHTML = printContents;
+    window.print();
+
+    document.body.classList.remove("Print");
+    document.body.innerHTML = originalContents;
+  }
+
   render() {
     return (
-      <div className="About">
+      <div ref={this.printRef} className="About">
 
-        <Theater title="About" description="This page has information about me and about this site." extraClasses="h-50v" background="/img/sunset.webp"/>
+        <div className="printShow center">
+          <h1>Camerin Figueroa Portfolio</h1>
+          <div>Contact Me: <a href="mailto:cam@camscode.com">cam@camscode.com</a></div>
+        </div>
+
+        <Theater title="About" description="This page has information about me and about this site." extraClasses="h-50v printHide" background="/img/sunset.webp"/>
 
         <Card title="Build with React" image="/img/react.webp">
           This website is created with <a href="https://reactjs.org/">React</a>, a javascript library for creating user interfaces and webapps.
@@ -106,26 +133,28 @@ class About extends React.Component {
           </div>
 
           <div className="links">
-
             <a href="https://github.com/RaspberryProgramming" target="_blank" rel="noreferrer" className="link bg-white">
               <img src="/img/github.webp" alt="Github"/>
             </a>
 
             <a href="https://www.linkedin.com/in/camerin-figueroa-2662bb157/" target="_blank" rel="noreferrer" className="link bg-white">
-              <img src="/img/linkedin.webp" alt="LinkedIn"/>
+              <img className="printHide" src="/img/linkedin.webp" alt="LinkedIn"/>
             </a>
 
             <a href="https://www.hackerrank.com/figueroa0609" target="_blank" rel="noreferrer" className="link bg-hackerrank">
-              <img src="/img/hackerrank.webp" alt="Hacker Rank"/>
+              <img className="printHide" src="/img/hackerrank.webp" alt="Hacker Rank"/>
             </a>
+
             <a href="https://app.hackthebox.eu/profile/734741" target="_blank" rel="noreferrer" className="link bg-white">
-              <img src="/img/hackthebox.webp" alt="Hack The Box"/>
+              <img className="printHide" src="/img/hackthebox.webp" alt="Hack The Box"/>
             </a>
+
             <a href="https://www.udemy.com/user/camerin-figueroa/" target="_blank" rel="noreferrer" className="link bg-white">
-              <img src="/img/udemy.webp" alt="Udemy"/>
+              <img className="printHide" src="/img/udemy.webp" alt="Udemy"/>
             </a>
+
             <a href="https://leetcode.com/RaspberryProgramming/" target="_blank" rel="noreferrer" className="link bg-black">
-              <img src="/img/leetcode_logo.webp" alt="leet code"/>
+              <img className="printHide" src="/img/leetcode_logo.webp" alt="leet code"/>
             </a>
           </div>
 

src/components/css/About.css

@@ -1,3 +1,4 @@
+
 .About {
     background-color: #3F3F4A;
     color: #AA9AA0;
@@ -69,6 +70,60 @@
     background-color: rgb(14, 20, 25);
 }
 
+.printShow {
+    display:none;
+}
+
+@media print{
+    .printHide {
+        display:none;
+    }
+    
+    .printShow {
+        display:block;
+    }
+
+    * {
+        opacity: 100% !important;
+    }
+    
+    .About .center {
+        margin-left:auto;
+        margin-right:auto;
+    }
+
+    .About .social {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .About .social .title {
+        break-before: page;
+    }
+
+    .About .links {
+        flex-direction: column;
+        flex-wrap: nowrap;
+    }
+
+    .About .links .link img {
+        display:none !important;
+    }
+
+    .About .links .link::after{
+        content: attr(href);
+
+    }
+
+    .About .links .link {
+        background-color: initial !important;
+        border-radius: default;
+        height: auto;
+        padding: none;
+        margin: none;
+    }
+}
+
 @media only screen and (max-width: 600px) {
     .About .links .link img {
         width: 100%;

src/components/css/Card.css

@@ -69,6 +69,21 @@
     font-size: medium;
 }
 
+@media print {
+    
+    .card {
+        page-break-after: page;
+    }
+
+    .card img {
+        display:none !important;
+    }
+    
+    .card .content-box {
+        width:100%;
+    }
+}
+
 @media only screen and (max-width: 600px) {
 
     .card {

src/components/css/Navigation.css

@@ -53,6 +53,17 @@
     width: 24px;
 }
 
+@media print {
+    .Navigation .end {
+        background-color: transparent;
+    }
+    
+    .Navigation, .Navigation a, .Navigation .button {
+        border-bottom: 1px black solid;
+        border-radius: 0;
+    }
+}
+
 @media only screen and (max-width: 600px) {
     .Navigation {
         position:fixed;

src/components/subcomponents/Card.js

@@ -40,7 +40,7 @@ const Card = (props) => {
                     </div>
                 }
             </div>
-            <img className={props.image ? "show" : ""} src={props.image} alt={props.title}/>
+            <img className={props.image ? "show printHide" : ""} src={props.image} alt={props.title}/>
         </div>
     );    
 };