-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (102 loc) · 5.68 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
<!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>Portfolio</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Montserrat&family=Sacramento&display=swap" rel="stylesheet">
<!-- inside css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="css_img/favicon .ico">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<!-- top -->
<section id= "top">
<!-- Nav Bar -->
<div class="container-fluid">
<nav id="navbar-id" class="navbar navbar-expand-md ">
<a class=" navbar-brand" href="">tykunal</a>
<button class="toggler navbar-toggler navbar-dark type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#middle-container">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact-me">Contact me</a>
</li>
</ul>
</div>
</nav>
</div>
<h1 class="top-title top-desc "> I'm Kunal.</h1>
<h2 class="top-desc">a <span class="develop">develop</span>er</h2>
</section>
<!-- middle container -->
<section id="middle-container">
<div class="profile">
<img class="profile-pic" src="css_img/man-modified.png" alt="animated-man">
<h2>Hey!</h2>
<p class="profile-desc"> I am a sophomore majoring in computer science & engineering. I am from Uttar pradesh, India.
I enjoy programming , problem solving and tinkering on side projects for fun.
When i am not working you can find me reading novels, watching movies and spending time with family. </p>
</div>
</section>
<hr>
<!-- skills -->
<section id="skills">
<h2 class="skills-size">My Skills</h2>
<div class="skill-row">
<img class="coding" src="css_img/coding.png" alt="coding-image">
<h3>Web Development</h3>
<p>I am a frontend developer and have contributed to many projects.
I am proficient in HTML(5), CSS(3), JavaScript.
I am in the process of acquiring knowledege of popular web development frameworks such as React, Angular, and node.js .</p>
</div>
<div class="skill-row">
<img class="blockchain" src="css_img/blockchain.png" alt="coding-image">
<h3>Blockchain</h3>
<p>I am a Blockchain enthusiast and had contibuted on few projects integrated with Web3 , hardhat and solidity.
I am engaged in the process of brushing up my skills.</p>
</div>
<div class="skill-row">
<img class="writer" src="css_img/film-editing.png" alt="">
<h3>Editing</h3>
<p >I find editing to be a highly fulfilling and satisfying endeavor.
I have had a significant amount of experience in editing videos and photos,
honing my skills in the manipulation and enhancement of visual media.</p>
</div>
</section>
<hr>
<!-- contact me -->
<section id="contact-me">
<h2 class="g-i-t">Get In Touch</h2>
<h3>Don't hesitate</h3>
<p class="contact-desc">You think , i got what it requires to do the job? <br> Feel free to connect.</p>
<a class="btn btn-outline-dark btn-lg" href="mailto:kunaltyagi00000@gmail.com">✉ CONTACT ME</a>
</section>
<!-- bottom-container -->
<section id="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/kunal-tyagi-30191923a/">LinkedIn</a>
<a class="footer-link" href="https://twitter.com/tykunal07">Twitter</a>
<a class="footer-link" href="https://github.com/Tykunal">Github</a>
<p class="copyright"> © kunal tyagi</p>
</section>
</body>
</html>