added portfolio, router example
This commit is contained in:
szabomarton
parent
6339961ac5
commit
74c373aa2b
9
react_alap/mai/package-lock.json
generated
9
react_alap/mai/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
83
react_alap/mai/src/25_01_28/CSS/Projects.css
Normal file
83
react_alap/mai/src/25_01_28/CSS/Projects.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
67
react_alap/mai/src/25_01_28/CSS/Welcome.css
Normal file
67
react_alap/mai/src/25_01_28/CSS/Welcome.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
26
react_alap/mai/src/25_01_28/Welcome.jsx
Normal file
26
react_alap/mai/src/25_01_28/Welcome.jsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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/>}/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user