diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..ec7c533
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,489 @@
+/*Google Fonts*/
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+*{
+    font-family: 'Poppins', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+    scroll-padding-top: 2rem;
+
+}
+/* Variables*/
+:root{
+
+    --main-color:#647bff;
+    --body-color: #090a1a;
+    --container-color:#171b3c;
+    --heading-color:#222231;
+    --box-color:#0d0f26;
+    --bg-color:#fff;
+
+}
+
+body{
+    color: var(--bg-color);
+    background: var(--body-color);
+}
+
+img{
+    width: 100%;
+}
+section{
+    padding: 3rem 0 2rem;
+}
+a{
+    text-decoration: none;
+}
+li{
+    list-style: none;
+}
+.container{
+    max-width: 960px;
+    margin: auto;
+    width: 100%;
+}
+/* Header */
+header{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 100;
+}
+.header-active{
+    background: var(--box-color);
+    transition: 0.4s;
+}
+.nav{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0;
+}
+.logo{
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--main-color);
+}
+.navbar{
+    display: flex;
+    align-items: center;
+    column-gap: 1.5rem;
+}
+.nav-link{
+    font-size: 0.94rem;
+    padding: 4px 8px;
+    border-radius: 0.2rem;
+    color: var(--bg-color);
+}
+.nav-link:hover{
+    color: var(--main-color);
+    background: var(--container-color);
+    transition: 0.1s all linear;
+}
+/* Menu Icon*/
+.menu-icon{
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    row-gap: 5px;
+    cursor: pointer;
+    z-index: 200;
+    transition: 0.3s;
+}
+.menu-icon div{
+    display: block;
+    background: var(--bg-color);
+    height: 2px;
+    width: 24px;
+    transition: 00.3s;
+}
+.move .line1{
+    transform: rotate(-45deg) translate(-5px,5px);
+}
+.move .line2{
+    opacity: 0;
+}
+.move .line3{
+    transform: rotate(45deg) translate(-5px,-5px);
+}
+
+/*  Home */
+.home{
+    min-height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 7rem;
+}
+.home-content{
+    position: relative;
+    max-width: 600px;
+    width: 100%;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.home-img{
+    width: 180px;
+    height: 180px; 
+    border-radius: 50%;
+    background: #98a7fc;
+    overflow: hidden;
+    margin-bottom:2rem;
+}
+.home-img{
+    width: 180px;
+    height: 180px;
+    object-fit: cover;
+    object-position: center;
+}
+.home-text{
+    display: absolute;
+    flex-direction: center;
+    align-items: center;
+    justify-content: center;
+    text-align:center;
+} 
+.home-text h3{
+    position:absolute;
+    display:contents;
+    align-items:center;
+    column-gap: 0.5rem;
+    font-size: 1.1rem;
+    color: var(--main-color);
+}
+.home-text h3::before{
+    content: '';
+    position:absolute;
+    top: 45%;
+    transform: translate(-50%);
+    left: 160px;
+    width: 200px;
+    height: 2px;
+    background: var(--main-color);
+}
+.home-text h3::after{
+    content: '';
+    position: absolute;
+    top: 45%;
+    transform: translate(-50%);
+    right: -40px;
+    width: 200px;
+    height: 2px;
+    background: var(--main-color);
+}
+.home-text h2{
+    font-size: 2.5rem;
+    line-height: 4.8rem;
+}
+.home-text p{
+    font-size: 0.938rem;
+    margin-bottom: 1.5rem;
+}
+.home-text .color{
+   color: var(--main-color);
+}
+.social{
+    display: flex;
+    align-items:center;
+    column-gap: 0.9rem;
+}
+.social .bx{
+    font-size: 1.3rem;
+    padding: 10px;
+    border-radius: 50%;
+    color: var(--bg-color);
+    background: var(--container-color);
+}
+.social .bx:hover{
+    background: var(--main-color);
+    transition: 0.3s all linear;
+}
+/* Heading */
+.heading{
+    font-size: 5rem;
+    text-transform: uppercase;
+    color: var(--heading-color);
+    text-align: center;
+    margin-bottom: 2rem;
+}
+.about-content{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    gap: 1.5rem;
+}
+.about-data span{
+    font-size: 1rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    color: var(--main-color);
+}
+.about-data h2{
+    font-size: 2rem;
+    line-height: 2.6rem;
+    font-weight: 700;
+    margin: 1rem 0;
+}
+.btn{
+    font-size: 0.97rem;
+    display: inline-flex;
+    align-items: center;
+    column-gap: 0.5rem;
+    color: var(--bg-color);
+    background: var(--main-color);
+    padding: 12px 16px;
+    border-radius: 0.4rem;
+    margin-top: 1rem;
+}
+.btn .bx{
+    font-size: 1.2rem;
+}
+.btn:hover{
+    background: #546eff;
+    transition: 0.3s all linear;
+}
+.about-text p{
+    font-size: 0.938rem;
+    letter-spacing: 1px;
+    text-align: justify;
+    margin-bottom: 1.5rem;
+}
+/* Services */
+.services-content{
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    gap: 2rem;
+}
+.services-box{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 15px;
+    background: var(--container-color);
+    border-radius: 0.4rem;
+    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+.services-box:hover{
+    transform: scale(1.05);
+    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+.services-box .bx{
+    font-size: 1.4rem;
+    color: var(--main-color);
+    padding: 10px;
+    border-radius: 5rem;
+    border: 2px dashed var(--bg-color);
+}
+.services-box h2{
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin: 0.5rem 0;
+    color: var(--main-color);
+}
+.services-box p{
+    font-size: 0.9rem;
+}
+/* Portfolio */
+.portfolio-content{
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    gap: 2rem;
+}
+.portfolio-box{
+    position: relative;
+    width: 100%;
+    height: 320px;
+    border-radius: 1rem;
+    overflow: hidden;
+}
+.portfolio-img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+.portfolio-overlay{
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: hsl(234, 45%, 16%, 0.7);
+}
+.portfolio-overlay h2{
+    font-size: 1.6rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+.portfolio-overlay .bx{
+    font-size: 24px;
+    padding: 10px;
+    background: var(--main-color);
+    color: var(--bg-color);
+    border-radius: 4px;
+}
+.portfolio-overlay .bx:hover{
+    background: #546eff;
+    transition: 0.3s all linear;
+}
+.portfolio-box:hover .portfolio-overlay{
+    top: 0;
+    transition: 0.3s all ease;
+}
+/*Contact form*/
+.contact-form{
+    max-width: 600px;
+    margin: auto;
+    width: 100%;
+    display: grid;
+    row-gap: 1rem;
+}
+.contact-form input,.contact-form textarea{
+    border: none;
+    outline: none;
+    font-size: 0.9rem;
+    padding: 15px;
+    color: var(--bg-color);
+    background: var(--box-color);
+    border-radius: 0.4rem;
+}
+.contact-form .send-btn{
+    width: 120px;
+    font-size: 1rem;
+    letter-spacing: 1px;
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 12px;
+    background: var(--main-color);
+    cursor: pointer;
+}
+.contact-form .send-btn:hover{
+    background: #546eff;
+    transition: 0.3s all linear;
+}
+/* Footer */
+.footer{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    row-gap: 1.4rem;
+    padding: 30px 0;
+}
+.footer p{
+    font-size: 0.9rem;
+}
+.footer-links{
+    display: flex;
+    align-items: center;
+    column-gap: 1rem;
+}
+.footer-links a{
+    font-size: 1rem;
+    font-weight: 400;
+    color: var(--bg-color);
+}
+.footer-links a:hover{
+    color: var(--main-color);
+    transition: 0.3s all linear;
+}
+/* Scroll Top */
+.scroll-top{
+    position: fixed;
+    bottom: -100%;
+    right: 1.5rem;
+}
+.scroll-top .bx{
+    padding: 8px;
+    font-size: 1.3rem;
+    color: var(--bg-color);
+    background: var(--box-color);
+    border-radius: 0.2rem;
+}
+.scroll-top .bx:hover{
+    background: var(--container-color);
+    transition: 0.3s;
+}
+.scroll-active{
+    bottom: 2rem;
+    transition: 0.3s;
+}
+/*Making it responsive*/
+@media (max-width:990px){
+    .container{
+        margin: 0 auto;
+        width: 90%;
+    }
+}
+@media (max-width:892px){
+    section{
+        padding: 2rem 0;
+    }
+    .nav{
+        padding: 12px 0;
+    }
+    .heading{
+        font-size: 4rem;
+    }
+    .portfolio-box{
+        height: 257px;
+    }
+}
+@media (max-width:775px){
+    .logo{
+        font-size: 1.1rem;
+    }
+    .home{
+        min-height: 500px;
+        padding-top: 6rem;
+    }
+    .home-text h3 {
+        font-size: 1rem;
+    }
+    .home-text h2 {
+        font-size: 3rem;
+        line-height: 3.8rem;
+    }
+    .home-text p {
+        font-size: 0.825rem;
+    }
+    .services-content {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .portfolio-box {
+        height: 245px;
+    }
+    .menu-icon {
+        display: flex;
+    }
+    .navbar{
+        position: absolute;
+        top: 0;
+        right: -100%;
+        width: 300px;
+        height: 100vh;
+        background: var(--box-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 50px 20px;
+        transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+    .open-menu{
+        right: 0;
+        transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
+    .nav-link{
+        display: block;
+        margin: 1rem 0;
+    }
+}
\ No newline at end of file
diff --git a/img/portfolio-1.webp b/img/portfolio-1.webp
new file mode 100644
index 0000000..f9b2418
Binary files /dev/null and b/img/portfolio-1.webp differ
diff --git a/img/portfolio-2.webp b/img/portfolio-2.webp
new file mode 100644
index 0000000..87af47a
Binary files /dev/null and b/img/portfolio-2.webp differ
diff --git a/img/portfolio-3.webp b/img/portfolio-3.webp
new file mode 100644
index 0000000..26d3358
Binary files /dev/null and b/img/portfolio-3.webp differ
diff --git a/img/portfolio-4.webp b/img/portfolio-4.webp
new file mode 100644
index 0000000..aaff84d
Binary files /dev/null and b/img/portfolio-4.webp differ
diff --git a/img/portfolio-5.webp b/img/portfolio-5.webp
new file mode 100644
index 0000000..a3b3203
Binary files /dev/null and b/img/portfolio-5.webp differ
diff --git a/img/portfolio-6.webp b/img/portfolio-6.webp
new file mode 100644
index 0000000..13b16fe
Binary files /dev/null and b/img/portfolio-6.webp differ
diff --git a/img/profile.png b/img/profile.png
new file mode 100644
index 0000000..9d52aeb
Binary files /dev/null and b/img/profile.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..964b584
--- /dev/null
+++ b/index.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device=width, initial-scale=1.0">
+    <title>Shaik Raja Sameer</title>
+    <!-- Link to css-->
+    <link rel="stylesheet" href="css/style.css">
+    <!-- Box Icons-->
+    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
+</head>    
+<body>
+    <!-- Scroll Top -->
+    <a href="#home" class="scroll-top">
+        <i class='bx bx-up-arrow-alt' ></i>
+    </a>
+    <!--Header-->
+    <header>
+          <!--nav-->
+    <div class="nav container">
+        <!--Logo-->
+        <a href="#" class="logo">Sameer Shaik</a>
+        <!-- Navbar -->
+        <ul class="navbar">
+            <li><a href="#home" class="nav-link">Home</a></li>
+            <li><a href="#about" class="nav-link">About</a></li>
+            <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
+            <li><a href="#contact" class="nav-link">Contact</a></li>
+        </ul>
+        <!-- Menu Icon-->
+        <div class="menu-icon">
+            <div class="line1"></div>
+            <div class="line2"></div>
+            <div class="line3"></div>
+        </div>
+    </div>
+    </header>
+    <!-- Home-->
+    <section class="home container" id="home">
+      <div class="home-content">
+        <div class="home-img">
+            <img src="img/profile.png" alt="">
+        </div>
+        <div class="home-text">
+            <h3>Hello</h3>
+            <h2>I'm <span class="color">Sameer</span></h2>
+            <p>
+                I'm a <span class="color">DATA SCIENCE STUDENT</span> at <br>Audisankara College Of Engineering And Technology.
+                <br>I am a <span class="color">Passionate Learner</span> and love IT.
+                <br>Apart from that i am also interested in <span class="color">SPORTS</span> that involve <br><span class="color">Concentration and Physical Activity.</span>
+
+            </p>
+            <!-- Social-->
+            <div class="social">
+                <a href="#"><i class='bx bxl-facebook'></i></a>
+                <a href="#"><i class='bx bxl-twitter'></i></a>
+                <a href="#"><i class='bx bxl-instagram'></i></a>
+                <a href="#"><i class='bx bxl-gmail'></i></a>
+                <a href="#"><i class='bx bxl-steam'></i></a>
+                <a href="#"><i class='bx bxl-reddit'></i></a>
+                <a href="#"><i class='bx bxl-twitch'></i></a>
+                <a href="#"><i class='bx bxl-github'></i></a>
+                <a href="#"><i class='bx bxl-linkedin'></i></a>
+            </div>
+        </div>
+      </div>
+    </section>
+    <!--About-->
+    <section class="about container" id="about">
+        <!--Heading-->
+        <h2 class="heading">About</h2>
+        <!--About Content-->
+        <div class="about-content">
+            <div class="about-data">
+                <span>About Me</span>
+                <h2>Data Science Student, <br>
+                    Python Practitioner. </h2>
+                <a href="resume.docx" class="btn" download="">
+                    Download Resume
+                    <i class='bx bx-download'></i>
+                </a>    
+            </div>
+            <div class="about-text">
+                <p>Hello! I am Sameer. A pursuing Undergraduate Student and an aspiring Data Scientist.</p>
+                <p>I am currently undergoing course work regarding my Bachelors degree and at the same time aquiring skills by doing internships and various courses other than my regular course work.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Services -->
+    <section class="services container" id="services">
+        <!-- Heading -->
+        <h2 class="heading">Services</h2>
+        <!--Services content-->
+        <div class="services-content">
+            <div class="services-box">
+                <i class='bx bx-code-alt' ></i>
+                <h2>Data Science</h2>
+                <p>I am Currently pursuing skills related to Data Science and i can analyze small data bases to check for errors regarding data entry and can alter them to match the client requirements.</p>
+            </div>
+            <div class="services-box">
+                <i class='bx bx-brush' ></i>
+                <h2>Python Debugging</h2>
+                <p>I am well versed with python and can debug small sized python applications and programs.</p>
+            </div>
+            <div class="services-box">
+                <i class='bx bx-lock' ></i>
+                <h2>C Programming</h2>
+                <p>I have worked with c before and i am well aware of all the concepts of c that are needed to get a complete beginner into the world of coding, so i can also teach C to newbie programmers or programmers that are interested in C language.</p>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio -->
+    <section class="portfolio container" id="portfolio">
+        <!-- Heading -->
+        <h2 class="heading">Portfolio</h2>
+        <!-- Portfolio Content -->
+        <div class="portfolio-content">
+            <div class="portfolio-box">
+                <img src="img/portfolio-1.webp" alt="" class="portfolio-img">
+                <!-- Overlay -->
+                <div class="porfolio-overlay">
+                    <h2>Data Science</h2>
+                    <a href="#">
+                        <i class='bx bx-link-alt' ></i>
+                    </a>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="img/portfolio-2.webp" alt="" class="portfolio-img">
+                <!-- Overlay -->
+                <div class="porfolio-overlay">
+                    <h2>Python</h2>
+                    <a href="#">
+                        <i class='bx bx-link-alt' ></i>
+                    </a>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="img/portfolio-3.webp" alt="" class="portfolio-img">
+                <!-- Overlay -->
+                <div class="porfolio-overlay">
+                    <h2>C Programming</h2>
+                    <a href="#">
+                        <i class='bx bx-link-alt' ></i>
+                    </a>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="img/portfolio-4.webp" alt="" class="portfolio-img">
+                <!-- Overlay -->
+                <div class="porfolio-overlay">
+                    <h2>HTML</h2>
+                    <a href="#">
+                        <i class='bx bx-link-alt' ></i>
+                    </a>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="img/portfolio-5.webp" alt="" class="portfolio-img">
+                <!-- Overlay -->
+                <div class="porfolio-overlay">
+                    <h2>CSS</h2>
+                    <a href="#">
+                        <i class='bx bx-link-alt' ></i>
+                    </a>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="img/portfolio-6.webp" alt="" class="portfolio-img">
+                <!-- Overlay -->
+                <div class="porfolio-overlay">
+                    <h2>JAVASCRIPT</h2>
+                    <a href="#">
+                        <i class='bx bx-link-alt' ></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!--Contact form -->
+    <section class="contact container" id="contact">
+        <!-- Heading -->
+        <h2 class="heading">Contact</h2>
+        <!--contact form-->
+        <form action="" class="contact-form" id="contact-form">
+            <input type="text" placeholder="Your Name" class="name" required>
+            <input type="email" name="" id="" placeholder="Email address..." class="email" required>
+            <textarea name="" id="" cols="30" rows="10" placeholder="Write message here..." class="message" required></textarea>
+            <input type="submit" value="Send" class="send-btn">
+        </form>
+    </section>
+    <!--Footer-->
+    <section class="footer container" id="footer">
+        <div class="social">
+            <a href="mailto:skar@exampleemail.com"><i class='bx bx-envelope'></i></a>
+            <a href="#"><i class='bx bxl-facebook'></i></a>
+            <a href="#"><i class='bx bxl-twitter'></i></a>
+            <a href="#"><i class='bx bxl-instagram'></i></a>
+        </div>
+        <!--Footer Links-->
+        <div class="footer-links">
+            <a href="#">Privacy Policy</a>
+            <a href="#">Terms Of Use</a>
+            <a href="#">Disclaimer</a>
+        </div>
+        <!-- Copyright -->
+        <p>&#169; Skar Tech</p>
+    </section>
+    <!-- Email Js Link -->
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
+   <!-- sweet alert js link-->
+   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+   <script type="text/javascript">
+        (function(){
+            emailjs.init("w6tJ0TnG7y--w23d2FE-Z");//use your email js api key here
+        })();
+    </script>
+  <!-- Link To JS-->
+  <script src="js/main.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..8731949
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,69 @@
+let menu = document.querySelector(".menu-icon");
+let navbar = document.querySelector(".navbar")
+
+menu.onclick = () => {
+    navbar.classList.toggle("open-menu");
+    menu.classList.toggle("move");
+};
+window.onscroll = () => {
+    navbar.classList.remove("open-menu");
+    menu.classList.remove("move");
+};
+
+//Email JS
+function validate(){
+    let name = document.querySelector('.name');
+    let email = document.querySelector('.email');
+    let msg = document.querySelector('.message');
+    let sendBtn = document.querySelector('.send-btn');
+
+
+    sendBtn.addEventListener('click',(e) => {
+        e.preventDefault();
+        if (name.value == "" || email.value == "" || msg.value == ""){
+            emptyerror();
+        } else{
+            sendmail(name.value, email.value, msg.value);
+            success();
+        }
+    })
+}
+validate();
+
+function sendmail(name,email,msg){
+    emailjs.send("service_srmo5nn","template_ogslrc8",{
+        to_name: name,
+        from_name: email,
+        message: msg,
+        });
+}
+
+
+function emptyerror() {
+    swal({
+        title: "oh No....",
+        text: "Fields cannot be empty!",
+        icon: "error",   
+      });
+
+}
+function success() {
+    swal({
+        title: "Email sent successfully",
+        text: "We try to reply in 24 hours",
+        icon: "success",   
+      });
+}
+//Header Background change on scroll
+let header = document.querySelector('header')
+
+window.addEventListener('scroll',() => {
+    header.classList.toggle("header-active", window.scrollY > 0);
+});
+
+// Scroll Top
+let scrollTop = document.querySelector(".scroll-top");
+
+window.addEventListener("scroll", () => {
+    scrollTop.classList.toggle("scroll-active", window.scrollY >= 400);
+});
\ No newline at end of file
diff --git a/resume.docx b/resume.docx
new file mode 100644
index 0000000..e82263f
Binary files /dev/null and b/resume.docx differ