Implement redesign of portfolio example (#5765)

Co-authored-by: Yan Thomas <[email protected]>
Co-authored-by: Nate Moore <[email protected]>

examples/portfolio/README.md

@@ -9,7 +9,7 @@ npm create astro@latest -- --template portfolio
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 
-![portfolio](https://user-images.githubusercontent.com/4677417/186189473-03dda103-65d3-4220-8b60-180ccaee5939.png)
+![portfolio](https://user-images.githubusercontent.com/357379/210779178-a98f0fb7-6b1a-4068-894c-8e1403e26654.jpg)
 
 
 ## 🧞 Commands

examples/portfolio/src/components/CallToAction.astro

@@ -0,0 +1,56 @@
+---
+interface Props {
+	href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a href={href}><slot /></a>
+
+<style>
+	a {
+		position: relative;
+		display: flex;
+		place-content: center;
+		text-align: center;
+		padding: 0.56em 2em;
+		gap: 0.8em;
+		color: var(--accent-text-over);
+		text-decoration: none;
+		line-height: 1.1;
+		border-radius: 999rem;
+		overflow: hidden;
+		background: var(--gradient-accent-orange);
+		box-shadow: var(--shadow-md);
+		white-space: nowrap;
+	}
+
+	@media (min-width: 20em) {
+		a {
+			font-size: var(--text-lg);
+		}
+	}
+
+	/* Overlay for hover effects. */
+	a::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		transition: background-color var(--theme-transition);
+		mix-blend-mode: overlay;
+	}
+
+	a:focus::after,
+	a:hover::after {
+		background-color: hsla(var(--gray-999-basis), 0.3);
+	}
+
+	@media (min-width: 50em) {
+		a {
+			padding: 1.125rem 2.5rem;
+			font-size: var(--text-xl);
+		}
+	}
+</style>

examples/portfolio/src/components/ContactCTA.astro

@@ -0,0 +1,46 @@
+---
+import CallToAction from './CallToAction.astro';
+import Icon from './Icon.astro';
+---
+
+<aside>
+	<h2>Interested in working together?</h2>
+	<CallToAction href="mailto:[email protected]">
+		Send Me a Message
+		<Icon icon="paper-plane-tilt" size="1.2em" />
+	</CallToAction>
+</aside>
+
+<style>
+	aside {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 3rem;
+		border-top: 1px solid var(--gray-800);
+		border-bottom: 1px solid var(--gray-800);
+		padding: 5rem 1.5rem;
+		background-color: var(--gray-999_40);
+		box-shadow: var(--shadow-sm);
+	}
+
+	h2 {
+		font-size: var(--text-xl);
+		text-align: center;
+		max-width: 15ch;
+	}
+
+	@media (min-width: 50em) {
+		aside {
+			padding: 7.5rem;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+
+		h2 {
+			font-size: var(--text-3xl);
+			text-align: left;
+		}
+	}
+</style>

examples/portfolio/src/components/Footer.astro

@@ -1,25 +1,74 @@
 ---
+import Icon from './Icon.astro';
 const currentYear = new Date().getFullYear();
 ---
 
 <footer>
-	&copy; {currentYear} Jeanine White
-	<small class="byline">🚀 Built by Astro</small>
+	<div class="group">
+		<p>
+			Designed & Developed in Portland with <a href="https://astro.build/">Astro</a>
+			<Icon icon="rocket-launch" size="1.2em" />
+		</p>
+		<p>&copy; {currentYear} Jeanine White</p>
+	</div>
+	<p class="socials">
+		<a href="https://twitter.com/me"> Twitter</a>
+		<a href="https://github.com/me"> GitHub</a>
+		<a href="https://codepen.io/me"> CodePen</a>
+	</p>
 </footer>
 <style>
 	footer {
+		display: flex;
+		flex-direction: column;
+		gap: 3rem;
+		margin-top: auto;
+		padding: 3rem 2rem 3rem;
 		text-align: center;
-		padding-top: 8rem;
-		padding-right: 2rem;
-		padding-bottom: 4rem;
-		padding-left: 2rem;
+		color: var(--gray-400);
+		font-size: var(--text-sm);
 	}
 
-	.byline {
-		display: block;
-		margin-top: 1rem;
-		color: var(--t-subdue);
-		font-size: var(--f-d2);
-		text-transform: uppercase;
+	footer a {
+		color: var(--gray-400);
+		text-decoration: 1px solid underline transparent;
+		text-underline-offset: 0.25em;
+		transition: text-decoration-color var(--theme-transition);
+	}
+
+	footer a:hover,
+	footer a:focus {
+		text-decoration-color: currentColor;
+	}
+
+	.group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.socials {
+		display: flex;
+		justify-content: center;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	@media (min-width: 50em) {
+		footer {
+			flex-direction: row;
+			justify-content: space-between;
+			padding: 2.5rem 5rem;
+		}
+
+		.group {
+			flex-direction: row;
+			gap: 1rem;
+			flex-wrap: wrap;
+		}
+
+		.socials {
+			justify-content: flex-end;
+		}
 	}
 </style>

examples/portfolio/src/components/Grid.astro

@@ -0,0 +1,65 @@
+---
+interface Props {
+	variant?: 'offset' | 'small';
+}
+
+const { variant } = Astro.props;
+---
+
+<ul class:list={['grid', { offset: variant === 'offset', small: variant === 'small' }]}>
+	<slot />
+</ul>
+
+<style>
+	.grid {
+		display: grid;
+		grid-auto-rows: 1fr;
+		gap: 1rem;
+		list-style: none;
+		padding: 0;
+	}
+
+	.grid.small {
+		grid-template-columns: 1fr 1fr;
+		gap: 1.5rem;
+	}
+
+	/* If last row contains only one item, make it span both columns. */
+	.grid.small > :global(:last-child:nth-child(odd)) {
+		grid-column: 1 / 3;
+	}
+
+	@media (min-width: 50em) {
+		.grid {
+			grid-template-columns: 1fr 1fr;
+			gap: 4rem;
+		}
+
+		.grid.offset {
+			--row-offset: 7.5rem;
+			padding-bottom: var(--row-offset);
+		}
+
+		/* Shift first item in each row vertically to create staggered effect. */
+		.grid.offset > :global(:nth-child(odd)) {
+			transform: translateY(var(--row-offset));
+		}
+
+		/* If last row contains only one item, display it in the second column. */
+		.grid.offset > :global(:last-child:nth-child(odd)) {
+			grid-column: 2 / 3;
+			transform: none;
+		}
+
+		.grid.small {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			gap: 2rem;
+		}
+
+		.grid.small > :global(*) {
+			flex-basis: 20rem;
+		}
+	}
+</style>

examples/portfolio/src/components/Hero.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+	title: string;
+	tagline?: string;
+	align?: 'start' | 'center';
+}
+
+const { align = 'center', tagline, title } = Astro.props;
+---
+
+<header class:list={['hero stack gap-4', align]}>
+	<div class="stack gap-2">
+		<h1 class="title">{title}</h1>
+		{tagline && <p class="tagline">{tagline}</p>}
+	</div>
+	<slot />
+</header>
+
+<style>
+	.hero {
+		font-size: var(--text-lg);
+		text-align: center;
+	}
+
+	.title,
+	.tagline {
+		max-width: 37ch;
+		margin-inline: auto;
+	}
+
+	.title {
+		font-size: var(--text-3xl);
+		color: var(--gray-0);
+	}
+
+	@media (min-width: 50em) {
+		.hero {
+			font-size: var(--text-xl);
+		}
+
+		.start {
+			text-align: start;
+		}
+
+		.start .title,
+		.start .tagline {
+			margin-inline: unset;
+		}
+
+		.title {
+			font-size: var(--text-5xl);
+		}
+	}
+</style>

examples/portfolio/src/components/Icon.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import { iconPaths } from './IconPaths';
+
+export interface Props {
+	icon: keyof typeof iconPaths;
+	color?: string;
+	gradient?: boolean;
+	size?: string;
+}
+
+const { color = 'currentcolor', gradient, icon, size } = Astro.props;
+const iconPath = iconPaths[icon];
+
+const attrs: HTMLAttributes<'svg'> = {};
+if (size) attrs.style = { '--size': size };
+
+const gradientId = 'icon-gradient-' + Math.round(Math.random() * 10e12).toString(36);
+---
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="40"
+	height="40"
+	viewBox="0 0 256 256"
+	aria-hidden="true"
+	stroke={gradient ? `url(#${gradientId})` : color}
+	{...attrs}
+>
+	<g set:html={iconPath} />
+	{
+		gradient && (
+			<linearGradient
+				id={gradientId}
+				x1="23"
+				x2="235"
+				y1="43"
+				y2="202"
+				gradientUnits="userSpaceOnUse"
+			>
+				<stop stop-color="var(--gradient-stop-1)" />
+				<stop offset=".5" stop-color="var(--gradient-stop-2)" />
+				<stop offset="1" stop-color="var(--gradient-stop-3)" />
+			</linearGradient>
+		)
+	}
+</svg>
+
+<style>
+	svg {
+		vertical-align: middle;
+		width: var(--size, 1em);
+		height: var(--size, 1em);
+	}
+</style>