-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (169 loc) · 9.81 KB
/
index.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anshika Pahal Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Arvo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">Anshika Pahal</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects-slider">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</header>
<section id="home">
<div class="intro-box">
<div class="intro-text">
<h1>Hello, I'm <span class="name">Anshika</span>!</h1>
<p>I am a sophomore B.Tech IT student at IGDTUW <br> and a passionate <span id="typed"></span>.</p>
</div>
</div>
<div class="socials"> <!-- Use home-socials class for the home page -->
<a href="https://github.com/anshxika" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/anshika-pahal" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://discord.com/users/anshxika" target="_blank"><i class="fab fa-discord"></i></a>
<a href="https://1drv.ms/b/c/875c449668012763/EZbb8hIgT-BMiG1r9SV1lYkBNkck0lO4UEIAuZ-4a-6kgw?e=2CMTLI" ><i class="fa-solid fa-address-card"></i></a>
</div>
</section>
<section id="about">
<div class="about-container">
<div class="about-text">
<h2>~ About Me ~</h2>
<p>
Hey there! I’m Anshika, a second-year B.Tech IT student at IGDTUW, where I’m diving headfirst into the exciting world of technology! When I’m not coding or solving problems, you can find me lost in a world of colors, sketching, painting, and crafting my next masterpiece. 🎨✏️
</p>
<p>
I love blending creativity with tech—because why not make things look good while making them work? I’m always on the lookout for new adventures and challenges, so if you’re up for some creative collaboration, let’s connect and make some magic happen!
</p>
</div>
<div class="about-image">
<img src="anshika.jpg" alt="About Image">
</div>
</div>
</section>
<section id="skills">
<h2 class="skills-heading">~ Skills ~</h2>
<div class="skills-container">
<div class="skill-card">
<h3>Java</h3>
<p>Proficient in Java, able to develop applications and implement object-oriented programming concepts effectively.</p>
</div>
<div class="skill-card">
<h3>SQL</h3>
<p>Competent in writing SQL queries to retrieve and manipulate data, with experience in basic database management.</p>
</div>
<div class="skill-card">
<h3>Web Development</h3>
<p>Competent in creating and maintaining websites using HTML, CSS, and basic JavaScript, focusing on responsive design and user experience.</p>
</div>
<div class="skill-card">
<h3>Cybersecurity</h3>
<p>Knowledgeable about key cybersecurity principles, including risk management and basic techniques to protect data from threats.</p>
</div>
<div class="skill-card">
<h3>Team Collaboration</h3>
<p>Strong collaborator who effectively contributes to team objectives, fostering a supportive environment and encouraging open communication.</p>
</div>
<div class="skill-card">
<h3>Problem Solving</h3>
<p>Capable of breaking down complex problems into manageable parts. Adept at analyzing situations, exploring solutions, and implementing effective strategies. Always eager to learn from experiences.</p>
</div>
</div>
</section>
<div id="experience",class="experience-container">
<h2>~ Experience ~</h2>
<div class="experience-cards">
<div class="card" id="internship">
<div class="card-image">
<img src="certif.png" alt="Cybersecurity Internship Image">
</div>
<div class="card-content">
<h3>Cybersecurity Internship</h3>
<p>Hands-on experience in ethical hacking, vulnerability testing...</p>
</div>
</div>
<div class="card" id="gssoc">
<div class="card-image">
<img src="gssoc.png" alt="GSSoC 2024 Image">
</div>
<div class="card-content">
<h3>GirlScript Summer of Code 2024</h3>
<p>Open-source contributions, enhancing projects...</p>
</div>
</div>
<div class="card" id="hacktoberfest">
<div class="card-image">
<img src="hacktoberfest.png" alt="Hacktoberfest 2024 Image">
</div>
<div class="card-content">
<h3>Hacktoberfest 2024</h3>
<p>Collaborated on global open-source initiatives...</p>
</div>
</div>
</div>
</div>
<section id="projects-slider" style="padding: 50px; text-align: center; background-color: #14213d;">
<h1 class="projects-title">~ Projects ~</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="project-title">> Portfolio Website</div>
<div class="project-description">This portfolio website serves as a personal showcase of my skills, projects, and experiences in software development. Designed with a user-friendly interface, it highlights my technical proficiency in programming languages such as Java and SQL, along with my web development expertise in HTML, CSS, and JavaScript. The site features distinct sections, including an engaging home page, an "About Me" section, a "Skills" slider that dynamically illustrates my competencies, and a "Projects" section displaying key projects like the Library Management System and Blog API project. Each section is crafted with responsive design principles, ensuring a seamless experience across devices.</div>
</div>
<div class="swiper-slide">
<div class="project-title">> Blog API Project</div>
<div class="project-description">The Blog API project is a robust web application built to provide a comprehensive set of API methods, enabling users to interact with the blog data seamlessly.
The API supports various functionalities, allowing users to effectively list, retrieve, create, update, and delete blog posts making it customizable and efficient.
It incorporates Express, JavaScript and Body Parser as middleware to handle incoming HTTP requests effectively. </div>
</div>
<div class="swiper-slide">
<div class="project-title">> QR Code Generator</div>
<div class="project-description">QR Code Generator is a project that simplifies the process of creating QR codes from text.
It integrates the Inquirer NPM package and qr-image NPM package to efficiently transform the user-entered URL into a visually dynamic QR code image.
It also utilizes the native FS (File System) Node module to create a text file, saving the user input for future reference.
HTML is used for content structuring, CSS for styling and Node.js is used for server-side JavaScript execution </div>
</div>
<div class="swiper-slide">
<div class="project-title">> Library Management System</div>
<div class="project-description">A Java-based system to manage library books, issue records, and user information.</div>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="contact-container">
<div class="contact-box">
<h2>Let's Connect!</h2>
<p>If you’d like to reach out, feel free to contact me through any of the socials or use the form below.</p>
<form action="#" method="post">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<script src="script.js"></script>
</body>
</html>