Personal Portfolio

The simple portfolio project is a static website developed using HTML, CSS, and JavaScript, designed to showcase personal or professional information in an organized and visually appealing manner. This project aims to create a clean and functional portfolio that highlights skills, projects, and achievements.

HTML(index.html)

<!DOCTYPE html>
      <html>

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Portfolio</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
      </head>

<body>
          <header>
            <div class="menutoggle"></div>
            <ul class="nav">
              <li class="active"><a href="#home">Home</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#skills">Skills</a></li>
              <li><a href="#socialm">Social Media</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#work">Work</a></li>
            </ul>
          </header>
          <section id="home">
            <div class="content">
              <h2>Neelkanth Vyas</h2>
              <p>Hello! <br>
                I am Neelkanth!<br>
                A Web and App Developer!<br>
                I Love Astrophysics!
              </p>
            </div>
            <img src="Images/pro.png" class="image">
          </section>
          <section id="services">
            <div class="secText">
              <h2>What Am I Good At</h2>
            </div>
            <div class="content">
              <div class="servicesBx">
                <img src="Images/comp.png">
                <h3>Web Designing</h3>
              </div>
              <div class="servicesBx">
                <img src="Images/webdev.png">
                      <h3>Web Development</h3>
                  </div>
                  <div class=" servicesBx">
                <img src="Images/android.png">
                      <h3>Android Apps</h3>
                  </div>
                  <div class=" servicesBx">
                <img src="Images/writing.png">
                <h3>Creative Writing</h3>
              </div>
            </div>
            <section id="skills">
              <div class="secText">
                <h2>Skills</h2>
              </div>
              <div class="content">
                <div class="servicesBx">
                  <img src="Images/java-script.png">
                  <h3>JS</h3>
                </div>

<div class="servicesBx">
                  <img src="Images/python.png">
                      <h3>Python</h3>
                  </div>

<div class=" servicesBx">
                  <img src="Images/ht cs.jpg">
                      <h3>HTML & CSS</h3>
                  </div>
                  <div class=" servicesBx">
                  <img src="Images/react.png">
                  <h3>React JS</h3>
                </div>
              </div>
            </section>
            <section id="socialm">
              <div class="secText">
                <h2>Social Media</h2>
              </div>
              <div class="content">
                <a href="#">
                  <ion-icon name="logo-facebook"></ion-icon>Profile Name
                </a>
                <a href="#">
                  <ion-icon name="logo-twitter"></ion-icon>Id Name
                </a>
                <a href="#">
                  <ion-icon name="logo-instagram"></ion-icon>Id Name
                </a>
              </div>
            </section>
            <section id="contact">
              <div class="secText">
                <h2>Contact Me</h2>
              </div>
              <div class="content">
                <a href="mailto:#">
                  <ion-icon name="mail-outline"></ion-icon>Name
                </a>
                <a href="#">
                  <ion-icon name="logo-linkedin"></ion-icon>Id Name
                </a>
              </div>
            </section>
            <section id="work">
              <div class="secText">
                <h2>My Work</h2>
              </div>
              <div class="content">
                <a href="#">
                  <ion-icon name="logo-github"></ion-icon>Id Name
                </a>

<a href="#">
                  <ion-icon name="globe-outline"></ion-icon>Website Name
                </a>

<div class="center">
              <p class="copyright"> No © Copyright Issues! <br>
                Feel Free To Copy! </p>
              <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
              <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
              <script src="script.js"></script>
        </body>

</html>

CSS(style.css)

* {
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
        box-sizing: border-box;
        font-family: 'Open Sans', sans-serif;
      }

header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10000;
        backdrop-filter: blur(20px);
      }

header .logo {
        position: relative;
        color: white;
        text-decoration: none;
        font-weight: 700;
        font-size: 2em;
      }

header ul {
        position: relative;
        display: flex;
        gap: 10px;
        list-style: none
      }

header ul li a {
        text-decoration: none;
        color: white;
        font-weight: 500;
        font-size: 0.70em;
      }

header ul li.active a,
      header ul li:hover a {
        color: skyblue;
      }

#home {
        position: relative;
        width: 100%;
        min-height: 100vh;
        background: black;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 100px;
      }

#home .content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 650px;
        z-index: 10;
      }

#home .content h2 {
        position: relative;
        font-size: 5em;
        color: green;
      }

#home .content p {
        position: relative;
        font-size: 1em;
        line-height: 1.2em;
        color: azure;
      }

#home .image {
        position: absolute;
        bottom: 0;
        right: 100px;
        max-height: 90vh;
      }

#services,
      #socialm,
      #contact,
      #work,
      #skills {
        position: relative;
        background: #2e2f34;
        min-height: 100vh;
        padding: 100px 120px;
        display: flex;
        justify-content: center;
        flex-direction: column;
      }

.secText {
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

.secText h2 {
        font-size: 3em;
        color: silver;
      }

#services .content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        margin: 40px 0;
      }

#services .content .servicesBx {
        background: #2e2f34;
        padding: 50px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 2px solid #2e2f34;
      }

#services .content .servicesBx:hover {
        border: 2px solid green;
      }

#services .content .servicesBx img {
        max-width: 100px;
        filter: invert(1);
        opacity: 0.5;
      }

#services .content .servicesBx:hover img {
        opacity: 1;
      }

#services .content .servicesBx h3 {
        color: white;
        font-weight: 500;
        color: #30fe63;
      }

.center {
        width: 100%;
        text-align: center;
      }

#skills .content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        margin: 40px 0;
      }

#skills .content .servicesBx {
        background: #2e2f34;
        padding: 50px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 2px solid #2e2f34;
      }

#skills .content .servicesBx:hover {
        border: 2px solid green;
      }

#skills .content .servicesBx img {
        max-width: 100px;
        filter: invert(1);
        opacity: 0.5;
      }

#skills .content .servicesBx:hover img {
        opacity: 1;
      }

#skills .content .servicesBx h3 {
        color: white;
        font-weight: 500;
        color: #30fe63;
      }

#socialm .content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        margin: 40px 0;
      }

#socialm .content a {
        background: #2e2f34;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 1.4em;
        color: #fff;
        transition: 0.5s;
      }

#socialm .content a:hover {
        background: seagreen;
      }

#socialm .content a ion-icon {
        color: #30fe63;
        font-size: 1.5em;
        margin-right: 10px;
        transition: 0.5s;
      }

#socialm .content .servicesBx h3 {
        color: white;
        font-weight: 500;
        color: #30fe63;
      }

#contact .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        margin: 40px 0;
      }

#contact .content a {
        background: #2e2f34;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 1.2em;
        color: #fff;
        transition: 0.5s;
      }

#contact .content a:hover {
        background: seagreen;
      }

#contact .content a ion-icon {
        color: #30fe63;
        font-size: 1.5em;
        margin-right: 10px;
        transition: 0.5s;
      }

#contact .content .servicesBx h3 {
        color: white;
        font-weight: 500;
        color: #30fe63;
      }

#work .content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        margin: 40px 0;
      }

#work .content a {
        background: #2e2f34;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        font-size: 1.2em;
        color: #fff;
        transition: 0.5s;
      }

#work .content a:hover {
        background: seagreen;
      }

#work .content a ion-icon {
        color: #30fe63;
        font-size: 1.5em;
        margin-right: 10px;
        transition: 0.5s;
      }

#work .content .servicesBx h3 {
        color: white;
        font-weight: 500;
        color: #30fe63;
      }

.copyright {
        margin-top: 150px;
        position: relative;
        color: white;
        font-size: 1em;
      }

@media (max-width: 900px) {
        header {
          padding: 20px 50px;
        }

#home {
          padding: 150px 50px;
          flex-direction: column;
          padding-bottom: 0;
        }

#home .content h2 {
          font-size: 2em;
        }

.btn {
          max-width: 160px;
          padding: 10px 20px;
        }

#home .image {
          position: absolute;
          height: 50vh;
          right: 0;
        }

.secText h2 {
          font-size: 2em;
          text-align: center;
        }

#services,
        #socialm,
        #contact,
        #work,
        #skills {
          padding: 100px 50px 50px;
        }

#services .content {
          grid-template-columns: repeat(2, 1fr);
        }

#socialm .content {
          grid-template-columns: repeat(1, 1fr);
        }

#contact .content {
          grid-template-columns: repeat(1, 1fr);
        }

#skills .content {
          grid-template-columns: repeat(1, 1fr);
        }

#work .content {
          grid-template-columns: repeat(1, 1fr);
        }

.menutoggle {
          position: relative;
          width: 30px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

.menutoggle::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          background: #fff;
          transform: translateY(-10px);
          transition: 0.5s;
          box-shadow: 0 10px #fff;
        }

.menutoggle::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 2px;
          background: #fff;
          transform: translateY(10px);
          transition: 0.5s;
        }

header.active .menutoggle::before {
          transform: translate(0px) rotate(45deg);
          box-shadow: 0 0 #fff;
        }

header.active .menutoggle::after {
          transform: translate(0px) rotate(315deg);
        }

header ul {
          display: none;
        }

header.active ul {
          position: fixed;
          left: 0;
          top: 84px;
          width: 100%;
          height: calc(100vh - 84px);
          background: rgba(50, 50, 50, 0.95);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          z-index: 10000;
          gap: 20px;
        }

header.active ul li a {
          font-size: 1em;
        }

#header ul li a,
        #header ul {
          display: flex;
          flex-direction: column;
          font-size: 1em;
        }
      }

@media (max-width:700px) {
        #home .content h2 {
          font-size: 3em;
        }

#home::before {
          width: 80vw;
          height: 40vw;
        }

#home .image {
          height: 40vh;
        }
      }
      @media (mix-width: 768px) {
        #home .content h2 {
          font-size: 3em;
        }

#home::before {
          width: 80vw;
          height: 40vw;
        }

#home .image {
          height: 40vh;
        }
      }

JavaScript(script.js)

Key Features

Responsive Design

Implements a responsive layout using HTML and CSS to ensure compatibility across devices and screen sizes.

Utilizes media queries and flexible design principles for optimal viewing on desktops, tablets, and mobile devices.

Navigation Menu

Includes a navigation menu with links to different sections of the portfolio (e.g., About, Projects, Contact, Skills).

Provides smooth scrolling functionality using JavaScript for seamless navigation within the webpage.

Portfolio Sections

Projects:Showcase of personal or professional projects with descriptions and links.

Customizable Actions

Supports customization of button icons, labels, and associated actions based on application requirements.

Allows developers to define and integrate custom functionalities for each speed dial button.

Technology Stack

CSS: Styles the HTML elements to create visual layouts, typography, and color schemes.

JavaScript:Adds interactivity and dynamic behavior to the portfolio, such as smooth scrolling, image sliders, and menu toggle.

Workflow

Page Structure

Designs the webpage layout using HTML, organizing content into sections and elements (e.g., headers, paragraphs, divs).

Styling and Layout

Testing and Deployment

Tests the portfolio website across different browsers and devices to ensure compatibility and responsiveness.

Potential Use Cases

Personal Portfolio: Showcases personal skills, projects, and achievements for job applications or networking.

Professional Portfolio:Highlights professional experience, work samples, and qualifications for career advancement or freelancing.

Student Portfolio:Displays academic projects, coursework, and extracurricular activities for educational purposes.

The simple portfolio project using HTML, CSS, and JavaScript offers a practical and effective way to present personal or professional information online. By leveraging web development technologies, this project provides a customizable and scalable platform for creating a compelling portfolio that reflects individual talents, expertise, and aspirations.

A Personal Portfolio Using HTML CSS and JS!

By Neelkanth

Project Overview

HTML(index.html)

CSS(style.css)

JavaScript(script.js)

Key Features

Responsive Design

Navigation Menu

Portfolio Sections

Customizable Actions

Technology Stack

Workflow

Page Structure

Styling and Layout

Testing and Deployment

Potential Use Cases

A Personal Portfolio Using HTML CSS and JS! By Neelkanth

Project Overview

HTML(index.html)

CSS(style.css)

JavaScript(script.js)

Key Features

Responsive Design

Navigation Menu

Portfolio Sections

Customizable Actions

Technology Stack

Workflow

Page Structure

Styling and Layout

Testing and Deployment

Potential Use Cases

A Personal Portfolio Using HTML CSS and JS!

By Neelkanth