added orai portfolio
This commit is contained in:
szabomarton
parent
f84ede179c
commit
6339961ac5
1
react_alap/mai/package-lock.json
generated
1
react_alap/mai/package-lock.json
generated
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
37
react_alap/mai/src/25_01_28/About.jsx
Normal file
37
react_alap/mai/src/25_01_28/About.jsx
Normal file
|
|
@ -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;
|
||||
60
react_alap/mai/src/25_01_28/CSS/About.css
Normal file
60
react_alap/mai/src/25_01_28/CSS/About.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
68
react_alap/mai/src/25_01_28/CSS/Contact.css
Normal file
68
react_alap/mai/src/25_01_28/CSS/Contact.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
43
react_alap/mai/src/25_01_28/CSS/menu.css
Normal file
43
react_alap/mai/src/25_01_28/CSS/menu.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
63
react_alap/mai/src/25_01_28/Connection.jsx
Normal file
63
react_alap/mai/src/25_01_28/Connection.jsx
Normal file
|
|
@ -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;
|
||||
25
react_alap/mai/src/25_01_28/Menu.jsx
Normal file
25
react_alap/mai/src/25_01_28/Menu.jsx
Normal file
|
|
@ -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;
|
||||
14
react_alap/mai/src/25_01_28/Projects.jsx
Normal file
14
react_alap/mai/src/25_01_28/Projects.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
<SW/>
|
||||
=======
|
||||
<Routes>
|
||||
<Route path="/" element={<Fooldal/>}></Route>
|
||||
<Route path="kaki" element={<Kaki/>}/>
|
||||
<Route path="urulek" element={<Urulek/>}/>
|
||||
<Route path="/" element={<Menu/>}/>
|
||||
<Route path="about" element={<About/>}/>
|
||||
<Route path="connection" element={<Connection/>}/>
|
||||
<Route path="projects" element={<Project/>}/>
|
||||
</Routes>
|
||||
>>>>>>> d8a5aeab5db23e6d24cad000309d769ffc959133
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user