added orai portfolio

react_alap/mai/src/25_01_28/About.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Menu from "./Menu";
+import "./CSS/About.css"
+
+function About(){
+    return (
+        <>
+            <Menu/>
+            <div className="about-container">
+                <div className="about-content">
+                    <div className="about-text">
+                        <h1 className="about-title">Rólam</h1>
+                        <p>
+                            Üdvözöllek az oldalamon! Egy olyan ember vagyok, aki mindig törekszik a legjobbra, legyen szó bármilyen projektről vagy kihívásról. Szeretem a problémák megoldását és az új ismeretek elsajátítását, hiszen hiszek abban, hogy a fejlődés az egyik legfontosabb érték az életben.
+                        </p>
+                        <p>
+                            Szerény hozzáállásom mellett arra törekszem, hogy munkáim mindig a legmagasabb színvonalat képviseljék. Igényességem abban mutatkozik meg, hogy minden részletre odafigyelek, hiszen a minőség számomra nem opcionális, hanem alapkövetelmény.
+                        </p>
+                        <p>
+                            Nyitott vagyok az új ötletekre, és szívesen dolgozom együtt olyan emberekkel, akik hasonlóan elkötelezettek a kiválóság iránt. A kreativitás és a logikus gondolkodás számomra kéz a kézben jár, és ezt a szemléletet alkalmazom minden egyes projektemben.
+                        </p>
+                    </div>
+                    <div className="about-image">
+                        <img
+                            src="https://i.seadn.io/s/raw/files/303c32013d2169afde36ca77c14087be.webp?auto=format&dpr=1&w=1000" // Itt helyettesítsd a saját képed URL-jével
+                            alt="Rólam"
+                        />
+                    </div>
+                </div>
+            </div>
+
+        </>
+    )
+}
+
+export default About;

react_alap/mai/src/25_01_28/CSS/About.css

@@ -0,0 +1,60 @@
+/* Alap konténer */
+.about-container {
+    background-color: black; /* Fekete háttér */
+    color: #00ff00; /* Zöld szöveg */
+    padding: 40px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+  
+  /* Tartalom elrendezése */
+  .about-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Kép és szöveg 50-50% szélességen */
+    gap: 20px;
+    align-items: center;
+    max-width: 1200px;
+    width: 100%;
+  }
+  
+  /* Szöveg stílusok */
+  .about-text {
+    font-size: 18px;
+    line-height: 1.8;
+  }
+  
+  .about-title {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #00ff00; /* Zöld szín */
+  }
+  
+  /* Kép stílusok */
+  .about-image img {
+    width: 100%;
+    border: 5px solid #00ff00; /* Zöld keret */
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Árnyék */
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  /* Hover effekt a képre */
+  .about-image img:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.8);
+  }
+  
+  /* Mobilbarát elrendezés */
+  @media (max-width: 768px) {
+    .about-content {
+      grid-template-columns: 1fr; /* Egymás alá kerülnek */
+    }
+    .about-image img {
+      max-width: 80%;
+      margin: 0 auto;
+    }
+  }
+  

react_alap/mai/src/25_01_28/CSS/Contact.css

@@ -0,0 +1,68 @@
+/* Alap konténer */
+.contact-container {
+    background-color: black; /* Fekete háttér */
+    color: #00ff00; /* Zöld szöveg */
+    text-align: center;
+    padding: 40px 20px;
+    min-height: 100vh;
+  }
+  
+  /* Cím és alcím stílusok */
+  .contact-title {
+    font-size: 36px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .contact-subtitle {
+    font-size: 18px;
+    margin-bottom: 30px;
+    color: #aaffaa; /* Halványabb zöld */
+  }
+  
+  /* Linkek tartalmazó div */
+  .contact-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+  }
+  
+  /* Egyes kontakt elemek */
+  .contact-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 18px;
+  }
+  
+  .contact-item a {
+    color: #00ff00; /* Zöld linkek */
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+  }
+  
+  .contact-item a:hover {
+    color: #00cc00; /* Hover szín */
+  }
+  
+  /* Ikon stílusok */
+  .contact-icon {
+    font-size: 24px;
+    color: #00ff00;
+    transition: transform 0.3s ease;
+  }
+  
+  .contact-icon:hover {
+    transform: scale(1.2); /* Kicsit nagyobb ikon hover-nél */
+    color: #00cc00;
+  }
+  
+  /* Mobilbarát megjelenés */
+  @media (max-width: 768px) {
+    .contact-links {
+      gap: 15px;
+    }
+  }
+  

react_alap/mai/src/25_01_28/CSS/menu.css

@@ -0,0 +1,43 @@
+/* Navbar alapstílusok */
+.navbar {
+    background-color: black; /* Fekete háttér */
+    padding: 10px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Árnyék */
+  }
+  
+  /* Linkek stílusa */
+  .navbar-links {
+    list-style: none;
+    display: flex;
+    gap: 20px; /* Távolság a linkek között */
+    margin: 0;
+    padding: 0;
+  }
+  
+  .navbar-links li a {
+    color: #00ff00; /* Zöld szín */
+    text-decoration: none;
+    font-size: 18px;
+    font-weight: bold;
+    transition: color 0.3s ease;
+  }
+  
+  /* Hover effekt */
+  .navbar-links li a:hover {
+    color: #00cc00; /* Sötétebb zöld a hover-nél */
+  }
+  
+  /* Mobilbarát design */
+  @media (max-width: 768px) {
+    .navbar {
+      flex-direction: column; /* Függőleges elrendezés kisebb kijelzőn */
+    }
+    .navbar-links {
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+  

react_alap/mai/src/25_01_28/Connection.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Menu from "./Menu";
+import "./CSS/Contact.css";
+import { FaFacebook, FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
+
+function Connection(){
+    return (
+        <>
+            <Menu/>
+            <div className="contact-container">
+      <h1 className="contact-title">Kapcsolat</h1>
+      <p className="contact-subtitle">
+        Itt megtalálod az elérhetőségeimet és kapcsolatba léphetsz velem.
+      </p>
+      <div className="contact-links">
+        <div className="contact-item">
+          <FaFacebook className="contact-icon" />
+          <a
+            href="https://www.facebook.com/digivagyok"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Facebook - digivagyok
+          </a>
+        </div>
+        <div className="contact-item">
+          <FaLinkedin className="contact-icon" />
+          <a
+            href="https://www.linkedin.com/in/digivagyok"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            LinkedIn - digivagyok
+          </a>
+        </div>
+        <div className="contact-item">
+          <FaGithub className="contact-icon" />
+          <a
+            href="https://github.com/digivagyok"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            GitHub - digivagyok
+          </a>
+        </div>
+        <div className="contact-item">
+          <FaTwitter className="contact-icon" />
+          <a
+            href="https://twitter.com/digivagyok"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Twitter - digivagyok
+          </a>
+        </div>
+      </div>
+    </div>
+        </>
+    )
+}
+
+export default Connection;

react_alap/mai/src/25_01_28/Menu.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import "./CSS/menu.css";
+
+function Menu(){
+    return (
+        <>
+            <nav className="navbar">
+                <ul className="navbar-links">
+                    <li>
+                        <Link to="./../about">Rólam</Link>
+                    </li>
+                    <li>
+                        <Link to="./../connection">Kapcsolat</Link>
+                    </li>
+                    <li>
+                        <Link to="./../projects">Projektek</Link>
+                    </li>
+                </ul>
+            </nav>
+        </>
+    )
+}
+
+export default Menu;

react_alap/mai/src/25_01_28/Projects.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Menu from "./Menu";
+
+function Project(){
+    return (
+        <>
+            <Menu/>
+            <h1>Projektek</h1>
+        </>
+    )
+}
+
+export default Project;