diff --git a/app/App.css b/app/App.css index ade324e..cc0b3e2 100644 --- a/app/App.css +++ b/app/App.css @@ -1,5 +1,157 @@ /* app.css */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Basic body styling */ +body { + background-color: #f4f4f4; + color: #333; + line-height: 1.6; + display: flex; + flex-direction: column; + min-height: 100vh; + margin-top: 10em; + background-image: url(/img/image.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* Header styling */ +.header { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; + position: fixed; + top: 0; +} + +.header h1 { + font-size: 24px; + margin-bottom: 10px; +} + +.header nav { + margin-top: 10px; +} + +.header button { + margin: 0 10px; + padding: 10px 20px; + border-radius: 4px; + background-color: #4a90e2; + color: #fff; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + border: none; +} + +.header button:hover { + background-color: #357ab8; +} + +/* Content container */ +.content { + padding: 20px; + flex: 1; + text-align: center; + max-width: 1200px; + margin: 0 auto; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* Card styles */ +section .cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + margin-top: 50px; +} + +section .card { + text-align: center; + list-style: none; + background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ + border: 1px solid #3a4971; /* Slightly lighter border for card edges */ + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +section .card:hover { + transform: translateY(-5px); /* Slight lift effect */ + box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */ +} + +section .card img { + height: 80px; /* Image size */ + width: 80px; + object-fit: cover; + border-radius: 50%; /* Circular image */ + margin: 0 auto 15px; + box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */ +} + +section .card h3 { + margin: 10px 0; + font-size: 1.2em; + font-weight: bold; + color: #ffdd55; /* Star yellow for card titles */ + text-shadow: 0 0 10px #ffdd55; /* Glow effect */ +} + +section .card p { + flex-grow: 1; + color: #c7d5e0; /* Light gray-blue for card content */ + margin-bottom: 10px; +} + +/* Responsive layout */ +@media (max-width: 768px) { + .header h1 { + font-size: 20px; + } + + .header button { + margin: 5px 0; + padding: 10px; + font-size: 14px; + } + + .content { + padding: 15px; + margin-top: 15px; + } + + section .card { + padding: 12px; /* Adjusted padding */ + } + + section .card img { + height: 60px; /* Adjusted height */ + width: 60px; /* Adjusted width */ + border-radius: 8px; /* Adjusted border-radius */ + } +} +/* app.css */ + * { margin: 0; padding: 0; @@ -64,6 +216,58 @@ body { margin-top: 20px; } +/* Card styles */ +section.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + margin-top: 50px; +} + +section.card { + text-align: center; + list-style: none; + background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ + border: 1px solid #3a4971; /* Slightly lighter border for card edges */ + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +section.card:hover { + transform: translateY(-5px); /* Slight lift effect */ + box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */ +} + +section.card img { + height: 80px; /* Image size */ + width: 80px; + object-fit: cover; + border-radius: 50%; /* Circular image */ + margin: 0 auto 15px; + box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */ +} + +section.card h3 { + margin: 10px 0; + font-size: 1.2em; + font-weight: bold; + color: #ffdd55; /* Star yellow for card titles */ + text-shadow: 0 0 10px #ffdd55; /* Glow effect */ +} + +section.card p { + flex-grow: 1; + color: #c7d5e0; /* Light gray-blue for card content */ + margin-bottom: 10px; +} + /* Responsive layout */ @media (max-width: 768px) { .header h1 { @@ -80,4 +284,175 @@ body { padding: 15px; margin-top: 15px; } + + section.cards {/* app.css */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; } + +/* Basic body styling */ +body { + background-color: #f4f4f4; + color: #333; + line-height: 1.6; + display: flex; + flex-direction: column; + min-height: 100vh; + background-image: url(/img/image.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; +} + +/* Header styling */ +.header { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; + position: fixed; + top: 0; + z-index: 1000; /* Ensure header stays above other content */ +} + +.header h1 { + font-size: 24px; + margin-bottom: 10px; +} + +.header nav { + margin-top: 10px; +} + +.header button { + margin: 0 10px; + padding: 10px 20px; + border-radius: 4px; + background-color: #4a90e2; + color: #fff; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + border: none; +} + +.header button:hover { + background-color: #357ab8; +} + +/* Content container */ +.content { + padding: 20px; + flex: 1; + text-align: center; + max-width: 1200px; + margin: 80px auto 0; /* Adjusted for fixed header height */ + background-color: #fff; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* Card styles */ +section.cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + margin-top: 50px; +} + +section.card { + text-align: center; + list-style: none; + background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */ + border: 1px solid #3a4971; /* Slightly lighter border for card edges */ + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +section.card:hover { + transform: translateY(-5px); /* Slight lift effect */ + box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */ +} + +section.card img { + height: 80px; /* Image size */ + width: 80px; + object-fit: cover; + border-radius: 50%; /* Circular image */ + margin: 0 auto 15px; + box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */ +} + +section.card h3 { + margin: 10px 0; + font-size: 1.2em; + font-weight: bold; + color: #ffdd55; /* Star yellow for card titles */ + text-shadow: 0 0 10px #ffdd55; /* Glow effect */ +} + +section.card p { + flex-grow: 1; + color: #c7d5e0; /* Light gray-blue for card content */ + margin-bottom: 10px; +} + +/* Responsive layout */ +@media (max-width: 768px) { + .header h1 { + font-size: 20px; + } + + .header button { + margin: 5px 0; + padding: 10px; + font-size: 14px; + } + + .content { + padding: 15px; + margin-top: 15px; /* Adjusted for smaller screen size */ + } + + section.cards { + grid-template-columns: 1fr; /* One card per row on mobile */ + } + + section.card { + padding: 12px; /* Adjusted padding */ + } + + section.card img { + height: 60px; /* Adjusted height */ + width: 60px; /* Adjusted width */ + border-radius: 8px; /* Adjusted border-radius */ + } +} + + grid-template-columns: 1fr; /* One card per row on mobile */ + } + + section.card { + padding: 12px; /* Adjusted padding */ + } + + section.card img { + height: 60px; /* Adjusted height */ + width: 60px; /* Adjusted width */ + border-radius: 8px; /* Adjusted border-radius */ + } +} + diff --git a/app/LandingPage.tsx b/app/LandingPage.tsx new file mode 100644 index 0000000..ae6c9f0 --- /dev/null +++ b/app/LandingPage.tsx @@ -0,0 +1,50 @@ +"use client"; +import React from 'react'; +import './App.css'; // Import specific styles for the Home page + +const Home = () => { + return ( + <> +
+

About Us

+

+ We are a group of informatics students from IMS (Informatik Schule Sargans), currently learning React to prepare for an upcoming project. This project will be part of our traineeship at a company, where we'll apply our skills in a real-world setting. Our coursework in React is equipping us with the knowledge and experience needed to excel in this practical opportunity. +

+ +
+
+ + Patrick +

Patrick

+

+ Patrick is a highly skilled programmer with expertise in Java, GDScript, Bash, C, C++, and C#. He excels in developing scalable applications, automating tasks, and crafting interactive games. Additionally, Patrick is proficient in system administration, adeptly managing and optimizing IT infrastructures for smooth and secure operations. +

+ +
+ +
+ + Sage +

Luca

+

+ Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities. +

+ +
+ +
+ + Norway +

Yasin

+

+ Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project. +

+ +
+
+
+ + ); +}; + +export default Home; diff --git a/app/layout.tsx b/app/layout.tsx index 6bb8bbd..6200084 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,6 @@ export const metadata = { - title: 'Next.js', - description: 'Generated by Next.js', + title: 'React test v1', + description: 'Generated by Us.js', } export default function RootLayout({ diff --git a/app/Luca.css b/app/luca/Luca.css similarity index 100% rename from app/Luca.css rename to app/luca/Luca.css diff --git a/app/Luca.tsx b/app/luca/Luca.tsx similarity index 100% rename from app/Luca.tsx rename to app/luca/Luca.tsx diff --git a/app/page.tsx b/app/page.tsx index 4ceeb68..7951a58 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,9 @@ "use client"; import React, { useState } from 'react'; -import Luca from './Luca'; -import Patrick from './Patrick'; -import Yasin from './Yasin'; +import Luca from './luca/Luca'; +import Patrick from './patrick/Patrick'; +import Yasin from './yasin/Yasin'; +import Home from './LandingPage'; import './App.css'; // Import main styles function MyApp() { @@ -29,7 +30,7 @@ function MyApp() {
{/* Conditionally render the selected component */} - {currentView === 'landing' &&

Welcome to our site! Choose a programmer's space above.

} + {currentView === 'landing' && } {currentView === 'luca' && } {currentView === 'patrick' && } {currentView === 'yasin' && } diff --git a/app/Patrick.css b/app/patrick/Patrick.css similarity index 100% rename from app/Patrick.css rename to app/patrick/Patrick.css diff --git a/app/Patrick.tsx b/app/patrick/Patrick.tsx similarity index 100% rename from app/Patrick.tsx rename to app/patrick/Patrick.tsx diff --git a/app/Yasin.css b/app/yasin/Yasin.css similarity index 100% rename from app/Yasin.css rename to app/yasin/Yasin.css diff --git a/app/Yasin.tsx b/app/yasin/Yasin.tsx similarity index 100% rename from app/Yasin.tsx rename to app/yasin/Yasin.tsx diff --git a/public/img/Patrick.png b/public/img/Patrick.png new file mode 100644 index 0000000..6aa6377 Binary files /dev/null and b/public/img/Patrick.png differ diff --git a/public/img/image.png b/public/img/image.png new file mode 100644 index 0000000..3924352 Binary files /dev/null and b/public/img/image.png differ diff --git a/public/img/sage.png b/public/img/sage.png new file mode 100644 index 0000000..3bc7bd8 Binary files /dev/null and b/public/img/sage.png differ diff --git a/public/img/yasin.png b/public/img/yasin.png new file mode 100644 index 0000000..06e814f Binary files /dev/null and b/public/img/yasin.png differ