-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
167 lines (155 loc) · 8.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>srikanth kanjarla - portfolio</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- main container -->
<div class="container" id="home">
<!-- header with logo and nav links -->
<header class="header" id="nav-bar">
<nav class="navbar">
<div class="logo">
<p class="logo-text">{ S }</p>
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio" id="portfolio-link">Portfolio</a></li>
<li><a href="#about-me">About Me</a></li>
<li><a href="#contact-me">Contact Me</a></li>
<li title="github profile"><a href="https://github.com/srikanthkanjarla" target="_blank"><i
class="fab fa-github"></i></a></li>
</ul>
</nav>
</header>
<!-- Profile - homepage -->
<section class="profile-container">
<h1 class="profile-title">Hello, my name is <span class="profile-name" data-text="Srikanth Kanjarla">Srikanth
Kanjarla</span></h1>
<p class="profile-text">
I am a <span class="profile-role">Front End Developer</span> living in Hyderabad, India
</p>
<a href="#about-me" class="contact-link">
Know More   →
</a>
<div class="down-arrow"></div>
</section>
<!-- Portfolio - projects -->
<section class="portfolio-container" id="portfolio">
<h1 class="portfolio-title">My Recent Work</h1>
<p class="portfolio-text">
Take a look at some of my personal learning projects
</p>
<!-- project cards content is generated from javascript - projects.js -->
<div class="projects-container" id="projects"></div>
</section>
<!-- About me -->
<section class="about-container" id="about-me">
<div class="aboutme-wrapper">
<h1 class="about-title">About Me</h1>
<div class="aboutme-content">
<p>My name is <span class="main-text">Srikanth Kanjarla</span>, and I live in
<span class="main-text">Hyderabad, India</span>. My Bachelor's degree is in Information Technology</p>
<p>I'm a self-taught web developer learning through MOOC's.
I enjoy sharing my passion for <span class="main-text">Front End
Development</span> by building projects as a cohort participant and
facilitating learning groups of 5 to 10 learners via w3Develops
</p>
<p>I'm following the freeCodeCamp curriculum, and I have completed the <strong>Responsive Web Design</strong>
developer certificate. Daily I'm progressing individually and with groups through the
<strong>JavaScript Algorithms and Data Structures</strong>, <strong>Front End Libraries - React, Redux
</strong> challenges</p>
<!-- <p>I have completed 3 freeCodeCamp certificates
<ul>
<li>Responsive Web Design - HTML, CSS</li>
<li>JavaScript Algorithms and Data Structures</li>
<li>Front End Libraries - React, Redux, Sass</li>
</ul>
</p> -->
<p class="text-center">Please consider me as a candidate
for your next open full-time position as a Front-End Developer.</p>
<p class="check-progress">You can view my code via <span class="main-text">GitHub</span> or my progress
via <span class="main-text">
FreeCodeCamp</span> here</p>
<ul class="icons">
<li class="github-icon" title="GitHub Profile"><a href="https://github.com/srikanthkanjarla"
target="_blank"><i class="fab fa-github"></i></a></li>
<li class="fcc-icon" title="FreeCodeCamp Profile"><a href="https://www.freecodecamp.org/srikanthkanjarla"
target="_blank"><i class="fab fa-free-code-camp"></i></a></li>
<li class="codepen-icon" title="Codepen Profile"><a href="https://codepen.io/srikanth-kanjarla/"
target="_blank"><i class="fab fa-codepen"></i></a></li>
</ul>
</div>
</div>
<!-- Skills -->
<div class="skills-wrapper">
<h1 class="skills-title">My Skills</h1>
<div class="skills-container">
<ul class="skills icons">
<li class="html5-icon"><i class="fab fa-html5"></i> Html5</li>
<li class="css3-icon"><i class="fab fa-css3-alt"></i> Css3</li>
<li class="bootstrap-icon"><i class="fab fa-bootstrap"></i> Bootstrap</li>
<li class="js-icon"><i class="fab fa-js-square"></i> JavaScript</li>
<li class="react-icon"><i class="fab fa-react"></i> ReactJS</li>
<li class="redux-icon"><img src="./images/redux-icon.svg" alt="redux-icon"> Redux</li>
<!-- <li class="graphql-icon"><img src="./images/graphql-icon.svg" alt="graphql-icon">GraphQL</li>
<li class="gatsby-icon"><img src="./images/gatsby-icon.svg" alt="gatsby-icon">GatsBy</li> -->
<li class="npm-icon"><i class="fas fa-code-branch"></i> git</li>
<li class="npm-icon"><i class="fab fa-github-square"></i> GitHub</li>
<li class="npm-icon"><i class="fab fa-npm"></i> npm</li>
<li class="webpack-icon"><img src="./images/webpack-icon.svg" alt="webpack-icon"> Webpack</li>
<li class="babel-icon"><img src="./images/babel-icon.svg" alt="babel-icon"> Babel</li>
<li class="eslint-icon"><img src="./images/eslint-icon.svg" alt="eslint-icon"> Eslint</li>
</ul>
</div>
</div>
</section>
<!-- Contact me -->
<section class="contact-container" id="contact-me">
<h1 class="contact-title">Contact Me</h1>
<p class="contact-text">Want to know more? Drop me a line</p>
<p class="email"><i class="fas fa-envelope"></i> Email - srikanthkanjarla@gmail.com</p>
<!-- <p class="discord"><i class="fab fa-discord"></i> Discord - srikanthkanjarla#6766 </p> -->
<ul class="contact-icons icons">
<li class="twitter-icon" title="Twitter"><a href="https://twitter.com/Srikanth__K" target="_blank"><i
class="fab fa-twitter"></i></a></li>
<li class="facebook-icon" title="Facebook"><a href="https://www.facebook.com/srikanthrao.kanjarla"
target="_blank"><i class="fab fa-facebook-f"></i></a>
</li>
<!-- <li class="linkedin-icon" title="LinkedIn"><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</li> -->
</ul>
</section>
<!-- Footer -->
<footer class="footer">
<ul class="icons">
<li class="github-icon" title="GitHub"><a href="https://github.com/srikanthkanjarla" target="_blank"><i
class="fab fa-github"></i></a></li>
<li class="fcc-icon" title="FreeCodeCamp"><a href="https://www.freecodecamp.org/srikanthkanjarla"
target="_blank"><i class="fab fa-free-code-camp"></i></a></li>
<li class="codepen-icon" title="Codepen"><a href="https://codepen.io/srikanth-kanjarla/" target="_blank"><i
class="fab fa-codepen"></i></a></li>
<li class="twitter-icon" title="Twitter"><a href="https://twitter.com/Srikanth__K" target="_blank"><i
class="fab fa-twitter"></i></a></li>
<li class="facebook-icon" title="Facebook"><a href="https://www.facebook.com/srikanthrao.kanjarla"
target="_blank"><i class="fab fa-facebook-f"></i></a>
</li>
<!-- <li class="linkedin-icon" title="LinkedIn"><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</li> -->
</ul>
<p>Made with <i class="fas fa-heart"></i> by Srikanth Kanjarla</p>
<p>Copyright © <span id="year"></span>. All Rights Reserved</p>
</footer>
</div>
<script src="projects.js"></script>
<script src="main.js"></script>
</body>
</html>
<!-- Eliot's comment: Sorry, I got to this after the fact.
Looks good, dude. Happy for you. Way to go, man!-->