update index title, enhance App component with icons, and add new assets
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React + TS</title>
|
<title>Gabriel Kaszewski frutiger</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
150
src/App.tsx
@@ -1,7 +1,14 @@
|
|||||||
|
import home from './assets/icons/home.png';
|
||||||
|
import folder from './assets/icons/folder.png';
|
||||||
|
import games from './assets/icons/games.png';
|
||||||
|
import cv from './assets/icons/cv.png';
|
||||||
|
import about from './assets/icons/about.png';
|
||||||
|
import disc from './assets/icons/disc.png';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<main className="w-full h-full min-h-screen flex flex-col items-center justify-center bg-[url('./assets/backgrounds/background2.jpg')] bg-cover bg-center">
|
<main className="w-full h-full min-h-screen flex flex-col items-center justify-center bg-[url('./assets/backgrounds/background2.jpg')] bg-cover bg-center">
|
||||||
<div className="w-full max-w-[980px] max-h-[930px] flex-1 flex flex-col glass-sm aero-gradient-light rounded-2xl border-midnight border-[2px]">
|
<div className="w-full max-w-[980px] max-h-[930px] flex-1 flex flex-col glass-sm rounded-2xl rounded-br-none border-midnight border-[2px]">
|
||||||
<header className="flex p-[30px] items-center gap-4 rounded-t-2xl text-white border-b-0 aero-gradient">
|
<header className="flex p-[30px] items-center gap-4 rounded-t-2xl text-white border-b-0 aero-gradient">
|
||||||
<h1 className="text-2xl font-semibold">Gabriel Kaszewski</h1>
|
<h1 className="text-2xl font-semibold">Gabriel Kaszewski</h1>
|
||||||
<h2 className="text-lg font-normal">Full-stack Developer</h2>
|
<h2 className="text-lg font-normal">Full-stack Developer</h2>
|
||||||
@@ -13,12 +20,25 @@ function App() {
|
|||||||
Main
|
Main
|
||||||
</p>
|
</p>
|
||||||
<ul className="flex flex-col gap-1 justify-center">
|
<ul className="flex flex-col gap-1 justify-center">
|
||||||
<li className="border-b border-midnight">Home</li>
|
<li className="border-b border-midnight">
|
||||||
<li className="border-b border-midnight">About</li>
|
<a href="#" className="flex items-center gap-2">
|
||||||
|
<img className="w-6 h-6" src={home} alt="home-icon"></img>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li className="border-b border-midnight flex items-center gap-2">
|
||||||
|
<img className="w-6 h-6" src={cv} alt="cv-icon"></img>
|
||||||
|
CV
|
||||||
|
</li>
|
||||||
|
<li className="border-b border-midnight flex items-center gap-2">
|
||||||
|
<img className="w-6 h-6" src={about} alt="about-icon"></img>
|
||||||
|
About
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section className="aero-gradient-dark text-white p-1 rounded-sm">
|
<section className="aero-gradient-dark text-white p-1 rounded-sm">
|
||||||
<p className="aero-gradient p-2 border-b border-midnight text-lg">
|
<p className="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2">
|
||||||
|
<img src={folder} alt="folder-icon" className="w-6 h-6"></img>
|
||||||
Projects
|
Projects
|
||||||
</p>
|
</p>
|
||||||
<ul className="flex flex-col gap-1 justify-center">
|
<ul className="flex flex-col gap-1 justify-center">
|
||||||
@@ -28,7 +48,13 @@ function App() {
|
|||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section className="aero-gradient-dark text-white p-1 rounded-sm">
|
<section className="aero-gradient-dark text-white p-1 rounded-sm">
|
||||||
<p className="aero-gradient p-2 border-b border-midnight text-lg">
|
<p className="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
className="w-6
|
||||||
|
h-6"
|
||||||
|
src={games}
|
||||||
|
alt="games-icon"
|
||||||
|
></img>
|
||||||
Games
|
Games
|
||||||
</p>
|
</p>
|
||||||
<ul className="flex flex-col gap-1 justify-center">
|
<ul className="flex flex-col gap-1 justify-center">
|
||||||
@@ -37,16 +63,26 @@ function App() {
|
|||||||
<li className="border-b border-midnight">Wordle</li>
|
<li className="border-b border-midnight">Wordle</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
<section className="aero-gradient-dark text-white p-1 rounded-sm">
|
||||||
|
<p className="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2">
|
||||||
|
<img src={disc} alt="disc-icon" className="w-6 h-6"></img>
|
||||||
|
Multimedia
|
||||||
|
</p>
|
||||||
|
<ul className="flex flex-col gap-1 justify-center">
|
||||||
|
<li className="border-b border-midnight">Podcasts</li>
|
||||||
|
<li className="border-b border-midnight">Photos</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
<section className="col-span-4 flex flex-col px-8 pt-4 gap-4">
|
<section className="col-span-4 flex flex-col px-8 pt-4 gap-4 overflow-y-auto">
|
||||||
<article className="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border">
|
<article className="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border">
|
||||||
<section className="aero-gradient-dark p-2 rounded-lg border-midnight border prose text-white flex flex-col items-center">
|
<section className="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm text-white flex flex-col items-center">
|
||||||
<h6 className="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center">
|
<h6 className="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center">
|
||||||
Who am I?
|
Who am I?
|
||||||
</h6>
|
</h6>
|
||||||
<p>
|
<p>
|
||||||
Hi, my name is Gabriel Kaszewski, and I am a Bioinformatics
|
Hi, my name is Gabriel Kaszewski, and I am a Bioinformatics
|
||||||
student 🧬 and self-taught full-stack developer 💻.{" "}
|
student 🧬 and self-taught full-stack developer 💻.{' '}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
My journey with programming started when I was 11 🚀. I love
|
My journey with programming started when I was 11 🚀. I love
|
||||||
@@ -59,6 +95,104 @@ function App() {
|
|||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
<article className="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border w-full">
|
||||||
|
<section className="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-p:m-1 w-full text-white flex flex-col items-center">
|
||||||
|
<h6 className="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center">
|
||||||
|
My awesome skills
|
||||||
|
</h6>
|
||||||
|
<p>
|
||||||
|
Below you can find a list of technologies I have experience
|
||||||
|
with:
|
||||||
|
</p>
|
||||||
|
<ul className="flex flex-wrap gap-1 list-none">
|
||||||
|
<li>Angular</li>
|
||||||
|
<li>Azure pipelines</li>
|
||||||
|
<li>C#</li>
|
||||||
|
<li>C++</li>
|
||||||
|
<li>Django</li>
|
||||||
|
<li>Docker</li>
|
||||||
|
<li>FastAPI</li>
|
||||||
|
<li>Git</li>
|
||||||
|
<li>Java</li>
|
||||||
|
<li>JavaScript</li>
|
||||||
|
<li>Linux</li>
|
||||||
|
<li>PostGIS</li>
|
||||||
|
<li>PostgreSQL</li>
|
||||||
|
<li>Python</li>
|
||||||
|
<li>Qt</li>
|
||||||
|
<li>React</li>
|
||||||
|
<li>Rust</li>
|
||||||
|
<li>SCSS</li>
|
||||||
|
<li>TailwindCSS</li>
|
||||||
|
<li>Typescript</li>
|
||||||
|
<li>Unity</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article className="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border w-full">
|
||||||
|
<section className="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-p:m-1 w-full text-white flex flex-col items-center">
|
||||||
|
<h6 className="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center">
|
||||||
|
Work experience
|
||||||
|
</h6>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Python Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
choreograph (2025 - currently)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Frontend Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
choreograph (2024 - 2025)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Frontend Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
wavemaker (2023 - 2024)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Frontend Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
GIAP (2022 - 2023)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Python Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
GIAP (2021 - 2023)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Python Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
digimonkeys (2021 - currently)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h6 className="text-white p-2 w-full items-center flex justify-center">
|
||||||
|
Unity Developer
|
||||||
|
</h6>
|
||||||
|
<p className="border-midnight border-b p-2">
|
||||||
|
Mobil Titans (2019 - 2020)
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
<span className="flex-1"></span>
|
<span className="flex-1"></span>
|
||||||
<footer className="text-white gap-2 flex justify-center items-center p-8 rounded-t-lg aero-gradient">
|
<footer className="text-white gap-2 flex justify-center items-center p-8 rounded-t-lg aero-gradient">
|
||||||
<p>Powered by loco.rs & Rust 🦀</p>
|
<p>Powered by loco.rs & Rust 🦀</p>
|
||||||
|
BIN
src/assets/backgrounds/wallpaper.jpeg
Normal file
After Width: | Height: | Size: 3.1 MiB |
BIN
src/assets/backgrounds/wallpaper2.jpeg
Normal file
After Width: | Height: | Size: 4.0 MiB |
BIN
src/assets/icons/about.png
Normal file
After Width: | Height: | Size: 29 KiB |
BIN
src/assets/icons/cv.png
Normal file
After Width: | Height: | Size: 7.4 KiB |
BIN
src/assets/icons/disc.png
Normal file
After Width: | Height: | Size: 65 KiB |
BIN
src/assets/icons/folder.png
Normal file
After Width: | Height: | Size: 52 KiB |
BIN
src/assets/icons/games.png
Normal file
After Width: | Height: | Size: 60 KiB |
BIN
src/assets/icons/home.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
src/assets/icons/podcast.png
Normal file
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/icons/video-file.png
Normal file
After Width: | Height: | Size: 34 KiB |
@@ -24,7 +24,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@theme {
|
@theme {
|
||||||
--default-font-family: "Frutiger", sans-serif;
|
--default-font-family: "Segoe UI", "Frutiger", sans-serif;
|
||||||
--color-midnight: #3d3d3d;
|
--color-midnight: #3d3d3d;
|
||||||
--color-midnight-light: #707070;
|
--color-midnight-light: #707070;
|
||||||
}
|
}
|
||||||
|