-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathskills.html
235 lines (232 loc) · 9.33 KB
/
skills.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE HTML>
<html>
<head>
<title>Skills - Portfolio</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha384-uf4zWDBPS1tb6L9L2+vrn9zp5yG6vGxXzJSK7g/zxU4xgtPeirDzgF5G4sCjA1E" crossorigin="anonymous">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<style>
/* Add your custom styles here */
body {
background-color: #f3f3f3;
color: #333;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 15px;
text-align: center;
}
/* Update styles for navigation and links as needed */
nav {
background-color: #fff;
border-bottom: 1px solid #ddd;
}
nav ul.links li {
margin: 0 15px;
font-size: 18px;
}
.icons a {
color: #333;
font-size: 24px;
}
/* Update styles for skills content */
.skills-container {
background-color: #fff;
padding: 20px;
margin: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.skills-title {
color: #333;
font-size: 36px;
margin-bottom: 20px;
}
.skill {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.skill-icon {
font-size: 36px;
margin-right: 20px;
color: #007bff; /* Blue color for icons */
}
.skill-details {
flex: 1;
}
.skill-name {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 5px;
}
.skill-description {
font-size: 18px;
line-height: 1.6;
color: #666;
}
/* Footer styles */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body class="is-preload">
<div id="wrapper">
<header id="header">
<a href="index.html" class="logo">Skills</a>
</header>
<nav id="nav">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="active"><a href="skills.html">Skills</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="icons">
<li><a href="https://twitter.com/Yuvarajm752768" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/in/yuvarajmanoharan98/" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/yuvarajrajdata/yuvarajrajdata" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
</ul>
</nav>
<div id="main">
<div class="skills-container">
<h1 class="skills-title">My Skills</h1>
<div class="skill">
<div class="skill-icon"><i class="fas fa-code"></i></div>
<div class="skill-details">
<div class="skill-name">Python Programming</div>
<div class="skill-description">Proficient in Python for various data analysis and machine learning tasks.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-database"></i></div>
<div class="skill-details">
<div class="skill-name">Database Management</div>
<div class="skill-description">Experience with MySQL and MongoDB for database management.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-chart-bar"></i></div>
<div class="skill-details">
<div class="skill-name">Data Visualization</div>
<div class="skill-description">Skilled in creating visually appealing charts and graphs using Matplotlib and Plotly.</div>
</div>
</div>
<!-- Add more skills based on your list -->
<div class="skill">
<div class="skill-icon"><i class="fas fa-cogs"></i></div>
<div class="skill-details">
<div class="skill-name">API Integration</div>
<div class="skill-description">Experience integrating APIs to fetch and manipulate data from external sources.</div>
</div>
</div>
<!-- Continue adding skills as needed -->
<div class="skill">
<div class="skill-icon"><i class="fab fa-python"></i></div>
<div class="skill-details">
<div class="skill-name">Pandas</div>
<div class="skill-description">Skilled in using Pandas for data manipulation and analysis.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-calculator"></i></div>
<div class="skill-details">
<div class="skill-name">NumPy</div>
<div class="skill-description">Experience with NumPy for numerical computations in Python.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-flask"></i></div>
<div class="skill-details">
<div class="skill-name">Scikit-Learn (sklearn)</div>
<div class="skill-description">Proficient in using Scikit-Learn for machine learning tasks.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-database"></i></div>
<div class="skill-details">
<div class="skill-name">MongoDB</div>
<div class="skill-description">Experience working with MongoDB for NoSQL database management.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-database"></i></div>
<div class="skill-details">
<div class="skill-name">MySQL</div>
<div class="skill-description">Familiarity with MySQL for relational database management.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-chart-line"></i></div>
<div class="skill-details">
<div class="skill-name">Power BI</div>
<div class="skill-description">Skilled in creating interactive data visualizations using Power BI.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-table"></i></div>
<div class="skill-details">
<div class="skill-name">Tableau</div>
<div class="skill-description">Experience with Tableau for creating insightful visualizations.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-columns"></i></div>
<div class="skill-details">
<div class="skill-name">Streamlit</div>
<div class="skill-description">Proficient in building interactive web applications using Streamlit.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-chart-area"></i></div>
<div class="skill-details">
<div class="skill-name">Seaborn</div>
<div class="skill-description">Skilled in creating statistical visualizations using Seaborn.</div>
</div>
</div>
<div class="skill">
<div class="skill-icon"><i class="fas fa-chart-bar"></i></div>
<div class="skill-details">
<div class="skill-name">Matplotlib</div>
<div class="skill-description">Experience with Matplotlib for creating various types of plots.</div>
</div>
</div>
</div>
</div>
<!-- Continue adding skills as needed -->
</div>
</div>
<footer id="footer">
<section>
<blockquote style="font-style: italic; color: #151010; font-size: 16px;">
"Be the change that you wish to see most in your world."
</blockquote>
</section>
</footer>
<div id="copyright">
<ul>
<li>© Untitled</li>
<li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>