diff --git a/src/assets/icons/earth.svg b/src/assets/icons/earth.svg new file mode 100644 index 0000000..f88bbae --- /dev/null +++ b/src/assets/icons/earth.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/extension.svg b/src/assets/icons/extension.svg new file mode 100644 index 0000000..6dd535a --- /dev/null +++ b/src/assets/icons/extension.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg new file mode 100644 index 0000000..3ac1554 --- /dev/null +++ b/src/assets/icons/github.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/icons/npm.svg b/src/assets/icons/npm.svg new file mode 100644 index 0000000..e489787 --- /dev/null +++ b/src/assets/icons/npm.svg @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/pwa.svg b/src/assets/icons/pwa.svg new file mode 100644 index 0000000..df75590 --- /dev/null +++ b/src/assets/icons/pwa.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Projects/Project.module.css b/src/components/Projects/Project.module.css index 907ea08..c8de273 100644 --- a/src/components/Projects/Project.module.css +++ b/src/components/Projects/Project.module.css @@ -43,12 +43,28 @@ .name { font-weight: 300; + display: flex; + align-items: center; + gap: var(--gap-sm); } .description { font: var(--font-sm); } +.techIcons { + position: absolute; + left: var(--gap-sm); + bottom: var(--gap-sm); + display: flex; + align-items: center; +} + +.techIcon { + padding: calc(var(--gap-sm) / 2); + display: block; +} + @media screen and (max-width: 1080px) { .Project { flex-direction: column-reverse; @@ -71,4 +87,8 @@ width: 100%; max-width: 100%; } + + .techIcons { + display: none; + } } \ No newline at end of file diff --git a/src/components/Projects/Project.tsx b/src/components/Projects/Project.tsx index 27e9627..d027fef 100644 --- a/src/components/Projects/Project.tsx +++ b/src/components/Projects/Project.tsx @@ -1,11 +1,20 @@ +import { For } from 'solid-js'; import { useI18n } from "@solid-primitives/i18n"; import styles from './Project.module.css'; import type { Project } from './projectList'; +import earthIcon from '../../assets/icons/earth.svg'; +import { Icon } from './iconList'; export default (props: { project: Project, odd: boolean }) => { const [t] = useI18n(); + function linkFor(icon: Icon) { + if (icon.git) return props.project.repo + if (icon.npm) return props.project.npm + return undefined + } + return (
{ -

+

{props.project.name}

+
{t(props.project.descriptionSlug)}
+ +
+ {(icon: Icon) => + + + + } +
) diff --git a/src/components/Projects/iconList.ts b/src/components/Projects/iconList.ts new file mode 100644 index 0000000..d610f09 --- /dev/null +++ b/src/components/Projects/iconList.ts @@ -0,0 +1,60 @@ +import npmIcon from '../../assets/icons/npm.svg'; +import extensionIcon from '../../assets/icons/extension.svg'; +import pwaIcon from '../../assets/icons/pwa.svg'; +import githubIcon from '../../assets/icons/github.svg'; + +export class Icon { + src: string; + offsets: { + x: number; + y: number; + } + scale: number; + + git: boolean; + npm: boolean; + + constructor(props: { + src: string; + offsets?: { + x?: number; + y?: number; + }, + scale?: number; + + git?: boolean; + npm?: boolean; + }) { + this.src = props.src + this.offsets = { + x: props.offsets?.x ?? 0, + y: props.offsets?.y ?? 0 + } + this.scale = props.scale ?? 1 + + this.git = !!props.git + this.npm = !!props.npm + } +} + +export const npm = new Icon({ + src: npmIcon, + offsets: { y: 3 }, + scale: .8, + npm: true +}) + +export const extension = new Icon({ + src: extensionIcon, +}) + +export const pwa = new Icon({ + src: pwaIcon, + scale: .8 +}) + +export const github = new Icon({ + src: githubIcon, + git: true +}) + diff --git a/src/components/Projects/projectList.ts b/src/components/Projects/projectList.ts index 47f6383..7476b90 100644 --- a/src/components/Projects/projectList.ts +++ b/src/components/Projects/projectList.ts @@ -7,21 +7,31 @@ import mockupPreview from '../../assets/projects/mockupPreview.png'; import vkmutePreview from '../../assets/projects/vkmutePreview.png'; import musanthropePreview from '../../assets/projects/musanthropePreview.png'; +import { + Icon, npm, extension, pwa, github +} from './iconList'; + export class Project { name: string; preview: string; link: string; + repo?: string; + npm?: string; descriptionSlug: string; previewStyle?: string; halfWidth?: boolean; + icons?: Icon[]; constructor(project: Project) { this.name = project.name this.preview = project.preview this.link = project.link + this.repo = project.repo + this.npm = project.npm this.descriptionSlug = project.descriptionSlug this.previewStyle = project.previewStyle this.halfWidth = project.halfWidth + this.icons = project.icons } } @@ -36,21 +46,28 @@ export default [ name: 'Worktime', preview: worktimePreview, link: 'https://anatolykopyl.github.io/worktime', - descriptionSlug: 'worktime_desc' + repo: 'https://github.com/anatolykopyl/worktime', + descriptionSlug: 'worktime_desc', + icons: [ pwa, github ] }), new Project({ name: 'VK Mute', preview: vkmutePreview, link: 'https://chrome.google.com/webstore/detail/vk-mute/mcnkfnjggkbenehgfelnnkklpkpjeibl', + repo: 'https://github.com/anatolykopyl/vk-mute', descriptionSlug: 'vkmute_desc', - halfWidth: true + halfWidth: true, + icons: [ extension, github ] }), new Project({ name: 'Vue 3D Mockup', preview: mockupPreview, link: 'https://anatolykopyl.github.io/vue-three-d-mockup/', + repo: 'https://github.com/anatolykopyl/vue-three-d-mockup', + npm: 'https://www.npmjs.com/package/vue-three-d-mockup', descriptionSlug: 'mockup_desc', halfWidth: true, + icons: [ npm, github ] // previewStyle: 'position: absolute; height: 50%;' }), new Project({