Added New Portfolio website

HI, Iam Sai Shankar , This is my Portfolio web Site
avinash201199 · Jun 11, 2023 · b3d608a · b3d608a
1 parent 73e20f3
commit b3d608a
Show file tree

Hide file tree

Showing 16 changed files with 984 additions and 0 deletions.
diff --git a/Sai Shankar/images/SAI.png b/Sai Shankar/images/SAI.png
diff --git a/Sai Shankar/images/boy.png b/Sai Shankar/images/boy.png
diff --git a/Sai Shankar/images/bs.png b/Sai Shankar/images/bs.png
diff --git a/Sai Shankar/images/calculator.JPG b/Sai Shankar/images/calculator.JPG
diff --git a/Sai Shankar/images/clang.png b/Sai Shankar/images/clang.png
diff --git a/Sai Shankar/images/cpp.png b/Sai Shankar/images/cpp.png
diff --git a/Sai Shankar/images/css.png b/Sai Shankar/images/css.png
diff --git a/Sai Shankar/images/cyberpunk.gif b/Sai Shankar/images/cyberpunk.gif
diff --git a/Sai Shankar/images/drumkit.JPG b/Sai Shankar/images/drumkit.JPG
diff --git a/Sai Shankar/images/git.png b/Sai Shankar/images/git.png
diff --git a/Sai Shankar/images/github1.png b/Sai Shankar/images/github1.png
diff --git a/Sai Shankar/images/html.png b/Sai Shankar/images/html.png
diff --git a/Sai Shankar/images/js.png b/Sai Shankar/images/js.png
diff --git a/Sai Shankar/images/sudoku.JPG b/Sai Shankar/images/sudoku.JPG
diff --git a/Sai Shankar/index.html b/Sai Shankar/index.html
@@ -0,0 +1,284 @@
+<!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>Sai Shankar's Portfolio</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+        crossorigin="anonymous"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="icon" href="images/boy.png">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Montserrat:ital@0;1&family=PT+Serif:ital@1&family=Poppins:ital,wght@1,200&family=Roboto+Mono:ital,wght@1,300&family=Satisfy&display=swap"
+        rel="stylesheet">
+    <script src="https://kit.fontawesome.com/197a31d41e.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+    <div id="header">
+        <nav class="navbar navbar-expand-md navbar-dark bg-dark  py-0 ">
+            <div class="container-fluid top">
+                <a class="navbar-brand" href="#">
+                    <h3 class="logo">Sai Shankar</h3>
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
+                    data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false"
+                    aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar"
+                    aria-labelledby="offcanvasNavbarLabel">
+                    <div class="offcanvas-header left">
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
+                            aria-label="Close"></button>
+                    </div>
+                    <div class="offcanvas-body left">
+                        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+                            <li class="nav-item">
+                                <a class="nav-link active" aria-current="page" href="#header">
+                                    <p>Home</p>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#about">
+                                    <p>About</p>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#skills">
+                                    <p>Skills</p>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#edu">
+                                    <p>Education</p>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#projects">
+                                    <p>Projects</p>
+                                </a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="#contact">
+                                    <p>Contact Me</p>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <section id="home">
+            <div class="home-text">
+                Hello,
+                I'm
+                <span class="name"> <i>Sai Shankar Punna.</i></span> <br>
+                A Passionate
+                <span id="element" class="name"></span>
+                <div class="icons">
+                    <a href="https://github.com/SaiShankar93" target="_blank" alt="Github Link"><i
+                            class="icon fa-brands fa-github github "></i></a>
+                    <a href="https://www.linkedin.com/in/sai-shankar-ab013b248/" alt="linkedin-link" target="_blank"><i
+                            class="icon fa-brands fa-linkedin linkedin"></i></a>
+                    <a href="https://twitter.com/SaiShankar93" alt="twitter-link" target="_blank"><i
+                            class="icon fa-brands fa-twitter twitter"></i></a>
+                    <a href="https://www.instagram.com/_sai_shankar_punna_/" alt="insta-link" target="_blank"><i
+                            class="icon fa-brands fa-instagram insta"></i></a>
+                    <a href="mailto:[email protected]" class="mail-me" target="_blank"><i
+                            class="icon fa-solid fa-envelope"></i></a>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <section id="about" class="row">
+        <h1><i class="fa-solid fa-user fas"></i>About Me</h1>
+        <div class="abtfirst col-md-6">
+            <img class="myPic" src="images/SAI.png" alt="SAI's pic">
+        </div>
+        <div class="abtsecond col-md-6">
+            Hey there, I'm <span class="abt"> Sai Shankar</span> . I'm pursuing my first year of B.tech in Computer
+            Science. I have a deep passion towards technology . I'm looking forward to enhance my skills. I'm always
+            curious to learn new things in tech. I'm skilled at<span class="abt"> C++, C, HTML, CSS, Javascript,
+                bootstrap</span> .I have a deep passion for solving <span class="abt">data structures and algorithms
+                (DSA) </span>problems. I am skilled at <span class="abt">web development</span> with a passion for
+            creating dynamic and visually appealing websites.I love to build interactive and responsive web
+            applications.I am continuously expanding my skill set and exploring new tools and frameworks to enhance my
+            capabilities.
+        </div>
+    </section>
+
+    <section id="skills">
+        <h2 style="margin-bottom: 20px; text-align: center;"><i class="fa-solid fa-laptop-code laptop fas"></i>Skills &
+            Abilities</h2>
+        <div class="ss">
+            <div class="skillset row">
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/html.png" class="skill-img" alt=""><br>
+                    HTML
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/css.png" class="skill-img" alt=""> <br>
+                    CSS
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/js.png" class="skill-img" alt=""> <br>
+                    JavaScript
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/bs.png" class="skill-img" alt=""> <br>
+                    Bootstrap
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/clang.png" class="skill-img" alt=""> <br>
+                    C
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/cpp.png" class="skill-img" alt=""> <br>
+                    C++
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/github1.png" class="skill-img" alt=""> <br>
+                    GitHub
+                </div>
+                <div class="col-md-4 col-4 skill-div">
+                    <img src="images/git.png" class="skill-img" alt=""> <br>
+                    Git VCS
+                </div>
+            </div>
+        </div>
+    </section>
+
+
+    <section id="edu" class="timeline">
+        <div class="edu-title">
+            <h1><i class="fa-solid fa-graduation-cap fas"></i>Education</h1>
+        </div>
+        <ul>
+            <li>
+                <div>
+                    <time>2022-2026</time>
+                    <strong>JB institute of engineering and technology.</strong>
+                    <hr>
+                    B.tech in Computer Science and Engineering.
+                </div>
+            </li>
+            <li>
+                <div>
+                    <time>2020-2022</time>
+                    <strong>MJP Residential Junior College.</strong>
+                    <hr>
+                    Class 12th - MPC.
+                </div>
+            </li>
+            <li>
+                <div>
+                    <time>2019-2020</time>
+                    <strong> Brilliant Grammar High School.</strong>
+                    <hr>
+                    Class 10th - SSC.
+                </div>
+            </li>
+        </ul>
+    </section>
+
+    <section id="projects">
+
+        <div class="proj-heading"><i class="fa-solid fa-display-code"></i>
+            <h1><i class="fa-solid fa-message-code"></i>Projects Made</h1>
+        </div>
+
+        <div class="proj row">
+            <div class="card col-lg-4 col-md-6 col-sm-12"
+                style="width: 22rem;  background-color: rgb(19, 9, 75); color:white; border-radius: 40px;">
+                <img src="images/calculator.JPG" class="card-img-top" alt="calculator-project-image"
+                    style="padding: 20px; border-radius: 30px; height: 440px;">
+                <div class="card-body">
+                    <h5 class="card-title">Simple Calculator</h5>
+                    <p class="card-text" style="margin-bottom: 50px;">A Simple Calculator Project Made using HTML, CSS
+                        and JavaScript . </p>
+                    <a href="https://calculator-project-ss.netlify.app" target="_blank"><button
+                            class="bn632-hover bn26">View Live</button></a>
+                    <a href="https://github.com/SaiShankar93/Simple-Calculator-Project" target="_blank"><button
+                            class="bn632-hover bn26">View Code</button></a>
+                </div>
+            </div>
+            <div class="card col-lg-4 col-md-6 col-sm-12"
+                style="width: 22rem;  background-color: rgb(19, 9, 75); color:white; border-radius: 40px;">
+                <img src="images/drumkit.JPG" class="card-img-top" alt="..."
+                    style="padding: 20px; border-radius: 30px; margin-top:40px; margin-bottom:20px;">
+                <div class=" card-body">
+                    <h5 class="card-title">DrumKit Project</h5>
+                    <p class="card-text">A DrumKit Project to play music by using the keys on the keyboard as input,
+                        providing an interactive drumming experience.
+                    </p>
+                    <a href="https://drumkitprojectbysai.netlify.app" target="_blank"><button
+                            class="bn632-hover bn26">View Live</button></a>
+                    <a href="https://github.com/SaiShankar93/Drum-kit-project" target="_blank"><button
+                            class="bn632-hover bn26">View Code</button></a>
+                </div>
+            </div>
+            <div class="card col-lg-4 col-md-12 col-sm-12"
+                style="width: 22rem;  background-color: rgb(19, 9, 75); color:white;  border-radius: 40px;">
+                <img src="images/sudoku.JPG" class="card-img-top" alt="..." style="padding: 20px; border-radius: 30px;">
+                <div class=" card-body">
+                    <h5 class="card-title">Sudoku Solver</h5>
+                    <p class="card-text">This Project is Made Using C++. It uses Backtracking Algorithm to solve Sudoku
+                        Puzzle.</p>
+                    <a href="https://github.com/SaiShankar93/sudoku-solver/blob/main/sudokuSolver.cpp"
+                        target="_blank"><button class="bn632-hover bn26">View Code</button></a>
+                </div>
+            </div>
+
+    </section>
+
+    <section id="contact">
+        <h1 style="margin-bottom:40px;"><i class="fa-solid fa-link"></i> Get in Touch</h1>
+        <p>Thank you for visiting my personal portfolio website.Feel free to drop an email, or contact me on any of the
+            social platforms
+        </p>
+        <a href="mailto:[email protected]" class="contact-btn" target="_blank">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Contact Me
+        </a>
+        <hr>
+        <div class="icons">
+            <a href="https://github.com/SaiShankar93" alt="Github Link" target="_blank"><i
+                    class="icon fa-brands fa-github fa-2x github" target="_blank"></i></a>
+            <a href="https://www.linkedin.com/in/sai-shankar-ab013b248/" alt="linkedin-link" target="_blank"><i
+                    class="icon fa-brands fa-linkedin fa-2x linkedin" ></i></a>
+            <a href="https://twitter.com/SaiShankar93" class="twitter-link" target="_blank"><i
+                    class="icon fa-brands fa-twitter fa-2x twitter"></i></a>
+            <a href="https://www.instagram.com/_sai_shankar_punna_/" alt="insta-link" target="_blank"><i
+                    class="icon fa-brands fa-instagram fa-2x insta" target="_blank"></i></a>
+        </div>
+
+        <p class="tail">© 2023-2024 | Design : <a href="https://linktr.ee/SaiShankarPunna" class="tail-name"
+                target="_blank"> Sai
+                Shankar Punna</a></p>
+    </section>
+    <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
+    <script>
+        var typed = new Typed('#element', {
+            strings: ['Programmer.', 'Web Developer.', 'Problem Solver. '],
+            typeSpeed: 150,
+            backDelay: 500,
+            loop: true,
+            callback: function () { alert('end'); }
+        });
+    </script>
+</body>
+
+</html>