Skip to content

Commit 434b793

Browse files
author
Dyrits
committed
Minor refactoring
Diffferent partials files have been created and imported and the main stylesheet. The sidebar has been set as an aside element. Some modificaitons have been made, and the script has been updated. The BEM methodology have been used with unique ID used as CSS selector, for the header section. The stylesheet has been cleaned for the header section.
1 parent 63b21c4 commit 434b793

8 files changed

Lines changed: 275 additions & 319 deletions

File tree

‎app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
(function () {
22
[...document.querySelectorAll(".control")].forEach(button => {
33
button.addEventListener("click", function() {
4-
document.querySelector(".active-btn").classList.remove("active-btn");
5-
this.classList.add("active-btn");
4+
document.querySelector(".active-button").classList.remove("active-button");
5+
this.classList.add("active-button");
66
document.querySelector(".active").classList.remove("active");
77
document.getElementById(button.dataset.id).classList.add("active");
88
})
99
});
10-
document.querySelector(".theme-btn").addEventListener("click", () => {
10+
document.querySelector("#switch-mode").addEventListener("click", () => {
1111
document.body.classList.toggle("light-mode");
1212
})
1313
})();

‎index.html‎

Lines changed: 25 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,26 @@
1010
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1212
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
13+
<script src="app.js" defer></script>
1314
</head>
1415
<body class="main-content">
15-
<header class="container header active" id="home">
16-
<div class="header-content">
17-
<div class="left-header">
18-
<div class="h-shape"></div>
19-
<div class="image">
20-
<img src="img/hero.png" alt="">
16+
<header class="container active" id="home">
17+
<section id="header-content">
18+
<article id="header-content-left">
19+
<div id="header-content-left-shape"></div>
20+
<div id="header-content-left-image">
21+
<img src="./img/hero.png" alt="A photography of myself~">
2122
</div>
22-
</div>
23-
<div class="right-header">
24-
<h1 class="name">
25-
Hi, I'm <span>Nguyễn Văn Tài.</span>
26-
A Web Developer.
27-
</h1>
23+
</article>
24+
<article id="header-content-right">
25+
<h1>Hi, I'm <span>Solano Milan Diaz</span>, a Web Developer.</h1>
2826
<p>
29-
I'm a Web Developer, I love to create beautiful and functional websites.
30-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, libero?
31-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis sed aut!
27+
I'm a Web Developer, I love to create beautiful and functional websites. <br>
28+
[This part can be filled with additional information.]
3229
</p>
33-
<div class="btn-con">
34-
<a href="" class="main-btn">
35-
<span class="btn-text">Download CV</span>
36-
<span class="btn-icon"><i class="fas fa-download"></i></span>
37-
</a>
38-
</div>
39-
</div>
40-
</div>
30+
<a href="#" id="cv-link" target="_blank"><span id="cv-link-text">Download CV</span><span id="cv-link-icon"><i class="fas fa-download"></i></span></a>
31+
</article>
32+
</section>
4133
</header>
4234
<main>
4335
<section class="container about" id="about">
@@ -538,26 +530,15 @@ <h4>Contact me here</h4>
538530
</section>
539531
</main>
540532

541-
<div class="controls">
542-
<div class="control active-btn" data-id="home" >
543-
<i class="fas fa-home"></i>
544-
</div>
545-
<div class="control" data-id="about">
546-
<i class="fas fa-user"></i>
547-
</div>
548-
<div class="control" data-id="portfolio">
549-
<i class="fas fa-briefcase"></i>
550-
</div>
551-
<div class="control" data-id="blogs">
552-
<i class="far fa-newspaper"></i>
553-
</div>
554-
<div class="control" data-id="contact">
555-
<i class="fas fa-envelope-open"></i>
556-
</div>
557-
</div>
558-
<div class="theme-btn">
559-
<i class="fas fa-adjust"></i>
560-
</div>
561-
<script src="app.js"></script>
533+
<aside id="controls">
534+
<div class="control active-button" data-id="home"><i class="fas fa-home"></i></div>
535+
<div class="control" data-id="about"><i class="fas fa-user"></i></div>
536+
<div class="control" data-id="portfolio"><i class="fas fa-briefcase"></i></div>
537+
<div class="control" data-id="blogs"><i class="far fa-newspaper"></i></div>
538+
<div class="control" data-id="contact"><i class="fas fa-envelope-open"></i></div>
539+
</aside>
540+
<aside>
541+
<div id="switch-mode"><i class="fas fa-adjust"></i></div>
542+
</aside>
562543
</body>
563544
</html>

‎styles/_controls.scss‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
#controls {
2+
position: fixed;
3+
z-index: 10;
4+
top: 50%;
5+
right: 3%;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: center;
10+
transform: translateY(-50%);
11+
.control{
12+
padding: 1rem;
13+
cursor: pointer;
14+
background-color: var(--color-grey-4);
15+
width: 55px;
16+
height: 55px;
17+
border-radius: 50%;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
margin: .7rem 0;
22+
box-shadow: var(--box-shadow-1) ;
23+
i {
24+
font-size: 1.2rem;
25+
color: var(--color-grey-2);
26+
pointer-events: none;
27+
}
28+
}
29+
.active-button {
30+
background-color: var(--color-secondary);
31+
transition: all .4s ease-in-out;
32+
i { color: var(--color-white); }
33+
}
34+
}
35+
36+
#switch-mode {
37+
top: 5%;
38+
right: 3%;
39+
width: 70px;
40+
height: 70px;
41+
border-radius: 50%;
42+
background-color: var(--color-grey-4);
43+
cursor: pointer;
44+
position: fixed;
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
box-shadow: 0 3px 15px rgba(0,0,0,.3);
49+
transition: all .1s ease-in-out;
50+
&:active{ transform: translateY(-3px); }
51+
i{
52+
font-size: 1.4rem;
53+
color: var(--color-grey-2);
54+
pointer-events: none;
55+
}
56+
}

‎styles/_header.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
#header-content {
2+
width: 100%;
3+
display: grid;
4+
grid-template-columns: 1fr 1fr;
5+
height: 100vh;
6+
&-left {
7+
display: flex;
8+
align-items: center;
9+
position: relative;
10+
&-shape {
11+
transition: var(--transition);
12+
width: 65%;
13+
height: 100%;
14+
background-color: var(--color-secondary);
15+
position: absolute;
16+
left: 0;
17+
top: 0;
18+
z-index: -5;
19+
clip-path: polygon(0 0, 45% 0, 80% 100%, 0% 100%);
20+
}
21+
&-image {
22+
border-radius: 15px;
23+
width: 70%;
24+
height: 90%;
25+
margin-left: 4rem;
26+
background-color: var(--color-black);
27+
transition: var(--transition);
28+
img {
29+
width: 100%;
30+
height: 100%;
31+
object-fit: cover;
32+
transition: var(--transition);
33+
filter: grayscale(100%);
34+
&:hover { filter: grayscale(0%); }
35+
}
36+
}
37+
}
38+
&-right {
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: center;
42+
padding-right: 18rem;
43+
h1 {
44+
font-size: 2rem;
45+
span { color: var(--color-secondary); }
46+
}
47+
p {
48+
margin: 1.5rem 0;
49+
line-height: 2rem;
50+
}
51+
}
52+
}
53+
54+
#cv-link {
55+
border-radius: 30px;
56+
color: inherit;
57+
font-weight: 600;
58+
border: 1px solid var(--color-secondary);
59+
display: flex;
60+
align-self: flex-start;
61+
align-items: center;
62+
position: relative;
63+
overflow: hidden;
64+
&-text { padding: 0 2rem; }
65+
&-icon {
66+
background-color: var(--color-secondary);
67+
display: flex;
68+
align-items: center;
69+
justify-content: center;
70+
border-radius: 50%;
71+
padding: 1rem;
72+
}
73+
&:before {
74+
content: '';
75+
position: absolute;
76+
top: 0;
77+
right: 0;
78+
height: 100%;
79+
width: 100%;
80+
transform: translateX(100%);
81+
transition: var(--transition);
82+
background-color: var(--color-secondary);
83+
z-index: -5;
84+
}
85+
&:hover:before { transform: translateX(0); }
86+
}

‎styles/_variables.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
:root {
2+
--color-primary: #191d2b;
3+
--color-secondary: #27AE60;
4+
--color-white: #FFFFFF;
5+
--color-black: #000;
6+
--color-grey0: #f8f8f8;
7+
--color-grey-1: #dbe1e8;
8+
--color-grey-2: #b2becd;
9+
--color-grey-3: #6c7983;
10+
--color-grey-4: #454e56;
11+
--color-grey-5: #2a2e35;
12+
--color-grey-6: #12181b;
13+
--br-sm-2: 14px;
14+
--box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
15+
--transition: all .4s ease-in-out;
16+
}
17+
18+
.light-mode {
19+
--color-primary: #FFFFFF;
20+
--color-secondary: #F56692;
21+
--color-white: #454e56;
22+
--color-black: #000;
23+
--color-grey0: #f8f8f8;
24+
--color-grey-1: #6c7983;
25+
--color-grey-2: #6c7983;
26+
--color-grey-3: #6c7983;
27+
--color-grey-4: #454e56;
28+
--color-grey-5: #f8f8f8;
29+
--color-grey-6: #12181b;
30+
}

0 commit comments

Comments
 (0)