diff --git a/src/images/Lato-Regular.ttf b/src/images/Lato-Regular.ttf
new file mode 100644
index 0000000..bb2e887
Binary files /dev/null and b/src/images/Lato-Regular.ttf differ
diff --git a/src/images/Roboto-Regular.ttf b/src/images/Roboto-Regular.ttf
new file mode 100644
index 0000000..3d6861b
Binary files /dev/null and b/src/images/Roboto-Regular.ttf differ
diff --git a/src/images/me.png b/src/images/me.png
new file mode 100644
index 0000000..63c6bac
Binary files /dev/null and b/src/images/me.png differ
diff --git a/src/pages/index.js b/src/pages/index.js
index dbc0fb9..17887db 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,183 +1,270 @@
import * as React from "react"
+import "../styles/general.scss"
+import MePng from "../images/me.png"
-// styles
-const pageStyles = {
- color: "#232129",
- padding: 96,
- fontFamily: "-apple-system, Roboto, sans-serif, serif",
-}
-const headingStyles = {
- marginTop: 0,
- marginBottom: 64,
- maxWidth: 320,
-}
-const headingAccentStyles = {
- color: "#663399",
-}
-const paragraphStyles = {
- marginBottom: 48,
-}
-const codeStyles = {
- color: "#8A6534",
- padding: 4,
- backgroundColor: "#FFF4DB",
- fontSize: "1.25rem",
- borderRadius: 4,
-}
-const listStyles = {
- marginBottom: 96,
- paddingLeft: 0,
-}
-const listItemStyles = {
- fontWeight: 300,
- fontSize: 24,
- maxWidth: 560,
- marginBottom: 30,
-}
-
-const linkStyle = {
- color: "#8954A8",
- fontWeight: "bold",
- fontSize: 16,
- verticalAlign: "5%",
-}
-
-const docLinkStyle = {
- ...linkStyle,
- listStyleType: "none",
- marginBottom: 24,
-}
-
-const descriptionStyle = {
- color: "#232129",
- fontSize: 14,
- marginTop: 10,
- marginBottom: 0,
- lineHeight: 1.25,
-}
-
-const docLink = {
- text: "Documentation",
- url: "https://www.gatsbyjs.com/docs/",
- color: "#8954A8",
-}
-
-const badgeStyle = {
- color: "#fff",
- backgroundColor: "#088413",
- border: "1px solid #088413",
- fontSize: 11,
- fontWeight: "bold",
- letterSpacing: 1,
- borderRadius: 4,
- padding: "4px 6px",
- display: "inline-block",
- position: "relative",
- top: -2,
- marginLeft: 10,
- lineHeight: 1,
-}
-
-// data
-const links = [
- {
- text: "Tutorial",
- url: "https://www.gatsbyjs.com/docs/tutorial/",
- description:
- "A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
- color: "#E95800",
- },
- {
- text: "How to Guides",
- url: "https://www.gatsbyjs.com/docs/how-to/",
- description:
- "Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
- color: "#1099A8",
- },
- {
- text: "Reference Guides",
- url: "https://www.gatsbyjs.com/docs/reference/",
- description:
- "Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
- color: "#BC027F",
- },
- {
- text: "Conceptual Guides",
- url: "https://www.gatsbyjs.com/docs/conceptual/",
- description:
- "Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
- color: "#0D96F2",
- },
- {
- text: "Plugin Library",
- url: "https://www.gatsbyjs.com/plugins",
- description:
- "Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
- color: "#8EB814",
- },
- {
- text: "Build and Host",
- url: "https://www.gatsbyjs.com/cloud",
- badge: true,
- description:
- "Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!",
- color: "#663399",
- },
-]
-
-// markup
-const IndexPage = () => {
+const SegmentWithImage = ({ segment }) => {
return (
-
- Home Page
-
- Congratulations
-
- — you just made a Gatsby site!
-
- 🎉🎉🎉
-
-
-
- Edit src/pages/index.js to see this page
- update in real-time.{" "}
-
- 😎
-
-
-
- 
+ 
-
+
+ { segment.title }
+
+
+ {
+ typeof segment.content === "object" ?
+ Object.keys(segment.content).map( (key) => {
+ return (
+ <>
+
+
+ { key + ": " }
+
+
+
+
+ )
+ }
+ )
+ :
+ "lol"
+ }
+
+
+ { segment.title }
+
+
+
+ {
+ typeof segment.content === "object" ?
+ Object.keys(segment.content).map( (key) => {
+ return (
+ -
+ {
+ typeof segment.content[key] === "object" ?
+ key + ": "
+ :
+ key + ","
+ }
+
+ {
+ typeof segment.content[key] === "object" ?
+ segment.content[key].map( (value, index) => {
+ return (
+ -
+ {
+ typeof value === "object" ?
+ Object.keys( value ).map( ( key_two, index_two) => {
+ return (
+ <>
+ { key_two + ": " }
+
+ {
+ typeof value === "object" ?
+ value[key_two].map( (item, index_three) => {
+ return (
+ -
+ { item + "," }
+
+ )
+ }
+ )
+ :
+ value + ","
+ }
+
+
+ )
+ }
+ )
+ :
+ value + ","
+ }
+
+ )
+ }
+ )
+ :
+ ""
+ }
+
+
+ )
+ }
+ )
+ :
+ "lol"
+ }
+
+
+
+
+ { segment.content }
+
+
+ {
+ "image" in segment ?
+
+ :
+ segment.title === "" ?
+
+ :
+
+ }
+
+ )
+}
+
+
+const IndexPage = () => {
+
+ let content = [
+ {
+ title: "Kamil Żuk",
+ image: "me.png",
+ content: {
+ "E-mail": "zukkamil.44@gmail.com",
+ "Github": "github.com/tbs093a",
+ "Wykształcenie": "Wyższe / Inżynier",
+ "Miejsce Zamieszkania": "Rzeszów / Polska",
+ "Data Urodzenia": "30.06.1997 r.",
+ }
+ },
+ {
+ title: "Umiejętności",
+ content: {
+ "Programowanie": [
+ "Python - Django / Django REST Framework / Channels 3.0",
+ "Javascript - ReactJS / Redux Toolkit",
+ ],
+ "Obsługa Narzędzi DevOps": [
+ "Jenkins / Ansible / Docker / Docker-Compose / Docker Swarm / Kubernetes / Automatyzacja w Bash",
+ ],
+ "Konfiguracja & Administracja Baz Danych": [
+ "SQL - MariaDB / MySQL / PostgreSQL",
+ "NoSQL - MongoDb / ElasticSearch / Redis"
+ ],
+ "Język Angielski": [
+ "Poziom B2",
+ ],
+ }
+ },
+ {
+ title: "Doświadczenie",
+ content: {
+ "Zespół Szkół Elektronicznych w Rzeszowie / Technikum nr 6 - Technik Informatyk - od 2013 do 2017": "",
+ "Uniwersytet Rzeszowski - Studia Inżynierskie - Informatyka - od 2017 do 2021": [
+ {
+ "Praca Inżynierska - Graficzna baza układów dłoni na potrzeby systemu rozpoznawania Polskiego Języka Migowego (PJM)": [
+ "integracja Django / Django REST Framework z oprogramowaniem Blender",
+ "integracja Djnago / Django REST Framework z bazą danych MongoDb podzielonej na fragmenty (shards)",
+ "implementacja protokołu WebSocket (moduł Channles 3.0) do monitorowania procesu renderowania układów dłoni w czasie rzeczywistym",
+ "implementacja synchronicznego API w Django REST Framework do zarządzania wyrenderowanymi obrazami oraz modelami 3D",
+ "implementacja asynchronicznego API w Django + Channels 3.0 + Redis do nadzorowania procesu renderowania na serwerze w czasie rzeczywistym",
+ "implementacja aplikacji klienckiej w ReactJS / Gatsby + Redux Toolkit do obsługi synchronicznego i asynchronicznego API",
+ "wdrożenie aplikacji w formie rozproszonej dzięki narzędziom konteneryzacji i orkiestracji Docker + Docker-Compose",
+ "implementacja skryptów Bash automatyzujących migrację / konfigurację wszystkich środowisk konteneryzacyjnych na podstawie zmeinnych środowiskowych",
+ "wykonanie modelu trójwymiarowgo dłoni przeznaczonego do renderowania realistycznych próbek (zdjęć) układów dłoni, jako materiały do nauki systemu rozpoznawania PJM",
+ ]
+ }
+ ],
+ "Sembot Sp. z o. o. - DevOps Engineer & Python Developer - od 01.11.2020": [
+ "Obowiązki związane z administracją serwerów (OVH / AWS / Digital Ocean)",
+ "Obowiązki związane z automatyzacją operacji rutynowych (Ansible / Jenkins pipeline / Bash scripts)",
+ "Obowiązki związane z wdrażaniem produkcyjnym oprogramowania zorientowanego na kontenerach (Docker / Docker-Compose / Docker Swarm)",
+ "Obowiązki związane z konfiguracją serwerową (Nginx / Apache / Docker)",
+ "Obowiązki związane z programowaniem narzędzi marchtech (Python / Django / Django REST Framework)",
+ "Obowiązki związane z implementacją i konfiguracją baz danych do obsługi narzędzi marchtech (Big Data) (MongoDb / Elasticsearch / MariaDb / MySQL / Redis / AWS SQS)"
+ ]
+ }
+ },
+ {
+ title: "Zainteresowania",
+ content: {
+ "Web3.0": [
+ "Blockchain / Cryptography",
+ ],
+ "Artificial Intelligence / Machine Learning": "",
+ "IT Security": "",
+ "Grafika Trójwymiarowa & Dwuwymiarowa": "",
+ }
+ },
+ {
+ title: "",
+ content: "Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb niezbędnych do realizacji procesu rekrutacji zgodnie z Rozporządzeniem Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO)."
+ }
+ ]
+
+ return (
+ <>
+
+ {
+ content.map( (value, index) => {
+ return (
+
+ )
+ }
+ )
+ }
+
+
+
+
+
)
}
diff --git a/src/styles/general.scss b/src/styles/general.scss
new file mode 100644
index 0000000..2209e50
--- /dev/null
+++ b/src/styles/general.scss
@@ -0,0 +1,137 @@
+body {
+ background-color: #272727;
+ color: white;
+}
+
+@font-face {
+ font-family: 'Roboto';
+ src: url("../images/Roboto-Regular.ttf");
+}
+
+@font-face {
+ font-family: 'Lato';
+ src: url("../images/Lato-Regular.ttf");
+}
+
+$div_background_color: rgba(26, 83, 187, 1);
+
+$title_font_family: Roboto;
+$title_font_size: 21pt;
+
+$regular_font_family: Lato;
+$regular_font_size: 12pt;
+$regular_image_font_size: 10.5pt;
+
+$foot_font_size: 9.8pt;
+
+.global_segment {
+ margin-left: auto;
+ margin-right: auto;
+ width: 21cm;
+
+ a:link {
+ color: #0d2956;
+ }
+
+ a:visited {
+ color: white;
+ }
+
+ a:hover {
+ color: #000000;
+ }
+
+ a:active {
+ color: #5478b3;
+ }
+
+ ul {
+ margin-bottom: 0;
+ list-style-type: none;
+ }
+
+ li {
+ padding-top: 15px;
+ }
+
+ ul li::before {
+ content: ">> ";
+ color: $div_background_color;
+ font-weight: bold;
+ display: inline-block;
+ width: 2em;
+ margin-left: -2em;
+ }
+
+ .segment_general {
+ float: left;
+ margin-top: 30px;
+ width: 100%;
+
+ .segment_image {
+ float: left;
+ width: 210px;
+ height:250px;
+ color: white;
+ font-weight: bold;
+ background-color: $div_background_color;
+ }
+
+ .segment_content {
+ float: left;
+ width: 100%;
+ font-family: $regular_font_family;
+ font-size: $regular_font_size;
+ text-align: justify;
+ }
+
+ .foot_content {
+ font-size: $foot_font_size;
+ }
+
+ .segment_content_image {
+ float: right;
+ padding: 15px;
+ width: 180px;
+ height:220px;
+ color: white;
+ font-size: $regular_image_font_size;
+ font-family: $regular_font_family;
+ font-weight: bold;
+ background-color: $div_background_color;
+
+ .segment_image_item {
+ margin-top: 5px;
+ }
+ }
+
+ .segment_title {
+ float: left;
+ width: 250px;
+ padding-top: 12px;
+ height: 45px;
+ color: white;
+ font-family: $title_font_family;
+ font-size: $title_font_size;
+ text-align: center;
+ background-color: $div_background_color;
+ }
+
+ .segment_title_image {
+ float: left;
+ margin-top: 100px;
+ margin-left: -50px;
+ }
+
+ }
+
+ .subitem {
+ margin-left: 15px;
+ }
+}
+
+.foot {
+ float: left;
+ width: 100%;
+ height: 30px;
+}
\ No newline at end of file