Initial commit
This commit is contained in:
65
src/routes/Projects/Project.svelte
Normal file
65
src/routes/Projects/Project.svelte
Normal file
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import {t} from "$lib/translations";
|
||||
import type {TProject} from "./projects";
|
||||
|
||||
export let project: TProject;
|
||||
|
||||
const visifyImage = (event: MouseEvent) => {
|
||||
(event.target as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative rounded-2xl py-4 flex flex-col">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<h3 class="text-xl">
|
||||
{$t(project.nameSlug)}
|
||||
</h3>
|
||||
<hr class="grow border-slate-800">
|
||||
</div>
|
||||
|
||||
<p class="text-slate-400 mb-4 text-sm">
|
||||
{@html $t(project.descriptionSlug)}
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="project__gallery grid gap-1 grid-flow-col mb-4 mt-auto md:rounded"
|
||||
>
|
||||
{#each project.images as image}
|
||||
<img
|
||||
class="rounded"
|
||||
alt={`${$t(project.nameSlug)} screenshot`}
|
||||
src={image}
|
||||
on:click={visifyImage}
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
{#each project.links as link}
|
||||
<a
|
||||
target="_blank"
|
||||
href={link.href}
|
||||
class="flex gap-1 items-center py-1 text-sm"
|
||||
>
|
||||
{#if link.icon}
|
||||
<svelte:component this={link.icon} />
|
||||
{/if}
|
||||
{$t(link.textSlug)}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.project__gallery {
|
||||
overflow: auto;
|
||||
grid-auto-columns: calc(50% - 16px);
|
||||
margin-inline: -8px;
|
||||
padding-inline: 8px;
|
||||
|
||||
@media screen(md) {
|
||||
margin-inline: 0;
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
src/routes/Projects/Projects.svelte
Normal file
19
src/routes/Projects/Projects.svelte
Normal file
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import {t} from "$lib/translations";
|
||||
import Project from "./Project.svelte";
|
||||
import {projects} from "./projects";
|
||||
</script>
|
||||
|
||||
<section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
|
||||
<h2 class="text-3xl mb-4 md:text-4xl">
|
||||
{$t('projects.h')}
|
||||
</h2>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each projects as project}
|
||||
<Project
|
||||
project={project}
|
||||
></Project>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
156
src/routes/Projects/projects.ts
Normal file
156
src/routes/Projects/projects.ts
Normal file
@@ -0,0 +1,156 @@
|
||||
import {SvelteComponent} from "svelte";
|
||||
|
||||
import MaterialSymbolsGlobe from '~icons/material-symbols/globe';
|
||||
import MaterialSymbolsExtension from '~icons/material-symbols/extension';
|
||||
import MdiGithub from '~icons/mdi/github';
|
||||
|
||||
import PureCityImg1 from "$lib/assets/projects/pure_city/1.png";
|
||||
import PureCityImg2 from "$lib/assets/projects/pure_city/2.png";
|
||||
import VkMuteImg1 from "$lib/assets/projects/vk_mute/1.png";
|
||||
import TpkArtelImg1 from "$lib/assets/projects/tpk_artel/1.png";
|
||||
import TpkArtelImg2 from "$lib/assets/projects/tpk_artel/2.png";
|
||||
import TpkArtelImg3 from "$lib/assets/projects/tpk_artel/3.png";
|
||||
import GamesImg1 from "$lib/assets/projects/games/1.png";
|
||||
import GamesImg2 from "$lib/assets/projects/games/2.png";
|
||||
import GamesImg3 from "$lib/assets/projects/games/3.png";
|
||||
import MusanthropeImg1 from "$lib/assets/projects/musanthrope/1.png";
|
||||
import MusanthropeImg2 from "$lib/assets/projects/musanthrope/2.png";
|
||||
import SleepyCareImg1 from "$lib/assets/projects/sleepy_care/1.png";
|
||||
import SleepyCareImg2 from "$lib/assets/projects/sleepy_care/2.png";
|
||||
import SleepyCareImg3 from "$lib/assets/projects/sleepy_care/3.png";
|
||||
import VkAdultImg1 from "$lib/assets/projects/vk_adult/1.png";
|
||||
|
||||
export type TProject = {
|
||||
nameSlug: string
|
||||
descriptionSlug: string
|
||||
images: string[]
|
||||
links: {
|
||||
href: string
|
||||
textSlug: string
|
||||
icon?: SvelteComponent
|
||||
}[]
|
||||
}
|
||||
|
||||
export const projects = [
|
||||
{
|
||||
nameSlug: 'projects.pure_city.name',
|
||||
descriptionSlug: 'projects.pure_city.description',
|
||||
images: [
|
||||
PureCityImg1,
|
||||
PureCityImg2
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://pure-city.ru',
|
||||
textSlug: 'projects.link_types.website',
|
||||
icon: MaterialSymbolsGlobe
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
nameSlug: 'projects.vk_mute.name',
|
||||
descriptionSlug: 'projects.vk_mute.description',
|
||||
images: [
|
||||
VkMuteImg1
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://chromewebstore.google.com/detail/vk-mute/mcnkfnjggkbenehgfelnnkklpkpjeibl',
|
||||
textSlug: 'projects.link_types.chrome',
|
||||
icon: MaterialSymbolsExtension
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/anatolykopyl/vk-mute',
|
||||
textSlug: 'projects.link_types.github',
|
||||
icon: MdiGithub
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
nameSlug: 'projects.tpk_artel.name',
|
||||
descriptionSlug: 'projects.tpk_artel.description',
|
||||
images: [
|
||||
TpkArtelImg1,
|
||||
TpkArtelImg2,
|
||||
TpkArtelImg3
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://tpk-artel.ru',
|
||||
textSlug: 'projects.link_types.website',
|
||||
icon: MaterialSymbolsGlobe
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
nameSlug: 'projects.games.name',
|
||||
descriptionSlug: 'projects.games.description',
|
||||
images: [
|
||||
GamesImg1,
|
||||
GamesImg2,
|
||||
GamesImg3
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://games.kopyl.dev',
|
||||
textSlug: 'projects.link_types.website',
|
||||
icon: MaterialSymbolsGlobe
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
nameSlug: 'projects.musanthrope.name',
|
||||
descriptionSlug: 'projects.musanthrope.description',
|
||||
images: [
|
||||
MusanthropeImg1,
|
||||
MusanthropeImg2
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://musanthrope.kopyl.dev',
|
||||
textSlug: 'projects.link_types.website',
|
||||
icon: MaterialSymbolsGlobe
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
nameSlug: 'projects.vk_adult.name',
|
||||
descriptionSlug: 'projects.vk_adult.description',
|
||||
images: [
|
||||
VkAdultImg1
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://chromewebstore.google.com/detail/vk-adult/laiidhgadnejimjkaobcecboppgbeppa',
|
||||
textSlug: 'projects.link_types.chrome',
|
||||
icon: MaterialSymbolsExtension
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/anatolykopyl/vk-adult',
|
||||
textSlug: 'projects.link_types.github',
|
||||
icon: MdiGithub
|
||||
},
|
||||
{
|
||||
href: 'https://vk-adult.kopyl.dev',
|
||||
textSlug: 'projects.link_types.website',
|
||||
icon: MaterialSymbolsGlobe
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
nameSlug: 'projects.sleepy_care.name',
|
||||
descriptionSlug: 'projects.sleepy_care.description',
|
||||
images: [
|
||||
SleepyCareImg1,
|
||||
SleepyCareImg2,
|
||||
SleepyCareImg3
|
||||
],
|
||||
links: [
|
||||
{
|
||||
href: 'https://sleepy.care',
|
||||
textSlug: 'projects.link_types.website',
|
||||
icon: MaterialSymbolsGlobe
|
||||
}
|
||||
]
|
||||
}
|
||||
] as TProject[]
|
||||
Reference in New Issue
Block a user