Portfolio/index.html at main · CodCatDev/Portfolio · 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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="preconnect" href="https://cdn.codcatdev.site">
    <link rel="dns-prefetch" href="https://cdn.codcatdev.site">
    <link rel="preload" href="https://cdn.codcatdev.site/assets/css/index-U8SUBX.css" as="style">
    <link rel="preload" href="https://cdn.codcatdev.site/assets/js/main-U8SUBX.js" as="script">
    <link rel="preload" href="https://cdn.codcatdev.site/assets/js/bg-U8SUBX.js" as="script">
    <link rel="preload" href="https://cdn.codcatdev.site/assets/fonts/raleway.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://cdn.codcatdev.site/assets/fonts/jetbrains.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://cdn.codcatdev.site/assets/fonts/raleway.css" as="style">
    <link rel="preload" href="https://cdn.codcatdev.site/assets/fonts/jetbrains.css" as="style">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="CodCatDev | Portfolio">
    <meta property="og:description" content="12-летний разработчик, создаю проекты, которые нравятся многим">
    <meta property="og:image" content="https://cdn.codcatdev.site/assets/img/avatar-U8SUBX.jpg">
    <meta property="og:url" content="https://codcatdev.site">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="CodCatDev | Portfolio">
    <meta name="twitter:description" content="12-year-old developer, creating projects that please many">
    <meta name="twitter:image" content="https://cdn.codcatdev.site/assets/img/avatar-U8SUBX.jpg">
    <title>CodCatDev | Portfolio</title>
    <link rel="icon" type="image/png" href="https://cdn.codcatdev.site/assets/img/avatar-U8SUBX.png">
    <link rel="stylesheet" href="https://cdn.codcatdev.site/assets/css/index-U8SUBX.css">
    <script src="https://cdn.codcatdev.site/assets/js/bg-U8SUBX.js" defer></script>
    <script src="https://cdn.codcatdev.site/assets/js/main-U8SUBX.js" defer></script>
</head>
<body>
    <canvas id="bg"></canvas>
    <header>
        <div class="brand">
            <img src="https://cdn.codcatdev.site/assets/img/avatar-U8SUBX.png" alt="avatar">
            <h1>CodCatDev</h1>
        </div>
        <div class="links">
            <a href="#projects">Мои проекты</a>
            <a href="#reviews">Отзывы</a>
            <a href="#about">Обо мне</a>
            <a href="#skills">Навыки</a>
            <a href="#contacts">Контакты</a>
        </div>
    </header>
    <section class="hero">
        <h1 class="name">CodCatDev</h1>
        <h2 class="desc">12-летний разработчик, создаю проекты, которые нравятся многим</h2>
        <div class="buttons">
            <a href="#projects" class="purple">Мои проекты</a>
            <a href="#contacts" class="trs">Контакты</a>
        </div>
    </section>
    <section class="projects" id="projects">
        <h1 class="title">Мои работы</h1>
        <h2 class="subtitle">То, что я создал и чем горжусь</h2>
        <div class="prjList">
            <div class="card" onclick="crosshairJs()" data-anim>
                <img src="https://cdn.codcatdev.site/assets/img/CrosshairJs-Banner-U8SUBX.png" alt="CrosshairJs" class="img">
                <h3>CrosshairJs</h3>
                <p>Лёгкая, быстрая, и кастомизируемая библиотека для JS</p>
                <div class="tags">
                    <li>JS</li>
                    <li>CSS</li>
                    <li>Lib</li>
                </div>
            </div>
            <div class="card" onclick="bioMusic()" data-anim>
                <img src="https://cdn.codcatdev.site/assets/img/BioMusic-Banner-U8SUBX.png" alt="Cola149.ru" class="img">
                <h3>BioMusic</h3>
                <p>Юзербот отображения музыки в Telegram</p>
                <div class="tags">
                    <li>Python</li>
                    <li>Telegram</li>
                </div>
            </div>
            <div class="card" onclick="portfolio()" data-anim>
                <img src="https://cdn.codcatdev.site/assets/img/Portfolio-Banner-U8SUBX.png" alt="Cola149.ru" class="img">
                <h3>Portfolio</h3>
                <p>Данное портфолио, созданное для себя же :3</p>
                <div class="tags">
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                </div>
            </div>
            <div class="card" onclick="cola149()" data-anim>
                <img src="https://cdn.codcatdev.site/assets/img/Cola149-U8SUBX.png" alt="Cola149.ru" class="img">
                <h3>Cola149</h3>
                <p>Сайт визитка, сделанная на заказ, для хорошего человечка</p>
                <div class="tags">
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                    <li>Заказ</li>
                </div>
            </div>
        </div>
    </section>
    <section class="reviews" id="reviews">
        <h1 class="title">Отзывы</h1>
        <h2 class="subtitle">Что говорят заказчики?</h2>
        <div class="revList">
            <div class="card" data-anim>
                <div class="up">
                    <img class="avatar" alt="Cola149" src="https://cdn.codcatdev.site/assets/img/cola149-avatar-U8SUBX.png">
                    <h3>@Cola149</h3>
                </div>
                <p>Сайт идеальный, прикольный даже скажу. CodCatDev даже разобрался как залить сайт на сервер apache2. В целом все прекрасно) буду обращаться если что, спасибо за сайт)</p>
            </div>
    </section>
    <section class="about" id="about">
        <h1 class="title">Обо мне</h1>
        <h2 class="subtitle">Кто я и что я умею</h2>
        <div class="aboutList">
            <div class="text">
                <p>Привет! Меня зовут <strong>Максим</strong>, мне <strong>12 лет</strong> и я увлекаюсь разработкой. Начал кодить давно и с тех пор не могу остановиться!</p>
                <p>Пишу на <strong>Python, Php, Javascript, C, и других</strong> Создаю сайты, ботов, веб-приложения. Нравится превращать идеи в работающие проекты.</p>
                <p><strong>Интроверт</strong> по натуре, живу в <strong>Ставропольском крае</strong>, учусь в <strong>6 классе</strong>. <strong>Девушки нет, а друзей мало.</strong></p>
                <p>Любимый сезон: <strong>Лето</strong>, как раз тогда я чувствую себя самым счастливым, ведь летом мой <strong>День Рождения</strong>. Еще я <strong>Меломан</strong>.</p>
            </div>
            <div class="stats">
                <div data-anim>
                    <h1>5+</h1>
                    <p>Языков программирования</p>
                </div>
                <div data-anim>
                    <h1>3+</h1>
                    <p>Проекта создано</p>
                </div>
                <div data-anim>
                    <h1>18 Июня</h1>
                    <p>Мой день рождения</p>
                </div>
            </div>
        </div>
    </section>
    <section class="skills" id="skills">
        <h1 class="title">Мои навыки</h1>
        <h2 class="subtitle">Что я умею</h2>
        <div class="skillsList">
            <div class="card" data-anim>
                <h3>Python</h3>
                <p>Выше среднего</p>
            </div>
            <div class="card" data-anim>
                <h3>Frontend</h3>
                <p>Выше среднего</p>
            </div>
            <div class="card" data-anim>
                <h3>Backend</h3>
                <p>Выше среднего</p>
            </div>
            <div class="card" data-anim>
                <h3>C</h3>
                <p>В процессе</p>
            </div>
            <div class="card" data-anim>
                <h3>Git/Github</h3>
                <p>Средний/База</p>
            </div>
            <div class="card" data-anim>
                <h3>Telegram Bots</h3>
                <p>Средний/База</p>
            </div>
        </div>
    </section>
    <section class="contacts" id="contacts">
        <h1 class="title">Контакты</h1>
        <h2 class="subtitle">Надо обсудить заказ? Пишите!</h2>
        <div class="contactsList">
            <a href="https://t.me/codcatdev" target="_blank" data-anim>
                <h1>Telegram</h1>
                <p>@codcatdev</p>
            </a>
            <a href="https://x.com/CodCatDev" target="_blank" data-anim>
                <h1>X (Twitter)</h1>
                <p>@CodCatDev</p>
            </a>
            <a href="mailto:codcatdev@gmail.com" target="_blank" data-anim>
                <h1>Mail</h1>
                <p>CodCatDev@Gmail.com</p>
            </a>
        </div>
    </section>
    <footer>
        <p>© 2026 CodCatDev. Сделано с душой</p>
    </footer>
</body>
</html>