🏳️‍🌈 PRIDE MONTH UPDATE!

- and some other visuals

src/App.css

@@ -71,6 +71,39 @@ body {
   margin-top: auto;
 }
 
+/* ГЛАВНАЯ! */
+
+.header {
+  text-align: center;
+  display: flex;
+  align-items: center; /* Выравниваем элементы по центру по вертикали */
+  gap: 0.5rem;
+  justify-content: center; /* Центрируем содержимое по горизонтали */
+}
+
+.paragraph {
+  text-align: center;
+  display: flex;
+  align-items: center; /* Выравниваем элементы по центру по вертикали */
+  gap: 0.5rem;
+  justify-content: center; /* Центрируем содержимое по горизонтали */
+}
+
+/* PRIDE! 🏳️‍🌈 */
+
+.pride {
+  width: 2.3rem;
+  height: 2.3rem;
+  vertical-align: middle; /* Выравнивание по центру относительно текста */
+}
+
+.pride-h {
+  display: flex; /* Используем Flexbox для inline-размещения */
+  align-items: center; /* Выравниваем элементы по центру по вертикали */
+  gap: 0.5rem; /* Отступ между текстом и изображением */
+  justify-content: center; /* Центрируем содержимое по горизонтали */
+}
+
 /* КОНТАКТЫ! */
 
 .contact-list {

src/locales/en.json

@@ -14,6 +14,7 @@
         },
         "home": {
             "h1": "Haaiii!",
+            "h2": "Happy pride month everyone!",
             "p1": "you are on my network where you can learn more about me! although the site is still under development, but it will be up soon..... be patient, friends :з",
             "p2": {
                 "p21": "you can go to the section",

src/locales/ru.json

@@ -14,6 +14,7 @@
         },
         "home": {
             "h1": "Приветик!",
+            "h2": "Счастливого прайд месяца всем!",
             "p1": "ты находишься на моей сети, где сможешь узнать про меня получше! хоть сайт все еще в разработке, но скоро все будет... наберитесь терпения, друзья :з",
             "p2": {
                 "p21": "ты можешь перейти в раздел",

src/pages/About.js

@@ -6,9 +6,9 @@ function About() {
 
   return (
     <div className="page about">
-      <h1>{translations[language].pages.about.h1}</h1>
+      <h1 className='header'>{translations[language].pages.about.h1}</h1>
-      <p>{translations[language].pages.about.p1}</p>
+      <p className='paragraph'>{translations[language].pages.about.p1}</p>
-      <p>{translations[language].pages.about.p2}</p>
+      <p className='paragraph'>{translations[language].pages.about.p2}</p>
     </div>
   );
 }

src/pages/Contact.js

@@ -69,11 +69,11 @@ function Contact() {
 
   return (
     <div className="page contact">
-      <h1>{translations[language].pages.contact.h1}</h1>
+      <h1 className="header">{translations[language].pages.contact.h1}</h1>
-      <p>{translations[language].pages.contact.p1}</p>
+      <p className="paragraph">{translations[language].pages.contact.p1}</p>
       <ul class="contact-list">
         {contacts.map((contact, index) => (
-          <li key={index} style={{ '--accent-color': contact.accentColor }}>
+          <li className='paragraph' key={index} style={{ '--accent-color': contact.accentColor }}>
             <a
               href={contact.url}
               title={contact.url}
@@ -92,9 +92,9 @@ function Contact() {
           </li>
         ))}
       </ul>
-      <h1>{translations[language].pages.contact.h2}</h1>
+      <h1 className="header">{translations[language].pages.contact.h2}</h1>
-      <p>{translations[language].pages.contact.p2}</p>
+      <p className="paragraph">{translations[language].pages.contact.p2}</p>
-      <div class="button-group">
+      <div class="button-group paragraph">
         <a
           href="https://pufok.gay/"
           target="_blank"
@@ -129,10 +129,10 @@ function Contact() {
           />
         </a>
       </div>
-      <h1>{translations[language].pages.contact.h3}</h1>
+      <h1 className="header">{translations[language].pages.contact.h3}</h1>
-      <p>{translations[language].pages.contact.p3}</p>
+      <p className="paragraph">{translations[language].pages.contact.p3}</p>
       <div class="webring-group">
-        <div class="webring-ring">
+        <div class="webring-ring paragraph">
           <h2>
             <a
               href="https://webring.floof.company"

src/pages/Home.js

@@ -7,13 +7,37 @@ function Home() {
 
   return (
     <div className="page home">
-      <h1>{translations[language].pages.home.h1}</h1>
+      <h1 className='header'>{translations[language].pages.home.h1}</h1>
-      <p>{translations[language].pages.home.p1}</p>
+      <p className='paragraph'>{translations[language].pages.home.p1}</p>
-      <p>{translations[language].pages.home.p2.p21} <Link to="/about">{translations[language].pages.home.p2.p22}</Link>{translations[language].pages.home.p2.p23} <Link to="/contact">{translations[language].pages.home.p2.p24}</Link>!</p>
+      <p className='paragraph'>
-      <p>{translations[language].pages.home.p3} <a href="https://git.gay/DeltaStudio/PufokReactApp/" title="git.gay" target="_blank" rel="noreferrer">git.gay</a></p>
+        {translations[language].pages.home.p2.p21}{' '}
-      <p>{translations[language].pages.home.p4}: 20.05.2025 4:11 UTC +3</p>
+        <Link to="/about">{translations[language].pages.home.p2.p22}</Link>
+        {translations[language].pages.home.p2.p23}{' '}
+        <Link to="/contact">{translations[language].pages.home.p2.p24}!</Link>
+      </p>
+      <p className='paragraph'>
+        {translations[language].pages.home.p3}{' '}
+        <a
+          href="https://git.gay/DeltaStudio/PufokReactApp/"
+          title="git.gay"
+          target="_blank"
+          rel="noreferrer"
+        >
+          git.gay
+        </a>
+      </p>
+      <p className='paragraph'>{translations[language].pages.home.p4}: 20.05.2025 4:11 UTC +3</p>
+      <br />
+      <h1 className="pride-h">
+        {translations[language].pages.home.h2}{' '}
+        <img
+          className="pride"
+          src="https://pufok.gay/PublicResources/pride.png "
+          alt="pride2025"
+        />
+      </h1>
     </div>
   );
 }
 
-export default Home;
+export default Home;

src/pages/Projects.js

@@ -6,9 +6,9 @@ function Projects() {
 
   return (
     <div className="page projects">
-      <h1>{translations[language].pages.projects.h1}</h1>
+      <h1 className='header'>{translations[language].pages.projects.h1}</h1>
       <ul>
-        <li>{translations[language].pages.projects.p1}</li>
+        <li className='paragraph'>{translations[language].pages.projects.p1}</li>
       </ul>
     </div>
   );