Skip to content

Commit 7db2755

Browse files
DaneshCodeDaneshCode
committed
Update README and index.html for CV project; enhance styles and add skills section
1 parent 51a2840 commit 7db2755

File tree

3 files changed

+156
-47
lines changed

3 files changed

+156
-47
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ A sleek and responsive CV website built with HTML, CSS, and JavaScript.
4141

4242
## 💻 Live Demo
4343

44-
You can view the live demo of the calculator by clicking the link below:
44+
You can view the live demo of the cv-website by clicking the link below:
4545

4646
<a href="https://daneshcode.github.io/cv-website/" >🔗 Open the cv-website</a>
4747

‎index.html‎

Lines changed: 118 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,15 @@
4444
<div class="card">
4545
<div class="display-container">
4646
<img src="Avatar.jpg" style="width: 100%" alt="Avatar" />
47-
<div class="container">
47+
<div
48+
class="container"
49+
style="color: white; margin: 0 0 0 1.7rem; padding: 0 0 0 0"
50+
>
4851
<h3 style="color: white">Danesh khodadad</h3>
52+
53+
<h4 style="color: white; padding: 0.5rem 0 0 0">
54+
Date of Birth - 2004/9/14
55+
</h4>
4956
</div>
5057
</div>
5158
<div class="container">
@@ -63,7 +70,7 @@ <h3 style="color: white">Danesh khodadad</h3>
6370
</p>
6471
<p>
6572
<i
66-
class="fa fa-envelope fa-fw margin-right icon-large text-teal"
73+
class="fa-solid fa-envelope fa-fw margin-right icon-large text-teal"
6774
></i
6875
><span id="email">DaneshCode.Dev@gmail.com</span>
6976
<button class="copy-btn" onclick="copyEmail()">
@@ -80,28 +87,45 @@ <h3 style="color: white">Danesh khodadad</h3>
8087

8188
<p class="large">
8289
<b
83-
><i class="fa fa-asterisk fa-fw margin-right text-teal"></i
84-
>Skills</b
90+
><i class="fa-solid fa-code fa-fw margin-right text-teal"></i
91+
>Technical Skills</b
8592
>
8693
</p>
87-
<p>HTML</p>
88-
<div class="light-grey">
89-
<div class="container teal" style="width: 90%">90%</div>
94+
<div class="skills">
95+
<p><i class="fa-brands fa-html5"></i> HTML</p>
96+
<p><i class="fa-brands fa-css3-alt"></i> CSS</p>
97+
<p><i class="fa-brands fa-js"></i> JavaScript</p>
98+
<p>
99+
<i class="fa-solid fa-mobile-screen"></i> Responsive Design
100+
</p>
101+
<p><i class="fa-brands fa-git-alt"></i> Git</p>
102+
<p><i class="fa-brands fa-github"></i> GitHub</p>
103+
<p>
104+
<i class="fa-solid fa-keyboard"></i> Touch Typing (60+ WPM)
105+
</p>
90106
</div>
91-
<p>css</p>
92-
<div class="light-grey">
93-
<div class="container teal" style="width: 90%">
94-
<div class="text-white">90%</div>
95-
</div>
96-
</div>
97-
<p>Java Script</p>
98-
<div class="light-grey">
99-
<div class="container teal" style="width: 80%">80%</div>
107+
<hr />
108+
<p class="large">
109+
<b
110+
><i
111+
class="fa-solid fa-brain fa-fw margin-right text-teal"
112+
></i>
113+
Soft Skills</b
114+
>
115+
</p>
116+
<div class="skills">
117+
<p><i class="fa-solid fa-puzzle-piece"></i> Problem-Solving</p>
118+
<p><i class="fa-solid fa-lightbulb"></i> Critical Thinking</p>
119+
<p><i class="fa-solid fa-clock"></i> Time Management</p>
120+
<p><i class="fa-solid fa-comments"></i> Communication</p>
121+
<p><i class="fa-solid fa-users"></i> Teamwork</p>
100122
</div>
101-
<br />
123+
<hr />
102124
<p class="large text-theme">
103125
<b
104-
><i class="fa fa-globe fa-fw margin-right text-teal"></i
126+
><i
127+
class="fa-solid fa-language fa-fw margin-right text-teal"
128+
></i
105129
>Languages</b
106130
>
107131
</p>
@@ -122,7 +146,7 @@ <h3 style="color: white">Danesh khodadad</h3>
122146
<div class="container card">
123147
<h2>
124148
<i
125-
class="fa fa-suitcase fa-fw margin-right icon-large text-teal"
149+
class="fa-solid fa-briefcase fa-fw margin-right icon-large text-teal"
126150
></i
127151
>Work Experience
128152
</h2>
@@ -141,7 +165,7 @@ <h6 class="text-teal">
141165
<div class="container card">
142166
<h2>
143167
<i
144-
class="fa fa-certificate fa-fw margin-right icon-large text-teal"
168+
class="fa-solid fa-graduation-cap fa-fw margin-right icon-large text-teal"
145169
></i
146170
>Education
147171
</h2>
@@ -177,12 +201,14 @@ <h6 class="text-teal">
177201
<!-- Projects Section -->
178202
<div class="container card">
179203
<h2>
180-
<i class="fa fa-code fa-fw margin-right icon-large text-teal"></i
204+
<i
205+
class="fa-solid fa-laptop-code fa-fw margin-right icon-large text-teal"
206+
></i
181207
>Projects
182208
</h2>
183209
<div class="container">
184210
<h5 class="opacity">
185-
<b>🌟 Modern Personal Portfolio Website</b>
211+
<b>💻 Modern Personal Portfolio Website</b>
186212
</h5>
187213
<div class="project-links">
188214
<a
@@ -208,7 +234,7 @@ <h5 class="opacity">
208234
<hr />
209235
<div class="container">
210236
<h5 class="opacity">
211-
<b>🌟 Modern CV Website</b>
237+
<b>📄 Modern CV Website</b>
212238
</h5>
213239
<div class="project-links">
214240
<a
@@ -233,7 +259,7 @@ <h5 class="opacity">
233259
</div>
234260
<hr />
235261
<div class="container">
236-
<h5 class="opacity"><b>🎓 Online Course Platform</b></h5>
262+
<h5 class="opacity"><b>📚 Online Course Platform</b></h5>
237263
<div class="project-links">
238264
<a
239265
href="https://github.com/DaneshCode/course-platform"
@@ -281,7 +307,7 @@ <h5 class="opacity"><b>🍽️ Golden Plate Restaurant Website</b></h5>
281307
</div>
282308
<hr />
283309
<div class="container">
284-
<h5 class="opacity"><b>🚀 Cloud Hosting Landing Page</b></h5>
310+
<h5 class="opacity"><b>☁️ Cloud Hosting Landing Page</b></h5>
285311
<div class="project-links">
286312
<a
287313
href="https://github.com/DaneshCode/cloud-hosting-landing"
@@ -305,7 +331,7 @@ <h5 class="opacity"><b>🚀 Cloud Hosting Landing Page</b></h5>
305331
</div>
306332
<hr />
307333
<div class="container">
308-
<h5 class="opacity"><b>💻 Web Calculator</b></h5>
334+
<h5 class="opacity"><b>🧮 Web Calculator</b></h5>
309335
<div class="project-links">
310336
<a
311337
href="https://github.com/DaneshCode/Calculator"
@@ -323,16 +349,64 @@ <h5 class="opacity"><b>💻 Web Calculator</b></h5>
323349
</a>
324350
</div>
325351
<p>
326-
This project is a simple web calculator built using HTML, CSS, and
327-
JavaScript. It allows users to perform basic arithmetic operations
328-
(addition, subtraction, multiplication, and division), view
329-
multiplication tables, check if a number is prime or composite,
330-
and convert temperatures from Fahrenheit to Celsius.
352+
🧮 This project is a simple web calculator built using HTML, CSS,
353+
and JavaScript. It allows users to perform basic arithmetic
354+
operations, check if a number is prime or composite, and convert
355+
temperatures from Fahrenheit to Celsius.
356+
</p>
357+
</div>
358+
<hr />
359+
<div class="container">
360+
<h5 class="opacity"><b>🎮 Rock Paper Scissors Game</b></h5>
361+
<div class="project-links">
362+
<a
363+
href="https://github.com/DaneshCode/Rock-Paper-Scissors"
364+
class="project-link"
365+
target="_blank"
366+
>
367+
<i class="fab fa-github"></i> GitHub Repository
368+
</a>
369+
<a
370+
href="https://daneshcode.github.io/Rock-Paper-Scissors/"
371+
class="project-link"
372+
target="_blank"
373+
>
374+
<i class="fas fa-globe"></i> Live Demo
375+
</a>
376+
</div>
377+
<p>
378+
🎮 A modern, stylish implementation of the classic Rock Paper
379+
Scissors game!
380+
</p>
381+
</div>
382+
<hr />
383+
<div class="container">
384+
<h5 class="opacity"><b>🎨 Etch-a-Sketch</b></h5>
385+
<div class="project-links">
386+
<a
387+
href="https://github.com/DaneshCode/etch-a-sketch"
388+
class="project-link"
389+
target="_blank"
390+
>
391+
<i class="fab fa-github"></i> GitHub Repository
392+
</a>
393+
<a
394+
href="https://daneshcode.github.io/etch-a-sketch/"
395+
class="project-link"
396+
target="_blank"
397+
>
398+
<i class="fas fa-globe"></i> Live Demo
399+
</a>
400+
</div>
401+
<p>
402+
🎨 A modern take on the classic drawing toy! 🎨 🌟 An interactive
403+
web-based drawing application that lets you create pixel art with
404+
ease. Think of it as a digital Etch-a-Sketch with superpowers! 🚀
331405
</p>
332406
</div>
333407
<hr />
334408
<div class="container">
335-
<h5 class="opacity"><b>✨ Modern Visit Card 🚀</b></h5>
409+
<h5 class="opacity"><b>📇 Modern Visit Card</b></h5>
336410
<div class="project-links">
337411
<a
338412
href="https://github.com/DaneshCode/visit-card"
@@ -357,7 +431,7 @@ <h5 class="opacity"><b>✨ Modern Visit Card 🚀</b></h5>
357431
</div>
358432
<hr />
359433
<div class="container">
360-
<h5 class="opacity"><b>🏛️ Top Universities Web</b></h5>
434+
<h5 class="opacity"><b>🎓 Top Universities Web</b></h5>
361435
<div class="project-links">
362436
<a
363437
href="https://github.com/DaneshCode/Top-Universities-Web"
@@ -386,7 +460,7 @@ <h5 class="opacity"><b>🏛️ Top Universities Web</b></h5>
386460
</div>
387461
<hr />
388462
<div class="container">
389-
<h5 class="opacity"><b>🚀 Web Design Company 🌐</b></h5>
463+
<h5 class="opacity"><b>🌐 Web Design Company</b></h5>
390464
<div class="project-links">
391465
<a
392466
href="https://github.com/DaneshCode/web-design-company"
@@ -412,7 +486,7 @@ <h5 class="opacity"><b>🚀 Web Design Company 🌐</b></h5>
412486
</div>
413487
<hr />
414488
<div class="container">
415-
<h5 class="opacity"><b>🎫 A4 Business Card Generator</b></h5>
489+
<h5 class="opacity"><b>📇 A4 Business Card Generator</b></h5>
416490
<div class="project-links">
417491
<a
418492
href="https://github.com/DaneshCode/Business-Card"
@@ -470,12 +544,20 @@ <h5 class="opacity"><b>🎫 A4 Business Card Generator</b></h5>
470544

471545
<a
472546
class="hover-opacity"
473-
href="https://www.linkedin.com/login"
547+
href="https://www.linkedin.com/in/DaneshCode"
474548
title="linkedin"
475549
target="_blank"
476550
>
477551
<i class="fab fa-linkedin"></i>
478552
</a>
553+
<a
554+
class="hover-opacity"
555+
href="mailto:DaneshCode.Dev@gmail.com"
556+
title="email"
557+
target="_blank"
558+
>
559+
<i class="fas fa-envelope"></i>
560+
</a>
479561
</footer>
480562

481563
<script>

‎styles.css‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -81,18 +81,16 @@ body {
8181
position: relative;
8282
}
8383

84-
.display-container .container {
85-
padding: 1rem 0 0 1.9rem;
86-
}
87-
84+
.display-container h4,
8885
.display-container h3 {
89-
margin: 0;
86+
margin: 0 0 0 0;
9087
}
9188

9289
.display-container img {
9390
border-radius: 1rem 1rem 0 0;
91+
width: 100%;
9492
object-fit: cover;
95-
height: 300px;
93+
height: auto;
9694
}
9795

9896
.container {
@@ -147,6 +145,35 @@ h6 {
147145
margin: 1.5rem 0 1rem 0;
148146
}
149147

148+
.skills {
149+
display: flex;
150+
flex-wrap: wrap;
151+
gap: 1rem;
152+
justify-content: center;
153+
}
154+
155+
.skills p {
156+
display: flex;
157+
flex: 1 1 100px;
158+
padding: 0.5rem;
159+
background-color: #2563eb;
160+
color: white;
161+
border-radius: 0.5rem;
162+
text-align: center;
163+
transition: var(--transition);
164+
justify-content: center;
165+
align-items: center;
166+
cursor: pointer;
167+
}
168+
.skills p:hover {
169+
transform: scale(1.05);
170+
opacity: 0.9;
171+
}
172+
173+
.skills i {
174+
padding: 0 0.5rem;
175+
}
176+
150177
/* Footer */
151178
.bg-teal {
152179
background-color: var(--primary);
@@ -443,9 +470,9 @@ html {
443470
}
444471

445472
@media print {
446-
.card {
473+
/* .card {
447474
break-inside: avoid;
448-
}
475+
} */
449476

450477
.theme-toggle,
451478
.print-btn,
@@ -467,9 +494,9 @@ html {
467494
}
468495

469496
/* جلوگیری از شکستن عناصر مهم */
470-
.container {
497+
/* .container {
471498
break-inside: avoid;
472-
}
499+
} */
473500

474501
/* بهینه‌سازی فضای صفحه */
475502
.content {

0 commit comments

Comments
 (0)