IndiMops.github.io/about.html at master · IndiMops/IndiMops.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#0b0c0e">
  <meta name="description" content="Особиста історія Indi Mops: перші відео, знайомство з веброзробкою, Python і перекладом манґи.">
  <meta property="og:type" content="website">
  <meta property="og:locale" content="uk_UA">
  <meta property="og:title" content="Про мене — Indi Mops">
  <meta property="og:description" content="Історія перших відео, знайомства з веброзробкою, Python і перекладом манґи.">
  <meta property="og:image" content="https://indimops.github.io/assets/social-banner.png">
  <meta property="og:url" content="https://indimops.github.io/about.html">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="canonical" href="https://indimops.github.io/about.html">
  <link rel="alternate" hreflang="uk" href="https://indimops.github.io/about.html">
  <link rel="alternate" hreflang="en" href="https://indimops.github.io/en/about.html">
  <link rel="alternate" hreflang="x-default" href="https://indimops.github.io/about.html">
  <link rel="icon" href="assets/favicon.ico" sizes="any">
  <link rel="preload" href="assets/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="stylesheet" href="assets/css/site.css">
  <script src="assets/js/site.js" defer></script>
  <title>Про мене — Indi Mops</title>
</head>
<body class="site-body">
  <a class="skip-link" href="#main-content">До вмісту</a>
  <site-header current="about" lang="uk"></site-header>

  <main id="main-content">
    <header class="page-hero">
      <div class="container">
        <p class="eyebrow">Трохи особистого</p>
        <h1>Про мене</h1>
        <p class="page-lead">
          Мене звати Богдан, в інтернеті — Indi Mops або Мося. Це оновлена версія сторінки,
          яку я почав ще в коледжі: без застарілих анкетних даних, але з тією самою історією.
        </p>
      </div>
    </header>

    <section class="section" aria-labelledby="roots-title">
      <div class="container about-intro" data-reveal>
        <figure class="about-photo">
          <img
            src="assets/city/01.jpg"
            width="1555"
            height="1037"
            alt="Головна вулиця Скалата на Тернопільщині"
          >
          <figcaption>Скалат, Тернопільщина</figcaption>
        </figure>

        <div class="prose">
          <h2 id="roots-title">Звідки все почалося</h2>
          <p>
            Я родом зі Скалата — невеликого міста на Тернопільщині. Значна частина моїх
            ранніх спогадів пов’язана саме з ним, а після школи навчання привело мене до Зборова.
          </p>
          <p>
            Старий сайт був одночасно візитівкою, вправою з верстки й місцем, куди хотілося
            складати все важливе: власні проєкти, переклади, ігри та маленькі історії про себе.
            Цю ідею я залишив, навіть якщо сам код тепер зовсім інший.
          </p>

          <h2>Що мене захоплювало</h2>
          <p>
            У першій версії цієї сторінки я писав про ігри, аніме, манґу, музику, волейбол
            і подорожі Україною. Саме з цих інтересів згодом виросли перекладацькі та програмні проєкти.
          </p>
          <ul class="interest-list" aria-label="Зацікавлення зі старої версії сайту">
            <li>Програмування</li>
            <li>Переклад</li>
            <li>Ігри</li>
            <li>Манґа й аніме</li>
            <li>Волейбол</li>
            <li>Подорожі</li>
          </ul>

          <h2>Місця, що запам’яталися</h2>
          <ul>
            <li>Кам’янець-Подільська та Хотинська фортеці;</li>
            <li>Тарасова гора й Софіївський парк;</li>
            <li>Меджибізький, Збаразький замки та замок Паланок.</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="section section--surface" aria-labelledby="path-title">
      <div class="container">
        <div class="section-heading" data-reveal>
          <div>
            <p class="eyebrow">Архівна хронологія</p>
            <h2 id="path-title">Шлях до ІТ і перекладу</h2>
          </div>
          <p>Кілька перевірених віх зі старої сторінки — не поточний статус, а історія початку.</p>
        </div>

        <div class="timeline">
          <article class="timeline__item" data-reveal>
            <div class="timeline__year">2016</div>
            <div class="timeline__body">
              <h3>Перший YouTube-канал</h3>
              <p>Почав публікувати розважальні відео. Канал згодом було видалено, але саме він дав перший досвід створення контенту.</p>
            </div>
          </article>

          <article class="timeline__item" data-reveal>
            <div class="timeline__year">2017</div>
            <div class="timeline__body">
              <h3>Експерименти з іграми</h3>
              <p>Зацікавився розробкою мобільних ігор у Sketchware та присвятив цьому наступний канал.</p>
            </div>
          </article>

          <article class="timeline__item" data-reveal>
            <div class="timeline__year">2019–20</div>
            <div class="timeline__body">
              <h3>Верстка та Python</h3>
              <p>У 2019 році почав вивчати вебверстку, а наприкінці 2020-го — Python. З цього й виросли перші репозиторії та боти.</p>
            </div>
          </article>

          <article class="timeline__item" data-reveal>
            <div class="timeline__year">2021</div>
            <div class="timeline__body">
              <h3>Переклад манґи</h3>
              <p>Першою роботою стала коротка манґа «Хлопчик, який став котом». Після неї з’явилися нові переклади й окремий архів на сайті.</p>
            </div>
          </article>

          <article class="timeline__item" data-reveal>
            <div class="timeline__year">2022</div>
            <div class="timeline__body">
              <h3>Mops Storage</h3>
              <p>Сайт зібрав докупи особисту історію, проєкти, переклади та ігровий щоденник — і зберіг цей зріз часу до нинішнього оновлення.</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="section" aria-labelledby="old-video-title">
      <div class="container">
        <div class="media-panel" data-reveal>
          <video controls preload="metadata" playsinline aria-describedby="old-video-description">
            <source src="assets/video/01.mp4" type="video/mp4">
            Ваш браузер не підтримує відео. Ви можете
            <a href="assets/video/01.mp4">завантажити файл</a>.
          </video>
          <div class="media-panel__copy">
            <p class="eyebrow">Зі старого архіву</p>
            <h2 id="old-video-title">Найдавніше збережене відео</h2>
            <p id="old-video-description">
              Невеликий фрагмент раннього контент-мейкерського періоду. Залишаю його тут не як
              показову роботу, а як чесну частину історії цього сайту.
            </p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <site-footer lang="uk"></site-footer>
</body>
</html>