Skip to content

Commit

Permalink
certification section added
Browse files Browse the repository at this point in the history
  • Loading branch information
@nxy7
nxy7 committed Sep 25, 2023
1 parent b481031 commit 37cec41
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 132 deletions.
13 changes: 13 additions & 0 deletions components/CertificationSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
export default function ProjectShowcase() {

return <>
<div className="flex flex-col w-full items-center w-fit">
<h2 className="text-5xl mb-10">Certificates</h2>
<span>All <a href="https://www.linkedin.com/in/danielukd/details/certifications/" target="_blank" className="text-blue-300">certificates</a> I have are available at my
<a href="https://www.linkedin.com/in/danielukd/details/certifications/" target="_blank" className="text-blue-300"> LinkedIn profile</a>.
</span>

</div>
</>
}

9 changes: 3 additions & 6 deletions components/HeaderSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import styles from '../styles/Home.module.css'
export const HeadSection = ({ isVisibleCallback }: { isVisibleCallback: () => void }) => {
return <section id="main" className="grid place-items-center">
{/* <Navigation></Navigation> */}
<div className="w-full min-h-screen grid gap-7 p-3 mt-10 lg:(mt-0 grid-cols-2) place-items-center">
<div className="w-full min-h-screen grid gap-10 p-3 mt-10 flex flex-col items-center justify-center">
<div className="max-w-140 text-white relative text-lg min-h-90">
<h1 className="font-bold italic text-5xl">whoami</h1>
<div className="mt-3 space-y-3">
<div>
<div className="mb-14">
Developer passionate about new technologies. I value reliable software, so I tend to gravitate towards
type safe languages/tech stacks, reproducible environments (nix) and test critical parts of my software.
</div>
<div className="flex flex-wrap justify-center gap-4">
<div className="flex flex-wrap justify-center gap-10">

<a
href="#techstack"
Expand Down Expand Up @@ -42,9 +42,6 @@ export const HeadSection = ({ isVisibleCallback }: { isVisibleCallback: () => vo
</div>
</div>
</div>
<div className="grid place-items-center overflow-hidden">
<img className="h-full w-full object-fit" src="undraw_feeling_proud.svg" />
</div>
</div>

{/*
Expand Down
46 changes: 23 additions & 23 deletions components/ProjectSection/ProjectSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,35 @@ import ProjectShowcase from "./ProjectShowcase"
import { projects } from "./projects_data"

export const ProjectsSection = ({ children, isVisibleCallback }: { children?, isVisibleCallback: () => void }) => {
const [selectedProject, setSelectedProject] = useState(0)
const [selectedProject, setSelectedProject] = useState(0)

return <>
<section id="projects" style={{
}} className="flex flex-col w-full items-center">
return <>
<section id="projects" style={{
}} className="flex flex-col w-full items-center">

<h2 className="text-5xl mb-10">My Projects</h2>
<div>
<div className="flex space-x-4 flex-wrap justify-center">
{projects.map((project, index) => {
return <button key={index} onClick={() => {
setSelectedProject(index)
}}
className="px-4 py-3 text-white bg-transparent border-0 cursor-pointer text-2xl duration-200
<h2 className="text-5xl mb-10">My Projects</h2>
<div>
<div className="flex space-x-4 flex-wrap justify-center">
{projects.map((project, index) => {
return <button key={index} onClick={() => {
setSelectedProject(index)
}}
className="px-4 py-3 text-white bg-transparent border-0 cursor-pointer text-2xl duration-200
underline! underline-offset-3 decoration-0
hover:(underline-offset-8 decoration-2 decoration-orange-500)
focus:(underline-offset-3 decoration-2 decoration-orange-500)
active:(underline-offset-5)
">
{project.title}
</button>
})}
</div>
</div>
{project.title}
</button>
})}
</div>
</div>

<div style={{
}} className="h-full w-full flex flex-col items-center mt-6">
<ProjectShowcase project={projects[selectedProject]}></ProjectShowcase>
</div>
</section>
</>
<div style={{
}} className="h-full w-full flex flex-col items-center mt-6">
<ProjectShowcase project={projects[selectedProject]}></ProjectShowcase>
</div>
</section>
</>
}
86 changes: 43 additions & 43 deletions components/ProjectSection/ProjectShowcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,53 +3,53 @@ import { Children } from 'react'

export default function ProjectShowcase({ project }: { project: Project }) {

return <>
<div className="flex flex-col w-full items-center w-fit">
<div className="px-2 max-w-120 lg:max-w-180 space-y-4">
<div>
<div className="font-semibold mb-1">
Project description:
</div>
<div className="whitespace-pre-line">
{project.description}
</div>
</div>
<div>
<div className="font-semibold mb-1">
Technologies used:
</div>
<div className="flex gap-3 flex-wrap justify-center">
{project.technologies.map((tech, ind) => {
return <>
<img key={ind} src={tech.image} alt="" className="h-10" />
</>
})}
</div>
return <>
<div className="flex flex-col w-full items-center w-fit">
<div className="px-2 max-w-120 lg:max-w-180 space-y-4">
<div>
<div className="font-semibold mb-1">
Project description:
</div>
<div className="whitespace-pre-line">
{project.description}
</div>
</div>
<div>
<div className="font-semibold mb-5">
Technologies used:
</div>
<div className="flex gap-3 flex-wrap justify-center">
{project.technologies.map((tech, ind) => {
return <>
<img key={ind} src={tech.image} alt="" className="h-10" />
</>
})}
</div>

</div>
</div>
<div className="group mt-7 grid place-items-center relative w-full md:max-w-140 rounded-md aspect-video overflow-hidden">
<div className="flex flex-col space-y-4 z-10 opacity-0 duration-350 group-hover:(opacity-100)">
{project.liveLink && <NavigationButton link={project.liveLink}>
watch live
</NavigationButton>}
{project.sourceCode && <NavigationButton link={project.sourceCode}>
source code<img src="github_logo.svg" alt="github icon" className="ml-3 h-8 w-8 " />
</NavigationButton>}
</div>
<img src={project.backgroundImg} alt=""
className="duration-350 absolute top-0 w-full h-full object-cover z-5
</div>
</div>
<div className="group mt-7 grid place-items-center relative w-full md:max-w-140 rounded-md aspect-video overflow-hidden">
<div className="flex flex-col space-y-4 z-10 opacity-0 duration-350 group-hover:(opacity-100)">
{project.liveLink && <NavigationButton link={project.liveLink}>
watch live
</NavigationButton>}
{project.sourceCode && <NavigationButton link={project.sourceCode}>
source code<img src="github_logo.svg" alt="github icon" className="ml-3 h-8 w-8 " />
</NavigationButton>}
</div>
<img src={project.backgroundImg} alt=""
className="duration-350 absolute top-0 w-full h-full object-cover z-5
group-hover:(blur-sm saturate-50)
"
/>
</div>
/>
</div>

</div>
</>
</div>
</>
}

function NavigationButton({ link, children }: { link: string, children: any }) {
return <a href={link} className="px-4 py-2 bg-slate-900 bg-opacity-70 hover:bg-opacity-90 duration-150 rounded-md text-white flex items-center justify-center font-bold text-xl">
{children}
</a>
}
return <a href={link} target="_blank" className="px-4 py-2 bg-slate-900 bg-opacity-70 hover:bg-opacity-90 duration-150 rounded-md text-white flex items-center justify-center font-bold text-xl">
{children}
</a>
}
18 changes: 10 additions & 8 deletions components/ProjectSection/projects_data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,26 @@ import { Project } from "./project";

export const projects: Project[] = [
{
title: "Mediujemy.pl",
description: "Website for mediation company. \
title: "Mediujemy",
description: "Website for mediation company. It's rather simple project using Vue (Nuxt) and SSG for ease of deployment. \
",
liveLink: "https://mediujemy.pl",
sourceCode: "https://github.com/nxy7/mediujemy",
technologies: [technologies.get("ts"), technologies.get("vue")],
technologies: [technologies.get("ts"), technologies.get("nix"),technologies.get("vue")],
backgroundImg: "mediujemy.jpg"
},
{
title: "Chat APP",
description: "Live chat application",
description: "Live chat application that allows sending ephemeral messages that\
dissapear after selected amount of time. The app consists SSG frontend, stateless backend that can be scaled up to\
match the traffic and uses Redis and MongoDB as data storage layer.",
liveLink: "https://chat-app.nxyt.pl",
sourceCode: "http://github.com/nxy7/go-chat",
technologies: [technologies.get("go"), technologies.get("redis"), technologies.get("kubernetes"), technologies.get("mongodb"), technologies.get("vue")],
technologies: [technologies.get("go"), technologies.get("redis"), technologies.get("kubernetes"), technologies.get("mongodb"), technologies.get("vue"), technologies.get("nix")],
backgroundImg: "chatapp.png"
},
{
title: "StockBuddy.pl",
title: "StockBuddy",
description: "Web app that makes following Polish Stock Market (GPW) data easier than ever. Unlike other websites StockBuddy displays data for long\
timeframes in form of easily readable charts. Other than that the website has some features making stock valuation easier.\
",
Expand All @@ -30,12 +32,12 @@ export const projects: Project[] = [
technologies.get("react"),
technologies.get("go"),
technologies.get("pgsql"),
technologies.get("docker"),
technologies.get("kubernetes"),
technologies.get("nix"),
], backgroundImg: "stockbuddy.png"
},
{
title: "Streampai.gg",
title: "Streampai",
description: `Web service dedicated for online broadcasters. Allows receiving donations and showing notifications on stream. Integrates with Youtube, Twitch and more.
Unlike other simmilar projects streampai merges notification streams from various sources and allows showing them within single component. There are many features that I'd love to implement into this project like custom notifications made by users (possibly using webassembly) and restreaming capibility.
Definitely the most ambitious project on the list, consisting of many microservices and hosted using kubernetes cluster. Right now it is not yet available publicly, but most of the underlying work is already done. What's left is polishing the way the app looks and it can go live.
Expand Down
105 changes: 53 additions & 52 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,46 @@ import { ContactSection } from "../components/ContactSection";
import { Footer } from "../components/Footer";
import { TechStackSection } from "../components/TechnologySection/TechStackSection";
import { ProjectsSection } from "../components/ProjectSection/ProjectSection";
import CertificationSection from "../components/CertificationSection";

export default function Home() {
const [activeSlide, setActiveSlide] = useState(0)

return (
<>
<Head>
<title>Dawid Danieluk Portfolio Website</title>
<link rel="icon" href="/favicon.ico" />
</Head>

{/* header visible when scrolling down */}
{/* <Header activeEl={activeSlide}></Header> */}

<main className="bg-[#114B5F] text-white">

<HeadSection isVisibleCallback={() => {
setActiveSlide(0)
}}></HeadSection>

<div className="flex flex-col gap-10 snap-proximity snap-y">
<TechStackSection isVisibleCallback={() => {
setActiveSlide(1)
}}></TechStackSection>

<ProjectsSection isVisibleCallback={() => {
setActiveSlide(2)
}}>
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>

</ProjectsSection>
<ContactSection></ContactSection>
</div>
<Footer></Footer>
</main>
<style jsx>{`
const [activeSlide, setActiveSlide] = useState(0)

return (
<>
<Head>
<title>Dawid Danieluk Portfolio Website</title>
<link rel="icon" href="/favicon.ico" />
</Head>

{/* header visible when scrolling down */}
{/* <Header activeEl={activeSlide}></Header> */}

<main className="bg-slate-800 text-white">

<HeadSection isVisibleCallback={() => {
setActiveSlide(0)
}}></HeadSection>

<div className="flex flex-col gap-15 snap-proximity snap-y">
<TechStackSection isVisibleCallback={() => {
setActiveSlide(1)
}}></TechStackSection>

<ProjectsSection isVisibleCallback={() => {
setActiveSlide(2)
}}>

</ProjectsSection>

<CertificationSection></CertificationSection>


<ContactSection></ContactSection>
</div>
<Footer></Footer>
</main>
<style jsx>{`
/* width */
::-webkit-scrollbar {
width: 4px;
Expand Down Expand Up @@ -91,7 +92,7 @@ export default function Home() {
}
`}</style>

<style jsx global>{`
<style jsx global>{`
html,
body, main, #__next{
scroll-behavior: smooth;
Expand All @@ -106,28 +107,28 @@ export default function Home() {
box-sizing: border-box;
}
`}</style>
</>
);
</>
);
}





type FrontButtonProps = {
href: string
children: any
href: string
children: any
}
export function FrontButton(props: FrontButtonProps) {
if (props.href) return (
<a href={props.href} className={
`px-8 py-3 border-2 border-white rounded-sm duration-200`
+ ` hover:bg-[#FFFFFF19]`
+ ` font-bold text-white`
}>{props.children}</a>
)
return (
<button>{props.children}</button>
)
if (props.href) return (
<a href={props.href} className={
`px-8 py-3 border-2 border-white rounded-sm duration-200`
+ ` hover:bg-[#FFFFFF19]`
+ ` font-bold text-white`
}>{props.children}</a>
)
return (
<button>{props.children}</button>
)
}

0 comments on commit 37cec41

Please sign in to comment.