chore: Add react-icons package and update resume.css for icon styling

app/components/Resume.jsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import ReactToPrint from "react-to-print";
 import "./resume.css";
 import me from '../public/data/me.json';
-
+import { FaLinkedin, FaGithub, FaEnvelope, FaPhoneAlt, FaHandPaper  } from 'react-icons/fa';
 
 class ComponentToPrint extends React.Component {
   render() {
@@ -14,14 +14,35 @@ class ComponentToPrint extends React.Component {
             <h1 className="h1-name">{me.name}</h1>
             <div className="info-row">
               <span>{me.title}.</span>
-              <span style={{ paddingRight: 28 }}>Phone: {me.contact.phone}</span>
-              <span>Web: {me.contact.website}</span>
+              <span style={{ paddingLeft: 190 }}>
+                <a className="icon-link" href={`tel:${me.contact.phone}`}>
+                  <FaPhoneAlt /> {me.contact.phone}
+                </a>
+                </span>
+              <span>
+                <a className="icon-link" href={`https://${me.contact.website}`} target="_blank" rel="noopener noreferrer">
+                  <FaHandPaper /> {me.contact.website}
+                </a>
+                </span>
             </div>
 
             <div className="info-row">
               <span>Currently based in {me.location}.</span>
-              <span>LinkedIn: {me.contact.linkedin}</span>
-              <span>Email: {me.contact.email}</span>
+              <span>
+                <a className="icon-link" href={`https://www.linkedin.com/in/${me.contact.linkedin}`} target="_blank" rel="noopener noreferrer">
+                  <FaLinkedin /> {me.contact.linkedin}
+                </a>
+              </span>
+              <span>
+                <a className="icon-link" href={`https://github.com/${me.contact.github}`} target="_blank" rel="noopener noreferrer">
+                  <FaGithub /> {me.contact.github}
+                </a>
+              </span>
+              <span>
+                <a className="icon-link" href={`mailto:${me.contact.email}`}>
+                  <FaEnvelope /> {me.contact.email}
+                </a>
+              </span>
             </div>
             <div className="newspaper">
               <img src='images/photo.jpg' alt="My Photo" />
@@ -60,7 +81,7 @@ class ComponentToPrint extends React.Component {
                 <ul>
                   {me.work_history.map((job, index) => (
                     <li key={index}>
-                      <h3><strong>{job.title}</strong>, <i>{job.company}</i>{job.website!==""?` (${job.website})`:""}, {job.location}, {job.period}</h3>
+                      <h3><strong>{job.title}</strong>, <i>{job.company}</i>{job.website !== "" ? ` (${job.website})` : ""}, {job.location}, {job.period}</h3>
                       <p>{job.description}</p>
                     </li>
                   ))}
@@ -93,9 +114,6 @@ class ComponentToPrint extends React.Component {
             </div>
           </div>
         </div>
-        {/* <div className="page">
-          <div className="subpage">Page 2/2</div>
-        </div> */}
       </div>
     );
   }
@@ -104,9 +122,13 @@ class ComponentToPrint extends React.Component {
 class Resume extends React.Component {
   render() {
     return (
-      <View style={{ flex: 1, alignItems: "center" }}>
+      <View style={{ flex: 1, alignItems: "center", marginVertical: 20 }}>
         <ReactToPrint
-          trigger={() => <button>Print this out!</button>}
+          trigger={() => (
+            <button className="button-print">
+              Print this out!
+            </button>
+          )}
           content={() => this.componentRef}
         />
         <ComponentToPrint ref={(el) => (this.componentRef = el)} />

app/components/resume.css

@@ -132,4 +132,39 @@ body {
   text-align-last: justify;
   /* word-spacing: 2px; */
   text-transform: uppercase;
+}
+
+.icon-link {
+  color: #0b6d00;
+  text-decoration: none;
+  display: inline-flex;
+}
+.icon-link svg {
+  margin-right: 5px;
+}
+
+
+.icon-link:hover {
+  color: #12b600;
+}
+
+.button-print {
+  display: inline-block;
+  padding: 10px 20px;
+  margin-top: 20px;
+  background-color: #0b6d00;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+  font-family: 'Libre Baskerville', serif;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+.button-print:hover {
+  background-color: #12b600;
+}
+
+.button-print:active {
+  background-color: #915500;
 }

app/package.json

@@ -25,6 +25,7 @@
     "expo-web-browser": "~12.8.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^5.2.1",
     "react-native": "0.73.6",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",

app/public/data/me.json

@@ -9,8 +9,9 @@
   "contact": {
     "phone": "+4552755971",
     "email": "[email protected]",
-    "website": "https://talaman.info",
-    "linkedin": "danieltala"
+    "website": "hello.talaman.info",
+    "linkedin": "danieltala",
+    "github": "talaman"
   },
   "personal_statement": "As a software and machine learning engineer with 15 years of experience, I specialize in MLOps and designing scalable solutions. With a passion for problem-solving, I'm dedicated to overcoming technical challenges and ensuring smooth production. As an adventurer with a global perspective, I've lived in eight countries and traveled to 36, gaining valuable insights and a unique appreciation for diverse cultures.",
   "skills_and_experience": "Experienced in ML Ops engineering, AI, software development, and project management, with a Bachelor's degree in Computer Science and Engineering, an MBA, and various certifications in Machine Learning, DevOps, and IoT. Fluent in English and Spanish with a basic understanding of Danish. Worked as an MLOps Engineer for TDC Net in Denmark and as an AI Specialist for Republica. Also served as a Senior Software Engineer for Kairos in Chile and a Principal Consultant in Software Factory for Talaman.",