diff --git a/react_alap/mai/package-lock.json b/react_alap/mai/package-lock.json index 9e3b51eb..0a614afc 100644 --- a/react_alap/mai/package-lock.json +++ b/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" }, diff --git a/react_alap/mai/src/25_01_28/About.jsx b/react_alap/mai/src/25_01_28/About.jsx new file mode 100644 index 00000000..e5ff4110 --- /dev/null +++ b/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 ( + <> + +
+
+
+

Rólam

+

+ Ü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. +

+

+ 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. +

+

+ 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. +

+
+
+ Rólam +
+
+
+ + + ) +} + +export default About; \ No newline at end of file diff --git a/react_alap/mai/src/25_01_28/CSS/About.css b/react_alap/mai/src/25_01_28/CSS/About.css new file mode 100644 index 00000000..a06d847a --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/react_alap/mai/src/25_01_28/CSS/Contact.css b/react_alap/mai/src/25_01_28/CSS/Contact.css new file mode 100644 index 00000000..8ccf57f9 --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/react_alap/mai/src/25_01_28/CSS/menu.css b/react_alap/mai/src/25_01_28/CSS/menu.css new file mode 100644 index 00000000..1b3cee67 --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/react_alap/mai/src/25_01_28/Connection.jsx b/react_alap/mai/src/25_01_28/Connection.jsx new file mode 100644 index 00000000..98ab7d84 --- /dev/null +++ b/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 ( + <> + +
+

Kapcsolat

+

+ Itt megtalálod az elérhetőségeimet és kapcsolatba léphetsz velem. +

+
+
+ + + Facebook - digivagyok + +
+
+ + + LinkedIn - digivagyok + +
+
+ + + GitHub - digivagyok + +
+
+ + + Twitter - digivagyok + +
+
+
+ + ) +} + +export default Connection; \ No newline at end of file diff --git a/react_alap/mai/src/25_01_28/Menu.jsx b/react_alap/mai/src/25_01_28/Menu.jsx new file mode 100644 index 00000000..5ce76ba3 --- /dev/null +++ b/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 ( + <> + + + ) +} + +export default Menu; \ No newline at end of file diff --git a/react_alap/mai/src/25_01_28/Projects.jsx b/react_alap/mai/src/25_01_28/Projects.jsx new file mode 100644 index 00000000..9f8aca1f --- /dev/null +++ b/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 ( + <> + +

Projektek

+ + ) +} + +export default Project; \ No newline at end of file diff --git a/react_alap/mai/src/App.js b/react_alap/mai/src/App.js index 2877f7dd..5650c05b 100644 --- a/react_alap/mai/src/App.js +++ b/react_alap/mai/src/App.js @@ -1,39 +1,20 @@ import {Routes, Route} from "react-router-dom"; -import logo from './logo.svg'; -import './App.css'; -import Auto from './Auto'; -import Szamlalo from './Szamlalo'; -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"; +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"; function App() { return ( <> -<<<<<<< HEAD - -======= - }> - }/> - }/> + }/> + }/> + }/> + }/> ->>>>>>> d8a5aeab5db23e6d24cad000309d769ffc959133 ); }