-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (186 loc) · 11.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Port.css">
<title>PORTFOLIO</title>
</head>
<body>
<nav class="navbar">
<ul class="link-group">
<li class="link active"><a href="#home">home</a></li>
<li class="link"><a href="#project">projects</a></li>
<li class="link"><a href="#about">about</a></li>
<li class="link"><a href="#contact">contact</a></li>
</ul>
</nav>
<section class="home-section active" id="home">
<h1 class="hero-heading">hello, I am <br> Tarun </h1>
<img src="Tarun.png" class="home-img" alt="">
</section>
<section class="project-section active" id="project">
<h1 class="project-heading">some of my projects</h1>
<div class="project-container">
<div class="project-card">
<img src="cloud.png" class="project-img" alt="">
<div class="project-content">
<h1 class="project-title">Weather Forecast Web App</h1>
<p class="project-info">
Stay ahead of the weather with your ultimate weather forecast app. Offering accurate, real-time updates, detailed forecasts, and severe weather alerts.
</p>
<div class="project-btn-grp">
<button class="project-btn github"><a href="https://github.com/Tarunshukla2905/Weather-Web-App">Github repo</a></button>
<button class="project-btn live">see live</button>
</div>
</div>
</div>
<div class="project-card">
<img src="pl.jpg" class="project-img" alt="">
<div class="project-content">
<h1 class="project-title">Social Media Platform</h1>
<p class="project-info">
ChatterHub is your social media platform for building meaningful connections.Share your moments,follow your interests, and engage with vibrant community.
</p>
<div class="project-btn-grp">
<button class="project-btn github"><a href="https://github.com/Tarunshukla2905/Social-Media-PLatform">Github repo</a></button>
<button class="project-btn live">see live</button>
</div>
</div>
</div>
<div class="project-card">
<img src="flappy-removebg-preview.png" class="project-img" alt="">
<div class="project-content">
<h1 class="project-title">Flappy Bird Game</h1>
<p class="project-info">
Experience the addictive fun of Flappy Bird, the simple yet challenging game that has taken the world by storm.Tap to navigate your bird through a series of pipes, aiming for the highest score.
</p>
<div class="project-btn-grp">
<button class="project-btn github"><a href="https://github.com/Tarunshukla2905/Flappy-Bird">Github repo</a></button>
<button class="project-btn live">see live</button>
</div>
</div>
</div>
<div class="project-card">
<img src="Port.jpg" class="project-img" alt="">
<div class="project-content">
<h1 class="project-title">Portfolio</h1>
<p class="project-info">
Showcase your skills and accomplishments with a comprehensive professional portfolio. Highlight your best work, career achievements, and unique talents in a visually appealing format.
</p>
<div class="project-btn-grp">
<button class="project-btn github"><a href="https://github.com/Tarunshukla2905/Portfolio-with-Team">Github repo</a></button>
<button class="project-btn live">see live</button>
</div>
</div>
</div>
<div class="project-card">
<img src="E.png" class="project-img" alt="">
<div class="project-content">
<h1 class="project-title">E-Commerce Website</h1>
<p class="project-info">
A seamless online shopping experience with Red Store, ultimate e-commerce destination. Offering a Huge products across various categories.
</p>
<div class="project-btn-grp">
<button class="project-btn github"><a href="https://github.com/Tarunshukla2905/E-Commerce-Website">Github repo</a></button>
<button class="project-btn live">see live</button>
</div>
</div>
</div>
</section>
<section class="about-section active" id="about">
<h1 class="heading">About</h1>
<div class="about">
<div class="about-img-container">
<img src="Taa.jpg" class="about-img" alt="">
<button class="download-cv-btn">downlaod cv</button>
</div>
<p class="about-info">Hello! I'm <b> Tarun Shukla </b>, a versatile Web Developer, skilled Python Programmer, and passionate UX/UI Designer. With a robust background in creating intuitive and user-friendly web applications, I thrive on solving complex problems and transforming ideas into seamless digital experiences. Dedicated and ambitious BTech candidate specializing in HTML,CSS, Javascript, Canva, Figma , WIX Studio , Python. With a passion for Web Development, Designing, I am equipped with a strong academic background and practical experience. Eager to contribute to innovative projects and collaborate with like-minded professionals, I am committed to continuous learning and growth in the IT Industry. I am flexible and can adapt
to new situations . I have a friendly personality and enjoy interacting with others. I am genuine, and people can see that I am authentic and honest. I am a hard worker and am always putting in the extra effort to achieve my goals.</p>
</div>
<div class="skill-section">
<h1 class="heading">skills</h1>
<div class="skills-container">
<div class="skill-card">
<img src="htm.png" class="skill-img" alt="">
<div class="skill-level">90%</div>
<h1 class="skill-name">HTML</h1>
<p class="skill-info">I specialize in crafting clean,semantic,and accessible web pages. My proficiency with HTML allows me to leverage modern web features to enhance user experiences.</p>
</div>
<div class="skill-card">
<img src="CSS.png" class="skill-img" alt="">
<div class="skill-level">80%</div>
<h1 class="skill-name">CSS</h1>
<p class="skill-info">I am a skilled CSS developer with a passion for creating visually stunning and responsive web designs.My expertise in CSS allows me to craft layouts that are both flexible and adaptable across all devices.</p>
</div>
<div class="skill-card">
<img src="JS.png" class="skill-img" alt="">
<div class="skill-level">70%</div>
<h1 class="skill-name">JAVASCRIPT</h1>
<p class="skill-info">I am a proficient JavaScript developer with a strong background in building dynamic and interactive web applications. My expertise includes modern JavaScript frameworks and libraries such as React, Angular, and Vue.js </p>
</div>
<div class="skill-card">
<img src="PY.png" class="skill-img" alt="">
<div class="skill-level">68%</div>
<h1 class="skill-name">PYTHON PROGRAMMING</h1>
<p class="skill-info">I am a skilled Python programmer with a passion for developing robust and efficient applications. My expertise spans web development using Python Framework</p>
</div>
<div class="skill-card">
<img src="UI.png" class="skill-img" alt="">
<div class="skill-level">80%</div>
<h1 class="skill-name">UI/UX DESIGNING</h1>
<p class="skill-info">I am a dedicated UI/UX designer with a talent for creating intuitive and visually appealing user interfaces. I excel in wireframing, prototyping, and user testing, with proficiency in tools like Figma, Adobe XD, Canva , Wix Studio and Sketch.</p>
</div>
<div class="skill-card">
<img src="mysql.png" class="skill-img" alt="">
<div class="skill-level">70%</div>
<h1 class="skill-name">SQL / MYSQL</h1>
<p class="skill-info">I am a proficient SQL and MySQL developer with extensive experience in designing, implementing, and managing databases. My expertise includes writing complex queries, optimizing database performance, and ensuring data integrity and security.</p>
</div>
</div>
<div class="timeline">
<h1 class="heading">education and experience</h1>
<div class="card">
<div class="card-body">
<h1 class="card-title">2018-2019</h1>
<p class="card-detail">I have Completed My Senior Secondary School (Class X) From Maharishi Vidya Mandir School , Lucknow. I got 88% in 10th Standard. I Got 3rd Rank in Maths Olympaid</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h1 class="card-title">2020-2021</h1>
<p class="card-detail">I have Completed My Senior Secondary School (Class XII) From Maharishi Vidya Mandir School , Lucknow. I got 87% in 12th Standard.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h1 class="card-title">2021-2025</h1>
<p class="card-detail">Currently I am Pursuing mY B-Tech in Computer Science Branch From B.N College Of Engineering And Technology. I am a 4th Year Student| Web Developer | Python | UX/UI Designer | Programmer Enthusiast .</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h1 class="card-title">2023-2024</h1>
<p class="card-detail"> I have One and Half-Year Experience in Araambh Community As a UI/UX Designer and Social Media Manage and Creative Head.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h1 class="card-title"></h1>
<p class="card-detail"> </p>
</div>
</div>
</div>
</div>
</section>
<section class="contact-section active" id="contact">
<h1 class="heading">Contact</h1>
<form class="contact-form">
<input type="text" name="name" id="name" autocomplete="off" placeholder="name">
<input type="text" name="email" id="email" autocomplete="off" placeholder="email">
<textarea name="msg" id="msg" placeholder="message" autocomplete="off"></textarea>
<button type="submit" class="form-submit-btn">contact</button>
</form>
</section>
</body>
</html>