Merge pull request #1 from paulofph/feat/add-media

Feat/add media

src/App.js

@@ -8,6 +8,7 @@ import About from "./components/About/About";
 import Projects from "./components/Projects/Projects";
 import Footer from "./components/Footer";
 import Resume from "./components/Resume/ResumeNew";
+import Media from "./components/Media/Media";
 import {
   BrowserRouter as Router,
   Route,
@@ -39,9 +40,10 @@ function App() {
           <ScrollToTop />
           <Routes>
             <Route path="/" element={<Home />} />
-            <Route path="/project" element={<Projects />} />
+            <Route path="/portfolio" element={<Projects />} />
             <Route path="/about" element={<About />} />
             <Route path="/resume" element={<Resume />} />
+            <Route path="/media" element={<Media />} />
             <Route path="*" element={<Navigate to="/" />} />
           </Routes>
           <Footer />

src/components/Media/Media.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import Particle from "../Particle";
+import PodcastLeadershipt from "../../Assets/Media/PodcastLeadership.png";
+import MediaCard from "./MediaCard";
+
+function Media() {
+  return (
+    <Container fluid className="media-section">
+      <Particle />
+      <Container>
+        <h1 className="project-heading">
+          In the <strong className="highlighted-text">Media </strong>
+        </h1>
+        <p style={{ color: "white" }}>
+          These are some of the places where I've shared my insights and ideas.
+        </p>
+        <Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
+          <Col md={4} className="project-card">
+            <MediaCard
+              imgPath={PodcastLeadershipt}
+              isBlog={false}
+              title="Podcast: Team Leading in Product Engineering"
+              youtubeLink="https://www.youtube.com/watch?v=4G_3dCKBe5E&ab_channel=epilotTech"
+              spotifyLink="https://open.spotify.com/episode/7vE8eosRbUNZvigzZEWl1N?si=L1BTae4gRTaJhEsxUi0Ztw"
+            />
+          </Col>
+        </Row>
+      </Container>
+    </Container>
+  );
+}
+
+export default Media;

src/components/Media/MediaCard.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Card from "react-bootstrap/Card";
+
+import YoutubeButton from "./YoutubeButton/YoutubeButton";
+import SpotifyButton from "./SpotifyButton/SpotifyButton";
+
+function MediaCard(props) {
+  return (
+    <Card className="project-card-view">
+      <Card.Img variant="top" src={props.imgPath} alt="card-img" />
+      <Card.Body>
+        <Card.Title><b>{props.title}</b></Card.Title>
+      </Card.Body>
+      <Card.Footer>
+        <YoutubeButton href={props.youtubeLink}></YoutubeButton>
+        <SpotifyButton href={props.spotifyLink}></SpotifyButton>
+      </Card.Footer>
+    </Card>
+  );
+}
+export default MediaCard;

src/components/Media/SpotifyButton/SpotifyButton.css

@@ -0,0 +1,4 @@
+.btn-spotify {
+  background-color: #1DB954 !important;
+  color: white !important;
+}

src/components/Media/SpotifyButton/SpotifyButton.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import { FaSpotify } from "react-icons/fa";
+
+import "./SpotifyButton.css";
+
+
+function SpotifyButton(props) {
+  return (
+    <Button
+      variant="spotify"
+      href={props.href}
+      target="_blank"
+      style={{ marginLeft: "10px" }}
+    >
+      <FaSpotify /> &nbsp;
+      {"Spotify"}
+    </Button>
+  );
+}
+export default SpotifyButton;

src/components/Media/YoutubeButton/YoutubeButton.css

@@ -0,0 +1,4 @@
+.btn-youtube {
+  background-color: red !important;
+  color: white !important;
+}

src/components/Media/YoutubeButton/YoutubeButton.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import { FaYoutube } from "react-icons/fa";
+
+import "./YoutubeButton.css";
+
+function YoutubeButton(props) {
+  return (
+    <Button
+      variant="youtube"
+      href={props.href}
+      target="_blank"
+      style={{ marginLeft: "10px" }}
+    >
+      <FaYoutube /> &nbsp;
+      {"Youtube"}
+    </Button>
+  );
+}
+export default YoutubeButton;

src/components/Navbar.js

@@ -4,10 +4,8 @@ import Nav from "react-bootstrap/Nav";
 import Container from "react-bootstrap/Container";
 import logo from "../Assets/logo.png";
 import { Link } from "react-router-dom";
-import { ImBlog } from "react-icons/im";
 import {
   AiOutlineLaptop,
-  AiOutlineFundProjectionScreen,
   AiOutlineUser,
 } from "react-icons/ai";
 
@@ -63,13 +61,26 @@ function NavBar() {
             <Nav.Item>
               <Nav.Link
                 as={Link}
-                to="/project"
+                to="/portfolio"
                 onClick={() => updateExpanded(false)}
               >
                 <AiOutlineLaptop
                   style={{ marginBottom: "2px" }}
                 />{" "}
-                Projects
+                Portfolio
+              </Nav.Link>
+            </Nav.Item>
+
+            <Nav.Item>
+              <Nav.Link
+                as={Link}
+                to="/media"
+                onClick={() => updateExpanded(false)}
+              >
+                <AiOutlineLaptop
+                  style={{ marginBottom: "2px" }}
+                />{" "}
+                Media
               </Nav.Link>
             </Nav.Item>
 

src/components/Projects/ProjectCards.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Card from "react-bootstrap/Card";
+import ListGroup from 'react-bootstrap/ListGroup';
 import Button from "react-bootstrap/Button";
 import { CgWebsite } from "react-icons/cg";
 
@@ -8,11 +9,14 @@ function ProjectCards(props) {
     <Card className="project-card-view">
       <Card.Img variant="top" src={props.imgPath} alt="card-img" />
       <Card.Body>
-        <Card.Title>{props.title}</Card.Title>
-        <Card.Text style={{ textAlign: "justify" }}>
+        <Card.Title><b>{props.title}</b></Card.Title>
+        <Card.Text>
           {props.description}
         </Card.Text>
       </Card.Body>
+      <ListGroup>
+        <ListGroup.Item className="project-card-list-item"><b>Role:</b> {props.role}</ListGroup.Item>
+      </ListGroup>
       <Card.Footer>
         <Button
           variant="primary"

src/components/Projects/Projects.js

@@ -6,6 +6,7 @@ import specialClinic from "../../Assets/Projects/specialClinic.png";
 import peacock from "../../Assets/Projects/peacock.png";
 import talkdesk from "../../Assets/Projects/talkdesk.png";
 import dominos from "../../Assets/Projects/dominos.png";
+import epilot from "../../Assets/Projects/epilot.png";
 
 function Projects() {
   return (
@@ -19,13 +20,24 @@ function Projects() {
           Here are a few projects I've worked on recently.
         </p>
         <Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
+          <Col md={4} className="project-card">
+            <ProjectCard
+              imgPath={epilot}
+              isBlog={false}
+              title="Epilot"
+              description="SpecialClinic is an online clinical management software designed for clinics. This solution streamlines the management of clinical processes, payments, and billing, all within a single web platform."
+              link="https://www.epilot.cloud/en"
+              role="Product Engineer & Tech Lead"
+            />
+          </Col>
           <Col md={4} className="project-card">
             <ProjectCard
               imgPath={specialClinic}
               isBlog={false}
               title="Special Clinic"
               description="SpecialClinic is an online clinical management software designed for clinics. This solution streamlines the management of clinical processes, payments, and billing, all within a single web platform."
               link="https://www.specialclinic.pt/"
+              role="Product Engineer & Founder"
             />
           </Col>
           <Col md={4} className="project-card">
@@ -35,6 +47,7 @@ function Projects() {
               title="Peacock"
               description="Peacock is a premier streaming service offering a rich library of on-demand series, movies, and original content alongside live sports and news. It features a user-friendly interface, personalized recommendations, and diverse programming to cater to a wide audience."
               link="https://www.peacocktv.com/"
+              role="Software Engineer"
             />
           </Col>
           <Col md={4} className="project-card">
@@ -44,6 +57,7 @@ function Projects() {
               title="Talkdesk"
               description="Talkdesk is an innovative cloud contact center platform that empowers businesses to continuously improve customer satisfaction. It offers an intuitive interface, robust call handling features, and seamless integration with various business tools, making it an ideal solution for enhancing customer support and engagement."
               link="https://www.talkdesk.com/"
+              role="Software Engineer"
             />
           </Col>
           <Col md={4} className="project-card">
@@ -53,6 +67,7 @@ function Projects() {
               title="Dominos Pizza"
               description="The official website for Domino's Pizza in the UK serves as a digital hub for pizza lovers, offering a streamlined online ordering system, current deals, and a customizable menu to ensure a convenient and enjoyable customer experience."
               link="https://www.dominos.co.uk/"
+              role="Software Engineer"
             />
           </Col>
         </Row>

src/style.css

@@ -17,6 +17,11 @@ html {
   --theme-color-400: #0F1035;
   --theme-color-500: #010218;
   --imp-text-color: var(--theme-color-200);
+  height: 100%;
+}
+
+body {
+  height: 100%;
 }
 
 .highlighted-text {
@@ -267,6 +272,7 @@ button:focus {
   background-repeat: no-repeat;
   padding-bottom: 30px !important;
   padding-top: 30px !important;
+  height: 100vh;
 }
 
 .home-content {
@@ -452,6 +458,18 @@ button:focus {
 .blockquote-footer {
   color: #a588c0 !important;
 }
+
+/* --------- */
+/* Media */
+/* --------- */
+.media-section {
+  position: relative !important;
+  padding-top: 150px !important;
+  padding-bottom: 30px !important;
+  background-image: var(--section-background-color) !important;
+  height: 100vh;
+}
+
 /* --------- */
 /* Projects */
 /* --------- */
@@ -483,6 +501,12 @@ button:focus {
   box-shadow: 0 4px 4px 5px var(--theme-color-200) !important;
 }
 
+.project-card-list-item {
+  background-color: transparent !important;
+  color: white !important;
+  border: 0 !important;
+}
+
 .blog-card {
   padding-top: 50px !important;
   padding-bottom: 50px !important;