Cleanup code

Remove redundant verbosity
Keep same layout
Fix html classes
This commit is contained in:
Candifloss 2025-05-27 16:14:21 +05:30
parent b3d6a2d202
commit 56f69c01d6
3 changed files with 28 additions and 36 deletions

View File

@ -77,6 +77,9 @@ footer {
opacity: 0.5;
}
.section1 {
padding: 1rem;
}
.section1::before {
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
}
@ -98,8 +101,7 @@ footer {
}
.section1 .content h1 {
font-size: 4rem;
margin-bottom: 1rem;
margin-top: -5rem;
margin: -5rem 0 1rem;
color: #5488bf;
text-shadow: 0 0 9px #373737;
}
@ -131,15 +133,10 @@ footer {
.section1 .content .portrait img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
margin: 0;
}
.section1 .content h1 {
text-align: left;
margin-top: 0;
margin-bottom: 1ch;
margin-left: 1.5rem;
margin: 0 0 1ch 1.5rem;
font-size: 2.7rem;
}
.section1 .content .tagline {

View File

@ -16,10 +16,10 @@
<h1>
Hello, I'm <span class="myname">[My Name]</span>
</h1>
<p>
<span class="tagline">Code Wizard. </span>
<span class="tagline">Terminal Fanatic. </span>
<span class="tagline">Amateur Artist. <span class="cursor">_</span></span>
<p class="tagline">
<span class="tagline-item">Code Wizard.</span>
<span class="tagline-item">Terminal Fanatic.</span>
<span class="tagline-item">Amateur Artist.<span class="cursor">_</span></span>
</p>
</div>
</section>

View File

@ -85,6 +85,8 @@ footer {
// Example background images per section
.section1 {
padding: 1rem;
&::before {
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
}
@ -99,7 +101,6 @@ footer {
height: 350px;
object-fit: cover;
border-radius: 50%;
//border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}
}
@ -107,10 +108,10 @@ footer {
.content {
text-align: left;
margin-left: -30rem;
h1 {
font-size: 4rem;
margin-bottom: 1rem;
margin-top: -5rem;
margin: -5rem 0 1rem;
color: #5488bf;
text-shadow: 0 0 9px #373737;
@ -122,7 +123,6 @@ footer {
.tagline {
font-size: 1.7rem;
//color: #ccc;
text-align: left;
.tagline-item {
@ -141,6 +141,7 @@ footer {
@media (max-width: 600px) {
.content {
margin: 0;
.portrait {
text-align: center;
margin: 0;
@ -148,40 +149,33 @@ footer {
img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
margin: 0;
//border: 3px solid rgba(255, 255, 255, 0.3);
//box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}
}
h1 {
text-align: left;
margin-top: 0;
margin-bottom: 1ch;
margin-left: 1.5rem;
font-size: 2.7rem;
margin: 0 0 1ch 1.5rem;
font-size: 2.7rem;
}
.tagline {
display: block;
display: block;
margin-left: 1.5rem;
.tagline-item {
display: block;
margin-bottom: 0.3rem;
}
.tagline-item {
display: block;
margin-bottom: 0.3rem;
}
.tagline-item:last-child {
margin-bottom: 0; // remove extra space after last line
}
.tagline-item:last-child {
margin-bottom: 0;
}
.cursor {
margin-left: 0.4ch; // keep close to text
.cursor {
margin-left: 0.4ch;
}
}
}
}
}
}
@ -192,6 +186,7 @@ footer {
}
.section2 {
&::before {
background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');