Skip to content

Commit

Permalink
added background image to hero section
Browse files Browse the repository at this point in the history
  • Loading branch information
davidknoerzer committed Apr 17, 2024
1 parent d6c8a63 commit bf5e6ec
Show file tree
Hide file tree
Showing 15 changed files with 175 additions and 189 deletions.
3 changes: 2 additions & 1 deletion src/app/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export default function Footer() {
return (
<footer className="footer p-10 bg-neutral text-neutral-content">
<nav>
<h6 className="footer-center">Linkedin</h6>
<a className="footer-center" target="_blank" href="https://www.linkedin.com/in/davidknoerzer/">Linkedin</a>
<a className="footer-center" target="_blank" href="https://github.com/davidknoerzer">Github</a>
<h6 className="footer-center">Copyright &copy; {currentYear}</h6>
</nav>
</footer>
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/HeroSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ const codingFont = Source_Code_Pro({
});
export default function HeroSection() {
return (
<div className="hero min-h-screen bg-base-200">
<div className="hero-content flex-col lg:flex-row">
<div className="hero min-h-screen bg-fixed hero-background">
<div className="hero-content flex-col lg:flex-row bg-base-200 bg-opacity-80 m-4 rounded-xl">
<Image
priority
src={myPicture}
alt="my picture"
className="max-w-xs md:max-w-sm rounded"
className="max-w-xs md:max-w-sm rounded-xl"
/>
<div>
<h1 className={"text-7xl " + codingFont.className}>Hello There!</h1>
Expand Down
12 changes: 12 additions & 0 deletions src/app/components/main/Body.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import ProjectSection from "./ProjectSection";
import CVSection from "./CVSection";

export default function Body() {
return (
<>
<CVSection></CVSection>
<ProjectSection></ProjectSection>
</>
);
}
1 change: 0 additions & 1 deletion src/app/components/main/CVCard.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from "react";
import Image from "next/image";
import { CVChapter } from "@/app/modules/CVChapter";
import { start } from "repl";

export default function CVCard({
title,
Expand Down
10 changes: 6 additions & 4 deletions src/app/components/main/CVSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default function CVSection() {
image: fhnwImage,
},
{
title: "Information Systems",
title: "Information Systems & Informatics",
organization: "MSc, UZH",
description: [],
startDate: new Date(2022, 9, 1),
Expand All @@ -73,9 +73,10 @@ export default function CVSection() {
];

cvChapters = cvChapters.sort((a, b) => (a.endDate > b.endDate) ? -1 : 1)

return (
<>
<h2 className="text-5xl m-4 font-bold">CV</h2>
<div className="container p-4 space-y-4">
<h2 className="text-6xl p-4 font-bold bg-base-200 shadow-2xl rounded-2xl">CV</h2>
<div className="gap-6 space-y-6 columns-1 md:columns-2 2xl:columns-3">
{cvChapters.map((item) => (
<CVCard key={item.title}
Expand All @@ -91,6 +92,7 @@ export default function CVSection() {
/>
))}
</div>
</>
</div >

);
}
204 changes: 102 additions & 102 deletions src/app/components/main/CVTimeline.tsx
Original file line number Diff line number Diff line change
@@ -1,109 +1,109 @@
import React from "react";
import { CVChapter } from "../../modules/CVChapter";
import iptImage from "../../../images/ipt.webp";
import bNovaImage from "../../../images/b-nova.webp";
import novartisImage from "../../../images/novartis.webp";
import fhnwImage from "../../../images/fhnw.webp";
import uzhImage from "../../../images/uzh.webp";
import CVCard from "./CVCard";
// import React from "react";
// import { CVChapter } from "../../modules/CVChapter";
// import iptImage from "../../../images/ipt.webp";
// import bNovaImage from "../../../images/b-nova.webp";
// import novartisImage from "../../../images/novartis.webp";
// import fhnwImage from "../../../images/fhnw.webp";
// import uzhImage from "../../../images/uzh.webp";
// import CVCard from "./CVCard";

export default function CVTimeline() {
let cvChapters: CVChapter[] = [
{
title: "Junior Software Engineer",
organization: "Innovation Process Technology AG",
description: [
"ESB-Betrieb mit Mulesoft, REST, Syrius Kernsystem",
"ESB-Schnittstellen Entwicklung Mulesoft, Kafka, Salesforce & Avaloq Kernsystem",
"Entwicklung Custom Connector mit Java",
"DevOps Pipeline Entwicklung für Mule Apps",
],
startDate: new Date(2022, 11, 1),
endDate: new Date(),
isCurrentOccupation: true,
image: iptImage,
},
{
title: "IT-Consultant",
organization: "b-nova Schweiz GmbH",
description: [
"Fullstack Entwicklung mit Angular 4, Java Spring und MongoDB",
],
startDate: new Date(2017, 9, 1),
endDate: new Date(2017, 12, 1),
isCurrentOccupation: false,
image: bNovaImage,
},
{
title: "Informatiker Generalist Lehrling",
organization: "Novartis Pharma AG",
description: ["UX-Design", "IT-Support", "Hardware-Testing"],
startDate: new Date(2013, 9, 1),
endDate: new Date(2017, 8, 1),
isCurrentOccupation: false,
image: novartisImage,
},
{
title: "Business Information Systems",
organization: "MSc, FHNW",
description: [],
startDate: new Date(2023, 9, 1),
endDate: new Date(),
isCurrentOccupation: true,
image: fhnwImage,
},
{
title: "Information Systems",
organization: "MSc, UZH",
description: [],
startDate: new Date(2022, 9, 1),
endDate: new Date(2023, 8, 1),
isCurrentOccupation: false,
image: uzhImage,
},
{
title: "Business Information Technology",
organization: "BSc, FHNW",
description: [],
startDate: new Date(2018, 9, 1),
endDate: new Date(2021, 8, 1),
isCurrentOccupation: false,
image: fhnwImage,
},
];
// export default function CVTimeline() {
// let cvChapters: CVChapter[] = [
// {
// title: "Junior Software Engineer",
// organization: "Innovation Process Technology AG",
// description: [
// "ESB-Betrieb mit Mulesoft, REST, Syrius Kernsystem",
// "ESB-Schnittstellen Entwicklung Mulesoft, Kafka, Salesforce & Avaloq Kernsystem",
// "Entwicklung Custom Connector mit Java",
// "DevOps Pipeline Entwicklung für Mule Apps",
// ],
// startDate: new Date(2022, 11, 1),
// endDate: new Date(),
// isCurrentOccupation: true,
// image: iptImage,
// },
// {
// title: "IT-Consultant",
// organization: "b-nova Schweiz GmbH",
// description: [
// "Fullstack Entwicklung mit Angular 4, Java Spring und MongoDB",
// ],
// startDate: new Date(2017, 9, 1),
// endDate: new Date(2017, 12, 1),
// isCurrentOccupation: false,
// image: bNovaImage,
// },
// {
// title: "Informatiker Generalist Lehrling",
// organization: "Novartis Pharma AG",
// description: ["UX-Design", "IT-Support", "Hardware-Testing"],
// startDate: new Date(2013, 9, 1),
// endDate: new Date(2017, 8, 1),
// isCurrentOccupation: false,
// image: novartisImage,
// },
// {
// title: "Business Information Systems",
// organization: "MSc, FHNW",
// description: [],
// startDate: new Date(2023, 9, 1),
// endDate: new Date(),
// isCurrentOccupation: true,
// image: fhnwImage,
// },
// {
// title: "Information Systems",
// organization: "MSc, UZH",
// description: [],
// startDate: new Date(2022, 9, 1),
// endDate: new Date(2023, 8, 1),
// isCurrentOccupation: false,
// image: uzhImage,
// },
// {
// title: "Business Information Technology",
// organization: "BSc, FHNW",
// description: [],
// startDate: new Date(2018, 9, 1),
// endDate: new Date(2021, 8, 1),
// isCurrentOccupation: false,
// image: fhnwImage,
// },
// ];

cvChapters = cvChapters.sort((a, b) => (a.endDate > b.endDate) ? -1 : 1)
// cvChapters = cvChapters.sort((a, b) => (a.endDate > b.endDate) ? -1 : 1)


return (
<>
<h2 className="text-5xl m-4 font-bold">CV</h2>
<ul className="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
// return (
// <>
// <h2 className="text-5xl m-4 font-bold">CV</h2>
// <ul className="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">

{cvChapters.map((item) => (
<li key={item.title}>
<div className="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" /></svg>
</div>
<div className="timeline-start md:text-end mb-10">
<CVCard
{...{
title: item.title,
organization: item.organization,
description: item.description,
startDate: item.startDate,
endDate: item.endDate,
isCurrentOccupation: item.isCurrentOccupation,
image: item.image,
}}
/>
</div>
// {cvChapters.map((item) => (
// <li key={item.title}>
// <div className="timeline-middle">
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" /></svg>
// </div>
// <div className="timeline-start md:text-end mb-10">
// <CVCard
// {...{
// title: item.title,
// organization: item.organization,
// description: item.description,
// startDate: item.startDate,
// endDate: item.endDate,
// isCurrentOccupation: item.isCurrentOccupation,
// image: item.image,
// }}
// />
// </div>

<hr />
</li>
// <hr />
// </li>

))}
</ul>
</>
);
}
// ))}
// </ul>
// </>
// );
// }
10 changes: 7 additions & 3 deletions src/app/components/main/ProjectCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,22 @@
import React from "react";
import Image from "next/image";
import { Project } from "../../modules/Project";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function ProjectCard({
title,
description,
url,
image,
done,
techstack,
}: Project) {
const router = useRouter();

return (
<Link
href={url}
target="_blank"
className="card w-full bg-base-200 shadow-2xl hover:cursor-pointer rounded-2xl break-inside-avoid"
className={"card w-full bg-base-200 shadow-2xl rounded-2xl break-inside-avoid"}
>
<Image
src={image}
Expand All @@ -28,6 +27,11 @@ export default function ProjectCard({
alt="project picture"
className="rounded-2xl rounded-b-none"
/>
{!done && (
<div className="absolute w-full h-full flex items-center justify-center bg-black bg-opacity-50 rounded-2xl">
<span className="text-accent text-7xl font-semibold -rotate-45">TODO</span>
</div>
)}
<div className="card-body">
<h2 className="card-title">{title}</h2>
<p className="card-side">{description}</p>
Expand Down
Loading

0 comments on commit bf5e6ec

Please sign in to comment.