added portfolio, router example

react_alap/mai/package-lock.json

@@ -12,6 +12,7 @@
         "cra-template": "1.2.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.4.0",
         "react-router-dom": "^7.1.3",
         "react-scripts": "^5.0.1"
       }
@@ -13710,6 +13711,14 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-icons": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

react_alap/mai/package.json

@@ -6,6 +6,7 @@
     "cra-template": "1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.3",
     "react-scripts": "^5.0.1"
   },

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

@@ -0,0 +1,83 @@
+/* Alap konténer */
+.projects-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 */
+  .projects-title {
+    font-size: 36px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  .projects-subtitle {
+    font-size: 18px;
+    margin-bottom: 30px;
+    color: #aaffaa; /* Halványabb zöld */
+  }
+  
+  /* Projektek lista */
+  .projects-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
+  /* Projekt kártya */
+  .project-card {
+    background-color: #111;
+    border: 2px solid #00ff00;
+    padding: 20px;
+    border-radius: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .project-card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 12px rgba(0, 255, 0, 0.5);
+  }
+  
+  /* Projekt cím */
+  .project-title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  
+  /* Projekt leírás */
+  .project-description {
+    font-size: 16px;
+    margin-bottom: 15px;
+    color: #aaffaa;
+  }
+  
+  /* Tech badge */
+  .project-tech {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+  
+  .tech-badge {
+    background-color: #00ff00;
+    color: black;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-weight: bold;
+    font-size: 14px;
+  }
+  
+  /* Mobilbarát dizájn */
+  @media (max-width: 768px) {
+    .projects-list {
+      grid-template-columns: 1fr;
+    }
+  }
+  

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

@@ -0,0 +1,67 @@
+/* Alap konténer */
+.welcome-container {
+    background-color: black; /* Fekete háttér */
+    color: #00ff00; /* Zöld szöveg */
+    text-align: center;
+    padding: 50px 20px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  /* Cím */
+  .welcome-title {
+    font-size: 42px;
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+  
+  /* Leírás */
+  .welcome-text {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: #aaffaa; /* Halványabb zöld */
+    max-width: 600px;
+  }
+  
+  /* Gombok */
+  .welcome-buttons {
+    margin-top: 20px;
+  }
+  
+  .welcome-btn {
+    background-color: #00ff00;
+    color: black;
+    text-decoration: none;
+    font-size: 18px;
+    font-weight: bold;
+    padding: 10px 20px;
+    border-radius: 8px;
+    margin: 10px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    display: inline-block;
+  }
+  
+  .welcome-btn:hover {
+    background-color: #00cc00;
+    transform: scale(1.1);
+  }
+  
+  /* Mobilbarát */
+  @media (max-width: 768px) {
+    .welcome-title {
+      font-size: 32px;
+    }
+  
+    .welcome-text {
+      font-size: 16px;
+    }
+  
+    .welcome-btn {
+      font-size: 16px;
+      padding: 8px 16px;
+    }
+  }
+  

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

@@ -4,6 +4,7 @@ import Menu from "./Menu";
 import "./CSS/Contact.css";
 import { FaFacebook, FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
 
+
 function Connection(){
     return (
         <>
@@ -37,7 +38,7 @@ function Connection(){
         <div className="contact-item">
           <FaGithub className="contact-icon" />
           <a
-            href="https://github.com/digivagyok"
+            href="https://github.com/playermarci"
             target="_blank"
             rel="noopener noreferrer"
           >

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

@@ -1,14 +1,65 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import Menu from "./Menu";
+import "./CSS/Projects.css";
+
 
 function Project(){
+    const projects = [
+        {
+          title: "Okos Otthon Rendszer (Arduino + Raspberry Pi)",
+          description:
+            "Egy IoT alapú rendszer, amely okos otthoni eszközöket (lámpák, termosztát, ajtózár) vezérel egy Raspberry Pi központtal és Arduino szenzorokkal.",
+          tech: ["Arduino", "Raspberry Pi", "MQTT", "Python", "React"],
+        },
+        {
+          title: "Automatizált Képfelismerő Rendszer",
+          description:
+            "Egy mesterséges intelligencia alapú képfelismerő alkalmazás, amely képes tárgyakat és arcokat felismerni, majd az eredményt valós időben feldolgozni.",
+          tech: ["Python", "OpenCV", "TensorFlow", "Flask", "React"],
+        },
+        {
+          title: "Intelligens Öntözőrendszer",
+          description:
+            "Egy önműködő öntözőrendszer, amely talajnedvesség-mérő szenzorok segítségével optimalizálja a vízhasználatot, és mobilalkalmazáson keresztül vezérelhető.",
+          tech: ["Arduino", "ESP8266", "Node.js", "React Native"],
+        },
+        {
+          title: "Raspberry Pi Időjárás Állomás",
+          description:
+            "Egy saját időjárás-állomás, amely hőmérsékletet, páratartalmat és légnyomást mér, és valós időben jeleníti meg az adatokat egy webes dashboardon.",
+          tech: ["Raspberry Pi", "DHT22 szenzor", "Flask", "React", "MongoDB"],
+        },
+      ];
+    
       return (
         <>
             <Menu/>
-            <h1>Projektek</h1>
+        
+        <div className="projects-container">
+          <h1 className="projects-title">Projektek</h1>
+          <p className="projects-subtitle">
+            Itt találhatók néhány általam készített projekt, amelyek beágyazott
+            rendszereket és automatizációt használnak.
+          </p>
+          <div className="projects-list">
+            {projects.map((project, index) => (
+              <div key={index} className="project-card">
+                <h2 className="project-title">{project.title}</h2>
+                <p className="project-description">{project.description}</p>
+                <div className="project-tech">
+                  {project.tech.map((tech, i) => (
+                    <span key={i} className="tech-badge">
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
         </>
-    )
+      );
 }
 
 export default Project;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import "./CSS/Welcome.css";
+import { Link } from "react-router-dom";
+
+const Welcome = () => {
+  return (
+    <div className="welcome-container">
+      <h1 className="welcome-title">Üdvözöllek a Portfóliómban!</h1>
+      <p className="welcome-text">
+        Örülök, hogy ellátogattál az oldalamra! Itt betekintést nyerhetsz a 
+        projektjeimbe, megismerheted a munkáimat, és kapcsolatba léphetsz velem.
+      </p>
+      <p className="welcome-text">
+        Ha érdekelnek a beágyazott rendszerek, az automatizáció vagy a 
+        mesterséges intelligencia, akkor jó helyen jársz!
+      </p>
+      <div className="welcome-buttons">
+        <Link to="/about" className="welcome-btn">Rólam</Link>
+        <Link to="/projects" className="welcome-btn">Projektek</Link>
+        <Link to="/contact" className="welcome-btn">Kapcsolat</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;

react_alap/mai/src/App.js

@@ -4,13 +4,14 @@ import Menu from "./25_01_28/Menu";
 import About from "./25_01_28/About";
 import Connection from "./25_01_28/Connection";
 import Project from "./25_01_28/Projects";
+import Welcome from "./25_01_28/Welcome";
 
 
 function App() {
   return (
     <>
     <Routes>
-      <Route path="/" element={<Menu/>}/>
+      <Route path="/" element={<Welcome/>}/>
       <Route path="about" element={<About/>}/>
       <Route path="connection" element={<Connection/>}/>
       <Route path="projects" element={<Project/>}/>