58Team/Frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

aaaaa

Browse source
This commit is contained in:
coma 2025-09-25 01:54:30 +04:00
commit 5ab2d8abfd
45 changed files with 9738 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

942
src/routes/(main)/about/+page.svelte Normal file
View file

@ -0,0 +1,942 @@
<script>
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import { Container, Row, Col } from '@sveltestrap/sveltestrap';
import GlitchText from '$lib/components/GlitchText.svelte';
import CRTScreen from '$lib/components/CRTScreen.svelte';
const activeSection = writable('mission');
const isMobile = writable(false);
const teamData = {
mission: {
title: "Наша Миссия",
icon: "",
content: {
main: "Мы создаем инновационные технологические решения, которые делают мир лучше, проще и эффективнее.",
points: [
"Разрабатывать ПО, которое решает реальные проблемы",
"Создавать продукты с душой и вниманием к деталям",
"Продвигать open-source и сообщество разработчиков",
"Обучать и вдохновлять следующее поколение инженеров"
]
}
},
values: {
title: "Наши Ценности",
icon: "",
content: {
main: "Наши ценности - это фундамент, на котором строится вся наша работа.",
points: [
{
icon: "",
title: "Инновации",
description: "Мы постоянно исследуем новые технологии и подходы"
},
{
icon: "",
title: "Качество",
description: "Каждая строка кода должна быть продумана и оптимизирована"
},
{
icon: "",
title: "Сотрудничество",
description: "Вместе мы достигаем большего, чем по отдельности"
},
{
icon: "",
title: "Обучение",
description: "Мы постоянно растем и развиваемся как профессионалы"
},
{
icon: "",
title: "Креативность",
description: "Находим нестандартные решения для сложных задач"
},
{
icon: "",
title: "Эффективность",
description: "Делаем больше за меньшее время без потери качества"
}
]
}
},
history: {
title: "Наша История",
icon: "",
content: {
main: "Путь от идеи к реализации - это история постоянного роста и развития.",
timeline: [
{
year: "2023",
event: "Основание команды",
description: "Группа энтузиастов объединилась для работы над первыми проектами"
},
{
year: "2024",
event: "Первый крупный проект",
description: "Успешный запуск платформы для блогов в ретро-стиле"
},
{
year: "2024",
event: "Расширение команды",
description: "К команде присоединились специалисты разных направлений"
},
{
year: "Настоящее время",
event: "Активное развитие",
description: "Работа над несколькими инновационными проектами одновременно"
}
]
}
},
technology: {
title: "Технологии",
icon: "",
content: {
main: "Мы используем современный стек технологий, сочетая его с проверенными временем решениями.",
categories: [
{
name: "Frontend",
technologies: ["Svelte/SvelteKit", "TypeScript", "Vue.js", "Tailwind CSS"],
color: "#00aaff"
},
{
name: "Backend",
technologies: ["Node.js", "Python", "Rust", "PostgreSQL", "MongoDB"],
color: "#ff00aa"
},
{
name: "DevOps",
technologies: ["Docker", "Kubernetes", "AWS", "GitLab CI/CD", "Linux"],
color: "#00ff88"
},
{
name: "Embedded",
technologies: ["C/C++", "Arduino", "Raspberry Pi", "IoT Protocols"],
color: "#ffaa00"
},
{
name: "QA",
technologies: ["Jest", "Cypress", "Selenium", "Test Automation"],
color: "#aa00ff"
}
]
}
}
};
const stats = {
projects: 12,
teamMembers: 5,
yearsExperience: 2,
technologies: 20,
satisfiedClients: 8,
codeCommits: 2500
};
onMount(() => {
isMobile.set(window.innerWidth < 768);
const handleResize = () => isMobile.set(window.innerWidth < 768);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
});
function setActiveSection(section) {
activeSection.set(section);
}
</script>
<section class="about-page">
<Row class=" g-0">
<!-- Левая панель - Навигация -->
<Col lg={3} class="h-100">
<div class="panel navigation-panel">
<CRTScreen class="navigation-terminal h-100">
<div class="terminal-header">
<span class="blink">█</span> О КОМАНДЕ [58]
</div>
<div class="terminal-body navigation-body">
<div class="navigation-menu">
{#each Object.entries(teamData) as [key, section]}
<div
class="nav-item"
class:active={$activeSection === key}
on:click={() => setActiveSection(key)}
>
<span class="nav-icon">{section.icon}</span>
<span class="nav-title">{section.title}</span>
<span class="nav-arrow">
{#if $activeSection === key}
▶
{:else}
●
{/if}
</span>
</div>
{/each}
</div>
<div class="quick-stats">
<h4> Быстрая статистика</h4>
<div class="stats-grid">
<div class="stat">
<span class="stat-number">{stats.projects}+</span>
<span class="stat-label">Проектов</span>
</div>
<div class="stat">
<span class="stat-number">{stats.teamMembers}</span>
<span class="stat-label">Участников</span>
</div>
<div class="stat">
<span class="stat-number">{stats.yearsExperience}</span>
<span class="stat-label">Года опыта</span>
</div>
<div class="stat">
<span class="stat-number">{stats.technologies}+</span>
<span class="stat-label">Технологий</span>
</div>
</div>
</div>
<div class="contact-info">
<h4> Контакты</h4>
<div class="contact-item">
<span class="contact-icon"></span>
<span class="contact-text">team58@example.com</span>
</div>
<div class="contact-item">
<span class="contact-icon"></span>
<span class="contact-text">@58team</span>
</div>
<div class="contact-item">
<span class="contact-icon"></span>
<span class="contact-text">github.com/58team</span>
</div>
</div>
</div>
</CRTScreen>
</div>
</Col>
<!-- Правая панель - Контент -->
<Col lg={9} class="h-100">
<div class="panel content-panel">
<CRTScreen class="content-terminal h-100">
<div class="terminal-header">
<span class="blink">█</span>
{teamData[$activeSection].icon} {teamData[$activeSection].title}
</div>
<div class="terminal-body content-body">
<div class="content-scroll">
{#if $activeSection === 'mission'}
<div class="mission-content">
<div class="section-header">
<h1>Наша Миссия</h1>
<p class="lead">{teamData.mission.content.main}</p>
</div>
<div class="mission-points">
{#each teamData.mission.content.points as point}
<div class="mission-point">
<span class="point-icon">✓</span>
<span class="point-text">{point}</span>
</div>
{/each}
</div>
<div class="mission-vision">
<h2> Наше Видение</h2>
<div class="vision-grid">
<div class="vision-card">
<div class="vision-icon"></div>
<h3>Инновации</h3>
<p>Создавать технологии, которые опережают время</p>
</div>
<div class="vision-card">
<div class="vision-icon"></div>
<h3>Влияние</h3>
<p>Менять мир к лучшему через технологии</p>
</div>
<div class="vision-card">
<div class="vision-icon"></div>
<h3>Сообщество</h3>
<p>Развивать open-source и помогать другим</p>
</div>
</div>
</div>
</div>
{:else if $activeSection === 'values'}
<div class="values-content">
<div class="section-header">
<h1>Наши Ценности</h1>
<p class="lead">{teamData.values.content.main}</p>
</div>
<div class="values-grid">
{#each teamData.values.content.points as value}
<div class="value-card">
<div class="value-icon">{value.icon}</div>
<div class="value-content">
<h3>{value.title}</h3>
<p>{value.description}</p>
</div>
</div>
{/each}
</div>
<div class="values-principles">
<h2>Наши Принципы Работы</h2>
<div class="principles-list">
<div class="principle">
<strong>Agile подход:</strong> Гибкость и адаптивность в разработке
</div>
<div class="principle">
<strong>Code Review:</strong> Каждая строка кода проверяется коллегами
</div>
<div class="principle">
<strong>Документация:</strong> Подробная документация для всех проектов
</div>
<div class="principle">
<strong>Непрерывное обучение:</strong> Регулярные воркшопы и обмен знаниями
</div>
</div>
</div>
</div>
{:else if $activeSection === 'history'}
<div class="history-content">
<div class="section-header">
<h1>Наша История</h1>
<p class="lead">{teamData.history.content.main}</p>
</div>
<div class="timeline">
{#each teamData.history.content.timeline as event, index}
<div class="timeline-item">
<div class="timeline-marker">
<div class="marker-dot"></div>
{#if index < teamData.history.content.timeline.length - 1}
<div class="marker-line"></div>
{/if}
</div>
<div class="timeline-content">
<div class="timeline-year">{event.year}</div>
<h3>{event.event}</h3>
<p>{event.description}</p>
</div>
</div>
{/each}
</div>
<div class="history-achievements">
<h2> Наши Достижения</h2>
<div class="achievements-grid">
<div class="achievement">
<div class="achievement-icon"></div>
<div class="achievement-text">Успешный запуск 10+ проектов</div>
</div>
<div class="achievement">
<div class="achievement-icon"></div>
<div class="achievement-text">Собрана сильная команда специалистов</div>
</div>
<div class="achievement">
<div class="achievement-icon"></div>
<div class="achievement-text">Разработана уникальная ретро-платформа</div>
</div>
<div class="achievement">
<div class="achievement-icon"></div>
<div class="achievement-text">Постоянный рост и развитие</div>
</div>
</div>
</div>
</div>
{:else if $activeSection === 'technology'}
<div class="technology-content">
<div class="section-header">
<h1>Наш Технологический Стек</h1>
<p class="lead">{teamData.technology.content.main}</p>
</div>
<div class="tech-categories">
{#each teamData.technology.content.categories as category}
<div class="tech-category">
<h3 style="color: {category.color}">{category.name}</h3>
<div class="tech-tags">
{#each category.technologies as tech}
<span
class="tech-tag"
style="border-color: {category.color}; color: {category.color}"
>
{tech}
</span>
{/each}
</div>
</div>
{/each}
</div>
<div class="tech-philosophy">
<h2>Наш Подход к Технологиям</h2>
<div class="philosophy-points">
<div class="philosophy-point">
<strong>Правильный инструмент для задачи:</strong> Выбираем технологии исходя из требований проекта
</div>
<div class="philosophy-point">
<strong>Современные стандарты:</strong> Следуем best practices и актуальным трендам
</div>
<div class="philosophy-point">
<strong>Безопасность и надежность:</strong> Приоритет - стабильность и защита данных
</div>
<div class="philosophy-point">
<strong>Масштабируемость:</strong> Архитектура, которая растет вместе с проектом
</div>
</div>
</div>
</div>
{/if}
<div class="content-footer">
<div class="footer-cta">
<h3> Готовы работать с нами?</h3>
<p>Мы всегда открыты для новых вызовов и интересных проектов</p>
<div class="cta-buttons">
<a href="/contact" class="cta-btn primary">Связаться с нами</a>
<a href="/projects" class="cta-btn secondary">Наши проекты</a>
</div>
</div>
</div>
</div>
</div>
</CRTScreen>
</div>
</Col>
</Row>
</section>
<style>
.about-page {
min-height: 100vh;
padding-top: 50px;
background: var(--bg-dark);
overflow: hidden;
}
.panel {
height: 100%;
border: 1px solid var(--terminal-border);
background: rgba(10, 10, 10, 0.9);
}
.terminal-header {
background: var(--primary-green);
color: var(--bg-dark);
padding: 12px 20px;
font-weight: bold;
border-bottom: 2px solid var(--bg-dark);
font-size: 0.9rem;
font-family: 'Courier New', monospace;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.terminal-body {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.navigation-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 30px;
}
.navigation-menu {
display: flex;
flex-direction: column;
gap: 5px;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
border: 1px solid var(--terminal-border);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(0, 0, 0, 0.2);
}
.nav-item:hover {
border-color: var(--primary-green);
transform: translateX(5px);
}
.nav-item.active {
border-color: var(--secondary-pink);
background: rgba(255, 0, 170, 0.1);
}
.nav-icon {
font-size: 1.2rem;
width: 20px;
text-align: center;
}
.nav-title {
flex: 1;
color: var(--text-secondary);
font-weight: bold;
}
.nav-item.active .nav-title {
color: var(--primary-green);
}
.nav-arrow {
color: var(--text-muted);
}
.quick-stats h4, .contact-info h4 {
color: var(--primary-green);
margin: 0 0 15px 0;
font-size: 1rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stat {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--terminal-border);
border-radius: 6px;
padding: 10px;
text-align: center;
}
.stat-number {
display: block;
color: var(--primary-green);
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 2px;
}
.stat-label {
color: var(--text-muted);
font-size: 0.7rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-item:last-child {
border-bottom: none;
}
.contact-icon {
font-size: 1rem;
width: 20px;
text-align: center;
}
.contact-text {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Контентная часть */
.content-body {
padding: 0;
}
.content-scroll {
flex: 1;
padding: 30px;
overflow-y: auto;
}
.section-header {
margin-bottom: 40px;
text-align: center;
}
.section-header h1 {
color: var(--primary-green);
font-size: 2.5rem;
margin: 0 0 20px 0;
}
.lead {
color: var(--text-secondary);
font-size: 1.2rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
}
/* Стили для разных секций */
.mission-points {
display: flex;
flex-direction: column;
gap: 15px;
margin: 30px 0;
}
.mission-point {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--terminal-border);
border-radius: 8px;
}
.point-icon {
color: var(--primary-green);
font-weight: bold;
font-size: 1.2rem;
}
.point-text {
color: var(--text-secondary);
font-size: 1.1rem;
}
.vision-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.vision-card {
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--terminal-border);
border-radius: 8px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.vision-card:hover {
border-color: var(--primary-green);
transform: translateY(-5px);
}
.vision-icon {
font-size: 2rem;
margin-bottom: 15px;
}
.vision-card h3 {
color: var(--primary-green);
margin: 0 0 10px 0;
}
.vision-card p {
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.value-card {
display: flex;
gap: 15px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--terminal-border);
border-radius: 8px;
transition: all 0.3s ease;
}
.value-card:hover {
border-color: var(--primary-green);
}
.value-icon {
font-size: 1.5rem;
margin-top: 5px;
}
.value-content h3 {
color: var(--primary-green);
margin: 0 0 10px 0;
font-size: 1.2rem;
}
.value-content p {
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.principles-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.principle {
color: var(--text-secondary);
padding: 10px 15px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
border-left: 3px solid var(--primary-green);
}
.timeline {
position: relative;
margin: 40px 0;
}
.timeline-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.timeline-marker {
display: flex;
flex-direction: column;
align-items: center;
}
.marker-dot {
width: 12px;
height: 12px;
background: var(--primary-green);
border-radius: 50%;
border: 2px solid var(--bg-dark);
}
.marker-line {
flex: 1;
width: 2px;
background: var(--primary-green);
margin-top: 5px;
}
.timeline-content {
flex: 1;
padding-bottom: 20px;
}
.timeline-year {
color: var(--secondary-pink);
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 5px;
}
.timeline-content h3 {
color: var(--primary-green);
margin: 0 0 10px 0;
font-size: 1.3rem;
}
.timeline-content p {
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.achievement {
display: flex;
align-items: center;
gap: 10px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--terminal-border);
border-radius: 8px;
}
.achievement-icon {
font-size: 1.5rem;
}
.achievement-text {
color: var(--text-secondary);
font-size: 0.9rem;
}
.tech-categories {
display: flex;
flex-direction: column;
gap: 25px;
margin: 30px 0;
}
.tech-category h3 {
margin: 0 0 15px 0;
font-size: 1.3rem;
}
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tech-tag {
padding: 5px 12px;
border: 1px solid;
border-radius: 20px;
font-size: 0.9rem;
background: rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.tech-tag:hover {
background: rgba(0, 0, 0, 0.5);
transform: translateY(-2px);
}
.philosophy-points {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.philosophy-point {
color: var(--text-secondary);
padding: 15px;
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border-left: 4px solid var(--primary-green);
}
.content-footer {
margin-top: 50px;
padding-top: 30px;
border-top: 1px solid var(--terminal-border);
}
.footer-cta {
text-align: center;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--terminal-border);
border-radius: 12px;
padding: 30px;
}
.footer-cta h3 {
color: var(--primary-green);
margin: 0 0 10px 0;
}
.footer-cta p {
color: var(--text-secondary);
margin: 0 0 20px 0;
}
.cta-buttons {
display: flex;
gap: 15px;
justify-content: center;
}
.cta-btn {
padding: 12px 24px;
border: 2px solid;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s ease;
}
.cta-btn.primary {
background: var(--primary-green);
border-color: var(--primary-green);
color: var(--bg-dark);
}
.cta-btn.secondary {
background: transparent;
border-color: var(--secondary-pink);
color: var(--secondary-pink);
}
.cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Адаптивность */
@media (max-width: 768px) {
.about-page {
height: auto;
min-height: 100vh;
}
.content-scroll {
padding: 20px;
}
.section-header h1 {
font-size: 2rem;
}
.vision-grid, .values-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
}
.timeline-item {
flex-direction: column;
}
.timeline-marker {
flex-direction: row;
margin-bottom: 10px;
}
.marker-line {
width: 100%;
height: 2px;
margin: 0 10px;
}
}
</style>