+
+ Hello, I'm
+Anant Sureka
+Frontend Developer
+
+
+
+
+ 
+ 
+
+
+
+ About Me
++ Hello my name is , Anant Sureka. I from + Kolkata, West Bengal, and a sophomore at + KIIT University, Bhubaneswar, India. +
++ I completed my 12th from Delhi Public School Megacity and scored 93% in my 10th boards and 95% in my 12th boards. +
++ My current cgpa is 9.1 and I have studied data structures and algorithms, and I am currently + learning web development due to my strong interest in it. +
+My Skills are:
+
+
+
+ 
+
+
+ Java
+
+ 
+
+
+ Html
+
+ 
+
+
+ CSS
+
+ 
+
+
+ Javascript
+Project
+Bank Management System| Html,Css,Javascript, API
+
+
+
+ 
+
+
+
+
+ • Created a secure website with authentication for
+ login with options for loan,
bank transfer and closing an account
• Displayed transactions with date and type of transaction and a 5 min login window.
+Contatct Me
+
+
+
+
+
+
\ No newline at end of file
diff --git a/logos/css-logo.png b/logos/css-logo.png
new file mode 100644
index 0000000..499ee6f
Binary files /dev/null and b/logos/css-logo.png differ
diff --git a/logos/github-logo.png b/logos/github-logo.png
new file mode 100644
index 0000000..3781e10
Binary files /dev/null and b/logos/github-logo.png differ
diff --git a/logos/html-logo.jpg b/logos/html-logo.jpg
new file mode 100644
index 0000000..c93cdad
Binary files /dev/null and b/logos/html-logo.jpg differ
diff --git a/logos/java-logo.png b/logos/java-logo.png
new file mode 100644
index 0000000..16afb49
Binary files /dev/null and b/logos/java-logo.png differ
diff --git a/logos/javascript-logo.png b/logos/javascript-logo.png
new file mode 100644
index 0000000..73dc80d
Binary files /dev/null and b/logos/javascript-logo.png differ
diff --git a/logos/linkedin-logo.png b/logos/linkedin-logo.png
new file mode 100644
index 0000000..4b421b1
Binary files /dev/null and b/logos/linkedin-logo.png differ
diff --git a/logos/mail-logo.jpg b/logos/mail-logo.jpg
new file mode 100644
index 0000000..f0445f3
Binary files /dev/null and b/logos/mail-logo.jpg differ
diff --git a/mediaQueries.css b/mediaQueries.css
new file mode 100644
index 0000000..492a809
--- /dev/null
+++ b/mediaQueries.css
@@ -0,0 +1,341 @@
+@media (max-width: 1400px) {
+ .about-myself {
+ line-height: 1.5rem;
+ font-size: 1.2rem;
+ }
+ span {
+ font-size: 1.4rem;
+ font-weight: 500;
+ }
+}
+@media (max-width: 1300px) {
+ .conatiner {
+ max-width: 1200px;
+ }
+ #contact {
+ margin-top: 100px;
+ }
+ .about-myself {
+ line-height: 1.5rem;
+ font-size: 1.1rem;
+ }
+ span {
+ font-size: 1.2rem;
+ font-weight: 400;
+ }
+ #Projects {
+ height: 75vh;
+ }
+}
+
+@media (max-width: 1100px) {
+ .conatiner {
+ max-width: 1000px;
+ }
+ #about {
+ margin-bottom: 50px;
+ }
+ .about-myself,
+ .about-1 {
+ font-size: 1rem;
+ }
+ #skills {
+ margin-bottom: 30px;
+ }
+}
+@media (max-width: 900px) {
+ .conatiner {
+ max-width: 800px;
+ }
+ nav {
+ height: 13vh;
+ }
+ .about-myself,
+ .about-1 {
+ font-size: 0.85rem;
+ }
+ span {
+ font-size: 0.87rem;
+ font-weight: 100;
+ }
+ .overview {
+ font-size: 0.85rem;
+ }
+ .logo,
+ .nav-links {
+ font-size: 1rem;
+ }
+ #profile {
+ height: 50vh;
+ }
+
+ #about {
+ height: 25vh;
+ }
+ .heading {
+ font-size: 1.5rem;
+ }
+ .section_text_1,
+ .section_text_2 {
+ font-size: 1.5rem;
+ }
+ .name {
+ font-size: 2rem;
+ }
+ .btn-resume {
+ padding: 0.75rem;
+ }
+ #skills {
+ height: 35vh;
+ }
+ .skill-img {
+ margin-bottom: 5px;
+ }
+ .java {
+ width: 80px;
+ }
+ .html {
+ width: 110px;
+ }
+ .css {
+ width: 50px;
+ }
+ .label {
+ font-size: 1.5rem;
+ }
+
+ .javascript {
+ width: 50px;
+ }
+ #Projects {
+ height: 55vh;
+ }
+ h2 {
+ font-size: 1rem;
+ }
+ .bankist-img {
+ width: 400px;
+ }
+ .contact-container {
+ width: 350px;
+ gap: 10px;
+ }
+ .email,
+ .linkedin-text {
+ font-size: 0.85rem;
+ }
+ .linkedin,
+ .email-logo,
+ .github {
+ height: 1.5rem;
+ width: 1.5rem;
+ }
+}
+@media (max-width: 700px) {
+ .conatiner {
+ max-width: 650px;
+ }
+ .about-myself,
+ .about-1 {
+ font-size: 0.7rem;
+ line-height: 1;
+ }
+ span {
+ font-size: 0.87rem;
+ font-weight: 100;
+ }
+ #Projects {
+ margin-bottom: 150px;
+ }
+ .contact-container {
+ width: 350px;
+ gap: 10px;
+ }
+ .email,
+ .linkedin-text {
+ font-size: 0.75rem;
+ }
+ .linkedin,
+ .email-logo,
+ .github {
+ height: 1.5rem;
+ }
+}
+
+@media (max-width: 500px) {
+ .conatiner {
+ max-width: 450px;
+ }
+ #about {
+ height: 28vh;
+ }
+ .html,
+ .css,
+ .java {
+ padding-bottom: 7px;
+ }
+ .css {
+ padding-bottom: 9 px;
+ }
+ h2 {
+ font-size: 0.75rem;
+ }
+}
+@media (max-width: 450px) {
+ .conatiner {
+ max-width: 400px;
+ }
+ .logo {
+ font-size: 1.1rem;
+ }
+ .desktop-nav {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ nav {
+ justify-content: center;
+ align-items: center;
+ height: 11vh;
+ gap: 50px;
+ /* opacity: 0; */
+ }
+ .nav-links {
+ gap: 10px;
+ list-style: none;
+ /* margin-right: 90px; */
+ pointer-events: none;
+ font-size: 0.8rem;
+ opacity: 0;
+ font-size: 0.9rem;
+ cursor: default;
+ }
+ .nav-bar {
+ opacity: 100;
+ top: 35px;
+ right: 35px;
+ width: 30px;
+ height: auto;
+ }
+ /* .nav-close {
+ top: 50px;
+ right: 50px;
+ width: 30px;
+ height: auto;
+ } */
+ .css {
+ margin-right: 20px;
+ }
+ .javascript {
+ transform: translateY(-13px);
+ /* transform: translateX(10px); */
+ }
+ .overview {
+ font-size: 0.7rem;
+ }
+ .contact-container {
+ width: 250px;
+ margin-right: 15rem;
+ align-self: center;
+ /* justify-self: center; */
+ }
+ .email,
+ .linkedin-text {
+ font-size: 0.5rem;
+ }
+ .description {
+ margin-left: 10px;
+ text-align: start;
+ }
+ .linkedin,
+ .email-logo,
+ .github {
+ width: 1.1rem;
+ height: 1.1rem;
+ }
+ .about-1,
+ .about-myself {
+ font-size: 0.6rem;
+ }
+ .label {
+ font-size: 1.3rem;
+ }
+ span {
+ color: black;
+ }
+}
+@media (max-width: 400px) {
+ .conatiner {
+ max-width: 350px;
+ }
+ .logo {
+ font-size: 1rem;
+ }
+ .label {
+ font-size: 1.3rem;
+ }
+ .desktop-nav {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+ nav {
+ justify-content: center;
+ align-items: center;
+ height: 10vh;
+ gap: 50px;
+ }
+ .nav-close {
+ top: 20px;
+ right: 20px;
+ margin-top: 10px;
+ }
+ .nav-bar {
+ top: 20px;
+ right: 20px;
+ margin-top: 10px;
+ }
+ .nav-links {
+ gap: 0.5rem;
+ list-style: none;
+ font-size: 0.5rem;
+ }
+ span {
+ font-size: 0.7rem;
+ font-weight: 300;
+ }
+ .skill-img {
+ width: 30px;
+ }
+ .java,
+ .html {
+ width: 55px;
+ height: 60px;
+ }
+ .html,
+ .css {
+ padding-bottom: 20px;
+ }
+ .javascript {
+ width: 35px;
+ align-self: center;
+ transform: translate(0, -15px);
+ }
+ .contact-container {
+ width: 200px;
+ margin-right: 10rem;
+ }
+ .email,
+ .linkedin-text {
+ font-size: 0.3rem;
+ }
+ .linkedin,
+ .email-logo,
+ .github {
+ width: 0.7rem;
+ height: 0.7rem;
+ }
+ .overview,
+ .about-1,
+ .about-myself {
+ font-size: 0.4rem;
+ }
+}
diff --git a/resume/Anant _Resume.pdf b/resume/Anant _Resume.pdf
new file mode 100644
index 0000000..734be1d
Binary files /dev/null and b/resume/Anant _Resume.pdf differ
diff --git a/resume/Anant _Sureka_Resume.pdf b/resume/Anant _Sureka_Resume.pdf
new file mode 100644
index 0000000..43b1640
Binary files /dev/null and b/resume/Anant _Sureka_Resume.pdf differ
diff --git a/resume/bankist.png b/resume/bankist.png
new file mode 100644
index 0000000..3c77125
Binary files /dev/null and b/resume/bankist.png differ
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1101576
--- /dev/null
+++ b/script.js
@@ -0,0 +1,93 @@
+"use strict";
+
+const container = document.querySelector(".container").offsetWidth;
+document.querySelector(".btn-resume").addEventListener("click", function () {
+ window.open("./resume/Anant _Resume.pdf", "_blank");
+ // location.href = "./resume/Anant _Sureka_Resume.pdf";
+});
+
+let a = document.createElement("a");
+a.href = "https://github.com/ANANT-1510";
+a.target = "_blank";
+
+const github = document.querySelector(".github");
+
+github.addEventListener("click", function (e) {
+ // location.href = "https://github.com/ANANT-1510";
+ // target = "_blank";
+ e.preventDefault();
+ window.open("https://github.com/ANANT-1510", "_blank");
+});
+
+const linkedin = document.querySelectorAll(".linkedin");
+linkedin.forEach((val) =>
+ val.addEventListener("click", function (e) {
+ // location.href = "https://www.linkedin.com/in/anant-sureka-bba9532a9/";
+ // target = "_blank";
+ e.preventDefault();
+ window.open(
+ "https://www.linkedin.com/in/anant-sureka-bba9532a9/",
+ "_blank"
+ );
+ })
+);
+
+document
+ .querySelector(".linkedin-text")
+ .addEventListener("click", function (e) {
+ // location.href = "https://www.linkedin.com/in/anant-sureka-bba9532a9/";
+ // target = "_blank";
+ e.preventDefault();
+ window.open(
+ "https://www.linkedin.com/in/anant-sureka-bba9532a9/",
+ "_blank"
+ );
+ });
+
+document.querySelector(".email-logo").addEventListener("click", function (e) {
+ // location.href = "https://mail.google.com/mail/u/3/#inbox";
+ // target = "_blank";
+ e.preventDefault();
+ window.open("mailto:sureka.anant2004@gmail.com");
+});
+
+const bar = document.querySelector(".nav-bar");
+const close = document.querySelector(".nav-close");
+bar.addEventListener("click", function (e) {
+ // console.log(e);
+ document.querySelector(".nav-links").style.opacity = 100;
+ document.querySelector(".nav-links").style.gap = "45px";
+ document.querySelector(".nav-links").style.marginRight = "130px";
+ document.querySelector(".logo").style.opacity = 0;
+ document.querySelector(".nav-close").style.opacity = 100;
+ bar.style.opacity = 0;
+ close.style.zIndex = 100;
+ bar.style.zIndex = 0;
+ document.querySelector(".nav-links").style.pointerEvents = "auto";
+});
+
+close.addEventListener("click", function () {
+ close.style.opacity = 0;
+ bar.style.opacity = 100;
+ document.querySelector(".nav-links").style.opacity = 0;
+ close.style.zIndex = 0;
+ bar.style.zIndex = 100;
+ // if (container > 450) {
+ // bar.opacity = 0;
+ // close.opacity = 0;
+ // document.querySelector(".nav-links").style.opacity = 100;
+ // document.querySelector(".nav-links").style.pointerEvents = "auto";
+ // } else
+ document.querySelector(".nav-links").style.pointerEvents = "none";
+ document.querySelector(".logo").style.opacity = 100;
+ document.querySelector(".nav-links").style.gap = "10px";
+ document.querySelector(".nav-links").style.marginRight = "0px";
+});
+
+// if (container > 450) {
+// bar.opacity = 0;
+// close.opacity = 0;
+// document.querySelector(".nav-links").style.opacity = 100;
+// document.querySelector(".nav-links").style.pointerEvents = "auto";
+// }
+console.log(container);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7476136
--- /dev/null
+++ b/style.css
@@ -0,0 +1,288 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+body {
+ width: 100%;
+ background-color: gray;
+ font-family: "Poppins", sans-serif;
+ color: black;
+}
+.container {
+ max-width: 1500px;
+ margin: 0 auto;
+ /* position: relative; */
+}
+p {
+ color: black;
+ font-size: 2rem;
+}
+a {
+ transition: all 0.3s;
+ text-decoration: none;
+ color: black;
+}
+
+/* DESKTOP NAV */
+nav,
+.nav-links {
+ display: flex;
+}
+
+nav {
+ justify-content: space-around;
+ align-items: center;
+ height: 17vh;
+}
+.nav-links {
+ gap: 2rem;
+ list-style: none;
+ font-size: 1.5rem;
+}
+a:hover {
+ text-decoration: underline;
+ color: black;
+}
+.logo {
+ cursor: default;
+}
+
+/* SECTIONS */
+
+/* PROFILE */
+.sec_img_container {
+ width: 400px;
+ height: 400px;
+ display: flex;
+ margin: 0 10rem;
+}
+.pic {
+ border-radius: 50%;
+}
+
+#profile {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ align-items: center;
+ height: 70vh;
+ margin: 0 auto;
+}
+
+.social {
+ width: 1.7rem;
+ height: 1.7rem;
+ border-radius: 50%;
+}
+
+.section_text {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ justify-content: center;
+ align-self: center;
+ text-align: center;
+ margin: 0 auto;
+ margin-top: 0.5rem;
+ font-size: 35px;
+ /* margin-right: 10rem; */
+}
+.social-container {
+ display: flex;
+ margin-left: 6px;
+ gap: 2.5rem;
+ align-self: center;
+ margin-top: 1rem;
+}
+.linkedin,
+.github {
+ cursor: pointer;
+}
+/* .linkedin:hover,
+.github:hover {
+ width: 2rem;
+ height: 2rem;
+ border: rgb(53, 53, 53) 0.1rem solid;
+} */
+.btn-resume {
+ /* background-color: rgba(255, 166, 0, 0.838); */
+ background-color: rgb(53, 53, 53);
+ border: black 0.1rem solid;
+ padding: 1rem;
+ color: white;
+ font-weight: bold;
+ border-radius: 2rem;
+}
+.btn-resume:hover {
+ border: black 0.3rem solid;
+ cursor: pointer;
+ border: black 0.2rem solid;
+}
+
+/* ABOUT */
+#about {
+ margin: 0 auto;
+ align-self: center;
+ text-align: center;
+ height: 35vh;
+}
+.heading {
+ text-align: center;
+ font-size: 2rem;
+ margin-bottom: 30px;
+ color: black;
+ /* border-bottom: 1px solid white; */
+}
+span {
+ /* font-size: 2.6rem; */
+ font-weight: 500;
+ font-style: italic;
+ font-size: 1.4rem;
+ /* color: gray; */
+}
+.about-1 {
+ /* text-align: center; */
+ font-size: 1.25rem;
+ margin-top: 1rem;
+ line-height: 0.75rem;
+ margin-bottom: 1.25rem;
+}
+.about-myself {
+ /* margin-top: 1.4rem; */
+ /* line-height: 3rem; */
+ font-size: 1.37rem;
+ line-height: 0.75rem;
+ margin-bottom: 1.25rem;
+ /* text-align: center; */
+}
+/* SKIILS */
+#skills {
+ margin: 0 auto;
+ height: 50vh;
+}
+.tools {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ gap: 3.5%;
+ margin-top: 1.35rem;
+}
+.skill-img {
+ width: 150px;
+ height: 100%;
+ margin-bottom: 10px;
+ filter: brightness(50%);
+ opacity: 100;
+}
+.css,
+.javascript {
+ width: 100px;
+ height: 50%;
+}
+.javascript {
+ height: 65%;
+ margin-top: 30px;
+}
+
+.html {
+ width: 200px;
+}
+.label {
+ text-align: center;
+}
+/* PROJECTS */
+#Projects {
+ margin: 0 auto;
+ height: 85vh;
+}
+.project_container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 55px;
+ justify-content: space-around;
+}
+.overview {
+ font-size: 1.3rem;
+ margin-bottom: 10px;
+}
+h2 {
+ text-align: center;
+ margin-bottom: 35px;
+}
+.bankist-img {
+ width: 600px;
+ height: 100%;
+ filter: brightness(55%);
+ border-radius: 10px;
+ /* border-top: gray 0.1rem solid; */
+}
+/* CONTACTS */
+#contact {
+ margin: 0 5rem;
+ margin-top: 20px;
+ height: 45vh;
+}
+.contact-container {
+ display: flex;
+ width: 450px;
+ justify-self: center;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ border: 2px solid black;
+ margin: 5rem auto;
+ margin-top: 3rem;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ padding-left: 3px;
+ padding-right: 3px;
+ border-radius: 20px;
+}
+/* h2 {
+ text-align: center;
+ font-size: 2rem;
+ margin-top: 30px;
+} */
+.email-container,
+.linkedin-container {
+ width: auto;
+ display: flex;
+ gap: 10px;
+ align-self: center;
+ justify-content: space-around;
+}
+.email,
+.linkedin-text {
+ font-size: 1rem;
+ cursor: pointer;
+}
+.linkedin,
+.email-logo {
+ height: 1.7rem;
+ width: 1.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+}
+.nav-bar {
+ position: absolute;
+ top: 35px;
+ right: 35px;
+ z-index: 3;
+ opacity: 0;
+ cursor: pointer;
+}
+.nav-close {
+ position: absolute;
+ opacity: 0;
+ top: 35px;
+ right: 35px;
+ width: 30px;
+ height: auto;
+ cursor: pointer;
+}
+
+ 
+ LinkedIn
+
+
+
+
+
+ LinkedIn
+