-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
212 lines (191 loc) · 8.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="style.css">
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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=David+Libre:wght@400;500;700&family=Inter:[email protected]&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=Karla:ital,wght@0,200..800;1,200..800&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=Comfortaa:[email protected]&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dheereshagrwal/[email protected]/src/app/ci.min.css" />
</head>
<body>
<div id="header">
<div class="container">
<nav>
<ul>
<li class="logo">
<a href="#">
<img src="images/TB-logo.png" width="14%">
</a>
</li>
<li class="toggle"><img src="images/hamburger.png" alt=""></li>
<li class="links"><a href="#about-section">About</a></li>
<li class="links"><a href="#projects-cont">Works</a></li>
<li class="links"><a href="#projects-cont">Clients</a></li>
<li class="links"><a href="#projects-cont">Journey</a></li>
<li class="links"><a href="#contact-section" id="lets-chat">Let's Chat</a></li>
</ul>
</nav>
</div>
<div class="landing-hero">
<div class="left-header">Hello I'm <span id="name">Tanish Bhamare</span>
<h1>
<a href="" class="typewrite" data-period="2000"
data-type='[ "UI Designer", "Programmer", "A hustler" ]'>
<span class="wrap"></span>
</a>
</h1>
</div>
<!-- <img src="images/tanish.png" height="500px"> -->
</div>
</div>
<div id="about-section">
<div class="left-about">
<div id="about-me-cont">
<h6>About Me</h6>
<hr>
</div>
<h2>You can’t use up creativity.<br>
The more you use, the more<br>
you haven in your significant mind.</h2>
<h4>I love to work in User Experience & User Interface designing. Because I love to present things in a
attractive manner to audience. I always try my best to make good UI with best UX. </h4>
<div id="learn-more-cont">
<p>Learn more</p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="27" viewBox="0 0 270 27" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M252.592 0.194415C252.147 -0.132753 251.522 -0.0372729 251.194 0.407676C250.867 0.852625 250.963 1.47855 251.408 1.80572L265.952 12.5001H1.5C0.947715 12.5001 0.5 12.9478 0.5 13.5001C0.5 14.0523 0.947715 14.5001 1.5 14.5001H265.952L251.408 25.1944C250.963 25.5216 250.867 26.1475 251.194 26.5925C251.522 27.0374 252.147 27.1329 252.592 26.8057L268.497 15.1114C269.584 14.3121 269.584 12.688 268.497 11.8888L252.592 0.194415Z"
fill="#FFD747" />
</svg>
</div>
</div>
<div class="right-about">
<div>
<img src="images/about-illustr.png" width="140%">
</div>
<div class="social-media-tray">
<!-- <img src="images/github.png" width="6%">
-->
<a href="https://github.com/Tanish2207"><i class="ci ci-github-light ci-3x"></i></a>
<a href="https://www.instagram.com/tan__4585/"><i class="ci ci-instagram-light ci-3x"></i></a>
<a href="https://www.linkedin.com/in/tanish-bhamare-b92a802a6/"><i
class="ci ci-linkedin-light ci-3x"></i></a>
<a href="https://dribbble.com/Tan4585"><i class="ci ci-dribbble-light ci-3x"></i></a>
</div>
</div>
</div>
<div id="projects-cont">
<p id="creative-works">Creative Works</p>
<div class="projects-inner">
<a href="https://sravjti.in/">
<div class="project">
<h2 id="Wall-E">Wall-E</h2>
<p>A self-balancing and line following robot controlled using ESP32 micro-controller</p>
</div>
</a>
<a href="https://bubble-up.netlify.app/">
<div class="project">
<h2 id="bubble-up">bubble <span>up</span></h2>
<p>It is a landing page for an online laundry and dry-cleaning services webste</p>
</div>
</a>
<a href="https://zip-zap-zone.netlify.app/">
<div class="project">
<img src="images/ecommerce-logo.png" width="90px">
<h2 id="zip-zap-zone">ZipZapZone</h2>
<p>An E-commerce website selling branded jackets and hoodies</p>
</div>
</a>
<a href="https://tan2207-timeline.netlify.app">
<div class="project">
<h2 id="timeline">Timeline</h2>
<p>A responsive Timeline UI which conveys the data in an appealing way</p>
</div>
</a>
</div>
</div>
<div id="contact-section">
<div class="left-contact">
<h6>Get in touch</h6>
<h2>Talk or meet with me</h2>
<div class="contact-details">
<div class="detail">
<img src="images/call.png" width="18%">
84830 84719
</div>
<div class="detail">
<img src="images/email.png" width="14%">
<a href="#">[email protected]</a>
</div>
<div class="detail">
<img src="images/coffee.png" width="20%">
Thane, Maharashtra
</div>
</div>
</div>
<div class="right-contact">
<h6>Thinking about a starting a project?</h6>
<h2>Let me know here</h2>
<form action="#">
<input type="text" id="name" placeholder="Enter your name">
<input type="email" class="email" placeholder="Enter your email">
<input type="text" placeholder="Tell me details about the project">
<button>Submit</button>
</form>
</div>
</div>
<div class="cursor"></div>
<script src="https://kit.fontawesome.com/6dfb83bcb0.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script>
let cursor = document.querySelector(".cursor");
function cursorControl(e) {
//tracks the cursors coordinates
let x = e.clientX;
let y = e.clientY;
//places the custom cursor onto the cursor coordinates
cursor.style.top = `${y}px`;
cursor.style.left = `${x}px`;
}
document.addEventListener("mousemove", cursorControl);
let divs = document.querySelectorAll(".project");
divs.forEach((div) => {
div.addEventListener("mouseenter", function () {
cursor.classList.add("cursorGrow");
// console.log(".cursorGrow added")
});
div.addEventListener("mouseleave", function () {
cursor.classList.remove("cursorGrow");
});
});
const imageClassNames = ["wall-e", "bubble-up", "ecommerce", "timeline"];
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener("mouseenter", function () {
cursor.classList.add(imageClassNames[i]);
// console.log("bg added");
});
divs[i].addEventListener("mouseleave", () => {
cursor.classList.remove(imageClassNames[i]);
});
}
</script>
</body>
</html>