Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1520977

Browse files
committed
add creative portfolio
1 parentda31922 commit1520977

File tree

4 files changed

+301
-10
lines changed

4 files changed

+301
-10
lines changed

‎93-creative portfolio/index.html

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,29 @@ <h3 class="logo">Dimitri Marco</h3>
2323
fill="none"
2424
xmlns="http://www.w3.org/2000/svg"
2525
>
26-
<liney1="1.5"x2="43"y2="1.5"stroke="white"stroke-width="3"/>
27-
<liney1="11.5"x2="28"y2="11.5"stroke="white"stroke-width="3"/>
28-
<liney1="21.5"x2="16"y2="21.5"stroke="white"stroke-width="3"/>
26+
<line
27+
y1="1.5"
28+
x2="43"
29+
y2="1.5"
30+
stroke="var(--white)"
31+
stroke-width="3"
32+
/>
33+
<line
34+
y1="11.5"
35+
x2="28"
36+
y2="11.5"
37+
stroke="var(--white)"
38+
stroke-width="3"
39+
/>
40+
<line
41+
y1="21.5"
42+
x2="16"
43+
y2="21.5"
44+
stroke="var(--white)"
45+
stroke-width="3"
46+
/>
2947
</svg>
30-
<!-- <div>
48+
<divclass="nav-open">
3149
<divclass="contact">
3250
<h3>Contact</h3>
3351
<p>02348-234-843</p>
@@ -73,7 +91,7 @@ <h3>Social</h3>
7391
</svg>
7492
</div>
7593
</div>
76-
</div> -->
94+
</div>
7795
</nav>
7896
</header>
7997
<main>
@@ -134,7 +152,7 @@ <h2>Hair Stylist</h2>
134152
/>
135153
</div>
136154
</section>
137-
<!-- <aside>
155+
<aside>
138156
<divclass="pages">
139157
<divclass="page-1">
140158
<h3>01</h3>
@@ -176,7 +194,7 @@ <h3>03</h3>
176194
</svg>
177195
</div>
178196
</div>
179-
</aside> -->
197+
</aside>
180198
</main>
181199
</div>
182200
<script

‎93-creative portfolio/script.js

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
functioninit(){
2+
// slider
3+
constslides=document.querySelectorAll(".slide");
4+
constpages=document.querySelectorAll(".page");
5+
constbackgrounds=[
6+
`radial-gradient(#2B3760, #0B1023)`,
7+
`radial-gradient(#4E3022, #161616)`,
8+
`radial-gradient(#4E4342, #161616)`,
9+
];
10+
letcurrent=0;
11+
letscrollSlide=0;
12+
13+
slides.forEach((slide,index)=>{
14+
slide.addEventListener("click",function(){
15+
changeDots(this);
16+
nextSlide(index);
17+
scrollSlide=index;
18+
});
19+
});
20+
21+
functionchangeDots(dot){
22+
slides.forEach((slide)=>slide.classList.remove("active"));
23+
dot.classList.add("active");
24+
}
25+
26+
functionnextSlide(pageNumber){
27+
constnextPage=pages[pageNumber];
28+
constcurrentPage=pages[current];
29+
constnextLeft=nextPage.querySelector(".hero .model-left");
30+
constnextRight=nextPage.querySelector(".hero .model-right");
31+
constcurrentLeft=currentPage.querySelector(".hero .model-left");
32+
constcurrentRight=currentPage.querySelector(".hero .model-right");
33+
constnextText=nextPage.querySelector(".details");
34+
constportfolio=document.querySelector(".portfolio");
35+
36+
consttl=newTimelineMax({
37+
// disable clicks during animations
38+
onStart:function(){
39+
slides.forEach((slide)=>(slide.style.pointerEvents="none"));
40+
},
41+
onComplete:function(){
42+
slides.forEach((slide)=>(slide.style.pointerEvents="all"));
43+
},
44+
});
45+
46+
tl.fromTo(currentLeft,0.3,{y:"-10%"},{y:"-100%"})
47+
.fromTo(currentRight,0.3,{y:"10%"},{y:"-100%"},"-=0.2")
48+
.to(portfolio,0.3,{backgroundImage:backgrounds[pageNumber]})
49+
.fromTo(
50+
currentPage,
51+
0.3,
52+
{opacity:1,pointerEvents:"all"},
53+
{opacity:0,pointerEvents:"none"}
54+
)
55+
.fromTo(
56+
nextPage,
57+
0.3,
58+
{opacity:0,pointerEvents:"none"},
59+
{opacity:1,pointerEvents:"all"},
60+
"-=0.6"
61+
)
62+
.fromTo(nextLeft,0.3,{y:"-100%"},{y:"-10%"},"-=0.6")
63+
.fromTo(nextRight,0.3,{y:"-100%"},{y:"10%"},"-=0.8")
64+
.fromTo(nextText,0.3,{opacity:0,y:0},{opacity:1,y:0})
65+
.set(nextLeft,{clearProps:"all"})
66+
.set(nextRight,{clearProps:"all"});
67+
current=pageNumber;
68+
}
69+
document.addEventListener("wheel",throttle(scrollChange,1500));
70+
document.addEventListener("touchmove",throttle(scrollChange,1500));
71+
72+
functionswithDots(dotNumber){
73+
constactiveDot=document.querySelectorAll(".slide")[dotNumber];
74+
slides.forEach((slide)=>slide.classList.remove("active"));
75+
activeDot.classList.add("active");
76+
}
77+
78+
functionscrollChange(e){
79+
e.deltaY>0 ?(scrollSlide+=1) :(scrollSlide-=1);
80+
// reset
81+
if(scrollSlide>2)scrollSlide=0;
82+
if(scrollSlide<0)scrollSlide=2;
83+
swithDots(scrollSlide);
84+
nextSlide(scrollSlide);
85+
}
86+
87+
// menu
88+
consthamburger=document.querySelector(".menu");
89+
consthamburgerLines=document.querySelectorAll(".menu line");
90+
constnavOpen=document.querySelector(".nav-open");
91+
constcontact=document.querySelector(".contact");
92+
constsocial=document.querySelector(".social");
93+
constlogo=document.querySelector(".logo");
94+
95+
consttl=newTimelineMax({paused:true,reversed:true});
96+
97+
tl.to(navOpen,0.5,{y:0})
98+
.fromTo(contact,0.5,{opacity:0,y:10},{opacity:1,y:0},"-=0.1")
99+
.fromTo(social,0.5,{opacity:0,y:10},{opacity:1,y:0},"-=0.5")
100+
.fromTo(logo,0.2,{color:"var(--white)"},{color:"black"},"-=1")
101+
.fromTo(
102+
hamburgerLines,
103+
0.2,
104+
{stroke:"var(--white)"},
105+
{stroke:"black"},
106+
"-=1"
107+
);
108+
109+
hamburger.addEventListener("click",()=>{
110+
tl.reversed() ?tl.play() :tl.reverse();
111+
});
112+
}
113+
114+
// avoid multiple firing
115+
functionthrottle(func,limit){
116+
letinThrottle;
117+
returnfunction(){
118+
constargs=arguments;
119+
constcontext=this;
120+
if(!inThrottle){
121+
func.apply(context,args);
122+
inThrottle=true;
123+
setTimeout(()=>(inThrottle=false),limit);
124+
}
125+
};
126+
}
127+
128+
init();

‎93-creative portfolio/style.css

Lines changed: 147 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
@importurl("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
22

3+
:root {
4+
--white:rgba(255,255,255,0.9);
5+
}
6+
37
*,
48
*::before,
59
*::after {
@@ -14,10 +18,12 @@ body {
1418
}
1519

1620
.portfolio {
17-
color:rgba(255,255,255,0.9);
21+
color:var(--white);
1822
background:radial-gradient(rgba(43,55,96,1),rgba(11,16,35,1));
1923
}
2024

25+
/* header */
26+
2127
nav {
2228
min-height:10vh;
2329
width:90%;
@@ -32,6 +38,8 @@ nav {
3238
font-size:1.25rem;
3339
}
3440

41+
/* main */
42+
3543
.page {
3644
min-height:90vh;
3745
display: grid;
@@ -81,15 +89,152 @@ nav {
8189

8290
.detailsh1 {
8391
font-size:4rem;
84-
font-weight:400;
92+
font-weight:500;
8593
}
8694

8795
.detailsh2 {
8896
font-size:2.625rem;
97+
font-weight:400;
8998
padding:20px0;
9099
}
91100

92101
.detailsp {
93102
font-size:1.5rem;
94103
padding:20px050px;
95104
}
105+
106+
/* slider */
107+
108+
.pages {
109+
position: absolute;
110+
right:5%;
111+
top:50%;
112+
transform:translateY(-50%);
113+
}
114+
115+
.pages>div {
116+
display: flex;
117+
align-items: center;
118+
justify-content: space-between;
119+
}
120+
121+
.pagesh3 {
122+
font-size:1.5rem;
123+
padding:30px;
124+
}
125+
126+
.pagessvg {
127+
cursor: pointer;
128+
opacity:0.5;
129+
transform:scale(2);
130+
}
131+
132+
.pagessvg:hover {
133+
animation: dot0.5s ease-in-out infinite alternate;
134+
}
135+
136+
.pagessvg.active {
137+
opacity:0.9;
138+
}
139+
140+
@keyframes dot {
141+
0% {
142+
transform:scale(2);
143+
}
144+
100% {
145+
transform:scale(4);
146+
}
147+
}
148+
149+
/* menu */
150+
151+
.nav-open {
152+
position: absolute;
153+
top:0px;
154+
left:0px;
155+
width:100%;
156+
height:50vh;
157+
background-color:#fff;
158+
color:#000;
159+
z-index:1;
160+
display: grid;
161+
grid-template-columns:5%1fr1fr5%;
162+
justify-items: center;
163+
align-items: center;
164+
text-align: center;
165+
transform:translateY(-101%);
166+
}
167+
168+
.contact {
169+
grid-column:2/3;
170+
}
171+
172+
.nav-openh3 {
173+
font-size:1.75rem;
174+
padding-bottom:40px;
175+
}
176+
177+
.nav-openp {
178+
font-size:1.125rem;
179+
}
180+
181+
.social-links {
182+
display: flex;
183+
gap:1.25rem;
184+
}
185+
186+
.logo,
187+
.menu {
188+
z-index:2;
189+
}
190+
191+
.menu {
192+
cursor: pointer;
193+
}
194+
195+
/* media queries */
196+
197+
@media (max-width:1024px) {
198+
.page {
199+
grid-template-columns:5%1fr5%;
200+
grid-template-rows:2fr1fr;
201+
align-items: center;
202+
}
203+
204+
.hero {
205+
grid-column:2/3;
206+
height: auto;
207+
}
208+
209+
.heroimg {
210+
height:500px;
211+
}
212+
213+
.details {
214+
grid-row:2/3;
215+
grid-column:2/3;
216+
text-align: center;
217+
}
218+
219+
.detailsh1 {
220+
font-size:3rem;
221+
}
222+
223+
.detailsh2 {
224+
font-size:2.375rem;
225+
}
226+
}
227+
228+
@media (max-width:768px) {
229+
.heroimg {
230+
height:400px;
231+
}
232+
233+
.detailsh1 {
234+
font-size:2.375rem;
235+
}
236+
237+
.detailsh2 {
238+
font-size:1.75rem;
239+
}
240+
}

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
| 90|[Tooltip](https://github.com/solygambas/html-css-fifty-projects/tree/master/90-tooltip)|[Live Demo](https://codepen.io/solygambas/full/YzNgzMb)|
9999
| 91|[Chat Interface](https://github.com/solygambas/html-css-fifty-projects/tree/master/91-chat%20interface)|[Live Demo](https://codepen.io/solygambas/full/MWJxaOJ)|
100100
| 92|[Music Streaming Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/92-music%20streaming%20service)|[Live Demo](https://codepen.io/solygambas/full/qBRvLmg)|
101-
| 93|[Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio)|[Live Demo](#)|
101+
| 93|[Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio)|[Live Demo](https://codepen.io/solygambas/full/zYNbgxR)|
102102

103103
This repository is mostly based on 2 courses by Brad Traversy (2020):
104104

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp