-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (226 loc) · 11.5 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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/7a4d8e54cf.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images/logo1.png" class="logo">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#project">Project & Certificate</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fa-solid fa-circle-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Student</p>
<h1>Hi, I'm <span>Tushar Kumar</span><br>Rana from Bangalore</h1>
</div>
</div>
</div>
<!-- ---------------------about---------------------------- -->
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/user1.png">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>Welcome to my digital corner!, I’m Tushar, An Enthusiast Technical learner
and entry level frontend Designer,Highly motivated and dedicated MCA Student
has securely passionate abt this innovative industry.Specialized in creating
scalable Web Applications that delivers exceptional user experiences.I constantly
upgrade my skills to stay at the cutting edge.My goal is always to blend creativity
with functionality.Let’s collaborate and create something extraordinary together!
</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('Interpersonal Skills')">Interpersonal Skills</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Data Structure Using C/DBMS</span></li>
<li><span>HTML,CSS,JAVASCRIPT</span></li>
<li><span>Python / AI&ML</span></li>
</ul>
</div>
<div class="tab-contents" id="Interpersonal Skills">
<ul>
<li><span>Critical Thinking</span></li>
<li><span>Team Player</span></li>
<li><span>Self-Motivation</span></li>
<li><span>Continous Learning</span></li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>2016</span><br>SSLC from BB High School</li>
<li><span>2018</span><br>PUC from Shanti Institute of Management Studies</li>
<li><span>2021</span><br>BSC from The National College,Jayanagara </li>
<li><span>2023</span><br>MCA from Dayananda Sagar College of Engineering</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- --------------------------------------services------------------------------------ -->
<div id="services">
<div class="container">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web Design</h2>
<p>Building modern, responsive websites for individuals or small businesses
using HTML,CSS,JavaScript and PHP.Creating basic Banking software for customer
reliable and collaborating with advertising brands for marketing."</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-hexagon-nodes-bolt"></i>
<h2>Machine Learning</h2>
<p>Designing machine learning models for predictive analysis in fields like finance
healthcare,e-commerce.Implementing algorithms like regression,classification
and clustering for specific problem domains.</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-handshake-angle"></i>
<h2>Volunteer-Based Work</h2>
<p>Helping non-profit organizations with website setup, basic IT support,
social media management.Conducting the beginner-level workshops on Python
programming with machine learning, or web development for underprivileged communities.</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<!-- ---------------------project-------------------------------- -->
<div id="project">
<div class="container">
<h1 class="sub-title">My Project & Certificates</h1>
<div class="work-list">
<div class="work">
<img src="images/work-4.png" alt="images of work" height="260" width="255">
<div class="layer">
<h3>Banking Management System</h3>
<p>The system streamlines banking activities such as account management,
transaction processing and customer services,reducing manual effort and
improving user experience.
</p>
<a href="#"><i class="fa-solid fa-paperclip"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-5.png" alt="image of work" height="260" width="255">
<div class="layer">
<h3>Online Payment Fraud detection</h3>
<p>It leverages machine learning techniques to analyze transaction patterns,
detect anomalies and identify fraudulent payments in real-time.
</p>
<a href="#"><i class="fa-solid fa-paperclip"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-6.png" alt="image of work" height="260" width="255">
<div class="layer">
<h3>Certificates</h3>
<p>Formal documents that verify the completion of a course, training,
achievement, or specific skills.
</p>
<a href="image.html"><i class="fa-solid fa-paperclip"></i></a>
</div>
</div>
</div>
<a href="#" class="btn"><i class="fa-regular fa-square-caret-down"></i>See more</a>
</div>
</div>
<!-- -------------------Contact------------------------------------- -->
<div id="contact">
<div class="conatiner">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-envelope"></i>tusharkumarrana19260@outlook.com</p>
<p><i class="fa-solid fa-square-phone"></i>9066376347</p>
<div class="social-icons">
<a href="https://www.facebook.com/tushar.kr.77"><i class="fa-brands fa-facebook"></i></a>
<a href="https://x.com/TusharkumarRan4"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="https://www.linkedin.com/in/tushar-kumar-rana-2a2b61286/"><i class="fa-brands fa-linkedin"></i></a>
<a href="http://www.instagram.com/"><i class="fa-brands fa-square-instagram"></i></a>
<a href="https://github.com/Rana345754"><i class="fa-brands fa-github"></i></a>
<a href="https://g.co/kgs/dwXQfpX"><i class="fa-solid fa-location-dot"></i></a>
</div>
<a href="images/my-cv1.pdf" download class="btn btn2"><i class="fa-solid fa-file-export"></i>Download CV</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © Portfolio. Made with <i class="fa-solid fa-heart"></i> by Tushar </p>
</div>
</div>
<script>
var tablinks = document.getElementsByClassName("tab-links");
var tabcontents = document.getElementsByClassName("tab-contents");
function opentab(tabname){
for(tablink of tablinks){
tablink.classList.remove("active-link");
}
for(tabcontent of tabcontents){
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab");
}
</script>
<script>
var sidemenu = document.getElementById("sidemenu");
function openmenu(){
sidemenu.style.right = "0";
}
function closemenu(){
sidemenu.style.right = "-200px";
}
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbyYjlwNWvallChC0FdB84I_BaPubkopvzUf78yyOH789adnQJVW9d1ZmgMxmtHs3bytFA/exec'
const form = document.forms['submit-to-google-sheet']
const msg = document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML = "Message sent successfully"
setTimeout(function(){
msg.innerHTML = ""
},5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>