-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (158 loc) · 6.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<!-- Locating stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Google font from api -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan:400,500,700&lang=en">
<!-- Google font from api -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="navbar" class="curve-bottom-edge-only">
<div id="brand-name">Devloper appsplash99</div>
<div >
<ul id="nav-menu">
<li><a href="index.html" alt="home-page">Home</a></li>
<li><a href="projects.html" alt="projects-page" >Projects</a></li>
<li><a href="blog.html" alt="blog-page">Blog</a></li>
</ul>
</div>
</nav>
</header>
<!-- 1 Hero -->
<section id="hero">
<!-- <h1>😀 Hey there! </h1> -->
<img id="hero-img" src="static/me_coding.png" alt="hero-image">
<p class="my-name has-border curve-all-edges"> Hi! 😄 I am Apurv Chimralwar</p>
<h1 id="web-dev" class="has-border curve-all-edges">WEB DEVELOPER</h1>
</section>
<!-- 2 Skills Section -->
<section id="all-skills-container">
<h1 class="section-label curve-all-edges">SKILL STACK</h1>
<!-- Language and Frameworks -->
<div class="skill-card curve-all-edges">
<h4>Languages & Frameworks</h4>
<div class="skill-type">
<div class="skill-item">
<img class="skill-icon" src="static/html5.svg" alt="Netlify Logo">
<p>HTML5</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/css3.svg" alt="css3" >
<p>CSS3</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/javascript.svg" alt="js" >
<p>JavaScript</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/react.svg" alt="react" >
<p>React</p>
</div>
<!-- <div class="skill-item">
<img class="skill-icon" src="static/node-dot-js.svg" alt="nodejs" >
<p>NodeJS</p>
</div> -->
</div>
</div>
<!-- Version Control -->
<div class="skill-card curve-all-edges">
<h4>Version Control</h4>
<div class="skill-type">
<div class="skill-item">
<img class="skill-icon" src="static/git.svg" alt="git" >
<p>Git</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/github.svg" alt="Github" >
<p>Github</p>
</div>
</div>
</div>
<!-- Dev Tools -->
<div class="skill-card curve-all-edges">
<h4>Devloper Tools</h4>
<div class="skill-type">
<div class="skill-item">
<img class="skill-icon" src="static/visualstudiocode.svg" alt="vscode" >
<p>VS Code</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/repl-dot-it.svg" alt="replit" >
<p>repl.it</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/pycharm.svg" alt="pycharm" >
<p>PyCharm</p>
</div>
</div>
</div>
<!-- Web Hosting -->
<div class="skill-card curve-all-edges">
<h4>Web Hosting</h4>
<div class="skill-type">
<div class="skill-item">
<img class="skill-icon" src="static/netlify.svg" alt="netlify" >
<p>Netlify</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/vercel.svg" alt="vercel" >
<p>Vercel</p>
</div>
</div>
</div>
<!-- Design Tools -->
<div class="skill-card curve-all-edges">
<h4>Design Tools</h4>
<div class="skill-type">
<div class="skill-item">
<img class="skill-icon" src="static/adobeillustrator.svg" alt="illustrator" >
<p>illustrator</p>
</div>
<div class="skill-item">
<img class="skill-icon" src="static/adobephotoshop.svg" alt="photoshop" >
<p>photoshop</p>
</div>
</div>
</div>
</section>
<!-- 3 Projects -->
<section id="all-skills-container">
<h1 class="section-label curve-all-edges">PROJECTS</h1>
<!-- Language and Frameworks -->
<div class="skill-card curve-all-edges">
<h4><a class="page-link-button curve-all-edges" href="/projects.html" target="_blank" alt="projects">Browse Projects</a> to play with all the fun stuff i have made...</h4>
</div>
</section>
<!-- 4 Blogs -->
<section id="all-skills-container">
<h1 class="section-label curve-all-edges">BLOGS</h1>
<!-- Language and Frameworks -->
<div class="skill-card curve-all-edges">
<h4><a class="page-link-button curve-all-edges" href="/blog.html" target="_blank" alt="blogs">Browse Blogs</a> to read blogs i have published...</h4>
</div>
</section>
<!-- 5 Lets Connect -->
<footer id="socials-container" class="curve-top-edge-only">
<!-- Lets Connect -->
<h1>Let's Connect</h1>
<!-- Social Icons -->
<div id="social-links" >
<a href="https://github.com/appsplash99" alt="github" target="blank"><img src="static/github.svg" alt="github-appsplash99"></a>
<a href="https://codesandbox.io/u/appsplash99" alt="email" target="blank"><img src="static/codesandbox.svg" alt="codesandbox"></a>
<a href="https://twitter.com/ApurvChimralwar" alt="twitter" target="blank"><img src="static/twitter.svg" alt="twitter"></a>
<a href="https://hashnode.com/@appsplash99" alt="hashnode" target="blank"><img src="static/hashnode.png" alt="hashnode"></a>
<a href="https://in.linkedin.com/in/ApurvChimralwar" alt="linkedin" target="blank"><img src="static/linkedin.svg" alt="linkedin"></a>
<a href="" alt="email" target="blank"><img src="static/gmail.svg" alt="email"></a>
</div>
<!-- Made By appsplash99 -->
<h3 id="made-by">Made with ❤️ by appsplash99</h3>
</footer>
</body>
</html>