-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #242 from SaiShankar93/main
Added New Portfolio website
- Loading branch information
Showing
16 changed files
with
984 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.