Update card to be responsive and link avatar

avonbied · Oct 16, 2023 · 1764f95 · 1764f95
1 parent cbb7884
commit 1764f95
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 29 deletions.
diff --git a/app/src/components/Card.astro b/app/src/components/Card.astro
@@ -8,23 +8,14 @@ export interface Props {
 const {
 	title, subtitle, image, isVertical = false
 } = Astro.props;
-
-const SIZES = {
-	xsmall: "16pt",
-	small: "24pt",
-	normal: "36pt",
-	large: "48pt",
-};
 ---
 
 <article class:list={[{ vertical: isVertical }]}>
-	<div class="image-box">
-		{image && <img src={image} alt="" />}
-	</div>
+	{image && <img src={image} alt="" />}
 	<div class="card-content">
 		<header class="card-header">
-			<h3 style={{fontSize: SIZES['normal']}}>{title ?? "Title Placeholder"}</h3>
-			{subtitle && <h4 style={{fontSize: SIZES['xsmall']}}>{subtitle}</h4>}
+			<h3>{title ?? "Title Placeholder"}</h3>
+			{subtitle && <h4>{subtitle}</h4>}
 		</header>
 		<div>
 			<slot />
@@ -33,24 +24,19 @@ const SIZES = {
 </article>
 
 <style lang="scss">
-$cardHeight: 450px;
+$imageWidth: 400px;
+$imageHeight: 400px;
 article {
 	display: flex;
-	flex-flow: row nowrap;
+	flex-flow: column nowrap;
 	padding: 0;
+	max-width: $imageWidth;
 	background: #fff;
 	border-radius: 8px;
 	overflow: hidden;
-	min-width: 50ch;
-	max-width: 100ch;
-	align-items: stretch;
-	.image-box {
-		display: flex;
-		align-items: center;
-		img {
-			max-height: $cardHeight;
-			max-width: $cardHeight;
-		}
+	img {
+		height: $imageHeight;
+		width: $imageWidth;
 	}
 	.card-content {
 		display: flex;
@@ -62,12 +48,14 @@ article {
 			display: flex;
 			flex-flow: column;
 			background-color: #dddddd;
-			padding: 16px 16px 4px;
-			flex: 1 1 100%;
+			padding: 16px 16px 6px;
+			line-height: 1.1;
 			justify-content: center;
+			h3 { font-size: 24pt; }
+			h4 { font-size: 16pt; }
 		}
 		div {
-			padding: 4px 16px 16px;
+			padding: 6px 16px 8px;
 			flex: 1 1 100%;
 		}
 	}
@@ -81,4 +69,18 @@ article {
 		}
 	}
 }
+@media only screen and (min-width: 60em) {
+	article {
+		flex-flow: row;
+		max-height: ($imageHeight * 1.25);
+		max-width: 110ch;
+		img {
+			width: ($imageWidth * 1.25);
+			height: ($imageHeight * 1.25);
+		}
+		.card-header {
+			h3 { font-size: 36pt; }
+		}
+	}
+}
 </style>
diff --git a/app/src/pages/index.astro b/app/src/pages/index.astro
@@ -7,15 +7,20 @@ import CTA from '@components/CTA.astro';
 import Icon from '@components/Icon.astro';
 
 const title = 'Home';
+
+const USER_AVATAR = await fetch('https://api.github.com/users/avonbied')
+	.then(response => response.json())
+	.then(json => json.avatar_url)
 ---
 
 <Layout title={title}>
 	<section style={{ paddingTop: '2rem' }}>
+	<!--
 		<Hero title="About"
 		tagline="Thanks for stopping by. Read below if you want to learn more about myself and my background.">
 		<img src="/assets/at-work.jpg" alt="" />
-	</Hero>
-		<Card title="Lex von Biedenfeld" subtitle="Sr. Cloud Architect" image="/images/test-avatar1.jpg">
+	</Hero> -->
+		<Card title="Lex von Biedenfeld" subtitle="Sr. Cloud Architect" image={USER_AVATAR}>
 			<p>Hi there! I'm a Houston-based consultant at Accenture and I have a passion for helping clients transform their businesses with the power of cloud computing.
 				Whether it's AWS, Azure, Google Cloud, or any other platform, I have the skills and experience to design, implement, and optimize cloud solutions that meet the needs of clients.</p><br/>
 			<p>I believe that cloud computing is not only a technological trend, but also a strategic advantage that can enhance security, reduce costs, and enable innovation.