From 242b9100675cb441ebd10cf39ca821f41b739b94 Mon Sep 17 00:00:00 2001
From: ayan4m1 <andrew@bulletlogic.com>
Date: Sun, 19 Jan 2025 16:40:15 -0500
Subject: [PATCH] feat: rework index header layout and styling

---
 src/components/bodyCard.js         |  25 +++++++++++++++++++++++++
 src/pages/index.js                 |  29 ++++++++++++++++++-----------
 {src/images => static}/profile.jpg | Bin
 3 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/components/bodyCard.js
 rename {src/images => static}/profile.jpg (100%)

diff --git a/src/components/bodyCard.js b/src/components/bodyCard.js
new file mode 100644
index 0000000..8c6952e
--- /dev/null
+++ b/src/components/bodyCard.js
@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { Card } from 'react-bootstrap';
+
+import { useThemeContext } from 'hooks/useThemeContext';
+
+export default function BodyCard({ children, ...props }) {
+  const { darkMode } = useThemeContext();
+
+  const className = classNames(
+    props?.className,
+    `text-${darkMode ? 'light' : 'dark'}`
+  );
+
+  return (
+    <Card body {...props} className={className}>
+      {children}
+    </Card>
+  );
+}
+
+BodyCard.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
+};
diff --git a/src/pages/index.js b/src/pages/index.js
index 7b104dd..aa112c2 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -20,10 +20,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 
 import Layout from 'components/layout';
+import BodyCard from 'components/bodyCard';
 import FeaturedPost from 'components/featuredPost';
 
-import profilePic from 'images/profile.jpg';
-
 export default function IndexPage({ data }) {
   const {
     articles: { nodes: articles },
@@ -41,19 +40,26 @@ export default function IndexPage({ data }) {
   return (
     <Layout title="Home">
       <Container>
-        <Card body className="text-light index-header">
+        <BodyCard className="index-header">
           <Container fluid>
             <Row>
-              <Col xs={6} md={2} className="d-flex justify-content-center">
+              <Col
+                xs={12}
+                sm={6}
+                md={3}
+                className="d-flex justify-content-start"
+              >
                 <Image
-                  src={profilePic}
+                  src="/profile.jpg"
                   alt="My face"
                   style={{ maxHeight: 128 }}
-                  rounded
+                  thumbnail
                 />
               </Col>
               <Col
-                xs={6}
+                xs={12}
+                sm={6}
+                md={4}
                 className="d-flex flex-column justify-content-center ps-2"
               >
                 <Card.Title as="h1" className="m-0">
@@ -63,10 +69,11 @@ export default function IndexPage({ data }) {
               </Col>
               <Col
                 xs={12}
-                md={4}
-                className="mt-4 my-md-0 d-flex flex-column justify-content-center"
+                sm={12}
+                md={5}
+                className="mt-4 my-md-0 d-flex flex-column justify-content-center align-items-end"
               >
-                <ButtonGroup>
+                <ButtonGroup className="d-flex flex-column">
                   <Button
                     variant="success"
                     as="a"
@@ -92,7 +99,7 @@ export default function IndexPage({ data }) {
               </Col>
             </Row>
           </Container>
-        </Card>
+        </BodyCard>
         <h1 className="mt-4">Recent Articles</h1>
         <Row className="justify-content-center">
           <Col md={10}>
diff --git a/src/images/profile.jpg b/static/profile.jpg
similarity index 100%
rename from src/images/profile.jpg
rename to static/profile.jpg