Merge pull request #2 from colmmurphyxyz/fix/mobile-card-layout

fix: refactor card view to fit on smaller displays

src/App.css

@@ -3,6 +3,7 @@
   --light-gray: #ADADAD;
   --light-text-color: #EEEEEE;
   --dark-text-color: #333333;
+  --button-background-color: rgb(25, 118, 210);
   font-size: 18px;
 }
 
@@ -27,7 +28,7 @@ p, li, a {
 }
 
 .content {
-  max-width: min(95%, 75rem);
+  max-width: min(95%, 100rem);
   background-color: var(--background-color);
   margin: 0 auto;
 }

src/components/ProjectsCardsList/ProjectCard/ProjectCard.module.css

@@ -0,0 +1,88 @@
+.projectCard {
+    display: grid;
+    grid-template-areas:
+    "gridImage gridTitle"
+    "gridImage gridDescription"
+    "gridImage gridPoints"
+    "gridImage gridActions";
+    min-width: 100%;
+}
+
+.columnsInverted {
+    grid-template-areas:
+    "gridTitle       gridImage "
+    "gridDescription gridImage "
+    "gridPoints      gridImage "
+    "gridActions     gridImage ";
+}
+
+@media only screen and (max-width: 1000px) {
+    .projectCard {
+        grid-template-areas:
+            "gridTitle"
+            "gridImage"
+            "gridDescription"
+            "gridPoints"
+            "gridActions"
+    }
+
+    .columnsInverted {
+        grid-template-areas:
+            "gridTitle"
+            "gridImage"
+            "gridDescription"
+            "gridPoints"
+            "gridActions"
+    }
+}
+
+.projectCard > img {
+    grid-area: gridImage;
+    max-width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+}
+
+.projectCard > h3 {
+    grid-area: gridTitle;
+    text-align: center;
+}
+
+.projectCard > p {
+    grid-area: gridDescription;
+    padding: 1em;
+}
+
+#cardDescription {
+    grid-area: gridPoints;
+    color: var(--dark-text-color);
+}
+
+#cardDescription > li {
+    padding: 0.5em 0;
+}
+
+#projectCardActions {
+    grid-area: gridActions;
+    list-style-type: none;
+    padding-left: 0;
+    padding-right: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+}
+
+.columnsInverted #projectCardActions {
+    justify-content: flex-start;
+}
+
+#projectCardActions > * {
+    padding: 0.5em;
+}
+
+@media only screen and (max-width: 600px) {
+    #projectCardActions > * {
+        width: 100%;
+    }
+}

src/components/ProjectsCardsList/ProjectCard/ProjectCard.tsx

@@ -0,0 +1,41 @@
+import { ProjectCardButton, ProjectCardButtonProps } from "../ProjectCardButton/ProjectCardButton";
+import styles from "./ProjectCard.module.css";
+
+export type ProjectCardProps = { 
+    imageUrl: string;
+    title: string;
+    description: string;
+    bulletPoints: string[];
+    actions: ProjectCardButtonProps[];
+    invertColumns?: boolean,
+}
+
+export const ProjectCard: React.FC<ProjectCardProps> = ({imageUrl, title, description, bulletPoints, actions, invertColumns}) => {
+    return (
+    <>
+        <div className={styles.projectCard + (invertColumns ? ' ' + styles.columnsInverted : '')}>
+            <img src={imageUrl} alt=""/>
+            <h3> {title} </h3>
+            <p> {description}</p>
+            <ul id={styles.cardDescription}>
+                {
+                    bulletPoints.map(point => 
+                        <li>
+                            {point}
+                        </li>
+                    )
+                }
+            </ul>
+            <ul id={styles.projectCardActions}>
+            {
+                actions.map(action =>
+                    <li>
+                        <ProjectCardButton imageUrl={action.imageUrl} title={action.title} destinationUrl={action.destinationUrl} />
+                    </li>
+                )
+            }
+            </ul>
+        </div>
+    </>
+    )
+}

src/components/ProjectsCardsList/ProjectCardButton/ProjectCardButton.module.css

@@ -0,0 +1,26 @@
+.projectCardButton {
+    background-color: var(--button-background-color);
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+    border-radius: 12px;
+}
+
+.projectCardButton > a {
+    height: 100%;
+    margin: 0.5em;
+    display: flex;
+    align-items: center;
+    text-decoration: none; /* Hide text underline */
+    text-transform: capitalize;
+    font-weight: 600; /* bold */
+}
+
+.projectCardButton img {
+    width: 1.3em;
+    height: 1.3em;
+    filter: invert(100%);
+}
+
+.projectCardButton > a > p {
+    color: var(--light-text-color);
+    padding: 1px 0.5em;
+}

src/components/ProjectsCardsList/ProjectCardButton/ProjectCardButton.tsx

@@ -0,0 +1,20 @@
+import styles from "./ProjectCardButton.module.css"
+
+export type ProjectCardButtonProps = {
+    imageUrl?: string;
+    title: string;
+    destinationUrl: string;
+}
+
+export const ProjectCardButton: React.FC<ProjectCardButtonProps> = ({imageUrl, title, destinationUrl}) => {
+    return (
+    <>
+        <div className={styles.projectCardButton}>
+            <a href={destinationUrl}>
+                <img src={imageUrl || ""} alt={`Icon for ${title} button`}/>
+                <p> {title} </p>
+            </a>
+        </div>
+    </>
+    )
+}

src/components/ProjectsCardsList/ProjectsCardsList.tsx

@@ -0,0 +1,102 @@
+import { ProjectCard, ProjectCardProps } from "./ProjectCard/ProjectCard";
+import styles from "./ProjectsCardsList.module.css"
+
+const ProjectsCardsList = (): JSX.Element => {
+    const cards: ProjectCardProps[] = [
+        {
+            imageUrl: "/img/sandsoforisis.png",
+            title: "Sands of Orisis",
+            description: "A top-down Real Time Strategy game developed in Godot 4 for a university group project",
+            bulletPoints: [
+                "Developed in eight weeks by a team of 4 students",
+                "Real-time multiplayer networking",
+                "Compatible with Windows, Linux and macOS systems",
+                "Built with an robust event-driven architecture to facilitate new features and network synchronisation",
+            ],
+            actions: [
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "Source Code",
+                    destinationUrl: "https://github.com",
+                },
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "Ben Shorten",
+                    destinationUrl: "https://github.com/benshorten72",
+                },
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "David Wilson",
+                    destinationUrl: "https://github.com/Szazlo",
+                },
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "Darragh Murphy",
+                    destinationUrl: "https://github.com/Durph21",
+                },
+            ]
+        },
+        {
+            imageUrl: "/img/react.svg",
+            title: "colmmurphy.xyz",
+            description: "My Personal Website, serving as the hub of my online presence",
+            bulletPoints: [
+                "Developed with React and TypeScript",
+                "Hosted on GitHub Pages",
+                "Continuous Integration via GitHub Actions",
+            ],
+            actions: [
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "Source Code",
+                    destinationUrl: "https://github.com/colmmurphyxyz/colmmurphyxyz.github.io",
+                },
+            ]
+        },
+        {
+            imageUrl: "/img/klaassify_screenshot.png",
+            title: "Klaassify",
+            description: "JavaFX desktop Application to visualise your music taste in a novel format",
+            bulletPoints: [
+                "Integrates with the Spotify API to aggregate your listening history and retrieve your favourite artists",
+                "Uses an ExpressJS server to communicate with Spotify without leaking API credentials",
+                "Represents your favourites as vertices of a graph, with similar artists connected by an edge",
+                "utilises a force simulation algorithm to render the graph to a 2D canvas",
+            ],
+            actions: [
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "Server",
+                    destinationUrl: "https://github.com/benshorten72/cs3500-team36-server",
+                },
+                {
+                    imageUrl: "/img/github.svg",
+                    title: "Client",
+                    destinationUrl: "https://github.com/colmmurphyxyz/cs3500-team36-client",
+                },
+            ]
+        }
+
+    ]
+    return (
+        <div id={styles.projectsList}>
+        {
+            cards.map((card, index) =>
+                <>
+                <ProjectCard
+                    imageUrl={card.imageUrl}
+                    title={card.title}
+                    description={card.description}
+                    bulletPoints={card.bulletPoints}
+                    actions={card.actions}
+                    invertColumns={index % 2 === 0}
+                />
+                <hr />
+                </>
+            )
+        }
+        </div>
+    )
+}
+
+export default ProjectsCardsList;

src/views/Home/Home.module.css

@@ -11,7 +11,10 @@ main {
     padding: 0;
 }
 
-.projectsGrid {
+/* .projectsGrid {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
     justify-content: center;
 }
 
@@ -23,10 +26,9 @@ main {
 
 .card {
     margin: 16px !important;
-    display: flex !important;
-    flex-direction: column !important;
-    justify-content: flex-start !important;
-    min-width: 450px;
+    /* display: flex !important;
+    flex-direction: row !important;
+    justify-content: flex-start !important; 
     max-width: 600px !important;
 }
 
@@ -36,4 +38,5 @@ main {
 
 .cardActions {
     margin-top: auto !important;
-}
+}
+    */

src/views/Home/Home.tsx

@@ -4,6 +4,7 @@ import styles from "./Home.module.css";
 import "./Home.module.css";
 import { Button, Card, CardActions, CardContent, CardMedia, Grid, List, ListItem, ListItemIcon, ListItemText, Typography } from "@mui/material";
 import GitHubIcon from '@mui/icons-material/GitHub';
+import ProjectsCardsList from "../../components/ProjectsCardsList/ProjectsCardsList";
 
 const Home = (): JSX.Element => {
     const quick_links: QuickLinkProps[] = [
@@ -45,9 +46,11 @@ const Home = (): JSX.Element => {
                 </div>
                 <section id={styles.portfolio}>
                     <h2 style={{ textAlign: "center" }}>Projects I've worked on</h2>
-                    {/* <hr /> */}
+                    <hr />
 
-                    <Grid container className={styles.projectsGrid}>
+                    <ProjectsCardsList />
+
+                    {/* <Grid container className={styles.projectsGrid}>
                         <Grid item component={Card} className={styles.card} key={1} xs>
                             <CardMedia image="./img/react.svg" title="React logo" className={styles.cardMedia} />
                             <CardContent>
@@ -148,7 +151,7 @@ const Home = (): JSX.Element => {
                                 </Button>
                             </CardActions>
                         </Grid>
-                    </Grid>
+                    </Grid> */}
                 </section>
             </main>
         </>