Skip to content

Commit a2094d6

Browse files
jfullstackdevjfullstackdev
committed
Update Page
1 parent d7d4754 commit a2094d6

2 files changed

Lines changed: 73 additions & 35 deletions

File tree

‎css/style.css‎

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,18 @@ body {
2222
}
2323

2424
.my-profile .card h3 {
25-
font-size: 20px;
26-
font-weight: 700;
25+
font-size: 16px;
26+
font-weight: 600;
27+
letter-spacing: 0.5px;
28+
font-family: Verdana, Geneva, sans-serif;
2729
}
2830

2931
.my-profile .card p {
30-
font-size: 16px;
32+
font-size: 14px;
3133
color: #000;
34+
line-height: 1.5;
35+
margin-bottom: 6px;
36+
font-family: Verdana, Geneva, sans-serif;
3237
}
3338

3439
.my-profile .table th,
@@ -42,10 +47,48 @@ h1 {
4247
text-align: center;
4348
font-family: "Century Gothic", arial, sans-serif;
4449
font-size: 200%;
50+
letter-spacing: 1px;
4551
}
4652

4753
p {
4854
font-family: "Century Gothic", arial, sans-serif;
4955
font-size: 125%;
50-
margin: 0;
56+
margin: 0;
57+
line-height: 1.5;
58+
}
59+
60+
.social-icons a:hover {
61+
transform: translateY(-3px);
62+
transition: transform 0.3s ease;
63+
}
64+
65+
ol li {
66+
margin-bottom: 4px;
67+
font-family: Verdana, Geneva, sans-serif;
68+
font-size: 14px;
69+
}
70+
71+
.ellipsis-separator {
72+
font-style: italic;
73+
letter-spacing: 3px;
74+
color: #555;
75+
margin: 0;
76+
line-height: 1;
77+
}
78+
79+
p.ellipsis-separator + p {
80+
margin-top: 3px;
81+
}
82+
83+
/* Custom styles to reduce gap between cards in desktop mode */
84+
@media (min-width: 992px) {
85+
.my-profile .row {
86+
margin-left: -5px;
87+
margin-right: -5px;
88+
}
89+
90+
.my-profile .row > div[class*='col-'] {
91+
padding-left: 5px;
92+
padding-right: 5px;
93+
}
5194
}

‎index.html‎

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>jdevfullstack Profile</title>
88
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap" rel="stylesheet">
99
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
10-
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>
10+
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'>
1111
<link rel="stylesheet" href="css/style.css">
1212

1313
<link rel="icon"
@@ -19,10 +19,10 @@
1919
<div class="rt-container">
2020
<div class="col-rt-12">
2121
<div class="rt-heading">
22-
<h1><strong>jfullstackdev</strong> <img src="https://komarev.com/ghpvc/?username=xdvrx1&label=GITHUB+PROFILE+VIEWS" alt="xdvrx1" /> <a href="https://xdvrx1.github.io/learn-to-code/"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fxdvrx1.github.io&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=PAGE+VIEWS&edge_flat=false"/></a></h1>
22+
<h1><strong>jfullstackdev</strong> <img src="https://komarev.com/ghpvc/?username=xdvrx1&label=GITHUB+PROFILE+VIEWS" alt="xdvrx1" /></h1>
2323
<center>
2424
<p>Design. Develop. Innovate.</p>
25-
<p>***</p>
25+
<p style="margin-top: 5px">***</p>
2626
</center>
2727
</div>
2828
</div>
@@ -35,7 +35,7 @@ <h1><strong>jfullstackdev</strong> <img src="https://komarev.com/ghpvc/?username
3535
<div class="my-profile py-4">
3636
<div class="container">
3737
<div class="row">
38-
<div class="col-lg-4">
38+
<div class="col-lg-4 mb-2 mb-lg-0">
3939
<div class="card shadow-sm">
4040
<div class="card-header bg-transparent text-center">
4141
<img class="profile_img" src="https://raw.githubusercontent.com/jdevfullstack/jdevfullstack.github.io/master/assets/profile.png" alt="profile pic">
@@ -47,43 +47,38 @@ <h3>jfullstackdev</h3>
4747
<div class="card shadow-sm">
4848
<div class="card-header bg-transparent border-0">
4949
<h3 class="mb-0"><i class="far fa-clone pr-1"></i>About Me</h3>
50-
<br>
51-
<p class="mb-0"><strong class="pr-1">GitHub: <a href="https://github.com/jdevfullstack" target="_blank" style="color:blue">https://github.com/jfullstackdev</a></strong></p>
52-
<p class="mb-0"><strong class="pr-1">Twitter: <a href="https://twitter.com/jdevfullstack" target="_blank" style="color:blue">https://twitter.com/jfullstackdev</a></strong></p>
53-
<br>
54-
<p> --- </p>
55-
<p>
56-
software developer, ICT & Robotics teacher & trainer,
57-
Google & VEX Robotics Certified Educator,
58-
GitHub Community Member (Level 3)
50+
<div class="social-icons" style="text-align: center; margin: 10px 0;">
51+
<a href="https://github.com/jfullstackdev" target="_blank" style="color:#333; font-size: 30px; margin: 0 2px; text-decoration: none; border: 2px dashed #4ca2cd; border-radius: 10px; width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; transition: transform 0.3s ease;">
52+
<i class="fab fa-github"></i>
53+
</a>
54+
<a href="https://twitter.com/jfullstackdev" target="_blank" style="color:#000; font-size: 30px; margin: 0 2px; font-weight: bold; font-style: normal; text-decoration: none; border: 2px dashed #4ca2cd; border-radius: 10px; width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; transition: transform 0.3s ease;">
55+
X
56+
</a>
57+
</div>
58+
<p style="text-align: center;">
59+
Senior Full Stack Developer, GitHub Contributor, Google & VEX Robotics Certified Educator, ICT & Robotics Instructor
5960
</p>
60-
<p> --- </p>
61-
<br>
62-
<p> --- </p>
61+
<p class="ellipsis-separator" style="text-align: center;"> ... </p>
6362
<p>
6463
I'm documenting the things I'm interested in, lessons that I'm
6564
learning and topics that I'm teaching. And I want to share these
6665
things with you. So, please hit the star button or fork any repo that
6766
you think is helpful / informative / worth it. It
6867
means a lot to me. Thanks.
6968
</p>
70-
<p> --- </p>
71-
<br>
72-
<p> --- </p>
69+
<p class="ellipsis-separator" style="text-align: center;"> ... </p>
7370
<p>
74-
I'm now a freelancer so you can hire me.
75-
<div>
76-
<ol>
77-
<li>Web Dev ( Java, Spring Boot, PHP, Laravel )</li>
78-
<li>online tutorial ( programming, Arduino & Robotics )</li>
79-
<li>writing tech lessons, topics or Course Syllabus</li>
80-
<li>Technical Writing</li>
81-
</ol>
82-
</div>
83-
just DM me for the details at <a href="https://twitter.com/jfullstackdev">Twitter</a>
71+
I'm now a freelancer so you can hire me:
8472
</p>
85-
<p> --- </p>
86-
<br>
73+
<ol style="margin: 5px 0; padding-left: 25px;">
74+
<li>Web Dev ( Java, Spring Boot, PHP, Laravel )</li>
75+
<li>online tutorial ( programming, Arduino & Robotics )</li>
76+
<li>writing tech lessons, topics or Course Syllabus</li>
77+
<li>Technical Writing</li>
78+
</ol>
79+
<p>
80+
Just DM me for the details at <a href="https://twitter.com/jfullstackdev" style="color: #000;">Twitter (X)</a>
81+
</p>
8782
</div>
8883
</div>
8984
</div>

0 commit comments

Comments
 (0)