Portfolio/index.html at main · vanshika5555/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <ul class="nav-links">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About me</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact me</a></li>
      </ul>
    </nav>

    <div class="hero">
      <div class="hero-text">
        <h1>Hi, I'm Vanshika</h1>
        <p>Web Developer | Designer </p>
        <button onclick="scrollToSection('projects')">View My Work</button>
        <a href="C:\Users\Lenovo\Desktop\portfolio/Resume.pdf" target="_blank">
          <button>My Resume</button>
        </a>
      </div>
    </div>
  </header>


<!-- About Section -->
<section id="about">
  <h2>About Me</h2>
  <p>
    Hi, i am Vanshika, the BCA 2nd year student from Institute of information technology and managemnt,
    I am  web developer with a love for coding and design. My experience extends beyond just building websites—I have also actively participated in numerous hackathons, I am also a Graphic Designer for the GEEK ROOM[hackathon organizing society], My goal is to continue developing my skills, work on meaningful projects.
  </p>
  <a href="C:\Users\Lenovo\Desktop\portfolio/Resume.pdf" target="_blank">
    <button>My Resume</button>
  </a>
</section>


    <section id="skills">
        <h2>Skills</h2>
        <div class="skills-container">
          <div class="skill">
            <h3>HTML</h3>
            <!-- <div class="progress-bar">
              <div class="progress" style="width: 90%;">90%</div>
            </div> -->
          </div>
          <div class="skill">
            <h3>CSS</h3>
            <!-- <div class="progress-bar">
              <div class="progress" style="width: 85%;">85%</div>
            </div> -->
          </div>
          <div class="skill">
            <h3>JavaScript</h3>
            <!-- <div class="progress-bar">
              <div class="progress" style="width: 80%;">80%</div>
            </div> -->
          </div>
          <div class="skill">
            <h3>Basics of PHP</h3>
            <!-- <div class="progress-bar">
              <div class="progress" style="width: 80%;">80%</div>
            </div> -->
          </div>
          <div class="skill">
            <h3>Sql</h3>
            <!-- <div class="progress-bar">
              <div class="progress" style="width: 75%;">75%</div>
            </div> -->
          </div>
          <div class="skill">
            <h3>Graphic designing</h3>
            <!-- <div class="progress-bar">
              <div class="progress" style="width: 80%;">80%</div>
            </div> -->
          </div>

        </div>
      </section>


    <section id="projects">
        <h2>Projects</h2>
        <div class="project">
          <h3>Project 1</h3>
          <p>FarmJI: Developed a responsive website for farmers with features like expert
            guidance, a shopping and selling platform, and secure payment integration
            using Razorpay.
            Technologies: HTML, CSS, JavaScript, PHP, MySQL, Razorpay</p>
        </div>
        <div class="project">
          <h3>Project 2</h3>
          <p>Portfolio: Developed a responsive website
            Technologies: HTML, CSS, JavaScript</p>
        </div>
      </section>


      <section id="contact">
        <h2>Contact me</h2>
        <p>Feel free to reach out to me through the form below or connect with me on social media.</p>

        <form>
          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required>

          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required>

          <label for="message">Message:</label>
          <textarea id="message" name="message" required></textarea>

          <button type="submit">Send Message</button>
        </form>

        <div class="social-icons">
          <a href="https://github.com/vanshika5555" target="_blank" class="icon github"></a>
          <a href="https://www.linkedin.com/in/vanshika-malik-3495432a2/" target="_blank" class="icon linkedin"></a>

        </div>
      </section>

  </main>

  <footer>
    <p>&copy; 2025 Vanshika. All rights reserved.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>