diff --git a/package-lock.json b/package-lock.json index c65c299..b2cdef8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,7 @@ "locales-ts": "1.0.0", "marked": "4.2.12", "move-file-cli": "3.0.0", + "photoswipe": "5.3.4", "postcss": "8.4.21", "prettier": "2.8.3", "prettier-plugin-astro": "0.8.0", @@ -6293,6 +6294,15 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, + "node_modules/photoswipe": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.3.4.tgz", + "integrity": "sha512-SN+RWHqxJvdwzXJsh8KrG+ajjPpdTX5HpKglEd0k9o6o5fW+QHPkW8//Bo11MB+NQwTa/hFw8BDv2EdxiDXjNw==", + "dev": true, + "engines": { + "node": ">= 0.12.0" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -13536,6 +13546,12 @@ "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==", "dev": true }, + "photoswipe": { + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.3.4.tgz", + "integrity": "sha512-SN+RWHqxJvdwzXJsh8KrG+ajjPpdTX5HpKglEd0k9o6o5fW+QHPkW8//Bo11MB+NQwTa/hFw8BDv2EdxiDXjNw==", + "dev": true + }, "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", diff --git a/package.json b/package.json index 2a818ff..5d8f25f 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "locales-ts": "1.0.0", "marked": "4.2.12", "move-file-cli": "3.0.0", + "photoswipe": "5.3.4", "postcss": "8.4.21", "prettier": "2.8.3", "prettier-plugin-astro": "0.8.0", diff --git a/src/assets/portfolio/project-1-screenshot-1.jpg b/src/assets/portfolio/project-1-screenshot-1.jpg new file mode 100644 index 0000000..29dee31 Binary files /dev/null and b/src/assets/portfolio/project-1-screenshot-1.jpg differ diff --git a/src/assets/portfolio/project-1-screenshot-2.jpg b/src/assets/portfolio/project-1-screenshot-2.jpg new file mode 100644 index 0000000..a9629bc Binary files /dev/null and b/src/assets/portfolio/project-1-screenshot-2.jpg differ diff --git a/src/assets/portfolio/project-1-screenshot-3.jpg b/src/assets/portfolio/project-1-screenshot-3.jpg new file mode 100644 index 0000000..95e69f1 Binary files /dev/null and b/src/assets/portfolio/project-1-screenshot-3.jpg differ diff --git a/src/data/helpers/links.ts b/src/data/helpers/links.ts index 53b4e61..77db0a4 100644 --- a/src/data/helpers/links.ts +++ b/src/data/helpers/links.ts @@ -155,7 +155,7 @@ export const demo = createLinkFactory({ export const mockups = createLinkFactory({ name: 'Mockups', - icon: 'fa6-solid:image', + icon: 'fa6-solid:paintbrush', }); export const repository = createLinkFactory({ diff --git a/src/data/sections/portfolio-section.data.ts b/src/data/sections/portfolio-section.data.ts index ab25217..2f589a6 100644 --- a/src/data/sections/portfolio-section.data.ts +++ b/src/data/sections/portfolio-section.data.ts @@ -24,6 +24,10 @@ const portfolioSectionData = { slug: 'projects', icon: 'fa6-solid:rocket', visible: true, + screenshots: { + title: 'Screenshots', + icon: 'fa6-solid:images', + }, }, projects: [ { @@ -40,6 +44,11 @@ const portfolioSectionData = { { label: 'Demo', value: 'https://golden-bulls-d73jd7.netlify.app', url: '#' }, { label: 'Repository', value: 'https://github.com/mark-freeman/golden-bulls', url: '#' }, ], + screenshots: [ + { src: import('@/assets/portfolio/project-1-screenshot-1.jpg'), alt: 'First screenshot' }, + { src: import('@/assets/portfolio/project-1-screenshot-2.jpg'), alt: 'Second screenshot' }, + { src: import('@/assets/portfolio/project-1-screenshot-3.jpg'), alt: 'Third screenshot' }, + ], description: 'In tristique vulputate augue vel egestas. Quisque ac imperdiet tortor, at lacinia ex. Duis vel ex hendrerit, commodo odio sed, aliquam enim. Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi. Nunc malesuada leo et est iaculis facilisis.', tagsList: { diff --git a/src/types/sections/portfolio-section.types.ts b/src/types/sections/portfolio-section.types.ts index 5722ee5..f917d66 100644 --- a/src/types/sections/portfolio-section.types.ts +++ b/src/types/sections/portfolio-section.types.ts @@ -1,4 +1,16 @@ -import type { DateRange, Photo, LabelledValue, LinkButton, Section, TagsList } from '../shared'; +import type { DateRange, Photo, LabelledValue, LinkButton, Section, TagsList, IconName } from '../shared'; + +interface Screenshot { + /** + * [WEB] Source of the screenshot. + */ + src: Photo; + + /** + * [WEB] Alt text for the screenshot. + */ + alt: string; +} export interface Project { /** @@ -39,6 +51,11 @@ export interface Project { */ description: string; + /** + * [WEB] Screenshots of the project. + */ + screenshots?: Screenshot[]; + /** * Any information that you want to highlight. * We recommend to describe the technologies used in the project. @@ -56,4 +73,21 @@ export interface PortfolioSection extends Section { * List of your projects in a chronological order. Start with the most recent one. */ projects: Project[]; + + config: Section['config'] & { + /** + * [WEB] Configuration of the button that displays project's screenshots. + */ + screenshots?: { + /** + * [WEB] Icon displayed within the button. + */ + icon?: IconName; + + /** + * [WEB] Title displayed when hovering the button. + */ + title?: string; + }; + }; } diff --git a/src/web/components/link-button.astro b/src/web/components/link-button.astro index 8c5d99a..a193e87 100644 --- a/src/web/components/link-button.astro +++ b/src/web/components/link-button.astro @@ -2,23 +2,29 @@ import type { LinkButton } from '@/types/shared'; import Icon from './icon.astro'; -export interface Props extends LinkButton {} +export interface Props extends Omit, Omit { + url?: LinkButton['url']; + as?: 'a' | 'button'; +} -const { name, icon, url } = Astro.props; +const { name, icon, url, as, ...props } = Astro.props; const classes = /* tw */ { main: 'flex items-center justify-center w-7 h-7 rounded text-gray-400 bg-gray-100 dark:bg-gray-600 dark:text-gray-200', active: 'active:translate-y-px', focus: 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500', }; + +const Element = as || 'a'; --- - - + diff --git a/src/web/sections/portfolio/portfolio-section.web.astro b/src/web/sections/portfolio/portfolio-section.web.astro index 063ce8c..7e56cb3 100644 --- a/src/web/sections/portfolio/portfolio-section.web.astro +++ b/src/web/sections/portfolio/portfolio-section.web.astro @@ -12,6 +12,6 @@ const { config, projects } = Astro.props; - {projects.flatMap((project) => [, ])} + {projects.flatMap((project) => [, ])} diff --git a/src/web/sections/portfolio/project.astro b/src/web/sections/portfolio/project.astro index 9621f90..d55527f 100644 --- a/src/web/sections/portfolio/project.astro +++ b/src/web/sections/portfolio/project.astro @@ -1,5 +1,6 @@ --- -import type { Project } from '@/types/sections/portfolio-section.types'; +import { nanoid } from 'nanoid'; +import type { PortfolioSection, Project } from '@/types/sections/portfolio-section.types'; import Description from '@/web/components/description.astro'; import LabelledValue from '@/web/components/labelled-value.astro'; import LinkButton from '@/web/components/link-button.astro'; @@ -8,11 +9,18 @@ import TagsList from '@/web/components/tags-list.astro'; import Timestamp from '@/web/components/timestamp.astro'; import Typography from '@/web/components/typography.astro'; -export interface Props extends Project {} +export interface Props extends Project { + screenshotsConfig?: PortfolioSection['config']['screenshots']; +} -const { dates, description, details, image, links, name, tagsList } = Astro.props; +const { dates, description, details, image, links, name, tagsList, screenshots, screenshotsConfig } = Astro.props; const alt = `${name} project thumbnail`; + +const galleryId = nanoid(8); +const hasScreenshots = screenshots?.length && screenshots.length > 0; +const screenshotsIcon = screenshotsConfig?.icon || 'fa6-solid:image'; +const screenshotsTooltip = screenshotsConfig?.title || 'Screenshots'; ---
@@ -38,6 +46,11 @@ const alt = `${name} project thumbnail`;
{links.map((link) => )} + { + hasScreenshots && ( + + ) + }
@@ -49,4 +62,39 @@ const alt = `${name} project thumbnail`; + + + diff --git a/src/web/sections/testimonials/testimonial.astro b/src/web/sections/testimonials/testimonial.astro index eb4599e..19a9744 100644 --- a/src/web/sections/testimonials/testimonial.astro +++ b/src/web/sections/testimonials/testimonial.astro @@ -13,7 +13,7 @@ const { author, content, image, links, relation } = Astro.props;
- +
{author} {relation}