Skip to content

Commit 74d6af3

Browse files
SoonOwOnooSSoonOwOnooS
committed
layout update
1 parent 48bfe6d commit 74d6af3

2 files changed

Lines changed: 66 additions & 66 deletions

File tree

‎CSS/style.css‎

Lines changed: 63 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
--shadow-color: #88fff97e
99
}
1010

11-
.home-introduction {
11+
.home-introduction,
12+
.portfolio {
1213
background: linear-gradient(160deg, rgba(208, 253, 255, 0.05), rgba(255, 238, 213, 0.05));
1314
margin: 30px 50px;
1415
border-bottom: 1px solid rgb(160, 242, 230);
@@ -19,8 +20,8 @@
1920
}
2021

2122
.logo {
22-
height: 40px;
23-
width: 40px;
23+
height: clamp(35px, 2vw, 40px);
24+
width: clamp(35px, 2vw, 40px);
2425
}
2526

2627
.headerContainer {
@@ -56,12 +57,13 @@ nav a:hover {
5657
.billboard h1 {
5758
font-weight: bold;
5859
text-transform: uppercase;
59-
font-size: 4rem;
60+
font-size: clamp(2.5rem, 10vw, 4rem);
6061
margin-bottom: 20px;
6162
}
6263

6364
.billboard p {
6465
color: white;
66+
font-size: clamp(0.9rem, 2vw, 1rem);
6567
}
6668

6769
.billboardContent {
@@ -77,6 +79,16 @@ nav a:hover {
7779
text-decoration: none;
7880
}
7981

82+
.aboutMe {
83+
background-color: var(--transparency-background-color);
84+
color: white;
85+
padding: 20px;
86+
display: grid;
87+
grid-template-columns: repeat(2,1fr);
88+
align-items: center;
89+
grid-gap: 1em;
90+
}
91+
8092
.aboutMe .grid-left {
8193
position: relative;
8294
display: flex;
@@ -168,14 +180,22 @@ nav a:hover {
168180
text-shadow: 2px 2px 1px var(--button-hover-color-text);
169181
}
170182

171-
.aboutMe {
172-
background-color: var(--transparency-background-color);
173-
color: white;
174-
padding: 20px;
175-
display: grid;
176-
grid-template-columns: repeat(2,1fr);
177-
align-items: center;
178-
grid-gap: 4em;
183+
.introduction {
184+
position: relative;
185+
max-width: 600px;
186+
}
187+
188+
.introduction h1{
189+
font-size: clamp(1.2rem, 1.5rem, 2rem);
190+
margin-block-start: 0px;
191+
margin-block-end: 0.2em;
192+
}
193+
194+
.introduction p {
195+
color: gainsboro;
196+
font-size: clamp(0.9rem, 2vw, 1rem);
197+
margin-block-start: 0.4em;
198+
margin-block-end: 0.4em;
179199
}
180200

181201
@media (max-width: 768px) {
@@ -193,26 +213,9 @@ nav a:hover {
193213
}
194214
}
195215

196-
.introduction {
197-
max-width: 600px;
198-
}
199-
200-
.introduction h1{
201-
font-size: clamp(1.5rem, 4vw, 2rem);
202-
margin-block-start: 0px;
203-
margin-block-end: 0.2em;
204-
}
205-
206-
.introduction p {
207-
color: gainsboro;
208-
font-size: 16px;
209-
margin-block-start: 0.4em;
210-
margin-block-end: 0.4em;
211-
}
212-
213216
.skill-container {
214217
max-width: 560px;
215-
padding: 7px 10px;
218+
padding: clamp(5px, 1.5vw, 7px) clamp(6px, 1.5vw, 9px);
216219
background-color: #07182e42;
217220
box-shadow: #fff 0 1px 1px;
218221
border-radius: 10px;
@@ -226,6 +229,7 @@ nav a:hover {
226229
display: inline-block;
227230
padding: 5px 10px;
228231
font-weight: 600;
232+
font-size: clamp(0.8rem, 2vw, 1rem);
229233
background: var(--button-color);
230234
color: var(--button-color-text);
231235
border-radius: 0.2rem;
@@ -236,7 +240,7 @@ nav a:hover {
236240
}
237241

238242
.changeText {
239-
font-size: clamp(1rem, 4vw, 1.5rem);
243+
font-size: clamp(1rem, 2vw, 2rem);
240244
font-weight: 600;
241245
display: flex;
242246
flex-wrap: wrap;
@@ -292,7 +296,7 @@ nav a:hover {
292296
padding:4px 10px;
293297
color:white;
294298
background:#528ddb42;
295-
font-size:14px;
299+
font-size: clamp(0.8rem, 2vw, 0.9rem);
296300
border:1px solid rgba(160,242,230,0.5);
297301
transition:0.2s;
298302
box-shadow: #fff 0 1px 1px;
@@ -349,13 +353,10 @@ nav a:hover {
349353
font-size: 16px;
350354
}
351355

352-
.main-text{
353-
margin: 30px;
354-
text-align: center;
355-
}
356-
357356
.main-text h2 {
358357
display: block;
358+
margin: 30px;
359+
text-align: center;
359360
color: white;
360361
font-size: 30px;
361362
border-bottom: white solid 1px;
@@ -380,11 +381,14 @@ nav a:hover {
380381
border-radius: 10px;
381382
}
382383

383-
.introduction-box h3,
384-
.introduction-box p{
384+
.introduction-box h3 {
385385
color: white;
386386
}
387387

388+
.introduction-box p {
389+
font-size: clamp(0.9rem, 2vw, 1rem);
390+
}
391+
388392
/*--skill box--*/
389393
.section-skills {
390394
display: flex;
@@ -408,7 +412,7 @@ nav a:hover {
408412
.other-skill h3 {
409413
margin-bottom: 1rem;
410414
color: white;
411-
font-size: 25px;
415+
font-size: clamp(20px, 4vw, 25px);
412416
text-align: center;
413417
}
414418

@@ -422,7 +426,7 @@ nav a:hover {
422426

423427
.skill-bar-content {
424428
max-height: 330px;
425-
padding: 0 2rem 0 ;
429+
padding: 0 clamp(1rem, 2vw, 2rem);
426430
overflow-y: scroll;
427431
scrollbar-width: thin;
428432
margin-top: 1rem;
@@ -434,31 +438,32 @@ nav a:hover {
434438
display: flex;
435439
justify-content: space-between;
436440
align-items: center;
437-
padding: 0 10px;
438441
}
439442

440443
.info span {
441-
font-size: 16px;
444+
font-size: clamp(14px, 2vw, 16px);
442445
font-weight: 600;
443446
color: white;
444447
}
445448

446449
.info p {
447-
color: white
450+
color: white;
451+
font-size: clamp(13px, 2vw,15px);
452+
padding: 0px 5px;
448453
}
449454

450455
.game-development-skill .skill-bar .bar,
451456
.art-3D-skill .skill-bar .bar,
452457
.other-skill .skill-bar .bar {
453458
width: 100%;
454-
height: 12px;
459+
height: clamp(10px, 2vw, 12px);
455460
background-color: white;
456461
border-radius: 25px;
457462
border-bottom: 2px solid rgb(160, 242, 230);
458463
border-right: 2px solid rgb(160, 242, 230);
459464
border-top: 2px solid white;
460465
border-left: 2px solid white;
461-
margin-top: 10px;
466+
margin-top: clamp(0px, 2vw, 10px);
462467
position: relative;
463468
}
464469

@@ -575,16 +580,6 @@ nav a:hover {
575580
padding: 0 1rem;
576581
}
577582

578-
.portfolio {
579-
margin: 30px 50px;
580-
background: linear-gradient(160deg, rgba(208, 253, 255, 0.05), rgba(255, 238, 213, 0.05));
581-
border-bottom: 1px solid rgb(160, 242, 230);
582-
border-right: 1px solid rgb(160, 242, 230);
583-
border-top: 1px solid white;
584-
border-left: 1px solid white;
585-
box-shadow: 5px 5px rgb(143, 153, 179);
586-
}
587-
588583
@media (max-width: 768px) {
589584
.home-introduction,
590585
.portfolio {
@@ -594,18 +589,15 @@ nav a:hover {
594589

595590
.category {
596591
margin: 2rem;
597-
display: flex;
598-
justify-content: space-around;
599-
flex-wrap: wrap;
592+
display: grid;
593+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
594+
gap: 1rem;
600595
border-bottom: white solid 1px;
601596
}
602597

603598
.category-item {
604-
flex: 0 0 48%;
605-
box-sizing: border-box;
606-
margin: 1%;
607599
background-color: rgba(226, 234, 237, 0.866);
608-
padding: 20px;
600+
padding: clamp(15px, 2vw, 20px);
609601
border-radius: 5px;
610602
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
611603
transition: 0.2s;
@@ -645,6 +637,14 @@ nav a:hover {
645637
position: relative;
646638
}
647639

640+
.item-content h2 {
641+
font-size: clamp(1.3rem, 2vw, 1.6rem);
642+
}
643+
644+
.item-content p {
645+
font-size: clamp(0.9rem, 2vw, 1rem);
646+
}
647+
648648
.flex-container {
649649
margin: 2rem;
650650
align-items: center;

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h1>Welcome to my <br>profolio</h1>
6767
<div class="introduction">
6868
<h1>Hi I'm Woon Soon</h1>
6969
<div class="changeText">
70-
<h3>And I'm a passionate</h3>
70+
<h3>I'm a passionate</h3>
7171
<h3>
7272
<span class="word">Programmer</span>
7373
<span class="word">Game&nbsp;Developer</span>
@@ -105,7 +105,7 @@ <h2>About Me</h2>
105105

106106
<h3>Education</h3>
107107
<p>I studying in Asia Pacific University major in becholor's degree of Game Development</p>
108-
<div class="button-box read-more">
108+
<div class="button-box">
109109
<a href="#" class="button">Read More</a>
110110
<span class="tooltip">Invalid</span>
111111
</div>
@@ -119,7 +119,7 @@ <h3>Education</h3>
119119

120120
<h3>Project</h3>
121121
<p>I made 6 game demo developed by Unity3D and Unreal Engine</p>
122-
<div class="button-box read-more">
122+
<div class="button-box">
123123
<a href="#" class="button">Read More</a>
124124
<span class="tooltip">Invalid</span>
125125
</div>

0 commit comments

Comments
 (0)