1
1
mirror of https://git.gay/DeltaStudio/PufokReactApp.git synced 2025-07-17 21:32:24 +07:00

major site update! (contacts page)

This commit is contained in:
pufok 2025-04-18 17:27:29 +03:00
parent 2b89cadcdc
commit c421b25ac9
6 changed files with 293 additions and 105 deletions

2
.gitignore vendored
View File

@ -18,6 +18,8 @@
.env.test.local
.env.production.local
.htaccess
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@ -46,3 +46,126 @@ body {
color: rgb(238, 127, 75);
margin-top: auto;
}
/* КОНТАКТЫ! */
.contact-list {
list-style: none;
padding: 0;
margin: 0;
}
.contact-list li {
margin-bottom: 0.5rem; /* Отступ между элементами */
}
.contact-list a {
display: inline-flex; /* Ограничиваем ширину фона до текста */
align-items: center;
text-decoration: none;
color: rgb(241, 209, 190); /* Цвет текста по умолчанию */
gap: 0.5rem; /* Расстояние между иконкой и текстом */
transition: all 0.3s ease; /* Плавный переход */
border-radius: 8px; /* Закруглённые углы */
padding: 0.5rem 1rem; /* Внутренний отступ */
position: relative; /* Для позиционирования фона */
}
.contact-list a::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent; /* Прозрачный фон по умолчанию */
border-radius: 8px; /* Закруглённые углы */
transition: background-color 0.3s ease; /* Плавный переход фона */
z-index: -1; /* Фон размещается под текстом */
}
.contact-list a:hover {
color: #140f10; /* Текст становится прозрачным */
}
.contact-list a:hover .icon {
fill: #140f10; /* Иконка становится прозрачной */
}
.contact-list a:hover::before {
background-color: var(--accent-color); /* Фон принимает акцентный цвет */
}
.icon {
width: 20px;
height: 20px;
fill: currentColor; /* Иконка наследует цвет текста */
transition: fill 0.3s ease; /* Плавное изменение цвета иконки */
}
/* КНОПОЧКИ! */
.button-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
/* justify-content: center; */
}
.button-group a {
display: flex;
align-items: center;
justify-content: center;
}
.button-group img {
max-width: 100px;
height: auto;
/* border-radius: 8px; */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.button-group img:hover {
transform: scale(1.1);
}
/* ВЕБ РИНГИ! */
.webring-group {
margin-top: 2rem;
}
.webring-ring {
margin-bottom: 1.5rem;
/* text-align: center; */
}
.webring-ring h2 a {
color: var(--link-color);
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
}
.webring-ring h2 a:hover {
color: var(--link-hover-color);
}
.webring-links {
display: flex;
/* justify-content: center; */
gap: 1rem;
margin-top: 0.5rem;
}
.webring-links a {
color: var(--link-color);
text-decoration: none;
font-size: 1rem;
transition: color 0.3s ease;
}
.webring-links a:hover {
color: var(--link-hover-color);
}

View File

@ -5,10 +5,18 @@ function Navbar() {
return (
<nav className="navbar">
<ul>
<li><Link to="/">Главная</Link></li>
<li><Link to="/about">Обо мне</Link></li>
<li><Link to="/projects">Проекты</Link></li>
<li><Link to="/contact">Контакты</Link></li>
<li>
<Link to="/">Главная</Link>
</li>
<li>
<Link to="/about">Обо мне</Link>
</li>
<li>
<Link to="/projects">Проекты (в разработке)</Link>
</li>
<li>
<Link to="/contact">Контакты</Link>
</li>
</ul>
</nav>
);

View File

@ -1,111 +1,162 @@
import React from 'react';
function Contact() {
const contacts = [
{
name: 'Discord',
url: 'https://discord.com/users/539167320753438760',
icon: 'M19.952,5.672c-1.904-1.531-4.916-1.79-5.044-1.801c-0.201-0.017-0.392,0.097-0.474,0.281 c-0.006,0.012-0.072,0.163-0.145,0.398c1.259,0.212,2.806,0.64,4.206,1.509c0.224,0.139,0.293,0.434,0.154,0.659 c-0.09,0.146-0.247,0.226-0.407,0.226c-0.086,0-0.173-0.023-0.252-0.072C15.584,5.38,12.578,5.305,12,5.305S8.415,5.38,6.011,6.872 c-0.225,0.14-0.519,0.07-0.659-0.154c-0.14-0.225-0.07-0.519,0.154-0.659c1.4-0.868,2.946-1.297,4.206-1.509 c-0.074-0.236-0.14-0.386-0.145-0.398C9.484,3.968,9.294,3.852,9.092,3.872c-0.127,0.01-3.139,0.269-5.069,1.822 C3.015,6.625,1,12.073,1,16.783c0,0.083,0.022,0.165,0.063,0.237c1.391,2.443,5.185,3.083,6.05,3.111c0.005,0,0.01,0,0.015,0 c0.153,0,0.297-0.073,0.387-0.197l0.875-1.202c-2.359-0.61-3.564-1.645-3.634-1.706c-0.198-0.175-0.217-0.477-0.042-0.675 c0.175-0.198,0.476-0.217,0.674-0.043c0.029,0.026,2.248,1.909,6.612,1.909c4.372,0,6.591-1.891,6.613-1.91 c0.198-0.172,0.5-0.154,0.674,0.045c0.174,0.198,0.155,0.499-0.042,0.673c-0.07,0.062-1.275,1.096-3.634,1.706l0.875,1.202 c0.09,0.124,0.234,0.197,0.387,0.197c0.005,0,0.01,0,0.015,0c0.865-0.027,4.659-0.667,6.05-3.111 C22.978,16.947,23,16.866,23,16.783C23,12.073,20.985,6.625,19.952,5.672z M8.891,14.87c-0.924,0-1.674-0.857-1.674-1.913 s0.749-1.913,1.674-1.913s1.674,0.857,1.674,1.913S9.816,14.87,8.891,14.87z M15.109,14.87c-0.924,0-1.674-0.857-1.674-1.913 s0.749-1.913,1.674-1.913c0.924,0,1.674,0.857,1.674,1.913S16.033,14.87,15.109,14.87z',
accentColor: '#5662F6',
},
{
name: 'Bsky',
url: 'https://bsky.app/profile/pufok.gay',
icon: 'M5.769,3.618C8.291,5.512,11.004,9.352,12,11.412c0.996-2.06,3.709-5.9,6.231-7.793C20.051,2.252,23,1.195,23,4.559 c0,0.672-0.385,5.644-0.611,6.451c-0.785,2.806-3.647,3.522-6.192,3.089c4.449,0.757,5.581,3.265,3.137,5.774 c-4.643,4.764-6.672-1.195-7.193-2.722c-0.095-0.28-0.14-0.411-0.14-0.3c-0.001-0.112-0.045,0.019-0.14,0.3 c-0.521,1.527-2.55,7.486-7.193,2.722c-2.445-2.509-1.313-5.017,3.137-5.774c-2.546,0.433-5.407-0.282-6.192-3.089 C1.385,10.203,1,5.231,1,4.559C1,1.195,3.949,2.252,5.769,3.618L5.769,3.618z',
accentColor: '#1185FE',
},
{
name: 'Twitter (aka 𝕏)',
url: 'https://x.com/pufok_',
icon: 'M 2.3671875 3 L 9.4628906 13.140625 L 2.7402344 21 L 5.3808594 21 L 10.644531 14.830078 L 14.960938 21 L 21.871094 21 L 14.449219 10.375 L 20.740234 3 L 18.140625 3 L 13.271484 8.6875 L 9.2988281 3 L 2.3671875 3 z M 6.2070312 5 L 8.2558594 5 L 18.033203 19 L 16.001953 19 L 6.2070312 5 z',
accentColor: '#1DA1F2',
},
{
name: 'Spotify',
url: 'https://open.spotify.com/user/4upok9k7rp5xvtnrefeocsknp?si=bc3b935dda9d47ed',
icon: 'M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M16.057,16.406c-0.188,0-0.282-0.094-0.47-0.188 c-1.411-0.847-3.198-1.317-5.079-1.317c-1.035,0-2.163,0.188-3.104,0.376c-0.188,0-0.376,0.094-0.47,0.094 c-0.376,0-0.658-0.282-0.658-0.658c0-0.376,0.188-0.658,0.564-0.658c1.223-0.282,2.446-0.47,3.763-0.47 c2.163,0,4.139,0.564,5.832,1.505c0.188,0.188,0.376,0.282,0.376,0.658C16.621,16.218,16.339,16.406,16.057,16.406z M17.091,13.773 c-0.188,0-0.376-0.094-0.564-0.188c-1.599-1.035-3.857-1.599-6.302-1.599c-1.223,0-2.352,0.188-3.198,0.376 c-0.188,0.094-0.282,0.094-0.47,0.094c-0.47,0-0.753-0.376-0.753-0.753c0-0.47,0.188-0.658,0.658-0.847 c1.129-0.282,2.258-0.564,3.857-0.564c2.634,0,5.079,0.658,7.149,1.881c0.282,0.188,0.47,0.47,0.47,0.753 C17.844,13.396,17.562,13.773,17.091,13.773z M18.314,10.762c-0.188,0-0.282-0.094-0.564-0.188 c-1.881-1.035-4.609-1.693-7.243-1.693c-1.317,0-2.728,0.188-3.951,0.47c-0.188,0-0.282,0.094-0.564,0.094 C5.428,9.54,5.051,9.069,5.051,8.505c0-0.564,0.282-0.847,0.658-0.941C7.215,7.188,8.814,7,10.507,7 c2.916,0,5.926,0.658,8.278,1.881c0.282,0.188,0.564,0.47,0.564,0.941C19.255,10.386,18.878,10.762,18.314,10.762z',
accentColor: '#1BC457',
},
{
name: 'Roblox',
url: 'https://www.roblox.com/users/1435861704',
icon: 'M20.4,5.6L7.6,2.4C7.466,2.366,7.331,2.35,7.199,2.35c-0.739,0-1.411,0.5-1.599,1.25L2.4,16.4 c-0.221,0.884,0.316,1.779,1.2,2l12.8,3.2c0.134,0.034,0.269,0.05,0.401,0.05c0.739,0,1.411-0.5,1.599-1.25l3.2-12.8 C21.821,6.716,21.284,5.821,20.4,5.6z M9.155,12.882l0.749-3c0.114-0.454,0.521-0.758,0.969-0.758c0.08,0,0.162,0.01,0.243,0.03 l3,0.75c0.536,0.134,0.861,0.677,0.728,1.213l-0.749,2.999c-0.114,0.454-0.521,0.758-0.969,0.758c-0.08,0-0.162-0.01-0.243-0.03 l-3-0.75C9.347,13.961,9.021,13.418,9.155,12.882z',
accentColor: '#ffffff',
},
{
name: 'Steam',
url: 'https://steamcommunity.com/id/pufok_/',
icon: 'M 12 2 C 6.82 2 2.5507812 5.95 2.0507812 11 L 7.0195312 13.759766 C 7.5495313 13.289766 8.24 13 9 13 C 9.03 13 9.0500781 13.009766 9.0800781 13.009766 C 9.6800781 12.089766 10.449766 10.919609 11.009766 10.099609 C 11.009766 10.059609 11 10.03 11 10 C 11 8.93 11.419922 7.9299219 12.169922 7.1699219 C 13.679922 5.6599219 16.320078 5.6599219 17.830078 7.1699219 C 18.580078 7.9299219 19 8.93 19 10 C 19 11.07 18.580078 12.070078 17.830078 12.830078 C 17.070078 13.580078 16.07 14 15 14 C 14.97 14 14.930391 13.990234 14.900391 13.990234 C 14.080391 14.550234 12.910234 15.319922 11.990234 15.919922 C 11.990234 15.949922 12 15.97 12 16 C 12 17.66 10.66 19 9 19 C 7.34 19 6 17.66 6 16 C 6 15.83 6.0107812 15.66 6.0507812 15.5 L 2.0898438 13.300781 C 2.7198438 18.210781 6.92 22 12 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 12 2 z M 6.0507812 15.5 L 8.5097656 16.869141 C 8.6697656 16.959141 8.83 17 9 17 C 9.35 17 9.6891406 16.810234 9.8691406 16.490234 C 10.139141 16.000234 9.9702344 15.390859 9.4902344 15.130859 L 7.0195312 13.759766 C 6.5095312 14.189766 6.1607813 14.81 6.0507812 15.5 z M 15 8 A 2 2 0 0 0 15 12 A 2 2 0 0 0 15 8 z',
accentColor: '#056295',
},
{
name: 'Osu!',
url: 'https://osu.ppy.sh/users/33437773',
icon: 'M14.41,13h7.54c-0.5,5.05-4.77,9-9.95,9C6.48,22,2,17.52,2,12C2,6.48,6.48,2,12,2c5.18,0,9.45,3.95,9.95,9h-7.54 l1.83-1.83c0.39-0.39,0.39-1.02,0-1.41c-0.39-0.39-1.02-0.39-1.41,0L13,9.59V7c0-0.55-0.45-1-1-1s-1,0.45-1,1v2.59L9.17,7.76 c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41L9.59,11H7c-0.55,0-1,0.45-1,1s0.45,1,1,1h2.59l-1.83,1.83 c-0.39,0.39-0.39,1.02,0,1.41c0.19,0.2,0.45,0.3,0.7,0.3c0.26,0,0.52-0.1,0.71-0.3L11,14.41V17c0,0.55,0.45,1,1,1s1-0.45,1-1 v-2.59l1.83,1.83c0.19,0.2,0.45,0.3,0.71,0.3c0.25,0,0.51-0.1,0.7-0.3c0.39-0.39,0.39-1.02,0-1.41L14.41,13z',
accentColor: '#F462A3',
},
{
name: 'Twitch',
url: 'https://www.twitch.tv/pufokx',
icon: 'M 5.8730469 2 C 5.5530469 2 5.2524531 2.1521094 5.0644531 2.4121094 L 2.1914062 6.375 C 2.0674063 6.546 2 6.7518906 2 6.9628906 L 2 19 C 2 19.552 2.448 20 3 20 L 7 20 L 7 22 C 7 22.552 7.448 23 8 23 L 9.5859375 23 C 9.8509375 23 10.104969 22.895031 10.292969 22.707031 L 12.707031 20.292969 C 12.894031 20.104969 13.149062 20 13.414062 20 L 16.585938 20 C 16.850938 20 17.104969 19.895031 17.292969 19.707031 L 21.707031 15.292969 C 21.895031 15.105969 22 14.850938 22 14.585938 L 22 3 C 22 2.448 21.552 2 21 2 L 5.8730469 2 z M 6 4 L 20 4 L 20 13 L 17 16 L 12 16 L 9 19 L 9 16 L 6 16 L 6 4 z M 12 7 C 11.448 7 11 7.448 11 8 L 11 11 C 11 11.552 11.448 12 12 12 C 12.552 12 13 11.552 13 11 L 13 8 C 13 7.448 12.552 7 12 7 z M 17 7 C 16.448 7 16 7.448 16 8 L 16 11 C 16 11.552 16.448 12 17 12 C 17.552 12 18 11.552 18 11 L 18 8 C 18 7.448 17.552 7 17 7 z',
accentColor: '#6441A5',
},
{
name: 'YouTube',
url: 'https://www.youtube.com/@pufok',
icon: 'M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 c-0.86,0.23-1.538,0.908-1.768,1.768C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.861-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,14.598V9.402c0-0.385,0.417-0.625,0.75-0.433l4.5,2.598c0.333,0.192,0.333,0.674,0,0.866l-4.5,2.598 C10.417,15.224,10,14.983,10,14.598z',
accentColor: '#FF0033',
},
{
name: 'Minecraft',
url: 'https://namemc.com/profile/furrmeow',
icon: 'M20,3H4C3.447,3,3,3.448,3,4v16c0,0.553,0.447,1,1,1h16c0.553,0,1-0.447,1-1V4C21,3.448,20.553,3,20,3z M11,16H9v2H7v-2h2 v-2h2V16z M15,19h-2v-2h2V19z M17,15h-2v-2h2V15z M19,7h-2v2h-2V7h-2v4h-2V7H9v2H7V8H5V5h2h2h2h2h2h2h2V7z',
accentColor: '#436E38',
},
];
return (
<div className="page contact">
<h1>Контакты</h1>
<p>можешь найти меня тут:</p>
<ul>
<li>
<a
href="https://discord.com/users/539167320753438760"
target="_blank"
rel="noreferrer"
>
Discord
</a>
</li>
<li>
<a
href="https://bsky.app/profile/pufok.gay"
target="_blank"
rel="noreferrer"
>
Bsky
</a>
</li>
<li>
<a href="https://x.com/pufok_" target="_blank" rel="noreferrer">
Twitter (aka 𝕏)
</a>
</li>
<li>
<a href="https://git.gay/pufok" target="_blank" rel="noreferrer">
Git.gay
</a>
</li>
<li>
<a
href="https://open.spotify.com/user/4upok9k7rp5xvtnrefeocsknp?si=bc3b935dda9d47ed"
target="_blank"
rel="noreferrer"
>
Spotify
</a>
</li>
<li>
<a
href="https://www.roblox.com/users/1435861704"
target="_blank"
rel="noreferrer"
>
Roblox
</a>
</li>
<li>
<a
href="https://steamcommunity.com/id/pufok_/"
target="_blank"
rel="noreferrer"
>
Steam
</a>
</li>
<li>
<a
href="https://osu.ppy.sh/users/33437773"
target="_blank"
rel="noreferrer"
>
Osu!
</a>
</li>
<li>
<a
href="https://www.twitch.tv/pufokx"
target="_blank"
rel="noreferrer"
>
Twitch
</a>
</li>
<li>
<a
href="https://www.youtube.com/@pufok"
target="_blank"
rel="noreferrer"
>
YouTube
</a>
</li>
<li>
<a
href="https://namemc.com/profile/furrmeow"
target="_blank"
rel="noreferrer"
>
Minecraft
</a>
</li>
<ul class="contact-list">
{contacts.map((contact, index) => (
<li key={index} style={{ '--accent-color': contact.accentColor }}>
<a
href={contact.url}
title={contact.url}
target="_blank"
rel="noreferrer"
>
<svg
className="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d={contact.icon} />
</svg>
{contact.name}
</a>
</li>
))}
</ul>
<h1>Кнопочки</h1>
<p>интересные кнопочки на другие ресурсы:</p>
<a href="https://pufok.gay/" target="_blank" title="pufok.gay" rel="noreferrer">
<img
src="https://pufok.gay/PublicResources/webring.png"
alt="pufok.gay"
></img>
</a>
<div class="button-group">
<a
href="https://pufok.gay/"
target="_blank"
title="pufok.gay"
rel="noreferrer"
>
<img
src="https://pufok.gay/PublicResources/webring.png"
alt="pufok.gay"
/>
</a>
<a
href="https://dafoxer.pufok.gay/"
target="_blank"
title="dafoxer.pufok.gay"
rel="noreferrer"
>
<img
src="https://dafoxer.pufok.gay/PublicResources/webring.png"
alt="dafoxer.pufok.gay"
/>
</a>
</div>
<h1>Веб-кольца</h1>
<p>цольца, в которых я состою:</p>
<div class="webring-group">
<div class="webring-ring">
<h2>
<a
href="https://webring.floof.company"
target="_blank"
title="webring"
rel="noreferrer"
>
Floof Webring
</a>
</h2>
<div class="webring-links">
<a
href="https://webring.floof.company/prev?from=pufok.gay"
target="_blank"
title="previous"
rel="noreferrer"
>
&lt;&lt;&lt;
</a>
<a
href="https://webring.floof.company/random"
target="_blank"
title="random"
rel="noreferrer"
>
???
</a>
<a
href="https://webring.floof.company/next?from=pufok.gay"
target="_blank"
title="next"
rel="noreferrer"
>
&gt;&gt;&gt;
</a>
</div>
</div>
</div>
</div>
);
}

View File

@ -1,10 +1,14 @@
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<div className="page home">
<h1>Добро пожаловать на мой сайт!</h1>
<p>он пока еще в разработке.. но уже выглядит более взрачным, нежели его первая версия) но все же, еще не полностью готов! наберитесь терпения, друзья :з</p>
<p>ты можешь перейти в раздел <Link to="/about">обо мне</Link>, чтобы узнать про меня больше или посетить <Link to="/contact">контакты</Link>!</p>
<p>сайт имеет репозиторий на <a href="https://git.gay/DeltaStudio/PufokReactApp/" title="git.gay репозиторий" target="_blank" rel="noreferrer">git.gay</a> (на момент написания, сайт на обслуживании и не работает)</p>
<p>последний глобальный апдейт: 18.04.2025 3:40</p>
</div>
);
}

View File

@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
function NotFound() {
return (
<div className="page not-found">
<h1>404</h1>
<p>Страница не найдена</p>
<h1>мэъ.. 404 нот фаунд!</h1>
<p>Страница не найдена! Ты точно ввел верный адрес?</p>
<Link to="/">На главную</Link>
</div>
);