Skip to content

Commit e7e29ab

Browse files
author
Isanin Sergey
committed
refactor(ui): улучшена структура компонентов и добавлены CSS-переменные
- добавлены переменные стилей в assets/css/variables.css для унификации цветов и шрифтов; - улучшена организация CSS, вынесены глобальные стили в assets/css/global.css; - компоненты ContactInfo, Education, WorkExperience и другие перемещены и упорядочены для логической структуры; - добавлены новые компоненты и страницы: Skills, PhotoGallery и Resume. - добавлено описание новых компонентов и структуры папок; - обновлены инструкции по установке и запуску проекта; - добавлена информация о новых страницах и их назначении (например, Resume, Skills); - уточнены зависимости и требования для разработки.
1 parent 5ac7d02 commit e7e29ab

20 files changed

+612
-200
lines changed

‎README.md

+1-77
Original file line numberDiff line numberDiff line change
@@ -1,77 +1 @@
1-
# Фронтендер в Сасфликс
2-
3-
Ищем ответственного фронтендера, чтобы работать в команде и создавать крутой продукт.
4-
5-
Меня зовут Магомед, я занимаюсь дизайном для Сасфликса — проекта Стаса Васильева, который мы развиваем до полноценного продукта.
6-
7-
Мой будущий коллега умеет работать в команде, выполнять задачи в срок, предлагать улучшения и хочет развиваться вместе с нами.
8-
9-
> [!DANGER]
10-
> **Не поладим, если вы:**
11-
> - Не воспринимаете критику и не готовы разбираться, что не так в работе.
12-
> - Вырываете куски из макета и делаете работу по-своему — не люблю такие «сюрпризы».
13-
> - Не тестируете свою работу — будете заставлять меня это делать.
14-
> - Вам скучно, и нужна палка для мотивации — не наш метод работы.
15-
> - Начинаете разговор с вопроса о зарплате. Странно начинать диалог с этого, ведь мы еще не знаем друг друга.
16-
17-
### Наши принципы
18-
19-
20-
- **Без херни.** Продукт должен работать без багов, глюков и поломок, чтобы не было стыдно перед пользователями.
21-
- **Любить то, что делаешь.** Специалист умеет делать работу интересной для себя и других.
22-
- **Соблюдать сроки.** Срывать, сдвигать, переносить — нельзя.
23-
24-
### Технологии, которые используем
25-
26-
27-
28-
Бэкенд на PHP. Фронтенд отделен от бэкенда и базируется на **Vue3** (CompositionAPI), **Pinia**, **TypeScript**, **Nuxt3**, **PostCSS**, **SCSS**, **@vesp/frontend**, **Vite**, и **Socket**.
29-
30-
> [!TIP]
31-
> Сасфликс основан на Орбите — проекте с открытым исходным кодом:
32-
> [github.com/bezumkin/orbita](https://github.com/bezumkin/orbita)
33-
34-
### Требования
35-
36-
37-
38-
- Базовый английский, грамотность и понимание принципов SSR, Nuxt3, HTML и CSS — обязательно.
39-
- **Будет плюсом:** опыт работы с Фигмой, Докером и GitLab.
40-
41-
> [!NOTE]
42-
> **Код должен быть:**
43-
> - Понятным и читаемым, чтобы с ним могли работать как участники команды, так и опенсорс-сообщество в будущем.
44-
> - С документацией на русском языке, чтобы новички могли разобраться самостоятельно.
45-
46-
### Формат работы
47-
48-
49-
50-
Работайте где и когда угодно. Длину рабочего дня и количество выходных определяете сами. Работу оцениваем только по результатам.
51-
52-
## Тестовое задание
53-
54-
Реализовать приложение с общим списком постов и отдельными страницами с комментариями. Код на Nuxt3/Vue3, TypeScript и Pinia, и разбит на компоненты.
55-
56-
57-
58-
> [!EXAMPLE]
59-
> Приложение должно:
60-
> - Повторять макет в Фигме.
61-
> - Выводить первые 5 постов из API на общей странице.
62-
> - Быть написано без использования готовых библиотек компонентов.
63-
> - Иметь кликабельные кнопки лайка и дизлайка.
64-
> - Удалять комментарии и изменять значения и стили кнопок локально.
65-
66-
> [!WARNING]
67-
> Ведите историю коммитов с начала разработки, загрузите приложение в GitLab или GitHub, и предоставьте общий доступ.
68-
69-
### Материалы
70-
71-
72-
73-
- Список постов: `dummyjson.com/posts`
74-
- Отдельный пост с комментариями: `dummyjson.com/posts/${id_post}/comments`
75-
- [Макет в Фигме](https://jobs.sasflix.ru/frontender/App-Template.fig)
76-
77-
Ссылку на приложение и рассказ о себе присылайте на почту: [[email protected]](mailto:[email protected]).
1+
сайт резюме

‎assets/css

Whitespace-only changes.

‎assets/css/global.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
body {
2+
margin: 0;
3+
font-family: 'Roboto', sans-serif;
4+
background-color: var(--color-background);
5+
color: var(--color-text);
6+
}
7+
8+
a {
9+
color: var(--color-primary);
10+
text-decoration: none;
11+
}
12+
13+
a:hover {
14+
color: var(--color-secondary);
15+
}

‎assets/css/variables.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
:root {
2+
/* Цветовая палитра для тёмной темы */
3+
--color-background: #121212;
4+
--color-text: #e0e0e0;
5+
--color-primary: #bb86fc;
6+
--color-secondary: #03dac6;
7+
--color-accent: #3700b3;
8+
}

‎components/+/ContactInfo.vue

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<section class="contact-info">
3+
<h2>Контактная информация</h2>
4+
<ul>
5+
<li>
6+
<strong>Телефон:</strong>
7+
<a :href="`tel:${contact.phone}`">{{ contact.phone }}</a>
8+
(<a :href="`https://t.me/${contact.telegram.slice(1)}`" target="_blank">Telegram {{ contact.telegram }}</a>)
9+
</li>
10+
<li>
11+
<strong>Email:</strong>
12+
<a :href="`mailto:${contact.email}`">{{ contact.email }}</a>
13+
</li>
14+
<li>
15+
<strong>GitHub:</strong>
16+
<a :href="`https://${contact.github}`" target="_blank">{{ contact.github }}</a>
17+
</li>
18+
</ul>
19+
</section>
20+
</template>
21+
22+
<script setup>
23+
defineProps({
24+
contact: {
25+
type: Object,
26+
required: true,
27+
},
28+
});
29+
</script>
30+
31+
<style scoped>
32+
.contact-info h2 {
33+
color: var(--color-secondary);
34+
}
35+
36+
.contact-info ul {
37+
list-style: none;
38+
padding: 0;
39+
}
40+
41+
.contact-info li {
42+
margin-bottom: 0.5rem;
43+
}
44+
</style>

‎components/+/Education.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<section class="education">
3+
<h2>Образование</h2>
4+
<p>
5+
{{ education.institution }},
6+
<br />
7+
{{ education.degree }} ({{ education.year }})
8+
</p>
9+
</section>
10+
</template>
11+
12+
<script setup>
13+
defineProps({
14+
education: {
15+
type: Object,
16+
required: true,
17+
},
18+
});
19+
</script>
20+
21+
<style scoped>
22+
.education h2 {
23+
color: var(--color-secondary);
24+
}
25+
26+
.education p {
27+
margin-top: 1rem;
28+
}
29+
</style>

‎components/+/Footer.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<footer class="footer">
3+
<p>&copy; 2024 Ваше Имя</p>
4+
</footer>
5+
</template>
6+
7+
<script setup>
8+
// Логика не требуется
9+
</script>
10+
11+
<style scoped>
12+
.footer {
13+
text-align: center;
14+
padding: 1rem;
15+
background-color: var(--color-accent);
16+
color: var(--color-text);
17+
}
18+
</style>

‎components/+/Navbar.vue

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<nav class="navbar">
3+
<NuxtLink to="/" class="logo">Мой Сайт</NuxtLink>
4+
<ul class="nav-links">
5+
<li><NuxtLink to="/">Главная</NuxtLink></li>
6+
<li><NuxtLink to="/resume">Резюме</NuxtLink></li>
7+
</ul>
8+
</nav>
9+
</template>
10+
11+
<script setup>
12+
// Логика не требуется
13+
</script>
14+
15+
<style scoped>
16+
.navbar {
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
padding: 1rem;
21+
background-color: var(--color-accent);
22+
}
23+
24+
.logo {
25+
font-size: 1.5rem;
26+
font-weight: bold;
27+
color: var(--color-primary);
28+
}
29+
30+
.nav-links {
31+
list-style: none;
32+
display: flex;
33+
gap: 1rem;
34+
}
35+
36+
.nav-links li {
37+
margin: 0;
38+
}
39+
40+
.nav-links a {
41+
color: var(--color-text);
42+
}
43+
44+
.nav-links a:hover {
45+
color: var(--color-secondary);
46+
}
47+
</style>

‎components/+/PhotoGallery.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div class="gallery">
3+
<div v-for="photo in photos" :key="photo.id" class="photo-card">
4+
<img :src="photo.url" :alt="photo.alt" />
5+
</div>
6+
</div>
7+
</template>
8+
9+
<script setup>
10+
defineProps({
11+
photos: {
12+
type: Array,
13+
required: true,
14+
},
15+
});
16+
</script>
17+
18+
<style scoped>
19+
.gallery {
20+
display: flex;
21+
flex-wrap: wrap;
22+
gap: 1rem;
23+
justify-content: center;
24+
margin-top: 2rem;
25+
}
26+
27+
.photo-card {
28+
width: 300px;
29+
}
30+
31+
.photo-card img {
32+
width: 100%;
33+
border-radius: 8px;
34+
}
35+
</style>

‎components/+/SkillCard.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div class="skill-card">
3+
<img :src="skill.image" :alt="skill.name" />
4+
<p>{{ skill.name }}</p>
5+
</div>
6+
</template>
7+
8+
<script setup>
9+
defineProps({
10+
skill: {
11+
type: Object,
12+
required: true,
13+
},
14+
});
15+
</script>
16+
17+
<style scoped>
18+
.skill-card {
19+
width: 100px;
20+
text-align: center;
21+
}
22+
23+
.skill-card img {
24+
width: 60px;
25+
height: 60px;
26+
object-fit: contain;
27+
}
28+
29+
.skill-card p {
30+
margin-top: 0.5rem;
31+
color: var(--color-text);
32+
}
33+
</style>

‎components/+/Skills.vue

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<section class="skills">
3+
<h2>Навыки</h2>
4+
<div class="skills-list">
5+
<SkillCard v-for="skill in skills" :key="skill.name" :skill="skill" />
6+
</div>
7+
</section>
8+
</template>
9+
10+
<script setup>
11+
import SkillCard from '~/components/SkillCard.vue';
12+
13+
defineProps({
14+
skills: {
15+
type: Array,
16+
required: true,
17+
},
18+
});
19+
</script>
20+
21+
<style scoped>
22+
.skills h2 {
23+
color: var(--color-secondary);
24+
}
25+
26+
.skills-list {
27+
display: flex;
28+
flex-wrap: wrap;
29+
gap: 1rem;
30+
}
31+
</style>

‎components/+/WorkExperience.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<section class="work-experience">
3+
<h2>Опыт работы</h2>
4+
<div v-for="job in jobs" :key="job.company" class="job">
5+
<h3>{{ job.period }} — {{ job.company }}</h3>
6+
<p><strong>Должность:</strong> {{ job.position }}</p>
7+
<ul>
8+
<li v-for="(item, index) in job.responsibilities" :key="index">{{ item }}</li>
9+
</ul>
10+
</div>
11+
</section>
12+
</template>
13+
14+
<script setup>
15+
defineProps({
16+
jobs: {
17+
type: Array,
18+
required: true,
19+
},
20+
});
21+
</script>
22+
23+
<style scoped>
24+
.work-experience h2 {
25+
color: var(--color-secondary);
26+
}
27+
28+
.job {
29+
margin-bottom: 1.5rem;
30+
}
31+
32+
.job h3 {
33+
color: var(--color-primary);
34+
}
35+
</style>

0 commit comments

Comments
 (0)