added orai portfolio

react_alap/mai/package-lock.json

@@ -13752,6 +13752,7 @@
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
       "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
       "dependencies": {
         "react-router": "7.1.3"
       },

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;

react_alap/mai/src/App.js

@@ -1,39 +1,20 @@
 import {Routes, Route} from "react-router-dom";
 
-import logo from './logo.svg';
+import Menu from "./25_01_28/Menu";
-import './App.css';
+import About from "./25_01_28/About";
-import Auto from './Auto';
+import Connection from "./25_01_28/Connection";
-import Szamlalo from './Szamlalo';
+import Project from "./25_01_28/Projects";
-import Adatlekero from './Adatlekero';
-import Keslelteto from './Keslelteto';
-import Idozito from './Idozito';
-import ContextPelda from './ContextPelda';
-import UseRefPelda from './UseRefPelda';
-import Counter from './25_01_21/Counter';
-import CounterProvider from './25_01_21/CounterContext';
-import SW from './25_01_21/SW';
-
-import Home from './20250124/Home';
-import Contact from './20250124/Contact';
-import About from './20250124/About';
-
-import Fooldal from "./20250124/OSZTV/Fooldal";
-import Kaki from "./20250124/OSZTV/Kaki";
-import Urulek from "./20250124/OSZTV/Urulek";
 
 
 function App() {
   return (
     <>
-<<<<<<< HEAD
-      <SW/>
-=======
     <Routes>
-      <Route path="/" element={<Fooldal/>}></Route>
+      <Route path="/" element={<Menu/>}/>
-      <Route path="kaki" element={<Kaki/>}/>
+      <Route path="about" element={<About/>}/>
-      <Route path="urulek" element={<Urulek/>}/>
+      <Route path="connection" element={<Connection/>}/>
+      <Route path="projects" element={<Project/>}/>
     </Routes>
->>>>>>> d8a5aeab5db23e6d24cad000309d769ffc959133
     </>
   );
 }