janis/dertyp7.github.io
1
0
Fork 0
mirror of https://github.com/DerTyp7/dertyp7.github.io.git synced 2025-10-29 04:42:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Projects component and update styles

Browse Source
This commit is contained in:
dertyp7
2024-01-14 14:27:21 +01:00
parent 4e4f2b977c
commit a3d40b3b13
5 changed files with 303 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.tsx
View File

@@ -4,6 +4,7 @@ import Header from "@components/Header";
import About from "@components/About";
import SectionScroll from "@components/SectionScroll";
import Skills from "@components/Skills";
import Projects from "@components/Projects";
import SectionLine from "@components/SectionLine";
export default function App() {
@@ -52,18 +53,11 @@ export default function App() {
<Skills />
</div>
<div
id="projects"
className="section"
ref={projectsRef}
style={{ textAlign: "center" }}
>
<div id="projects" className="section" ref={projectsRef}>
<SectionLine />
<h4>Projects</h4>
<Projects />
</div>
<h4>Website under construction 🚧👷</h4>
<SectionScroll sections={["", "skills", "projects"]} />
</div>
);

102
src/components/Projects.tsx Normal file
View File

@@ -0,0 +1,102 @@
import "@styles/Projects.scss";
enum BadgeType {
DOCKER = "Docker",
TYPESCRIPT = "TypeScript",
EXPRESS = "ExpressJS",
GIT = "Git",
JAVASCRIPT = "JavaScript",
TYPEORM = "TypeORM",
FIREBASE = "Firebase",
HTML = "HTML",
REACT = "ReactJS",
NODEJS = "NodeJS",
CSS = "CSS",
NEXTJS = "NextJS",
POSTGRESQL = "PostgreSQL",
SASS = "SASS",
ANGULARJS = "AngularJS",
MYSQL = "MySQL",
JAVA = "Java",
UNITY = "Unity",
CSHARP = "Csharp",
CPP = "Cpp",
PYTHON = "Python",
}
function Badge({ type }: { type: BadgeType }) {
return <div className={`badge ${type.toLowerCase()}`}>{type}</div>;
}
function Project({
name,
description,
image,
link,
}: {
name: string;
description: string;
image?: string;
link: string;
}) {
const imageUrl =
image ||
"https://source.unsplash.com/random/500x400?javascript&sig=" +
Math.random() * 1000;
return (
<div
className="project"
onClick={() => {
window.open(link, "_blank");
}}
>
<img src={imageUrl} alt={name} className={!image ? "blur" : ""} />
{!image ? <small>Placeholder image</small> : null}
<div className="info">
<h3>{name}</h3>
<div className="badges">
<Badge type={BadgeType.DOCKER} />
<Badge type={BadgeType.JAVASCRIPT} />
</div>
<div className="description">
<p>{description}</p>
</div>
</div>
</div>
);
}
export default function Projects() {
return (
<div className="projects">
<div className="title">
<h3>Projects</h3>
<h4>Public Projects</h4>
</div>
<div className="grid">
<Project
name="Website"
description="This website"
link="https://github.com/DerTyp7?tab=repositories"
/>{" "}
<Project
name="Website"
description="This website"
link="https://github.com/DerTyp7?tab=repositories"
/>{" "}
<Project
name="Website"
description="This website"
link="https://github.com/DerTyp7?tab=repositories"
/>{" "}
<Project
name="Website"
description="This website"
link="https://github.com/DerTyp7?tab=repositories"
/>
</div>
</div>
);
}

7
src/styles/App.scss
View File

@@ -7,5 +7,12 @@
.section {
min-height: 100vh;
padding: 80px 0;
.title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
}

191
src/styles/Projects.scss Normal file
View File

@@ -0,0 +1,191 @@
.projects {
padding: 0 10rem;
.grid {
padding: 2rem 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
gap: 20px;
.project {
display: flex;
flex-direction: column;
background-color: var(--color-background-foreground);
border-radius: 5px;
padding: 5px;
border: 2px solid transparent;
transition: all 50ms ease-in-out;
cursor: pointer;
max-width: 500px;
min-width: 300px;
&:hover {
border-color: var(--color-accent-background);
}
img {
width: 100%;
&.blur {
filter: blur(5px);
}
}
small {
font-size: 0.8rem;
font-weight: bold;
color: var(--color-font-muted);
text-align: center;
}
.info {
padding: 1rem;
.badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
.badge {
padding: 0.2rem 0.5rem;
border-radius: 5px;
font-size: 0.8rem;
font-weight: 600;
border: 2px solid var(--color-accent-background);
&.docker {
background-color: #0db9ed11;
border-color: #0db9ed4f;
color: #60c6e6;
}
&.typescript {
background-color: #007acc11;
border-color: #007acc4f;
color: #007acc;
}
&.express {
background-color: #00000011;
border-color: #0000004f;
color: #000000;
}
&.git {
background-color: #f34f2999;
border-color: #f34f29;
color: #ffffff;
}
&.javascript {
background-color: #f0db4f11;
border-color: #f0db4f4f;
color: #f0db4f;
}
&.typeorm {
background-color: #42b88311;
border-color: #42b8834f;
color: #42b883;
}
&.firebase {
background-color: #ffca2811;
border-color: #ffca284f;
color: #ffca28;
}
&.html {
background-color: #e34f2611;
border-color: #e34f264f;
color: #e34f26;
}
&.reactjs {
background-color: #61dafb11;
border-color: #61dafb4f;
color: #61dafb;
}
&.nodejs {
background-color: #68a06311;
border-color: #68a0634f;
color: #68a063;
}
&.css {
background-color: #264de411;
border-color: #264de44f;
color: #264de4;
}
&.nextjs {
background-color: #00000011;
border-color: #0000004f;
color: #000000;
}
&.postgresql {
background-color: #33679111;
border-color: #3367914f;
color: #336791;
}
&.sass {
background-color: #cc669911;
border-color: #cc66994f;
color: #cc6699;
}
&.angularjs {
background-color: #e2323711;
border-color: #e232374f;
color: #e23237;
}
&.mysql {
background-color: #4479a111;
border-color: #4479a14f;
color: #4479a1;
}
&.java {
background-color: #00739611;
border-color: #0073964f;
color: #007396;
}
&.unity {
background-color: #00000011;
border-color: #0000004f;
color: #000000;
}
&.csharp {
background-color: #17860011;
border-color: #1786004f;
color: #178600;
}
&.cpp {
background-color: #f34b7d11;
border-color: #f34b7d4f;
color: #f34b7d;
}
&.python {
background-color: #3776ab11;
border-color: #3776ab4f;
color: #3776ab;
}
}
}
.description {
padding: 0.5rem 0;
}
}
}
}
}

7
src/styles/Skills.scss
View File

@@ -4,13 +4,6 @@
align-items: center;
gap: 30px;
.title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);