Skip to content

Commit b0047b4

Browse files
author
username
committed
OK
1 parent 1c83961 commit b0047b4

7 files changed

+549
-50
lines changed

‎css/app.dev.css

+222-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎images/Webp.net-resizeimage.png

21.7 KB
Loading

‎images/vippng.com-white-thought-bubble-png-1104053.png

45.2 KB
Loading

‎index.html

+84-38
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<meta content="Phuc Pham" name=author>
99
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" name=viewport>
1010
<link href=/apple-touch-icon.png rel=apple-touch-icon sizes=180x180>
11-
<link href=/favicon-32x32.png rel=icon sizes=32x32 type=image/png>
12-
<link href=/favicon-16x16.png rel=icon sizes=16x16 type=image/png>
13-
<link href="./manifest.json" rel=manifest>
11+
<link href=/favicon-32x32.png rel=icon sizes=32x32 type=image/png> <link href=/favicon-16x16.png rel=icon sizes=16x16
12+
type=image/png> <link href="./manifest.json" rel=manifest>
1413
<link href="/safari-pinned-tab.svg" rel=mask-icon color=#5bbad5>
14+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
1515
<meta content=#080d2a name=theme-color>
1616
<meta content=profile property=og:type>
1717
<meta content="PhucPham's Portfolio" property=og:title>
@@ -28,41 +28,87 @@
2828
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel=stylesheet>
2929
<link href="css/app.dev.css" rel=stylesheet>
3030

31-
<body class=""><a class=opl href="#" target=_blank><img height=56 src=https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png srcset="https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png, https://s3.amazonaws.com/onepagelove/one-page-love-award-retina-left.png 2x"width=73></a>
32-
<div
33-
id=loading>
31+
<body class="">
32+
<div id=loading>
3433
<div id=loading-inner>
35-
<div id=dark></div>
36-
<div id=light></div>
34+
<div id=dark>
35+
</div>
36+
<div id=light>
37+
</div>
3738
<div id=percent>Loading</div>
3839
</div>
39-
</div>
40-
<div id=testing></div>
41-
<div id=btns>
42-
<div id=sns><a class="sns-icon sharer" id=facebook title="Share to Facebook" data-sharer=facebook data-url=https://agitated-stonebraker-b659c6.netlify.com/></a> <a class="sns-icon sharer" id=twitter title="Share to Twitter" data-sharer=twitter data-url=https://agitated-stonebraker-b659c6.netlify.com/ data-title="PhucPham's portfolio site"></a> <a class="sns-icon sharer" id=linkedin title="Share to LinkedIn" data-sharer=linkedin data-url=https://agitated-stonebraker-b659c6.netlify.com//></a> <a class="sns-icon sharer" id=google-plus title="Share to Google Plus" data-sharer=googleplus data-url=https://agitated-stonebraker-b659c6.netlify.com/></a> <a class=sns-icon id=pinterest title="Share to Pinterest"></a> <a id=share></a></div><a id=volume title="Music On/Off"></a></div>
43-
<div id=msg-slow class=message>
44-
<article>
45-
<p>Your device can only display this page at about <span id=fps></span>fps (frames-per-second), which can be 60fps (Max) on a computer with intermediate display card, or any modern mobile device.
46-
<p>Please use another faster device to get smoother experience.
47-
<p>Also, please avoid using IE due to its terrible performance.</article><a class=message-close>Close</a></div>
48-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.7.3/bowser.min.js"></script>
49-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
50-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
51-
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
52-
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
53-
<script type="text/javascript" src="./lib/OrbitControls.js"></script>
54-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
55-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
56-
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/ColorPropsPlugin.min.js"></script>
57-
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
58-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
59-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi-filters/1.0.6/filters.min.js"></script>
60-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pubsub-js/1.5.7/pubsub.min.js"></script>
61-
<script src="https://cdnjs.cloudflare.com/ajax/libs/sharer.js/0.3.1/sharer.min.js"></script>
62-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
63-
<script type="text/javascript" src="./lib/pixi-extra-filters.min.js"></script>
64-
<script type="text/javascript" src="./lib/pixi-display.js"></script>
65-
<script type="text/javascript" src="./lib/PixiPlugin.min.js"></script>
66-
<script src="./node_modules/pixi-sound/dist/pixi-sound.js"></script>
67-
<script src="https://www.googletagmanager.com/gtag/js?id=UA-107422840-1" async></script>
68-
<script type="text/javascript" src="js/app.dev.js"></script>
40+
</div>
41+
<div id=testing></div>
42+
<div id=btns>
43+
<div id=sns><a onclick="setString(this)" class="sns-icon sharer1" id=facebook title="Share to Facebook"
44+
data-url=https://agitated-stonebraker-b659c6.netlify.com> </a> <a onclick="setString1(this)"
45+
class="sns-icon sharer2" id=twitter title="Share to Twitter"
46+
data-url=https://agitated-stonebraker-b659c6.netlify.com data-title="PhucPham's portfolio site"></a> <a
47+
onclick="setString2(this)" class="sns-icon sharer3" id=linkedin title="Share to LinkedIn"
48+
data-url=https://agitated-stonebraker-b659c6.netlify.com </a> <a onclick="setString3(this)"
49+
class="sns-icon sharer4" id=google-plus title="Share to Google Plus"
50+
data-url=https://agitated-stonebraker-b659c6.netlify.com> </a> <a id=share></a></div><a id=volume
51+
title="Music On/Off"></a>
52+
</div>
53+
<section class="quote">
54+
<blockquote class="electric bubble"></blockquote>
55+
</section>
56+
<section class="quote">
57+
<blockquote class="whisper bubble">
58+
</blockquote>
59+
</section>
60+
<!-- <div class="sub-menu" id="dropDownMenu" style="background-color: red">
61+
<ul id="navbar">
62+
<li style="color: white;"> First</li>
63+
<li style="color: white;"> First</li>
64+
<li style="color: white;"> First</li>
65+
<li style="color: white;"> First</li>
66+
<li style="color: white;"> First</li>
67+
</ul>
68+
</div>
69+
<button id="circleMenuBtn">click</button> -->
70+
<!-- <section class="icon">
71+
<a href="https://www.facebook.com/dioxittdn.phucprobb"><i class="fa fa-facebook" aria-hidden="true"></i></a>
72+
</section> -->
73+
<div id=msg-slow class=message>
74+
<article>
75+
<p>Maybe a little laggy base on your fps<span id=fps></span>
76+
<p>Check the arrow button to find out more about me :)
77+
<p>Also, please avoid using IE due to its terrible performance.
78+
</article><a class=message-close>Close</a>
79+
</div>
80+
81+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.7.3/bowser.min.js"></script>
82+
<script src="https://code.jquery.com/jquery-3.4.1.js"
83+
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
84+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
85+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
86+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
87+
<script type="text/javascript" src="./lib/OrbitControls.js"></script>
88+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
89+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
90+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/ColorPropsPlugin.min.js"></script>
91+
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
92+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
93+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi-filters/1.0.6/filters.min.js"></script>
94+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pubsub-js/1.5.7/pubsub.min.js"></script>
95+
<script src="https://cdnjs.cloudflare.com/ajax/libs/sharer.js/0.3.1/sharer.min.js"></script>
96+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
97+
<script src="https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js"></script>
98+
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script>
99+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
100+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
101+
crossorigin="anonymous"></script>
102+
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
103+
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
104+
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
105+
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
106+
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
107+
<script type="text/javascript" src="./lib/pixi-extra-filters.min.js"></script>
108+
<script type="text/javascript" src="./lib/pixi-display.js"></script>
109+
<script type="text/javascript" src="./lib/PixiPlugin.min.js"></script>
110+
<script type="text/javascript" src="/js/text.js"></script>
111+
<script type="text/javascript" src="/js/text2.js"></script>
112+
<script src="./node_modules/pixi-sound/dist/pixi-sound.js"></script>
113+
<script src="https://www.googletagmanager.com/gtag/js?id=UA-107422840-1" async></script>
114+
<script type="text/javascript" src="js/app.dev.js"></script>

‎js/text.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var icon = `<a class="social-link" href="https://www.facebook.com/dioxittdn.phucprobb"><i class="fa fa-facebook" aria-hidden="true"></i></a>
2+
<a class="social-link" href="https://www.facebook.com/dioxittdn.phucprobb"><i class="fa fa-github" aria-hidden="true"></i></a>
3+
<a class="social-link" href="https://www.facebook.com/dioxittdn.phucprobb"><i class="fa fa-google"></i></a>
4+
<a class="social-link" href="https://www.facebook.com/dioxittdn.phucprobb"><i class="fa fa-slack" aria-hidden="true"></i></a>`
5+
$(document).ready(function () {
6+
$(".sharer3").click(function () {
7+
console.log("ok jque");
8+
$(`.whisper`).append(icon);
9+
// $(this).delay(100 * i).fadeIn(500);
10+
$(`.social-link`).each(function (i) {
11+
$(this).delay(300 * i).animate({ opacity: 1 }, 700)
12+
console.log(this);
13+
})
14+
})
15+
});
16+
// $("#dropDownMenu li").each(function(i) {
17+
// $(this).delay(100 * i).fadeIn(500);
18+
// });

‎js/text2.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
function setString(arg){
2+
console.log("ok");
3+
var a=arg.innerHTML;
4+
Typed.new(".electric", {
5+
strings: [ "I'm Pham Hoang Phuc", "A junior front-end Developer and UI/UX designer", " I can develop the theme and interface of websites and applications besides", "I have trained and experienced well for Front-end", "Hence, my expertises has been strengthened with technologies and academical models", "Such as: Object-oriented Program, ReactJS, Design Pattern Responsive, Algorithm building, Material Design"],
6+
typeSpeed: 2
7+
});
8+
}
9+
function setString1(arg){
10+
console.log("ok");
11+
var a=arg.innerHTML;
12+
Typed.new(".electric", {
13+
strings: [ "Learning new languages and technology is what I am passionate about", " Well using foreign languages is my advantage, English especially", " I can also make a conversation or presentation by English", "with North American accent pronounciation of course :)"],
14+
typeSpeed: 2
15+
});
16+
}
17+
function setString2(arg){
18+
console.log("ok");
19+
var a=arg.innerHTML;
20+
Typed.new(".electric", {
21+
strings: [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"],
22+
typeSpeed: 2
23+
});
24+
}
25+
function setString3(arg){
26+
console.log("ok");
27+
var a=arg.innerHTML;
28+
Typed.new(".electric", {
29+
strings: [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"],
30+
typeSpeed: 2
31+
});
32+
}

‎js/var.js

+193
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
2+
// var myFunc1 = function(event) {
3+
// alert(1);
4+
// if (something) {
5+
// event.cancel = true;
6+
// }
7+
// }
8+
// var myFunc2 = function(event) {
9+
// if (event.cancel) {
10+
// return;
11+
// }
12+
// alert(2);
13+
// }
14+
15+
// document.body.addEventListener('click', myFunc1, false);
16+
// document.body.addEventListener('click', myFunc2, false);
17+
// ...
18+
var fbOnFire = false;
19+
var myFrameReq;
20+
function facebookFrame(){
21+
// array with texts to type in typewriter
22+
var dataText1 = [ "I'm Pham Hoang Phuc", "A junior front-end Developer and UI/UX designer", " I can develop the theme and interface of websites and applications besides", "I have trained and experienced well for Front-end", "Hence, my expertises has been strengthened with technologies and academical models", "Such as: Object-oriented Program, ReactJS, Design Pattern Responsive, Algorithm building, Material Design"];
23+
// type one text in the typwriter
24+
// keeps calling itself until the text is finished
25+
function typeWriter(text, i, fnCallback) {
26+
// chekc if text isn't finished yet
27+
if (i < (text.length)) {
28+
// add next character to h1
29+
document.querySelector("blockquote").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
30+
31+
// wait for a while and call this function again for next character
32+
setTimeout(function() {
33+
typeWriter(text, i + 1, fnCallback)
34+
}, 100);
35+
}
36+
// text finished, call callback if there is a callback function
37+
else if (typeof fnCallback == 'function') {
38+
// call callback after timeout
39+
setTimeout(fnCallback, 700);
40+
}
41+
}
42+
// start a typewriter animation for a text in the dataText array
43+
function StartTextAnimation(i) {
44+
if (typeof dataText1[i] == 'undefined'){
45+
setTimeout(function() {
46+
StartTextAnimation(0);
47+
}, 20000);
48+
}
49+
// check if dataText[i] exists
50+
if (i < dataText1[i].length) {
51+
// text exists! start typewriter animation
52+
typeWriter(dataText1[i], 0, function(){
53+
// after callback (and whole text has been animated), start next text
54+
StartTextAnimation(i + 1);
55+
});
56+
}
57+
}
58+
// start the text animation
59+
StartTextAnimation(0);
60+
myFrameReq = requestAnimationFrame(StartTextAnimation)
61+
}
62+
document.getElementById("facebook").addEventListener('click',facebookFrame());
63+
document.getElementById("twitter").addEventListener('click',function(event2){
64+
event2.preventDefault();
65+
console.log("ok");
66+
// array with texts to type in typewriter
67+
var dataText2 = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];
68+
// check if any animationr unning
69+
// document.getElementById("facebook").onanimationcancel = function(){return ;}
70+
cancelAnimationFrame(myFrameReq)
71+
72+
// type one text in the typwriter
73+
// keeps calling itself until the text is finished
74+
function typeWriter2(text, i, fnCallback) {
75+
// chekc if text isn't finished yet
76+
if (i < (text.length)) {
77+
// add next character to h1
78+
document.querySelector("blockquote").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
79+
80+
// wait for a while and call this function again for next character
81+
setTimeout(function() {
82+
typeWriter2(text, i + 1, fnCallback)
83+
}, 100);
84+
}
85+
// text finished, call callback if there is a callback function
86+
else if (typeof fnCallback == 'function') {
87+
// call callback after timeout
88+
setTimeout(fnCallback, 700);
89+
}
90+
}
91+
// start a typewriter animation for a text in the dataText array
92+
function StartTextAnimation2(i) {
93+
if (typeof dataText2[i] == 'undefined'){
94+
setTimeout(function() {
95+
StartTextAnimation2(0);
96+
}, 20000);
97+
}
98+
// check if dataText[i] exists
99+
if (i < dataText2[i].length) {
100+
// text exists! start typewriter animation
101+
typeWriter2(dataText2[i], 0, function(){
102+
// after callback (and whole text has been animated), start next text
103+
StartTextAnimation2(i + 1);
104+
});
105+
}
106+
}
107+
// start the text animation
108+
StartTextAnimation2(0);
109+
});
110+
document.getElementById("linkedin").addEventListener('click',function(event){
111+
console.log("ok");
112+
// array with texts to type in typewriter
113+
var dataText1 = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];
114+
// type one text in the typwriter
115+
// keeps calling itself until the text is finished
116+
function typeWriter(text, i, fnCallback) {
117+
// chekc if text isn't finished yet
118+
if (i < (text.length)) {
119+
// add next character to h1
120+
document.querySelector("blockquote").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
121+
122+
// wait for a while and call this function again for next character
123+
setTimeout(function() {
124+
typeWriter(text, i + 1, fnCallback)
125+
}, 100);
126+
}
127+
// text finished, call callback if there is a callback function
128+
else if (typeof fnCallback == 'function') {
129+
// call callback after timeout
130+
setTimeout(fnCallback, 700);
131+
}
132+
}
133+
// start a typewriter animation for a text in the dataText array
134+
function StartTextAnimation(i) {
135+
if (typeof dataText1[i] == 'undefined'){
136+
setTimeout(function() {
137+
StartTextAnimation(0);
138+
}, 20000);
139+
}
140+
// check if dataText[i] exists
141+
if (i < dataText1[i].length) {
142+
// text exists! start typewriter animation
143+
typeWriter(dataText1[i], 0, function(){
144+
// after callback (and whole text has been animated), start next text
145+
StartTextAnimation(i + 1);
146+
});
147+
}
148+
}
149+
// start the text animation
150+
StartTextAnimation(0);
151+
});
152+
document.getElementById("google-plus").addEventListener('click',function(event){
153+
console.log("ok");
154+
// array with texts to type in typewriter
155+
var dataText1 = [ "Amsterdam.", "Full Service.", "Webdevelopment.", "Wij zijn Occhio!"];
156+
// type one text in the typwriter
157+
// keeps calling itself until the text is finished
158+
function typeWriter(text, i, fnCallback) {
159+
// chekc if text isn't finished yet
160+
if (i < (text.length)) {
161+
// add next character to h1
162+
document.querySelector("blockquote").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
163+
164+
// wait for a while and call this function again for next character
165+
setTimeout(function() {
166+
typeWriter(text, i + 1, fnCallback)
167+
}, 100);
168+
}
169+
// text finished, call callback if there is a callback function
170+
else if (typeof fnCallback == 'function') {
171+
// call callback after timeout
172+
setTimeout(fnCallback, 700);
173+
}
174+
}
175+
// start a typewriter animation for a text in the dataText array
176+
function StartTextAnimation(i) {
177+
if (typeof dataText1[i] == 'undefined'){
178+
setTimeout(function() {
179+
StartTextAnimation(0);
180+
}, 20000);
181+
}
182+
// check if dataText[i] exists
183+
if (i < dataText1[i].length) {
184+
// text exists! start typewriter animation
185+
typeWriter(dataText1[i], 0, function(){
186+
// after callback (and whole text has been animated), start next text
187+
StartTextAnimation(i + 1);
188+
});
189+
}
190+
}
191+
// start the text animation
192+
StartTextAnimation(0);
193+
});

0 commit comments

Comments
 (0)