-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (121 loc) · 7.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Karan Singh Negi is an experienced full stack developer, poet, guitarist, magician, traveller and fitness enthusiast" />
<meta name="keywords" content="Karan Singh Negi">
<meta name="author" content="Karan Singh Negi">
<meta name="theme-color" content="#292929"/>
<link rel="icon" type="image/png" href="./img/fevicon/fevicon.png">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Karan_Negi_">
<meta name="twitter:title" content="Karan Singh Negi, Web Developer">
<meta name="twitter:description" content="Lone Wolf">
<meta name="twitter:image:alt" content="Karan Singh Negi">
<!-- Facebook Open Graph Cards -->
<meta property="og:url" content="https://karansinghnegi.github.io/" />
<meta property="og:type" content="summary" />
<meta property="og:title" content="Karan Singh Negi, Web Developer" />
<meta property="og:description" content="Lone Wolf" />
<!-- Linkedin Open Graph Cards -->
<meta property='og:title' content='Karan Singh Negi, Web Developer'/>
<meta property='og:description' content='Lone Wolf'/>
<meta property='og:url' content='https://karansinghnegi.github.io/'/>
<!-- Font-Awesome Icon Stylesheet-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<!-- Google Font API -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inria+Sans:wght@300&display=swap" rel="stylesheet">
<!-- Custom css files -->
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/responsive.css">
<title>Karan Singh Negi</title>
</head>
<body>
<section class="wrapper">
<header class="main-header">
<!-- Author Image -->
<figure class="author-img">
<img src="./img/negi.jpg" alt="Author">
<figcaption class="author-img-caption">MERN Stack Developer</figcaption>
</figure>
<main>
<!-- Section about author and his social network -->
<section class="author-name-social">
<h1>KARAN SINGH NEGI</h1>
<nav class="nav-social">
<ul class="social-links">
<li><a href="https://twitter.com/Karan_Negi_" target="new"><img src="./img/social/twitter.png" alt="Twitter"></a></li>
<li><a href="https://www.linkedin.com/in/karan-singh-negi-85743918b/" target="new"><img src="./img/social/linkedin.png" alt="Linkedin"></a></li>
<li><a href="https://github.com/karansinghnegi" target="new"><img src="./img/social/github.png" alt="Github"></a></li>
<li><a href="https://www.instagram.com/acoustic_karan/" target="new"><img src="./img/social/instagram.png" alt="Instagram"></a></li>
<li><a href="https://www.facebook.com/acoustic.karannegi/" target="new"><img src="./img/social/facebook.png" alt="Facebook"></a></li>
</ul>
</nav>
</section>
<!-- Section about author intro and his work -->
<section class="about-author">
<section class="author-intro">
<h2>I am a <span class="dynamic-string"></span><span class="caret">|</span></h2>
</section>
<nav>
<ul class="nav-about-author">
<li class="nav-home"><a href="#"><i class="fas fa-home fa-2x"></i>Home</a></li>
<li class="nav-resume"><a href="#"><i class="fas fa-graduation-cap fa-2x"></i>Resume</a></li>
<li class="nav-work"><a href="#"><i class="fas fa-folder-open fa-2x"></i>Work</a></li>
<li class="nav-contact"><a href="#"><i class="fas fa-envelope fa-2x"></i>Contact</a></li>
</ul>
</nav>
</section>
</main>
</header>
<!-- HOME SECTION -->
<section id="home-section">
<!-- Section about author brief introduction -->
<section class="author-brief-intro">
<header>
<h3>Welcome to my page</h3>
<p>I am a passionate Full Stack Web Developer. I love to code and design. I feel satisfied when I see any of my projects get executed on various screens. I deliver beautiful Websites and PSD to HTML5 pages using cutting edge Web Development technologies like HTML5, CSS3, JavaScript, React, BootStrap, JQuery, NodeJS, MySQL. Working on pixel perfect websites and writing understandable and commented codes for future support make me different from others.</p>
<p> I am very passionate about Web Development, and strive to better myself as a developer, and the development community as a whole. I have a good communication and team management skills with the ability to learn new concepts and adapt to new technologies. I am both driven and self-motivated, and constantly experimenting with new technologies and techniques. In my spare time, I write <a href="#">songs, poetry,</a> read story-books, do magic tricks and play guitar.</p>
</header>
</section>
<!-- Section about author skills -->
<section class="author-expertise">
<header>
<h4>My Expertise</h4>
<p>My emphasized skills are: HTML5, CSS3, SCSS, Javascript, JQuery. Frameworks: React, Bootstrap etc. For Back End I use: NodeJS, ExpressJS, MongoDB, MySQL etc.</p>
</header>
<hr />
<section class="expertise-percentage">
<h5 class="progress-html">HTML 5</h5>
<progress value="0" data-value="92" max="100"></progress>
<h5>CSS 3</h5>
<progress value="0" data-value="85" max="100"></progress>
<h5>SCSS</h5>
<progress value="0" data-value="65" max="100"></progress>
<h5>Bootstrap</h5>
<progress value="0" data-value="69" max="100"></progress>
<h5>JavaScript</h5>
<progress value="0" data-value="90" max="100"></progress>
<h5>React</h5>
<progress value="0" data-value="80" max="100"></progress>
<h5>MongoDB</h5>
<progress value="0" data-value="75" max="100"></progress>
<h5>NodeJs</h5>
<progress value="0" data-value="70" max="100"></progress>
</section>
</section>
</section>
<!-- Footer section -->
<footer class="footer">
<a href="./docs/Karan's Resume.pdf" download><i class="fas fa-cloud"></i>Download Resume</a>
<p>Copyright Reserved © 2021-2022</p>
</footer>
</section>
</body>
<!-- Custom JavaScript Files -->
<script src="./js/index.js"></script>
<script src="./js/dynamicString.js"></script>
</html>