diff --git a/images/batu.jpg b/images/batu.jpg
new file mode 100644
index 0000000..b9eb657
Binary files /dev/null and b/images/batu.jpg differ
diff --git a/images/github-mark.png b/images/github-mark.png
new file mode 100644
index 0000000..6cb3b70
Binary files /dev/null and b/images/github-mark.png differ
diff --git a/images/linkedin.svg b/images/linkedin.svg
new file mode 100644
index 0000000..de69667
--- /dev/null
+++ b/images/linkedin.svg
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/images/rusty.JPG b/images/rusty.JPG
new file mode 100644
index 0000000..d24785e
Binary files /dev/null and b/images/rusty.JPG differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..937d637
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+
+
+
+ Personal Website
+
+ Hi! I'm Batuhan
+ A Software Developer
+ Feel free to look around, and contact me via the form or social links below. Cheers!
+
+
+
+
+
+
+
diff --git a/pages/about.html b/pages/about.html
new file mode 100644
index 0000000..bcc2e38
--- /dev/null
+++ b/pages/about.html
@@ -0,0 +1,53 @@
+
+
+
+ Personal Website
+
+ ABOUT ME ?
+ I'm a Software Developer with a background in Software Quality Assurance and Cybersecurity. I’m passionate about building secure, high-quality systems that are reliable, efficient, and built to last.
+ Are you interested in my work? Check out my Portfolio !
+
+
+
+ WHAT DO I LIKE ?
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. In laboriosam delectus aperiam deleniti quas ullam! Quasi laudantium provident perspiciatis dignissimos eos alias rerum ex tempora sint, quo consectetur corrupti amet.
+
+
+
+
+
+
diff --git a/pages/portfolio.html b/pages/portfolio.html
new file mode 100644
index 0000000..34aa84c
--- /dev/null
+++ b/pages/portfolio.html
@@ -0,0 +1,59 @@
+
+
+
+ Personal Website
+
+ MY MOST RECENT PROJECTS
+
+
+
+ PROJECT 1
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis obcaecati ea eius provident a ex? Labore illo vel quam consequatur ipsam, dolores, commodi eaque omnis assumenda eum modi fugit at?
+
+
+
+
+ PROJECT 2
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis obcaecati ea eius provident a ex? Labore illo vel quam consequatur ipsam, dolores, commodi eaque omnis assumenda eum modi fugit at?
+
+
+
+ INTERESTED IN SEEING MORE?
+ Please check out my GitHub page for more.
+
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9223b35
--- /dev/null
+++ b/style.css
@@ -0,0 +1,173 @@
+body {
+ background-color: #5e936c;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 10%;
+}
+
+header {
+ background-color: #3e5f44;
+ box-shadow: 1px 1px 20px black;
+
+ display: flex;
+ justify-content: space-around;
+}
+
+/* navigation buttons */
+nav {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+/* navigation links */
+nav > a {
+ text-decoration: none;
+ color: #93da97;
+ font-size: 1.4rem;
+ font-family: "Sansation", sans-serif;
+ font-weight: 300;
+}
+
+main {
+ background-color: #3e5f44;
+ text-align: center;
+ margin: 5% 10vw;
+ box-shadow: 1px 1px 20px black;
+ height: auto;
+}
+
+/* images under main */
+main > img {
+ border-radius: 10px;
+ width: 20%;
+ height: auto;
+ box-shadow: 1px 3px 19px black;
+ margin-bottom: 3%;
+ margin-left: 1%;
+}
+
+form {
+ background-color: #3e5f44;
+ text-align: center;
+ margin: 5% 10vw;
+ box-shadow: 1px 1px 20px black;
+ height: auto;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+}
+
+input,
+textarea {
+ width: 45%;
+ background-color: #5e936c;
+ color: #93da97;
+ border-radius: 4px;
+ border-style: double;
+ font-size: 1.2rem;
+}
+
+input::placeholder,
+textarea::placeholder {
+ color: #93da97;
+}
+
+
+/* Submit button */
+button {
+ margin-bottom: 3%;
+ background-color: #93da97;
+ border-radius: 10px;
+ border-style: outset;
+ color: #3e5f44;
+ padding: 7px 17px;
+ font-size: 16px;
+ transition-duration: 0.4s;
+}
+
+.button:hover {
+ background-color: green;
+}
+
+footer {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ align-items: center;
+ background-color: #3e5f44;
+ box-shadow: 1px 1px 20px black;
+ position: fixed;
+ bottom: 0;
+ padding: 2% 0;
+ width: 100vw;
+}
+
+h1 {
+ font-family: "Sacramento", cursive;
+ font-size: 4rem;
+ color: #6dbf71;
+ font-weight: 300;
+ margin-top: 40px;
+ padding-top: 40px;
+}
+
+h2 {
+ color: #6dbf71;
+ font-family: "Sansation", sans-serif;
+ font-size: 2rem;
+ font-weight: normal;
+}
+
+h3 {
+ color: #6dbf71;
+ font-family: "Sansation", sans-serif;
+ font-size: 1.7rem;
+ font-weight: lighter;
+ padding: 40px 40px;
+ width: inherit;
+}
+
+/* footer links */
+footer a {
+ text-decoration: none;
+ color: #93da97;
+ font-size: 1.3rem;
+ font-family: "Sansation", sans-serif;
+ font-weight: 300;
+}
+
+/* social media icons */
+.media-link {
+ width: 3%;
+}
+
+.my-picture {
+ border-radius: 50%;
+ width: 10%;
+ box-shadow: 1px 3px 19px black;
+}
+
+/* separator between links */
+.separator {
+ font-size: 2rem;
+ color: #e8ffd7;
+}
+
+/* hover behavior for all links */
+a:hover {
+ color: #e8ffd7;
+}
+
+/* rearrange content for bigger screens */
+@media (width > 1700px) {
+ body,
+ footer {
+ width: 50vw;
+ }
+ body {
+ padding-left: 25%;
+ }
+}
+
+
+ 
+
+
+ 
+ 
+ 
+