diff --git a/examples/portfolio/README.md b/examples/portfolio/README.md index 8e714f3005..b35d89d0b4 100644 --- a/examples/portfolio/README.md +++ b/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 diff --git a/examples/portfolio/public/assets/at-work.jpg b/examples/portfolio/public/assets/at-work.jpg new file mode 100644 index 0000000000..82c29fe56f Binary files /dev/null and b/examples/portfolio/public/assets/at-work.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-footer-dark-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-footer-dark-1440w.jpg new file mode 100644 index 0000000000..659ad75013 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-footer-dark-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-footer-dark-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-footer-dark-800w.jpg new file mode 100644 index 0000000000..2ec737c758 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-footer-dark-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-footer-light-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-footer-light-1440w.jpg new file mode 100644 index 0000000000..9a5af1a512 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-footer-light-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-footer-light-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-footer-light-800w.jpg new file mode 100644 index 0000000000..2652dff176 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-footer-light-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-main-dark-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-main-dark-1440w.jpg new file mode 100644 index 0000000000..704388734e Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-main-dark-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-main-dark-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-main-dark-800w.jpg new file mode 100644 index 0000000000..ccffe3c6f8 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-main-dark-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-main-dark.svg b/examples/portfolio/public/assets/backgrounds/bg-main-dark.svg new file mode 100644 index 0000000000..7c3d656f2e --- /dev/null +++ b/examples/portfolio/public/assets/backgrounds/bg-main-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/portfolio/public/assets/backgrounds/bg-main-light-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-main-light-1440w.jpg new file mode 100644 index 0000000000..915e7a6c95 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-main-light-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-main-light-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-main-light-800w.jpg new file mode 100644 index 0000000000..185eaadfaa Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-main-light-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-main-light.svg b/examples/portfolio/public/assets/backgrounds/bg-main-light.svg new file mode 100644 index 0000000000..19410d6ade --- /dev/null +++ b/examples/portfolio/public/assets/backgrounds/bg-main-light.svg @@ -0,0 +1 @@ + diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-1-dark-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-dark-1440w.jpg new file mode 100644 index 0000000000..f1471ce14a Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-dark-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-1-dark-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-dark-800w.jpg new file mode 100644 index 0000000000..c213ea05f2 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-dark-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-1-light-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-light-1440w.jpg new file mode 100644 index 0000000000..0aaad4af2d Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-light-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-1-light-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-light-800w.jpg new file mode 100644 index 0000000000..d8dab2b5f4 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-1-light-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-2-dark-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-dark-1440w.jpg new file mode 100644 index 0000000000..52991fa25b Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-dark-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-2-dark-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-dark-800w.jpg new file mode 100644 index 0000000000..3df6bef534 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-dark-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-2-light-1440w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-light-1440w.jpg new file mode 100644 index 0000000000..3154d1b5d8 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-light-1440w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/bg-subtle-2-light-800w.jpg b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-light-800w.jpg new file mode 100644 index 0000000000..1fa2d3a478 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/bg-subtle-2-light-800w.jpg differ diff --git a/examples/portfolio/public/assets/backgrounds/noise.png b/examples/portfolio/public/assets/backgrounds/noise.png new file mode 100644 index 0000000000..1e7976c1f1 Binary files /dev/null and b/examples/portfolio/public/assets/backgrounds/noise.png differ diff --git a/examples/portfolio/public/assets/mesh-gradient.jpg b/examples/portfolio/public/assets/mesh-gradient.jpg deleted file mode 100644 index 4ee5a663fa..0000000000 Binary files a/examples/portfolio/public/assets/mesh-gradient.jpg and /dev/null differ diff --git a/examples/portfolio/public/assets/portrait.jpg b/examples/portfolio/public/assets/portrait.jpg new file mode 100644 index 0000000000..fce4bd355b Binary files /dev/null and b/examples/portfolio/public/assets/portrait.jpg differ diff --git a/examples/portfolio/public/assets/stock-1.jpg b/examples/portfolio/public/assets/stock-1.jpg new file mode 100644 index 0000000000..5835b1464d Binary files /dev/null and b/examples/portfolio/public/assets/stock-1.jpg differ diff --git a/examples/portfolio/public/assets/stock-2.jpg b/examples/portfolio/public/assets/stock-2.jpg new file mode 100644 index 0000000000..0d49a725f3 Binary files /dev/null and b/examples/portfolio/public/assets/stock-2.jpg differ diff --git a/examples/portfolio/public/assets/stock-3.jpg b/examples/portfolio/public/assets/stock-3.jpg new file mode 100644 index 0000000000..b2bdff1b7f Binary files /dev/null and b/examples/portfolio/public/assets/stock-3.jpg differ diff --git a/examples/portfolio/public/assets/stock-4.jpg b/examples/portfolio/public/assets/stock-4.jpg new file mode 100644 index 0000000000..6942cc2c66 Binary files /dev/null and b/examples/portfolio/public/assets/stock-4.jpg differ diff --git a/examples/portfolio/src/components/CallToAction.astro b/examples/portfolio/src/components/CallToAction.astro new file mode 100644 index 0000000000..a1ca697505 --- /dev/null +++ b/examples/portfolio/src/components/CallToAction.astro @@ -0,0 +1,56 @@ +--- +interface Props { + href: string; +} + +const { href } = Astro.props; +--- + + + + diff --git a/examples/portfolio/src/components/ContactCTA.astro b/examples/portfolio/src/components/ContactCTA.astro new file mode 100644 index 0000000000..6986bd7406 --- /dev/null +++ b/examples/portfolio/src/components/ContactCTA.astro @@ -0,0 +1,46 @@ +--- +import CallToAction from './CallToAction.astro'; +import Icon from './Icon.astro'; +--- + + + + diff --git a/examples/portfolio/src/components/Footer.astro b/examples/portfolio/src/components/Footer.astro index f238d6b6f1..9d1878dada 100644 --- a/examples/portfolio/src/components/Footer.astro +++ b/examples/portfolio/src/components/Footer.astro @@ -1,25 +1,74 @@ --- +import Icon from './Icon.astro'; const currentYear = new Date().getFullYear(); --- diff --git a/examples/portfolio/src/components/Grid.astro b/examples/portfolio/src/components/Grid.astro new file mode 100644 index 0000000000..24a5ea79dc --- /dev/null +++ b/examples/portfolio/src/components/Grid.astro @@ -0,0 +1,65 @@ +--- +interface Props { + variant?: 'offset' | 'small'; +} + +const { variant } = Astro.props; +--- + + + + diff --git a/examples/portfolio/src/components/Hero.astro b/examples/portfolio/src/components/Hero.astro new file mode 100644 index 0000000000..21b5ed1bf2 --- /dev/null +++ b/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; +--- + +
+
+

{title}

+ {tagline &&

{tagline}

} +
+ +
+ + diff --git a/examples/portfolio/src/components/Icon.astro b/examples/portfolio/src/components/Icon.astro new file mode 100644 index 0000000000..661d6cccc7 --- /dev/null +++ b/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); +--- + + + + diff --git a/examples/portfolio/src/components/IconPaths.ts b/examples/portfolio/src/components/IconPaths.ts new file mode 100644 index 0000000000..0238c83587 --- /dev/null +++ b/examples/portfolio/src/components/IconPaths.ts @@ -0,0 +1,23 @@ +/** Icons adapted from https://phosphoricons.com/ */ +export const iconPaths = { + 'terminal-window': ``, + trophy: ``, + strategy: ``, + 'paper-plane-tilt': ``, + 'arrow-right': ``, + 'arrow-left': ``, + code: ``, + 'microphone-stage': ``, + 'pencil-line': ``, + 'rocket-launch': ``, + list: ``, + heart: ``, + 'moon-stars': ``, + sun: ``, + 'twitter-logo': ``, + 'codepen-logo': ``, + 'github-logo': ``, + 'twitch-logo': ``, + 'youtube-logo': ``, + 'dribbble-logo': ``, +}; diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro index d7757af2a4..93f1e7bdb2 100644 --- a/examples/portfolio/src/components/MainHead.astro +++ b/examples/portfolio/src/components/MainHead.astro @@ -1,5 +1,11 @@ --- import '../styles/global.css'; + +interface Props { + title?: string | undefined; + description?: string | undefined; +} + const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White', @@ -16,6 +22,27 @@ const { + + diff --git a/examples/portfolio/src/components/Nav.astro b/examples/portfolio/src/components/Nav.astro index ea75625714..81f97dcdb9 100644 --- a/examples/portfolio/src/components/Nav.astro +++ b/examples/portfolio/src/components/Nav.astro @@ -1,99 +1,324 @@ +--- +import Icon, { Props as IconProps } from './Icon.astro'; +import ThemeToggle from './ThemeToggle.astro'; + +/** Main menu items */ +const textLinks: { label: string; href: string }[] = [ + { label: 'Home', href: '/' }, + { label: 'Work', href: '/work/' }, + { label: 'About', href: '/about/' }, +]; + +/** Icon links to social media β€” edit these with links to your profiles! */ +const iconLinks: { label: string; href: string; icon: IconProps['icon'] }[] = [ + { label: 'Twitter', href: 'https://twitter.com/me', icon: 'twitter-logo' }, + { label: 'Twitch', href: 'https://twitch.tv/me', icon: 'twitch-logo' }, + { label: 'GitHub', href: 'https://github.com/me', icon: 'github-logo' }, + { label: 'CodePen', href: 'https://codepen.io/me', icon: 'codepen-logo' }, + { label: 'dribbble', href: 'https://dribbble.com/me', icon: 'dribbble-logo' }, + { label: 'YouTube', href: 'https://www.youtube.com/@me/', icon: 'youtube-logo' }, +]; +--- + + + diff --git a/examples/portfolio/src/components/Pill.astro b/examples/portfolio/src/components/Pill.astro new file mode 100644 index 0000000000..2c410faa0b --- /dev/null +++ b/examples/portfolio/src/components/Pill.astro @@ -0,0 +1,16 @@ +
+ + diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro index 4dafd0e6ad..dbeac403ea 100644 --- a/examples/portfolio/src/components/PortfolioPreview.astro +++ b/examples/portfolio/src/components/PortfolioPreview.astro @@ -1,144 +1,64 @@ --- -import type { MarkdownInstance } from 'astro'; -import type { Project } from '../types'; +import type { CollectionEntry } from 'astro:content'; interface Props { - project: MarkdownInstance; + project: CollectionEntry<'work'>; } -const { frontmatter, url } = Astro.props.project; +const { data, slug } = Astro.props.project; --- -
-
-

{frontmatter.title}

-
-
-

{frontmatter.description}

-
- Tagged: - { - frontmatter.tags.map((t) => ( -
- {t} -
- )) - } -
- - View - -
-
+ + {data.title} + {data.img_alt + diff --git a/examples/portfolio/src/components/Skills.astro b/examples/portfolio/src/components/Skills.astro new file mode 100644 index 0000000000..5df5bb0d3b --- /dev/null +++ b/examples/portfolio/src/components/Skills.astro @@ -0,0 +1,62 @@ +--- +import Icon from './Icon.astro'; +--- + +
+
+ +

Full Stack

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.

+
+
+ +

Industry Leader

+

Neque viverra justo nec ultrices dui. Est ultricies integer quis auctor elit.

+
+
+ +

Strategy-Minded

+

Urna porttitor rhoncus dolor purus non enim praesent ornare.

+
+
+ + diff --git a/examples/portfolio/src/components/ThemeToggle.astro b/examples/portfolio/src/components/ThemeToggle.astro new file mode 100644 index 0000000000..2884255104 --- /dev/null +++ b/examples/portfolio/src/components/ThemeToggle.astro @@ -0,0 +1,95 @@ +--- +import Icon from './Icon.astro'; +--- + + + + + + + + diff --git a/examples/portfolio/src/content/config.ts b/examples/portfolio/src/content/config.ts new file mode 100644 index 0000000000..049465c9f8 --- /dev/null +++ b/examples/portfolio/src/content/config.ts @@ -0,0 +1,14 @@ +import { defineCollection, z } from 'astro:content'; + +export const collections = { + work: defineCollection({ + schema: z.object({ + title: z.string(), + description: z.string(), + publishDate: z.coerce.date(), + tags: z.array(z.string()), + img: z.string(), + img_alt: z.string().optional(), + }), + }), +}; diff --git a/examples/portfolio/src/content/work/bloom-box.md b/examples/portfolio/src/content/work/bloom-box.md new file mode 100644 index 0000000000..d0e5371cf3 --- /dev/null +++ b/examples/portfolio/src/content/work/bloom-box.md @@ -0,0 +1,23 @@ +--- +title: Bloom Box +publishDate: 2019-12-01 00:00:00 +img: /assets/stock-2.jpg +img_alt: A bright pink sheet of paper used to wrap flowers curves in front of rich blue background +description: | + We paired with a cutting-edge music API and a team of horticulturalists + to build AI-generated playlists that maximize houseplant health. +tags: + - Dev + - Branding + - Backend +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere commodo venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non ligula vel metus efficitur hendrerit. In hac habitasse platea dictumst. Praesent et mauris ut mi dapibus semper. Curabitur tortor justo, efficitur sit amet pretium cursus, porta eget odio. Cras ac venenatis dolor. Donec laoreet posuere malesuada. Curabitur nec mi tempor, placerat leo sit amet, tincidunt est. Quisque pellentesque venenatis magna, eget tristique nibh pulvinar in. Vestibulum vitae volutpat arcu. Aenean ut malesuada odio, sit amet pellentesque odio. Suspendisse nunc elit, blandit nec hendrerit non, aliquet at magna. Donec id leo ut nulla sagittis sodales. + +Integer vitae nibh elit. Suspendisse eget urna eu neque bibendum pharetra. Sed interdum lectus sem, in pulvinar magna dignissim vel. Quisque maximus at urna nec laoreet. Suspendisse potenti. Vestibulum rhoncus sem ut mi pellentesque, in vestibulum erat blandit. Aliquam sodales dui ac maximus consectetur. Duis quis est vehicula, imperdiet nisl nec, fermentum erat. Duis tortor diam, pharetra eu euismod in, vehicula non eros. Curabitur facilisis dui at erat ultrices gravida. In at nunc ultricies, pulvinar mi vel, sagittis mauris. Praesent pharetra posuere purus ac imperdiet. Nulla facilisi. + +Sed pulvinar porttitor mi in ultricies. Etiam non dolor gravida eros pulvinar pellentesque et dictum ex. Proin eu ornare ligula, sed condimentum dui. Vivamus tincidunt tellus mi, sed semper ipsum pharetra a. Suspendisse sollicitudin at sapien nec volutpat. Etiam justo urna, laoreet ac lacus sed, ultricies facilisis dolor. Integer posuere, metus vel viverra gravida, risus elit ornare magna, id feugiat erat risus ullamcorper libero. Proin vitae diam auctor, laoreet lorem vitae, varius tellus. + +Mauris sed eros in ex maximus volutpat. Suspendisse potenti. Donec lacinia justo consectetur sagittis tempor. Proin ullamcorper nisi vitae auctor rhoncus. Sed tristique aliquam augue. Pellentesque vitae fringilla ligula. Nulla arcu elit, efficitur eu nunc malesuada, eleifend tincidunt orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mattis orci in bibendum ultricies. Quisque a dui erat. Phasellus et vulputate ipsum. Proin metus ex, lobortis nec ornare eget, bibendum ut sapien. Aliquam in dolor lobortis, aliquam tellus a, congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +Aenean pretium purus augue, ut bibendum erat convallis quis. Cras condimentum quis velit ac mollis. Suspendisse non purus fringilla, venenatis nisl porta, finibus odio. Curabitur aliquet metus faucibus libero interdum euismod. Morbi sed magna nisl. Morbi odio nibh, facilisis vel sapien eu, tempus tincidunt erat. Nullam erat velit, sagittis at purus quis, tristique scelerisque tortor. Pellentesque lacinia tortor id est aliquam viverra. Vestibulum et diam ac ipsum mollis fringilla. diff --git a/examples/portfolio/src/content/work/h20.md b/examples/portfolio/src/content/work/h20.md new file mode 100644 index 0000000000..521bbbe075 --- /dev/null +++ b/examples/portfolio/src/content/work/h20.md @@ -0,0 +1,22 @@ +--- +title: h2.0 +publishDate: 2019-10-02 00:00:00 +img: /assets/stock-4.jpg +img_alt: Soft pink and baby blue water ripples together in a subtle texture. +description: | + We developed brand positioning and design assets for the launch + of a new colored water product. +tags: + - Design + - Branding +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere commodo venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non ligula vel metus efficitur hendrerit. In hac habitasse platea dictumst. Praesent et mauris ut mi dapibus semper. Curabitur tortor justo, efficitur sit amet pretium cursus, porta eget odio. Cras ac venenatis dolor. Donec laoreet posuere malesuada. Curabitur nec mi tempor, placerat leo sit amet, tincidunt est. Quisque pellentesque venenatis magna, eget tristique nibh pulvinar in. Vestibulum vitae volutpat arcu. Aenean ut malesuada odio, sit amet pellentesque odio. Suspendisse nunc elit, blandit nec hendrerit non, aliquet at magna. Donec id leo ut nulla sagittis sodales. + +Integer vitae nibh elit. Suspendisse eget urna eu neque bibendum pharetra. Sed interdum lectus sem, in pulvinar magna dignissim vel. Quisque maximus at urna nec laoreet. Suspendisse potenti. Vestibulum rhoncus sem ut mi pellentesque, in vestibulum erat blandit. Aliquam sodales dui ac maximus consectetur. Duis quis est vehicula, imperdiet nisl nec, fermentum erat. Duis tortor diam, pharetra eu euismod in, vehicula non eros. Curabitur facilisis dui at erat ultrices gravida. In at nunc ultricies, pulvinar mi vel, sagittis mauris. Praesent pharetra posuere purus ac imperdiet. Nulla facilisi. + +Sed pulvinar porttitor mi in ultricies. Etiam non dolor gravida eros pulvinar pellentesque et dictum ex. Proin eu ornare ligula, sed condimentum dui. Vivamus tincidunt tellus mi, sed semper ipsum pharetra a. Suspendisse sollicitudin at sapien nec volutpat. Etiam justo urna, laoreet ac lacus sed, ultricies facilisis dolor. Integer posuere, metus vel viverra gravida, risus elit ornare magna, id feugiat erat risus ullamcorper libero. Proin vitae diam auctor, laoreet lorem vitae, varius tellus. + +Mauris sed eros in ex maximus volutpat. Suspendisse potenti. Donec lacinia justo consectetur sagittis tempor. Proin ullamcorper nisi vitae auctor rhoncus. Sed tristique aliquam augue. Pellentesque vitae fringilla ligula. Nulla arcu elit, efficitur eu nunc malesuada, eleifend tincidunt orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mattis orci in bibendum ultricies. Quisque a dui erat. Phasellus et vulputate ipsum. Proin metus ex, lobortis nec ornare eget, bibendum ut sapien. Aliquam in dolor lobortis, aliquam tellus a, congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +Aenean pretium purus augue, ut bibendum erat convallis quis. Cras condimentum quis velit ac mollis. Suspendisse non purus fringilla, venenatis nisl porta, finibus odio. Curabitur aliquet metus faucibus libero interdum euismod. Morbi sed magna nisl. Morbi odio nibh, facilisis vel sapien eu, tempus tincidunt erat. Nullam erat velit, sagittis at purus quis, tristique scelerisque tortor. Pellentesque lacinia tortor id est aliquam viverra. Vestibulum et diam ac ipsum mollis fringilla. diff --git a/examples/portfolio/src/content/work/markdown-mystery-tour.md b/examples/portfolio/src/content/work/markdown-mystery-tour.md new file mode 100644 index 0000000000..5fbc2cac50 --- /dev/null +++ b/examples/portfolio/src/content/work/markdown-mystery-tour.md @@ -0,0 +1,35 @@ +--- +title: Markdown Mystery Tour +publishDate: 2020-03-02 00:00:00 +img: /assets/stock-1.jpg +img_alt: Iridescent ripples of a bright blue and pink liquid +description: | + We designed a whodunnit-style game to introduce Markdown formatting. Suspense β€” suspicion β€” syntax! +tags: + - Design + - Dev + - User Testing +--- + +## Level-two heading + +> Tell me and I forget. Teach me and I remember. Involve me and I learn. + +Lorem ipsum dolor sit amet, Astro makes people happy. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl condimentum id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. + +Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis natoque penatibus. Cras fermentum odio eu feugiat pretium nibh. Proin nibh nisl condimentum id venenatis. Porta nibh venenatis cras sed felis eget velit. Id diam vel quam elementum pulvinar etiam non. + +### Level-three heading + +Ultrices tincidunt arcu non sodales neque sodales ut. Sed enim ut sem viverra aliquet eget sit amet. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Viverra accumsan in nisl nisi scelerisque eu ultrices. In massa tempor nec feugiat nisl pretium fusce. + +### Level-three heading + +Sed pulvinar porttitor mi in ultricies. Etiam non dolor gravida eros pulvinar pellentesque et dictum ex. Proin eu ornare ligula, sed condimentum dui. Vivamus tincidunt tellus mi, sed semper ipsum pharetra a. Suspendisse sollicitudin at sapien nec volutpat. Etiam justo urna, laoreet ac lacus sed, ultricies facilisis dolor. Integer posuere, metus vel viverra gravida, risus elit ornare magna, id feugiat erat risus ullamcorper libero. Proin vitae diam auctor, laoreet lorem vitae, varius tellus. + +Aenean pretium purus augue, ut bibendum erat convallis quis. Cras condimentum quis velit ac mollis. Suspendisse non purus fringilla, venenatis nisl porta, finibus odio. Curabitur aliquet metus faucibus libero interdum euismod. Morbi sed magna nisl. Morbi odio nibh, facilisis vel sapien eu, tempus tincidunt erat. Nullam erat velit, sagittis at purus quis, tristique scelerisque tortor. Pellentesque lacinia tortor id est aliquam viverra. Vestibulum et diam ac ipsum mollis fringilla. + +#### Level-four heading + +- We noted this +- And also this other point diff --git a/examples/portfolio/src/content/work/nested/duvet-genius.md b/examples/portfolio/src/content/work/nested/duvet-genius.md new file mode 100644 index 0000000000..e377ede695 --- /dev/null +++ b/examples/portfolio/src/content/work/nested/duvet-genius.md @@ -0,0 +1,22 @@ +--- +title: Duvet Genius +publishDate: 2020-03-04 00:00:00 +img: /assets/stock-3.jpg +img_alt: Pearls of silky soft white cotton, bubble up under vibrant lighting +description: | + We developed a virtual showcase for the softest bedding imaginable. +tags: + - Design + - Dev + - Branding +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere commodo venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam non ligula vel metus efficitur hendrerit. In hac habitasse platea dictumst. Praesent et mauris ut mi dapibus semper. Curabitur tortor justo, efficitur sit amet pretium cursus, porta eget odio. Cras ac venenatis dolor. Donec laoreet posuere malesuada. Curabitur nec mi tempor, placerat leo sit amet, tincidunt est. Quisque pellentesque venenatis magna, eget tristique nibh pulvinar in. Vestibulum vitae volutpat arcu. Aenean ut malesuada odio, sit amet pellentesque odio. Suspendisse nunc elit, blandit nec hendrerit non, aliquet at magna. Donec id leo ut nulla sagittis sodales. + +Integer vitae nibh elit. Suspendisse eget urna eu neque bibendum pharetra. Sed interdum lectus sem, in pulvinar magna dignissim vel. Quisque maximus at urna nec laoreet. Suspendisse potenti. Vestibulum rhoncus sem ut mi pellentesque, in vestibulum erat blandit. Aliquam sodales dui ac maximus consectetur. Duis quis est vehicula, imperdiet nisl nec, fermentum erat. Duis tortor diam, pharetra eu euismod in, vehicula non eros. Curabitur facilisis dui at erat ultrices gravida. In at nunc ultricies, pulvinar mi vel, sagittis mauris. Praesent pharetra posuere purus ac imperdiet. Nulla facilisi. + +Sed pulvinar porttitor mi in ultricies. Etiam non dolor gravida eros pulvinar pellentesque et dictum ex. Proin eu ornare ligula, sed condimentum dui. Vivamus tincidunt tellus mi, sed semper ipsum pharetra a. Suspendisse sollicitudin at sapien nec volutpat. Etiam justo urna, laoreet ac lacus sed, ultricies facilisis dolor. Integer posuere, metus vel viverra gravida, risus elit ornare magna, id feugiat erat risus ullamcorper libero. Proin vitae diam auctor, laoreet lorem vitae, varius tellus. + +Mauris sed eros in ex maximus volutpat. Suspendisse potenti. Donec lacinia justo consectetur sagittis tempor. Proin ullamcorper nisi vitae auctor rhoncus. Sed tristique aliquam augue. Pellentesque vitae fringilla ligula. Nulla arcu elit, efficitur eu nunc malesuada, eleifend tincidunt orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mattis orci in bibendum ultricies. Quisque a dui erat. Phasellus et vulputate ipsum. Proin metus ex, lobortis nec ornare eget, bibendum ut sapien. Aliquam in dolor lobortis, aliquam tellus a, congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +Aenean pretium purus augue, ut bibendum erat convallis quis. Cras condimentum quis velit ac mollis. Suspendisse non purus fringilla, venenatis nisl porta, finibus odio. Curabitur aliquet metus faucibus libero interdum euismod. Morbi sed magna nisl. Morbi odio nibh, facilisis vel sapien eu, tempus tincidunt erat. Nullam erat velit, sagittis at purus quis, tristique scelerisque tortor. Pellentesque lacinia tortor id est aliquam viverra. Vestibulum et diam ac ipsum mollis fringilla. diff --git a/examples/portfolio/src/env.d.ts b/examples/portfolio/src/env.d.ts index f964fe0cff..acef35f175 100644 --- a/examples/portfolio/src/env.d.ts +++ b/examples/portfolio/src/env.d.ts @@ -1 +1,2 @@ +/// /// diff --git a/examples/portfolio/src/layouts/BaseLayout.astro b/examples/portfolio/src/layouts/BaseLayout.astro new file mode 100644 index 0000000000..1c7881961e --- /dev/null +++ b/examples/portfolio/src/layouts/BaseLayout.astro @@ -0,0 +1,113 @@ +--- +// Learn about using Astro layouts: +// https://docs.astro.build/en/core-concepts/layouts/ + +// Component Imports +import MainHead from '../components/MainHead.astro'; +import Nav from '../components/Nav.astro'; +import Footer from '../components/Footer.astro'; + +interface Props { + title?: string | undefined; + description?: string | undefined; +} + +const { title, description } = Astro.props; +--- + + + + + + +
+
+ + + + + + diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro deleted file mode 100644 index c4025dc396..0000000000 --- a/examples/portfolio/src/layouts/project.astro +++ /dev/null @@ -1,107 +0,0 @@ ---- -import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer.astro'; -import Nav from '../components/Nav.astro'; -import type { Project } from '../types'; - -interface Props { - content: Project; -} - -const { content } = Astro.props; ---- - - - - - - - -