Skip to content

Commit b9d4a2c

Browse files
CSFelixCSFelix
authored
🎉 Added
1 parent 443e32c commit b9d4a2c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+611
-0
lines changed

‎assets/css/global.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');
3+
4+
/* Reset */
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
outline: none;
9+
list-style: none;
10+
box-sizing: border-box;
11+
text-decoration: none;
12+
scroll-behavior: smooth;
13+
vertical-align: baseline;
14+
}
15+
16+
/* Variables */
17+
:root { }
18+
19+
/* Body */
20+
body {
21+
overflow-x: hidden;
22+
font: 400 18px Roboto Mono, sans-serif;
23+
color: ghostwhite;
24+
background: #ffffff;
25+
-webkit-font-smoothing: antialiased;
26+
}
27+
28+
a { color: ghostwhite; }
29+
button { font: 400 14px Roboto, sans-serif; }

‎assets/css/header.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
/*
2+
**********************
3+
** Header - Desktop **
4+
**********************
5+
*/
6+
7+
header #headerImg {
8+
width: 100vw;
9+
height: auto;
10+
}
11+
12+
header nav {
13+
width: 100vw;
14+
15+
display: flex;
16+
justify-content: space-between;
17+
align-items: center;
18+
19+
padding-top: 1%;
20+
padding-left: 2%;
21+
padding-right: 2%;
22+
23+
position: absolute;
24+
top: 8px;
25+
left: 16px;
26+
}
27+
28+
header nav #gitHubProfile { transition: all 0.3s ease; }
29+
30+
header nav #gitHubProfile:hover {
31+
border-bottom-style: dashed;
32+
border-bottom-width: 3.1px;
33+
-webkit-filter: brightness(87%);
34+
}
35+
36+
header nav ul {
37+
display: flex;
38+
justify-content: center;
39+
}
40+
41+
header nav ul > li {
42+
margin-right: 50px;
43+
cursor: pointer;
44+
45+
border-bottom-style: dashed;
46+
border-bottom-width: 3.1px;
47+
48+
transition: all 0.3s ease;
49+
}
50+
51+
header nav ul > li:hover {
52+
-webkit-filter: brightness(87%);
53+
border-bottom-style: solid;
54+
}
55+
56+
header nav div a #sponsorBtn, header nav div #themeBtn {
57+
height: 35px;
58+
border: 0;
59+
border-radius: 5px;
60+
cursor: pointer;
61+
transition: -webkit-filter 0.3s ease;
62+
}
63+
64+
header nav div a #sponsorBtn { width: 116px; }
65+
header nav div #themeBtn { width: 50px; }
66+
67+
header nav div a #sponsorBtn:hover,
68+
header nav div #themeBtn:hover
69+
{ -webkit-filter: brightness(80%); }
70+
71+
#titleAndSubtitle {
72+
width: 100vw;
73+
position: absolute;
74+
top: 100px;
75+
76+
color: #c3c3c3;
77+
font-weight: bold;
78+
text-align: center;
79+
80+
text-shadow: 2px 2px #7159c1;
81+
}
82+
83+
#titleAndSubtitle span { font-size: 20px; }
84+
85+
/*
86+
*********************
87+
** Header - Mobile **
88+
*********************
89+
*/
90+
91+
#mobileMenuToggle {
92+
width: auto;
93+
94+
display: none;
95+
position: absolute;
96+
top: 15px;
97+
right: 15px;
98+
99+
border-radius: 5px;
100+
padding: 5px;
101+
cursor: pointer;
102+
}
103+
104+
#bar1, #bar2, #bar3 {
105+
width: 35px;
106+
height: 5px;
107+
background-color: ghostwhite;
108+
margin: 6px 0;
109+
transition: 0.4s;
110+
}
111+
112+
.change #bar1 { transform: translate(0, 11px) rotate(-45deg); }
113+
.change #bar2 {opacity: 0;}
114+
.change #bar3 { transform: translate(0, -11px) rotate(45deg); }
115+
116+
#mobileMenu {
117+
width: auto;
118+
119+
display: none;
120+
position: absolute;
121+
122+
top: 75px;
123+
right: -150px;
124+
125+
background-color: ghostwhite;
126+
color: #707070;
127+
border-radius: 5px;
128+
129+
transition: all 0.7s ease;
130+
}
131+
132+
#mobileMenu li {
133+
padding: 10px;
134+
cursor: pointer;
135+
transition: all 0.3s ease;
136+
}
137+
138+
#mobileMenu li:hover {
139+
background-color: #c6c6c6;
140+
color: ghostwhite;
141+
}
142+
143+
/*
144+
**************************
145+
** Screen - Controllers **
146+
**************************
147+
*/
148+
149+
@media only screen and (max-width: 850px) {
150+
header nav,
151+
#titleAndSubtitle
152+
{ display: none; }
153+
154+
#mobileMenuToggle { display: inline-block; }
155+
#mobileMenu { display: inline-block; }
156+
}
157+
158+
@media only screen and (max-width: 625px) {
159+
#headerImg { content:url("../images/header-mobile.jpg"); }
160+
}

‎assets/css/scrollbar.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
::-webkit-scrollbar { width: 7px; }
2+
3+
/* Track */
4+
::-webkit-scrollbar-track {
5+
background-color: #05031c;
6+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
7+
-webkit-border-radius: 10px;
8+
border-radius: 10px;
9+
}
10+
11+
/* Handle */
12+
::-webkit-scrollbar-thumb {
13+
background-color: #7159c1;
14+
-webkit-border-radius: 10px;
15+
border-radius: 10px;
16+
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
17+
}
18+
19+
::-webkit-scrollbar-thumb:window-inactive {
20+
background-color: rgba(255,0,0,0.4);
21+
}
22+
23+
@media only screen and (max-width: 850px) {
24+
::-webkit-scrollbar { width: 0px; }
25+
}

‎assets/css/sections.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.container {
2+
width: 100vw;
3+
margin-bottom: 5px;
4+
background-color: #efefef;
5+
color: #707070;
6+
}
7+
8+
.containerTitle {
9+
text-align: center;
10+
font-size: 30px;
11+
}
12+
13+
.containerTitle .containerTitleText {
14+
text-decoration: underline;
15+
text-decoration-style: dashed;
16+
}
17+
18+
.sticker {
19+
width: 200px;
20+
height: auto;
21+
}

‎assets/images/card.jpg‎

4.16 MB
Loading

‎assets/images/header-mobile.jpg‎

713 KB
Loading

‎assets/images/header.jpg‎

1.11 MB
Loading

‎assets/images/logo.png‎

14.2 KB
Loading

‎assets/images/robot-animation.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/js/libraries/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
5+
<script src="./shuffle-text.js"></script>
6+
<script>
7+
window.addEventListener('load', init);
8+
9+
function init() {
10+
var effectList = [];
11+
var elementList = document.querySelectorAll('.my-effect');
12+
13+
for (var i = 0; i < elementList.length; i++) {
14+
15+
var element = elementList[i];
16+
element.dataset.index = i;
17+
18+
// インスタンスを取得する
19+
effectList[i] = new ShuffleText(element);
20+
21+
// マウスオーバー時に再生する
22+
element.addEventListener('mouseenter', function () {
23+
effectList[+this.dataset.index].start();
24+
});
25+
26+
// 初回を再生する
27+
effectList[i].start();
28+
}
29+
}
30+
</script>
31+
32+
<style type="text/css">
33+
.my-effect { cursor: default; }
34+
</style>
35+
</head>
36+
37+
<body>
38+
<h1 class="my-effect">What's shakin', bacon? 👋</h1>
39+
<br />
40+
<span class="my-effect">Welcome to my Personal Portfolio!</span>
41+
<br />
42+
<span class="my-effect">Enjoy the projects and let's learn together, shall we?</span>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)