-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (121 loc) · 5.25 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
<!-- This is the DOCTYPE declaration. It tells the browser what version of HTML to use. -->
<!DOCTYPE html>
<!-- This is the opening HTML tag. -->
<html>
<!-- This is the head section of the HTML document. It contains information about the document, such as the title and the CSS styles. -->
<head>
<!-- This is the title of the document. It will be displayed in the browser's title bar. -->
<title>Vikalp Portfolio</title>
<!-- This link tag imports the Font Awesome CSS library. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- This link tag imports the CSS Stylesheet. -->
<link rel="stylesheet" href="styles.css">
<!-- This link tag imports the Inter font. -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
</head>
<body>
<header>
<h1 class="port_heading">Vikalp's Portfolio</h1>
<nav>
<a class="about_nav" href="#about">About</a>
<a class="skills_nav" href="#skills">Skills</a>
<a class="projects_nav" href="#projects">Projects</a>
<a class="contact_nav" href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2 class="port_about">About Me</h2>
<img src="logo.png" alt="Profile Picture" class="logo_syn">
<p>I am an aspiring Computer Engineer
</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni ex dolorum reiciendis facilis alias. Eveniet, perferendis voluptatem error laborum illo harum sapiente quis, rem eligendi dolorum dolore aperiam? Neque praesentium ipsum hic ducimus maxime repudiandae, odio excepturi magni impedit sunt, odit ea, voluptatibus nobis? Veniam totam vitae unde odio doloribus explicabo vel, corrupti illum incidunt cumque facilis sapiente, deserunt esse.</p>
</section>
<section id="skills">
<h2 class="port_skills">Skills</h2>
<div class="skill-icons">
<a href="https://github.com/torvalds/linux" target="_blank"><i class="fab fa-linux"></i></a>
<a href="https://python.org" target="_blank"><i class="fab fa-python"></i></a>
<a href="https://figma.com" target="_blank"><i class="fab fa-figma"></i></a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"><i class="fab fa-html5"></i></a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank"><i class="fab fa-css3-alt"></i></a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><i class="fab fa-js"></i></a>
<a href="https://react.dev/" target="_blank"><i class="fab fa-react"></i></a>
<a href="https://nodejs.org" target="blank"><i class="fab fa-node"></i></a>
</div>
</section>
<section id="education">
<h2 class="port_ed">Education</h2>
<p>Bennett University (2024-2028)</p>
<p>USM Public School (2022-2024)</p>
</section>
<section id="projects">
<h2 class="port_projects">Projects</h2>
<section id="projects">
<div class="projects">
<div class="project">
<h3>Vikalp's Portfolio</h3>
<p>This is my Portfolio</p>
<a
href="https://github.com/CSI-Bennett-University/ClubKonnect"
style="color: #b4befe; text-decoration: none"
>
<comment>View Project</comment>
</a>
</div>
</div>
</section>
</section>
<!-- This is the "Contact Us" section of the document. -->
<section id="contact">
<!-- This h2 heading defines the section title. -->
<h2 class="port_contact">Contact Us</h2>
<!-- This paragraph defines the contact information. -->
<p>
<!-- This icon links to the CSI GitHub repository. -->
<i class="fab fa-github"></i>
<a
href="https://github.com/CSI-Bennett-University"
target="_blank"
rel="noopener noreferrer"
style="color: #d5d4f0; text-decoration: none"
>
<!-- This is because the GitHub repository contains the project's source code. -->
<comment>GitHub: CSI</comment>
</a>
</p>
<p>
<!-- This icon links to the CSI website. -->
<i class="fas fa-globe"></i>
<a
href="https://csi-bu.vercel.app/"
target="_blank"
rel="noopener noreferrer"
style="color: #d5d4f0; text-decoration: none"
>
<!-- This is because the website contains more information about the CSI. -->
<comment>Website: csi-bu</comment>
</a>
</p>
<p>
<i class="fab fa-linkedin"></i>
<a
href="https://www.linkedin.com/company/csi-bu/mycompany/"
target="_blank"
rel="noopener noreferrer"
style="color: #d5d4f0; text-decoration: none"
>
<comment>LinkedIn: CSI</comment>
</a>
</p>
<p>
<i class="fas fa-envelope"></i>
<a
href="mailto:[email protected]"
style="color: #d5d4f0; text-decoration: none"
>
<comment>Email: [email protected]</comment>
</a>
</p>
</section>
</body>
</html>