-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (167 loc) · 13.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<body style="background-color: #f4ded4;">
<nav class="navbar navbar-expand-lg" style="background-color: #32012F;">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="color: antiquewhite;">Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="background-color: antiquewhite;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home" style="color: antiquewhite;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects" style="color: antiquewhite;">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" style="color: antiquewhite;">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" style="color: antiquewhite;">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container col-xxl-12 px-4 py-5" style="background-color: #f4ded4;">
<div id="home" class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6 profile">
<img src="./assets/profile.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
<div class="heading col-lg-6">
<h1 class="fw-bold lh-1 mb-3" style="font-size: 250%;">Hi, I'm <span style="font-family:Abril Fatface"><br>Pranshu Suman</span></h1>
<h2 style="font-family: Montserrat;margin: 50px 0px;">Student @ BITS Pilani <br> Hyderabad Campus <br> pursuing CSE.</h2>
<h2 style="font-family: Montserrat;margin-bottom: 50px;">Web Developer<br>Computer Enthusiast <br>Intermediate Python Dev.</h2>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<a href="#contact" style="text-decoration:none"><button type="button" class="btn btn-primary btn-lg px-4 me-md-2 rounded-pill" style="background-color: #ffde59; color: black; font-family: Montserrat; width: fit-content; border: 0px;" >Contact Me</button></a>
</div>
</div>
</div>
</div>
<div id="projects" class="titles">
<h1 style="font-family:Abril Fatface ; font-size: 400%; margin-bottom: 40px;">Projects</h1>
<hr style="height:5px;color:#32012F;background-color:#32012F; opacity: 100; width: 50%; ">
</div>
<div id="carouselExampleCaptions" class="carousel slide" style="margin: auto; width: 69%;">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/simon-game.png" class="d-block w-100" alt="A webpage with title 'Press A to start' and 4 squares with primary colours as background.">
<div class="carousel-caption d-sm-block" style="padding: 20px;">
<h4>Simon Game</h4>
<p class="d-none d-md-block">An online version of the popular game Simon, using html, css and JS.</p>
<p style="margin-bottom: 5px;"><a class="btn btn-sm btn-warning rounded-pill" href="https://pranshustuff.github.io/Simon-game" style="background-color: #32012F; color: antiquewhite;">Learn More</a></p>
</div>
</div>
<div class="carousel-item">
<img src="./assets/drum-kit.png" class="d-block w-100" alt="Title drum kit and a 8 buttons, one for each of the drum set pieces.">
<div class="carousel-caption d-sm-block" style="padding: 20px;">
<h4>Drum Kit</h4>
<p class="d-none d-md-block">A fun digital copy of a real life drum kit.</p>
<p style="margin-bottom: 5px;"><a class="btn btn-sm btn-warning rounded-pill" href="https://pranshustuff.github.io/drum-kit" style="background-color: #32012F; color: antiquewhite;">Learn More</a></p>
</div>
</div>
<div class="carousel-item">
<img src="https://placehold.co/600x400" class="d-block w-100" alt="...">
<div class="carousel-caption d-sm-block" style="padding: 20px;">
<h4>Project 3</h4>
<p class="d-none d-md-block">Some representative placeholder content for the first slide.</p>
<p style="margin-bottom: 5px;"><a class="btn btn-sm btn-warning rounded-pill" href="#" style="background-color: #32012F; color: antiquewhite;">Learn More</a></p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div id="about" class="titles">
<h1 style="font-family:Abril Fatface ; font-size: 400%;">About Me</h1>
<hr style="height:5px;color:#32012F;background-color:#32012F; opacity: 100; width: 50%; ">
</div>
<p style="font-family:Montserrat; margin-left: 7%; text-align: left; width: 70%; font-size: 150%;">I am currently studying for a CSE degree at BITS Pilani Hyderabad Campus. Computers have always fascinated me, and I love experimenting with different software to manipulate them in various ways. My curiosity has led me down a path of coding, scripting, and development. I still have a lot to learn, but I am constantly amazed by the new things I discover.<br><br>
In addition, I have developed an interest in finance and consulting. Currently, I am a conditional consultant at WorldQuant, where my team and I won the IQC 2024 University Round. I have also participated in several case study competitions to improve my skills.
<div id="contact" class="titles">
<h1 style="font-family:Abril Fatface ; font-size: 400%;">Contact Me</h1>
<hr style="height:5px;color:#32012F;background-color:#32012F; opacity: 100; width: 50%; ">
<h2 class="col-sm-6" style="font-family: Montserrat; margin:20px;"><a class="btn btn-lg btn-warning rounded-pill" href="mailto: [email protected]" target="_blank" style="background-color: #32012F; color: antiquewhite; text-decoration: none;">Email Me!</a></h2>
<div class="contact-form">
<form id="contact_form" name="contact_form" method="post" novalidate action="#" style="background-color: #f4ded4">
<div class="mb-5">
<label for="name_input" class="form-label" style="font-family: Montserrat">Name</label>
<input type="text" required minlength="2" maxlength="50" class="form-control" id="name_input" name="name" placeholder="Name">
<div class="invalid-feedback">Please provide your name</div>
</div>
<div class="mb-5">
<label for="email_addr" class="form-label" style="font-family: Montserrat">Email address</label>
<input type="email" required minlength="2" maxlength="50" class="form-control" id="email_addr" name="email"
placeholder="[email protected]">
<div class="invalid-feedback">Please enter your email address</div>
</div>
<div class="mb-5">
<label for="message" class="form-label" style="font-family: Montserrat">Message</label>
<textarea maxlength="2500" required class="form-control" id="message" name="message" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-primary px-4 rounded-pill" style="background-color:#32012F; font-family: Montserrat;">Submit</button>
</form>
<script>
(() => {
'use strict'
const form = document.getElementById('contact_form');
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})()
</script>
</div>
<div class="logos">
<a class="link-body-emphasis" href="https://github.com/pranshustuff" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg></a>
<a class="link-body-emphasis" href="https://instagram.com/pranshu_q" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg></a>
</div>
</div>
<footer class="py-3" style="background-color: #32012F;">
<ul class="nav justify-content-center pb-3">
<li class="nav-item"><a href="#home" class="nav-link px-2" style="color: antiquewhite;">Home</a></li>
<li class="nav-item"><a href="#projects" class="nav-link px-2" style="color: antiquewhite">Projects</a></li>
<li class="nav-item"><a href="#about" class="nav-link px-2" style="color: antiquewhite">About Me</a></li>
<li class="nav-item"><a href="#contact" class="nav-link px-2" style="color: antiquewhite">Contact Me</a></li>
</ul>
</footer>
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 border-top" style="background-color: #32012F;">
<p style="color: antiquewhite; margin:auto">© 2024 Pranshu Suman. All rights reserved.</p>
</div>
<script id="ratufa_loader" src="https://www.ratufa.io/c/ld.js?f=tc98f9lv&n=n1.ratufa.io"></script>
</body>
</html>