mirror of
https://github.com/muerwre/muerwre.github.io.git
synced 2025-04-24 18:36:41 +07:00
added whole content
This commit is contained in:
Fedor Katurov
parent
1b5df685cb
commit
8b25e0631a
70 changed files with 5962 additions and 19 deletions
44
components/bio/BioHeading.vue
Normal file
44
components/bio/BioHeading.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<section :class="$style.grid">
|
||||
<div>
|
||||
<img src="~/assets/svg/howdy.svg" />
|
||||
</div>
|
||||
|
||||
<div :class="$style.text">
|
||||
<h1>Howdy!</h1>
|
||||
|
||||
<p>
|
||||
My name is <b>Fedor Katurov</b>, I'm a fullstack developer from Siberia.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I develop frontend applications with <b>React</b>, <b>Vue</b> and
|
||||
numerous other frameworks for the most of my time, but I'm also capable
|
||||
of doing <b>Typescript</b> and <b>Golang</b> backend.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I've started coding more than 15 years ago as a hobby and still love
|
||||
doing that on my work and free time.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-column-gap: 40px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
b {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
components/bio/BioProjects.vue
Normal file
20
components/bio/BioProjects.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<section :class="$style.projects">
|
||||
<h2>My Projects</h2>
|
||||
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat natus
|
||||
perspiciatis ad voluptatum nisi saepe, molestiae autem dolores est modi
|
||||
quod inventore similique omnis asperiores. Qui beatae magnam ab
|
||||
consequatur.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.projects {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
30
components/bio/BioSkills.vue
Normal file
30
components/bio/BioSkills.vue
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Skills</h1>
|
||||
|
||||
<div :class="$style.list">
|
||||
<SkillsCard
|
||||
:title="skill.title"
|
||||
:level="skill.level"
|
||||
:description="skill.description ?? ''"
|
||||
:key="skill.title"
|
||||
v-for="skill in skills"
|
||||
>
|
||||
<img :src="skill.icon" width="48" height="48" />
|
||||
</SkillsCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { skills } from "~~/constants/skills";
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
row-gap: 20px;
|
||||
column-gap: 20px;
|
||||
}
|
||||
</style>
|
||||
110
components/home/HomeHeader.vue
Normal file
110
components/home/HomeHeader.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<section>
|
||||
<div :class="$style.grid">
|
||||
<div :class="$style.text">
|
||||
<h1 :class="$style.title">Welcome to my Obsidian Garden</h1>
|
||||
|
||||
<p :class="$style.subtitle">
|
||||
<img src="~/assets/svg/obsidian.svg" alt="" width="14" height="14" />
|
||||
<NuxtLink to="https://obsidian.md" target="_blank">Obsidian</NuxtLink>
|
||||
is a note-taking app, that I use to store chunks of code and technical
|
||||
documentation.
|
||||
</p>
|
||||
|
||||
<div :class="$style.buttons">
|
||||
<UiActionButton
|
||||
href="https://github.com/muerwre"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
>
|
||||
Visit my Github
|
||||
<template v-slot:suffix>
|
||||
<IconsArrowRight width="22" height="22" fill="currentColor" />
|
||||
</template>
|
||||
</UiActionButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.image">
|
||||
<img
|
||||
src="~/assets/svg/desk.svg"
|
||||
:class="$style.desk"
|
||||
alt="It's me, muerwre"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import "~~/assets/css/mixins";
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 14fr 10fr;
|
||||
column-gap: 50px;
|
||||
border-bottom: 2px solid var(--color-line);
|
||||
|
||||
@include desktop {
|
||||
// grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
column-gap: 20px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
@include desktop {
|
||||
border-bottom: 2px solid var(--color-line);
|
||||
justify-content: center;
|
||||
|
||||
.desk {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
line-height: 3.4rem;
|
||||
margin: 0.8rem 0;
|
||||
|
||||
@include phone {
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--color-text-secondary);
|
||||
max-width: 360px;
|
||||
|
||||
@include desktop {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
padding-bottom: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include tablet {
|
||||
text-align: center;
|
||||
padding-top: 0;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
.desk {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
10
components/icons/ArrowRight.vue
Normal file
10
components/icons/ArrowRight.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="48"
|
||||
width="48"
|
||||
viewBox="0 0 48 48"
|
||||
>
|
||||
<path d="m24 40-2.1-2.15L34.25 25.5H8v-3h26.25L21.9 10.15 24 8l16 16Z" />
|
||||
</svg>
|
||||
</template>
|
||||
12
components/icons/IconStar.vue
Normal file
12
components/icons/IconStar.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="48"
|
||||
width="48"
|
||||
viewBox="0 0 48 48"
|
||||
>
|
||||
<path
|
||||
d="m11.65 44 3.25-14.05L4 20.5l14.4-1.25L24 6l5.6 13.25L44 20.5l-10.9 9.45L36.35 44 24 36.55Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
<template>
|
||||
<nav>
|
||||
<div :class="$style.section_title">Reference</div>
|
||||
<div :class="$style.logo">
|
||||
<NuxtLink to="/">
|
||||
<div :class="$style.title">Obsidian Garden</div>
|
||||
<div :class="$style.subtitle">by muerwre</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div :class="$style.section_title">Cheatsheet</div>
|
||||
|
||||
<div v-for="item in parentItems" key="item._path" :class="$style.row">
|
||||
<LayoutMainMenuRow
|
||||
|
|
@ -30,7 +37,37 @@ const parentItems = navigation.value.filter(
|
|||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
background: url("~~/assets/svg/logo.svg") no-repeat 50% 50%;
|
||||
background-size: contain;
|
||||
padding: 30px 0 15px;
|
||||
text-shadow: var(--color-menu-background) 3px 3px,
|
||||
var(--color-menu-background) -3px -3px;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.logo_image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: var(--family-roboto-slab);
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
77
components/skills/SkillsCard.vue
Normal file
77
components/skills/SkillsCard.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<div :class="$style.card">
|
||||
<div :class="$style.grid">
|
||||
<div :class="$style.icon">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div :class="$style.text">
|
||||
<h3 :class="$style.title">{{ title }}</h3>
|
||||
<UiStars :count="level" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="$style.description">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
level: number;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-line);
|
||||
transition: all 0.25s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-line);
|
||||
|
||||
&,
|
||||
& > .grid {
|
||||
border-color: var(--color-text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr;
|
||||
grid-column-gap: 16px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--color-line);
|
||||
padding: 10px;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4rem;
|
||||
color: var(--color-text-secondary);
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
115
components/ui/UiActionButton.vue
Normal file
115
components/ui/UiActionButton.vue
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<NuxtLink
|
||||
:class="[
|
||||
$style.button,
|
||||
$attrs.style,
|
||||
$style[`variant-${variant}`],
|
||||
$style[`size-${size}`],
|
||||
{
|
||||
[$style.prefixed]: $slots.prefix,
|
||||
[$style.suffixed]: $slots.suffix,
|
||||
},
|
||||
]"
|
||||
:to="href"
|
||||
>
|
||||
<span v-if="$slots.prefix" :class="$style.prefix">
|
||||
<slot name="prefix" />
|
||||
</span>
|
||||
|
||||
<span :class="$style.title">
|
||||
<slot />
|
||||
</span>
|
||||
|
||||
<span v-if="$slots.suffix" :class="$style.suffix">
|
||||
<slot name="suffix" />
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
href: string;
|
||||
size?: "md";
|
||||
variant?: "outline";
|
||||
}
|
||||
|
||||
withDefaults(defineProps<Props>(), {
|
||||
size: "md",
|
||||
variant: "outline",
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.button {
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
|
||||
&.variant-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--color-text) 0 0 0 1px;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 250ms;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
background: var(--color-primary);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition: all 250ms;
|
||||
z-index: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-background);
|
||||
box-shadow: var(--color-background) 0 0 0 1px;
|
||||
|
||||
&::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.size-md {
|
||||
height: 40px;
|
||||
padding: 0 30px;
|
||||
|
||||
&.prefixed,
|
||||
&.suffixed {
|
||||
padding: 0 10px 0 20px;
|
||||
}
|
||||
|
||||
&.suffixed {
|
||||
padding-right: 0 20px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
.size-md.prefixed & {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.size-md.suffixed & {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
51
components/ui/UiStars.vue
Normal file
51
components/ui/UiStars.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div :class="$style.rating">
|
||||
<IconsIconStar
|
||||
v-for="i in 5"
|
||||
:width="22"
|
||||
height="22"
|
||||
:class="[$style.star, { [$style.filled]: i > count }]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
count: number;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
@import "~~/assets/css/mixins";
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: -3px;
|
||||
|
||||
& > img {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
stroke: none;
|
||||
fill: currentColor;
|
||||
|
||||
@include color_per_child(
|
||||
(
|
||||
var(--color-rating-1),
|
||||
var(--color-rating-2),
|
||||
var(--color-rating-3),
|
||||
var(--color-rating-4),
|
||||
var(--color-rating-5)
|
||||
)
|
||||
);
|
||||
|
||||
&.filled {
|
||||
fill: var(--color-line);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue