Do not question the css it will be fixed on a later occasion lmao Patrick don't be mad and merge
This commit is contained in:
Sage The DM
parent
35af22fa68
commit
9b951ea6ca
14 changed files with 432 additions and 6 deletions
375
app/App.css
375
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 */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
50
app/LandingPage.tsx
Normal file
50
app/LandingPage.tsx
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
"use client";
|
||||
import React from 'react';
|
||||
import './App.css'; // Import specific styles for the Home page
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="home-container">
|
||||
<h2>About Us</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<section className="cards">
|
||||
<div className="card">
|
||||
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/img/Patrick.png" alt="Patrick" />
|
||||
<h3>Patrick</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/img/sage.png" alt="Sage" />
|
||||
<h3>Luca</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/img/yasin.png" alt="Norway" />
|
||||
<h3>Yasin</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
|
||||
<div className="content">
|
||||
{/* Conditionally render the selected component */}
|
||||
{currentView === 'landing' && <p>Welcome to our site! Choose a programmer's space above.</p>}
|
||||
{currentView === 'landing' && <Home />}
|
||||
{currentView === 'luca' && <Luca />}
|
||||
{currentView === 'patrick' && <Patrick />}
|
||||
{currentView === 'yasin' && <Yasin />}
|
||||
|
|
|
|||
BIN
public/img/Patrick.png
Normal file
BIN
public/img/Patrick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
public/img/image.png
Normal file
BIN
public/img/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
public/img/sage.png
Normal file
BIN
public/img/sage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
BIN
public/img/yasin.png
Normal file
BIN
public/img/yasin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 KiB |
Loading…
Add table
Add a link
Reference in a new issue