diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/img/pp.jpg b/img/pp.jpg
new file mode 100644
index 0000000..5ae047f
Binary files /dev/null and b/img/pp.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3ad7f38
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
Okan Demir Baykal
+ High School Senior
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/resume.pdf b/resume.pdf
new file mode 100644
index 0000000..d6230e0
Binary files /dev/null and b/resume.pdf differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..34c3ae3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
+
+:root {
+ --main: #141414;
+}
+
+* {
+ padding: none;
+ border: none;
+ outline: none;
+ font-family: 'Source Sans Pro', sans-serif;
+ font-weight: 500;
+ text-rendering: geometricPrecision;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+.container {
+ display: grid;
+ grid-template-columns: 1fr;
+ background-color: var(--main);
+ grid-gap: 10rem;
+ height: 100%;
+ width: 100vw;
+ height: 100vh;
+}
+
+.card {
+ margin: auto;
+ display: grid;
+ grid-template-rows: 20fr 4fr 6fr 6fr 4fr;
+ background-color: var(--main);
+ width: 26rem;
+ height: 40rem;
+ border-radius: 1.5rem;
+ box-shadow: 2rem 2rem 4rem #080808,
+ -2rem -2rem 4rem #202020;
+}
+
+.card .text {
+ display: grid;
+ grid-template-rows: 2.5fr 1.5fr;
+ color: white;
+ margin: auto;
+}
+
+.card h1 {
+ text-transform: uppercase;
+ font-weight: 600;
+ padding-bottom: .2em;
+}
+
+.card h4 {
+ margin: auto;
+ font-weight: 400;
+}
+
+.pp {
+ max-width: 14rem;
+ margin: auto;
+ border-radius: 50%;
+ box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
+}
+
+.resume-container {
+ margin: auto;
+}
+
+.btn-large {
+ height: 3rem;
+ width: 16rem;
+ border-radius: 1.5rem;
+ margin: auto;
+ transition: 0.3s;
+ background-size: 200% auto;
+ box-shadow: 0px 0px 10px #03ff82;
+ background-image: linear-gradient(145deg, #23B738 0%, #177724 44%, #177724 56%, #23B738 100%);
+ font-size: 1.35rem;
+ font-weight: 600;
+ color: aliceblue;
+ text-transform: uppercase;
+ letter-spacing: 0.1rem;
+}
+
+.btn-large:hover {
+ box-shadow: 0px 0px 10px #03ff82;
+ background-position: center
+}
+
+.btn-large:active {
+ background-position: right center;
+ box-shadow: 0px 0px 10px rgba(3, 255, 130. .5);
+}
+
+.other-btn {
+ margin: auto;
+ display: grid;
+ grid-gap: 2.75rem;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.btn-small {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ margin: auto;
+ color: #FFFFFF;
+ font-size: 1.4rem;
+}
+
+.btn-small:hover {
+ background-position: center;
+ cursor: pointer;
+}
+
+.btn-small:active {
+ background-position: right center;
+ cursor: pointer;
+}
+
+.btn-github {
+ background-image: linear-gradient(145deg, #765A9E 0%, #634C85 44%, #634C85 56%, #765A9E 100%);
+ box-shadow: 0px 0px 10px #634C85;
+}
+
+.btn-linkedin {
+ background-image: linear-gradient(145deg, #007FC2 0%, #006BA3 44%, #006BA3 56%, #007FC2 100%);
+ box-shadow: 0px 0px 10px #006BA3;
+}
+
+.btn-gmail {
+ background-image: linear-gradient(145deg, #FA4839 0%, #D33C30 44%, #D33C30 56%, #FA4839 100%);
+ box-shadow: 0px 0px 10px #D33C30;
+}
+