diff --git a/favicon.ico b/favicon.ico index 911c8f5..0b6eb49 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/img/linkedin_icon.webp b/img/linkedin_icon.webp new file mode 100644 index 0000000..4857ee1 Binary files /dev/null and b/img/linkedin_icon.webp differ diff --git a/img/twitter_icon.png b/img/twitter_icon.png new file mode 100644 index 0000000..8afaf8a Binary files /dev/null and b/img/twitter_icon.png differ diff --git a/index.html b/index.html index 8f36025..32fe7ca 100644 --- a/index.html +++ b/index.html @@ -1,217 +1,58 @@  - - - - - - -

✔️ CHEN QIANGPAN's Learning Zone and Web Playground ✔️

- - - - -

🏊‍♂️GO🏊‍♂️

-

- LET US GO -

- -

🏊‍♂️I Love Swim🏊‍♂️

-

- Swim 2🏊‍♂️0🏊‍♂️2🏊‍♂️2🏊‍♂️ Progress -

- -

Learn Blender

-

- Blender learn progress -

- -

🕹️ Make Games 🎮 🎲

-

- Unity Inventory System -

-

- Unity DoTween Plugin -

-

- Global Game Jam 2022 Progress -

- -

🐓 Learn French 🐓

- -

- Day1 (2022/2/3) : Pre French Lesson Notes -

-

- Day2 (2022/2/9) : First French Lesson Notes -

- Day3 (2022/2/15) : Second French Lesson Notes -

- Day4 (2022/2/22) : Third French Lesson Notes -

- -

Learn Something (🌐Tech!⌨️) Everyday : 180 Days

- -

- Day1 (2022/1/19) : Make some lines and buttons -

- -

- Day2 (2022/1/20/) : Upload a sample Unity project in web player -

- -

- Day3 (2022/1/21) : Random color, Hide and Show，with JQuery -

- -

- Day4 (2022/1/22) : Create a Tic Tac Toe with React -

- -

- Day5 (2022/1/23) : Create some samples with Vue -

- -

- Day6 (2022/1/24) : WebStorage Local, with Vue -

- -

- Day7 (2022/1/25) : Progression bar, record personal goal, compare with - year progress -

- -

- Day8 (2022/1/26) : Try some Bootstrap widget, using CSS animation -

-

- Day9 (2022/1/27) : To do list with Vue -

- -

- Day10 (2022/1/28) :Loop and Interval with Javascript -

- -

- Day11 (2022/1/29) : Celsius Fahrenheit Converter: Python + Flask + Google App Engine (app engine website DOWN, deployed to Heroku) -

- - -

- Day12 (2022/1/30) :Open Weather API -

- -

- Day13 (2022/1/31) :Show IP, Country Name and Flag -

- -

- Day14 (2022/2/1) : Input a Number and Check If it's a Prime Number -

- -

- - Day15 (2022/2/2) : Google Cloud Datastore (website DOWN) -

- -

- Day16 (2022/2/3) : Google Translate -

- -

- Day17 (2022/2/4) : Django + Python based Diary (Localhost) -

- -

- Day18 (2022/2/5) : Python + Django + Heroku, Diary (web) -

- -

- Day19 (2022/2/6) : Python + Flask + Heroku -

-

- Day20 (2022/2/7) : Heroku + Flask => Docker -

- -

- Day21 (2022/2/8) : Djongo Polls project -

- -

- - Day22 (2022/2/9) : Random Pictures -

- -

- - Day23 (2022/2/12) : Mini Spelling -

- -

- - Day24 (2022/2/14) : Mini Phrase (phrase sandbox) -

- -

- - Day25 (2022/2/15) : Angular, CLi, run start, router, data binding -

- -

- - Day26 (2022/2/16) : Angular, To Do List -

- -

- - Day27 (2022/2/18) : First ASP.NET website Deploy -

- -

Diaries and logs

- - - - + + + + + Game Feel Resources + + + +
+

Game Feel Resources

+ + +
+
+
+

Videos

+
+ +
+ +
+ + + +
+ + diff --git a/day10_javascript_async.html b/learn/day10_javascript_async.html similarity index 96% rename from day10_javascript_async.html rename to learn/day10_javascript_async.html index 37d3ea2..305a896 100644 --- a/day10_javascript_async.html +++ b/learn/day10_javascript_async.html @@ -1,105 +1,105 @@ - - - - day10 javascript loop and async - - - - - -

Back

- -

-
    -
    -
    - -
    -
    - -
    -
    -
- -
    -
    -
    - -
    -
    - -
    -
    -
- - - - + + + + day10 javascript loop and async + + + + + +

Back

+ +

+
    +
    +
    + +
    +
    + +
    +
    +
+ +
    +
    +
    + +
    +
    + +
    +
    +
+ + + + diff --git a/day12_weather.html b/learn/day12_weather.html similarity index 96% rename from day12_weather.html rename to learn/day12_weather.html index 6a7763b..e6695d0 100644 --- a/day12_weather.html +++ b/learn/day12_weather.html @@ -1,86 +1,86 @@ - - - - - Day12 City Weather - - - - - - - - - - - - - - - - - - -
-

-

-
-

- -

-

-
- - - + + + + + Day12 City Weather + + + + + + + + + + + + + + + + + + +
+

+

+
+

+ +

+

+
+ + + diff --git a/day13_IP_Country.html b/learn/day13_IP_Country.html similarity index 96% rename from day13_IP_Country.html rename to learn/day13_IP_Country.html index 165a4c6..7f0d7c7 100644 --- a/day13_IP_Country.html +++ b/learn/day13_IP_Country.html @@ -1,69 +1,69 @@ - - - - - - - - Day13 Show IP - - - - - -
- -

- -
- -

- -
-
-

-
- -

- - -




-

Back

- - + + + + + + + + Day13 Show IP + + + + + +
+ +

+ +
+ +

+ +
+
+

+
+ +

+ + +




+

Back

+ + diff --git a/day14_CheckPrimeNumber.html b/learn/day14_CheckPrimeNumber.html similarity index 95% rename from day14_CheckPrimeNumber.html rename to learn/day14_CheckPrimeNumber.html index 1d57766..475fdfd 100644 --- a/day14_CheckPrimeNumber.html +++ b/learn/day14_CheckPrimeNumber.html @@ -1,112 +1,112 @@ - - - - Day14 Check Prime Number - - - - - -

Input a Number, and click Check

-
- - -
-
- -
- - - - - - -




-

Back

- - + + + + Day14 Check Prime Number + + + + + +

Input a Number, and click Check

+
+ + +
+
+ +
+ + + + + + +




+

Back

+ + diff --git a/day16_Google_translate.html b/learn/day16_Google_translate.html similarity index 94% rename from day16_Google_translate.html rename to learn/day16_Google_translate.html index 9498088..e069aac 100644 --- a/day16_Google_translate.html +++ b/learn/day16_Google_translate.html @@ -1,69 +1,69 @@ - - - - - Day16 Google Translate - - - - -

- - -
- - - - - -
- - - - - - -

Back

- - + + + + + Day16 Google Translate + + + + +

+ + +
+ + + + + +
+ + + + + + +

Back

+ + diff --git a/day17_DjangoDiary.html b/learn/day17_DjangoDiary.html similarity index 96% rename from day17_DjangoDiary.html rename to learn/day17_DjangoDiary.html index a3c0f22..4c2d7ec 100644 --- a/day17_DjangoDiary.html +++ b/learn/day17_DjangoDiary.html @@ -1,22 +1,22 @@ - - - - - - day 17 Django + Python - - - -

- create a diary website with Django and Python - Run on local host: - -

- - - - - - - + + + + + + day 17 Django + Python + + + +

+ create a diary website with Django and Python + Run on local host: + +

+ + + + + + + \ No newline at end of file diff --git a/day22_createimage.html b/learn/day22_createimage.html similarity index 96% rename from day22_createimage.html rename to learn/day22_createimage.html index bf9775c..459b5cf 100644 --- a/day22_createimage.html +++ b/learn/day22_createimage.html @@ -1,58 +1,58 @@ - - - - - - - Day22 Create images with Click - - - - -

Click the dotted area to show a random picture

-

Set Width and Height :

- - -
-
-

Back

- - - + + + + + + + Day22 Create images with Click + + + + +

Click the dotted area to show a random picture

+

Set Width and Height :

+ + +
+
+

Back

+ + + diff --git a/day23_minispelling.html b/learn/day23_minispelling.html similarity index 94% rename from day23_minispelling.html rename to learn/day23_minispelling.html index ec2dd56..91f7532 100644 --- a/day23_minispelling.html +++ b/learn/day23_minispelling.html @@ -1,29 +1,29 @@ - - - -

Back

- -

Mini Spelling

- - -
- -

- using C# interface -
hook interface with interactive object -
add conditional interaction -
taking Event Action from other interacts -
when fullfill the condition, execute the code -
Action Baby! -

- - - -
- - - - - + + + +

Back

+ +

Mini Spelling

+ + +
+ +

+ using C# interface +
hook interface with interactive object +
add conditional interaction +
taking Event Action from other interacts +
when fullfill the condition, execute the code +
Action Baby! +

+ + + +
+ + + + + diff --git a/day2_Unity_RollingCube.html b/learn/day2_Unity_RollingCube.html similarity index 100% rename from day2_Unity_RollingCube.html rename to learn/day2_Unity_RollingCube.html diff --git a/day5_vue_demo.html b/learn/day5_vue_demo.html similarity index 95% rename from day5_vue_demo.html rename to learn/day5_vue_demo.html index 5e9ebdc..52d6f16 100644 --- a/day5_vue_demo.html +++ b/learn/day5_vue_demo.html @@ -1,218 +1,218 @@ - - - - - day5 Vue Demo Three Ways to Toggle Color - - - - - - - - -

Back

- - -

Vue Demo Three Ways to Toggle Color

- - - - - -
-

-
- - -
- - - -
- -
-

-
- -
- -

- -

-

- -

-
- - - - -
- -
-
- - - -
-

-
- -
-

-
-
- - Hover your mouse over me for a few seconds - - -
- - - - - - + + + + + day5 Vue Demo Three Ways to Toggle Color + + + + + + + + +

Back

+ + +

Vue Demo Three Ways to Toggle Color

+ + + + + +
+

+
+ + +
+ + + +
+ +
+

+
+ +
+ +

+ +

+

+ +

+
+ + + + +
+ +
+
+ + + +
+

+
+ +
+

+
+
+ + Hover your mouse over me for a few seconds + + +
+ + + + + + \ No newline at end of file diff --git a/day6_remember_me.html b/learn/day6_remember_me.html similarity index 95% rename from day6_remember_me.html rename to learn/day6_remember_me.html index ccebfe0..c32bbe8 100644 --- a/day6_remember_me.html +++ b/learn/day6_remember_me.html @@ -1,78 +1,78 @@ - - - - - day6_remember_me - - - - - - - - -

Back

- - -
- -

- Input your message : -

- - -

This is your message : -

- -

- {{ message }} -

- - -

- -

- - -
- ( Even you left this page or closed the browser, - when you come back, - the message would be still here.) -
- -

- {{savedMessage}} -

- -
- - - - - - + + + + + day6_remember_me + + + + + + + + +

Back

+ + +
+ +

+ Input your message : +

+ + +

This is your message : +

+ +

+ {{ message }} +

+ + +

+ +

+ + +
+ ( Even you left this page or closed the browser, + when you come back, + the message would be still here.) +
+ +

+ {{savedMessage}} +

+ +
+ + + + + + \ No newline at end of file diff --git a/day7_progressionbar.html b/learn/day7_progressionbar.html similarity index 96% rename from day7_progressionbar.html rename to learn/day7_progressionbar.html index ea8111b..f7c632f 100644 --- a/day7_progressionbar.html +++ b/learn/day7_progressionbar.html @@ -1,175 +1,175 @@ - - - - - day7_my progress bar - - - - - - - - -

Back

- - -
- -

- Year Progress -

- -

Today is : - -

- -

-

- -
-
-
- -
-

My Swimming Progress | Goal: 200,000 m

- -
-
-
-

{{swimmingUpdate}} meters so far -

-

- - -

- - - - - - - -
- - - - - - - + + + + + day7_my progress bar + + + + + + + + +

Back

+ + +
+ +

+ Year Progress +

+ +

Today is : + +

+ +

+

+ +
+
+
+ +
+

My Swimming Progress | Goal: 200,000 m

+ +
+
+
+

{{swimmingUpdate}} meters so far +

+

+ + +

+ + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/day8_bootstrap_try.html b/learn/day8_bootstrap_try.html similarity index 97% rename from day8_bootstrap_try.html rename to learn/day8_bootstrap_try.html index fa3db9b..abe97f5 100644 --- a/day8_bootstrap_try.html +++ b/learn/day8_bootstrap_try.html @@ -1,197 +1,197 @@ - - - - - - - - - - - - Hello, Bootstrap - - - - - - - - - - - -
What is the meaning of life?
- -
- - -
-
- - -
-
- - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + Hello, Bootstrap + + + + + + + + + + + +
What is the meaning of life?
+ +
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/day9_todolist_Vue.html b/learn/day9_todolist_Vue.html similarity index 95% rename from day9_todolist_Vue.html rename to learn/day9_todolist_Vue.html index 64dfc96..177d54b 100644 --- a/day9_todolist_Vue.html +++ b/learn/day9_todolist_Vue.html @@ -1,125 +1,125 @@ - - - - day9 vue to do - - - - - - -

Back

- - - - - - - - -
- - - -
- - - - -
-
    -
  • -
-
- - - - + + + + day9 vue to do + + + + + + +

Back

+ + + + + + + + +
+ + + +
+ + + + +
+
    +
  • +
+
+ + + + diff --git a/day_1.html b/learn/day_1.html similarity index 95% rename from day_1.html rename to learn/day_1.html index 86b2189..6e8fc19 100644 --- a/day_1.html +++ b/learn/day_1.html @@ -1,76 +1,76 @@ - - - - - - -

Day 1

- -

- -

Back

- - - - - - - - - - + + + + + + +

Day 1

+ +

+ +

Back

+ + + + + + + + + + diff --git a/day_3_randomcolor.html b/learn/day_3_randomcolor.html similarity index 95% rename from day_3_randomcolor.html rename to learn/day_3_randomcolor.html index 6e45c1e..88e695e 100644 --- a/day_3_randomcolor.html +++ b/learn/day_3_randomcolor.html @@ -1,34 +1,34 @@ - - - - - Random Color Background - - - - - - - - - - - -
- Hide - - Show -
- -
something
- - - - - - + + + + + Random Color Background + + + + + + + + + + + +
+ Hide + + Show +
+ +
something
+ + + + + + diff --git a/day_4_react.html b/learn/day_4_react.html similarity index 100% rename from day_4_react.html rename to learn/day_4_react.html diff --git a/day_4_react_time.html b/learn/day_4_react_time.html similarity index 96% rename from day_4_react_time.html rename to learn/day_4_react_time.html index b877980..0d9ec50 100644 --- a/day_4_react_time.html +++ b/learn/day_4_react_time.html @@ -1,22 +1,22 @@ - - - - - - -

Hello React!

- - - -
- - - - - - - - - - - + + + + + + +

Hello React!

+ + + +
+ + + + + + + + + + + diff --git a/flexbox-styles.css b/learn/flexbox-styles.css similarity index 92% rename from flexbox-styles.css rename to learn/flexbox-styles.css index fa4648c..96d9425 100644 --- a/flexbox-styles.css +++ b/learn/flexbox-styles.css @@ -1,28 +1,28 @@ -.flexbox-container{ - - - display: flex; - flex-direction: column; - align-items: center; - -} - -.flexbox-item{ - width: 200px; - height: 200px; - margin : 10px; - border : 3px solid black; - background-color: aliceblue; -} - -.flexbox-item-1{ - min-height: 100px; -} - -.flexbox-item-2{ - min-height: 200px; -} - -.flexbox-item-3{ - min-height: 300px; -} +.flexbox-container{ + + + display: flex; + flex-direction: column; + align-items: center; + +} + +.flexbox-item{ + width: 200px; + height: 200px; + margin : 10px; + border : 3px solid black; + background-color: aliceblue; +} + +.flexbox-item-1{ + min-height: 100px; +} + +.flexbox-item-2{ + min-height: 200px; +} + +.flexbox-item-3{ + min-height: 300px; +} diff --git a/flexbox.html b/learn/flexbox.html similarity index 96% rename from flexbox.html rename to learn/flexbox.html index b06bee3..2c73c48 100644 --- a/flexbox.html +++ b/learn/flexbox.html @@ -1,21 +1,21 @@ - - - - - - - Document - - - -
- -
-
-
- -
- - - + + + + + + + Document + + + +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/learn/index_learn.html b/learn/index_learn.html new file mode 100644 index 0000000..9d573a8 --- /dev/null +++ b/learn/index_learn.html @@ -0,0 +1,217 @@ + + + + + + + +

✔️ CHEN QIANGPAN's Learning Zone and Web Playground ✔️

+ + + + +

🏊‍♂️GO🏊‍♂️

+

+ LET US GO +

+ +

🏊‍♂️I Love Swim🏊‍♂️

+

+ Swim 2🏊‍♂️0🏊‍♂️2🏊‍♂️2🏊‍♂️ Progress +

+ +

Learn Blender

+

+ Blender learn progress +

+ +

🕹️ Make Games 🎮 🎲

+

+ Unity Inventory System +

+

+ Unity DoTween Plugin +

+

+ Global Game Jam 2022 Progress +

+ +

🐓 Learn French 🐓

+ +

+ Day1 (2022/2/3) : Pre French Lesson Notes +

+

+ Day2 (2022/2/9) : First French Lesson Notes +

+ Day3 (2022/2/15) : Second French Lesson Notes +

+ Day4 (2022/2/22) : Third French Lesson Notes +

+ +

Learn Something (🌐Tech!⌨️) Everyday : 180 Days

+ +

+ Day1 (2022/1/19) : Make some lines and buttons +

+ +

+ Day2 (2022/1/20/) : Upload a sample Unity project in web player +

+ +

+ Day3 (2022/1/21) : Random color, Hide and Show，with JQuery +

+ +

+ Day4 (2022/1/22) : Create a Tic Tac Toe with React +

+ +

+ Day5 (2022/1/23) : Create some samples with Vue +

+ +

+ Day6 (2022/1/24) : WebStorage Local, with Vue +

+ +

+ Day7 (2022/1/25) : Progression bar, record personal goal, compare with + year progress +

+ +

+ Day8 (2022/1/26) : Try some Bootstrap widget, using CSS animation +

+

+ Day9 (2022/1/27) : To do list with Vue +

+ +

+ Day10 (2022/1/28) :Loop and Interval with Javascript +

+ +

+ Day11 (2022/1/29) : Celsius Fahrenheit Converter: Python + Flask + Google App Engine (app engine website DOWN, deployed to Heroku) +

+ + +

+ Day12 (2022/1/30) :Open Weather API +

+ +

+ Day13 (2022/1/31) :Show IP, Country Name and Flag +

+ +

+ Day14 (2022/2/1) : Input a Number and Check If it's a Prime Number +

+ +

+ + Day15 (2022/2/2) : Google Cloud Datastore (website DOWN) +

+ +

+ Day16 (2022/2/3) : Google Translate +

+ +

+ Day17 (2022/2/4) : Django + Python based Diary (Localhost) +

+ +

+ Day18 (2022/2/5) : Python + Django + Heroku, Diary (web) +

+ +

+ Day19 (2022/2/6) : Python + Flask + Heroku +

+

+ Day20 (2022/2/7) : Heroku + Flask => Docker +

+ +

+ Day21 (2022/2/8) : Djongo Polls project +

+ +

+ + Day22 (2022/2/9) : Random Pictures +

+ +

+ + Day23 (2022/2/12) : Mini Spelling +

+ +

+ + Day24 (2022/2/14) : Mini Phrase (phrase sandbox) +

+ +

+ + Day25 (2022/2/15) : Angular, CLi, run start, router, data binding +

+ +

+ + Day26 (2022/2/16) : Angular, To Do List +

+ +

+ + Day27 (2022/2/18) : First ASP.NET website Deploy +

+ +

Diaries and logs

+ + + + + diff --git a/learnfrench_day1.html b/learn/learnfrench_day1.html similarity index 97% rename from learnfrench_day1.html rename to learn/learnfrench_day1.html index b75b814..a0db498 100644 --- a/learnfrench_day1.html +++ b/learn/learnfrench_day1.html @@ -1,41 +1,41 @@ - - - - - - Learn French Day 1 : 2022-02-06 - - -

-

- Oui j’aime le cinéma.
- - Quel genre de films vous aimez ?
- - J’aime les films de science fiction.

- - Quels plats vous aimez ?
- - J’aime la soupe de tomates/à la tomate.

- - - Vous êtes allé en France ?
- - Non, je ne suis pas/jamais allé en France. (négation)
- - Je préfère le café

- - - Quand vous buvez du café pendant la journée ?
- - Je bois du café le matin.

- - Je connais / je ne connais pas. (negation)
- Je n’écoute pas de la musique fréquemment.

- - Vous habitez dans quelle ville en Australie ?
- J’habite à Sydney.
- J’aime beaucoup Sydney.
- C’est une ville jolie et sympa.

- - Je préfère les parcs, la plage.

- - Aujourd’hui, il fait froid.

- - Avant le covid, j’allais souvent à Shanghai.
- -

- - + + + + + + Learn French Day 1 : 2022-02-06 + + +

+

+ Oui j’aime le cinéma.
+ - Quel genre de films vous aimez ?
+ - J’aime les films de science fiction.

+ - Quels plats vous aimez ?
+ - J’aime la soupe de tomates/à la tomate.

+ + - Vous êtes allé en France ?
+ - Non, je ne suis pas/jamais allé en France. (négation)
+ - Je préfère le café

+ + - Quand vous buvez du café pendant la journée ?
+ - Je bois du café le matin.

+ + Je connais / je ne connais pas. (negation)
+ Je n’écoute pas de la musique fréquemment.

+ + Vous habitez dans quelle ville en Australie ?
+ J’habite à Sydney.
+ J’aime beaucoup Sydney.
+ C’est une ville jolie et sympa.

+ + Je préfère les parcs, la plage.

+ + Aujourd’hui, il fait froid.

+ + Avant le covid, j’allais souvent à Shanghai.
+ +

+ + \ No newline at end of file diff --git a/learnfrench_day2.html b/learn/learnfrench_day2.html similarity index 96% rename from learnfrench_day2.html rename to learn/learnfrench_day2.html index 8c40a4d..0db1cf8 100644 --- a/learnfrench_day2.html +++ b/learn/learnfrench_day2.html @@ -1,38 +1,38 @@ - - - - - - Learn French Day 1 : 2022-02-14 - - -

-

- - - je ne comprends pas
- combien coûte le vélo ?
- comment on dit "bla bla bla" en français ?
- je n'aime pas cuisiner
- les lunettes
- le nom de famille
- le prénom (on ne prononce par le "m")
- pouvez-vous répéter s'il vous plaît ?
- je suis designer de jeux vidéos
- que signifie bla bla bla ?
- désolé pour le retard
- je ne comprends pas
- la bouteille
- le vélo
- comment on dit "bla bla bla" en français ?
- je peux vous aider?
- j'ai compris!
- je n'aime pas cuisiner
- J'aime lire des livres
- - - -

- - + + + + + + Learn French Day 1 : 2022-02-14 + + +

+

+ + + je ne comprends pas
+ combien coûte le vélo ?
+ comment on dit "bla bla bla" en français ?
+ je n'aime pas cuisiner
+ les lunettes
+ le nom de famille
+ le prénom (on ne prononce par le "m")
+ pouvez-vous répéter s'il vous plaît ?
+ je suis designer de jeux vidéos
+ que signifie bla bla bla ?
+ désolé pour le retard
+ je ne comprends pas
+ la bouteille
+ le vélo
+ comment on dit "bla bla bla" en français ?
+ je peux vous aider?
+ j'ai compris!
+ je n'aime pas cuisiner
+ J'aime lire des livres
+ + + +

+ + \ No newline at end of file diff --git a/learnfrench_day3.html b/learn/learnfrench_day3.html similarity index 96% rename from learnfrench_day3.html rename to learn/learnfrench_day3.html index 95cc409..6fe4105 100644 --- a/learnfrench_day3.html +++ b/learn/learnfrench_day3.html @@ -1,40 +1,40 @@ - - - - - - Learn French Day 3 : 2022-02-21 - - -

-

- - - Tu t'applelles Claire.
- épeler
- monsieur
- mademoiselle (Mlle)
- madame (Mme)
- vous vous appelez Sofia et Paul
- comment tu t'appelles ?
- Elle s'appelle Luna
- comment vous vous appelez ?
- elles s'appellent Shuang et Ella
- nous nous appelons Claire et Qiangpan
- je suis
- tu es
- il est
- Où tu habites ?
- elle est
- j'habite à Montpellier
- nous sommes
- vous êtes
- ils sont
- elles sont
- - - -

- - + + + + + + Learn French Day 3 : 2022-02-21 + + +

+

+ + + Tu t'applelles Claire.
+ épeler
+ monsieur
+ mademoiselle (Mlle)
+ madame (Mme)
+ vous vous appelez Sofia et Paul
+ comment tu t'appelles ?
+ Elle s'appelle Luna
+ comment vous vous appelez ?
+ elles s'appellent Shuang et Ella
+ nous nous appelons Claire et Qiangpan
+ je suis
+ tu es
+ il est
+ Où tu habites ?
+ elle est
+ j'habite à Montpellier
+ nous sommes
+ vous êtes
+ ils sont
+ elles sont
+ + + +

+ + \ No newline at end of file diff --git a/learnfrench_day4.html b/learn/learnfrench_day4.html similarity index 95% rename from learnfrench_day4.html rename to learn/learnfrench_day4.html index 37bf816..249c921 100644 --- a/learnfrench_day4.html +++ b/learn/learnfrench_day4.html @@ -1,40 +1,40 @@ - - - - - - Learn French Day 3 - - -

-

- - - ma femme
- mon mari
- mes enfants
- ma fille
- mon fils
- La réponse est ...
- les États-Unis
- les Pays-Bas
- la Corée
- le Portugal
- l'Allemagne
- l'Espagne
- l'Australie
- 11 (onze)
- 12 (douze)
- 13 (treize)
- 14 (quatorze)
- 15 (quinze)
- 16 (seize)
- 17 (dix-sept)
- - - - -

- - + + + + + + Learn French Day 3 + + +

+

+ + + ma femme
+ mon mari
+ mes enfants
+ ma fille
+ mon fils
+ La réponse est ...
+ les États-Unis
+ les Pays-Bas
+ la Corée
+ le Portugal
+ l'Allemagne
+ l'Espagne
+ l'Australie
+ 11 (onze)
+ 12 (douze)
+ 13 (treize)
+ 14 (quatorze)
+ 15 (quinze)
+ 16 (seize)
+ 17 (dix-sept)
+ + + + +

+ + \ No newline at end of file diff --git a/logs.html b/learn/logs.html similarity index 96% rename from logs.html rename to learn/logs.html index 6ca44e9..97339e5 100644 --- a/logs.html +++ b/learn/logs.html @@ -1,272 +1,272 @@ - - - -

Back

- -

Logs

- -

- Day1 (2022/01/19): 在github pages上创建了一个repo; 用aws -
route53申请了一个域名，并且用CNAME record指向git的io页面； -
试着安装Jekyll但是失败了，它的安装前提需要另外四个软件，Ruby, RubyGems, -
GCC, Make，后面两个不知道怎么安装； 随便写了一些JS代码。 -

- -

- Day2 (2022/01/20): build a sample Unity project into WEBGL and then -
uploaded to the site; known issue: If I build the webgl version with -
compress, then I need do some setting on the web server site, otherwise, -
the unity content won't load; compare: compressed: 4MB, un compressed: 14 - MB -

- -

- Day3 (2022/01/21): Interesing, seems if I add this in to .html file I have -
JQuery ready to use, Goolge is the CDN of JQuery: explored something about -
css position, and with hide/show function in JQuery -

- -

- Day4 (2022/01/22): follow React's tutorial, made a Tic Tac Toe game then -
build and deploy the react project to a git repo then download the -
reop...and copy to this main project I am sure this is not the best way to - do it... -

- -

- Day5 (2022/01/23): tried a little bit Vue, very powerful JS frontend stuff -
I have tried both the old way and new way to toggle a shape's Color In the -
old way, it has a method inside Vue, to create a toggle function there In -
the new way, it only has one data show: true, there, a bool, apparently -
Then, in the html, it is using v-on:click = "show =!show" to do the basic -
logic and then, it is using a v-if, and a v-else to call different -
components to render them , very cool. Then there is anotherway to change -
color, which is pick up a color and apply to the inline css style, by -
using v-bind: style I think to switch color, the third way is the right -
way, we don't really need to create a component to do color switch also, I -
could embed the -webkit-transition into inline css to have vue's -
transition things...cool beans -

- -

- Day6 (2022/01/24): use webstorage to store user input and read it use Vue -
to store and pass the data to DOM -

- -

- Day7 (2022/01/25): javascript + Vue create two simple progress bar first -
one could reflect current year progression by getting the Date() second -
one could record personal year Goal also using web storage to record the -
goal and update it in the progress bar -

- -

- Day8 (2022/01/26): Bootstrap + CSS animation using bootstrap spinners + -
CSS animation create something...very strange also using Bootstrap navbar -
and shadow for the top banners -

- -

- Day9 (2022/01/27): a simple todo list from Vue offical website I have -
added a delete all button and a check box in the template of the - -

- -

- Day10 (2022/01/28): - - a simple loop with interval setInterval(myFunction, 1000); -
also created an array to hold the loop - -

- -

- Day11 (2022/01/29): - - follow this tutorial -
using python + Flask create a web app -
create google app engine account and create a test project -
using gcloud to deploy the app to google app engine - -

- -

- Day12 (2022/01/30): - - Get weather info from Open Weather API - - -

- -

- Day13 (2022/01/31): - - Get user current country name, region, IP, and ISP by calling this API -
and get info from JSON file -
Show country flag by this repo - - -

- - -

- Day14 (2022/02/01): - -
Get user input and check if it's a number -
if it's a number -
Then check if it's a prime number -
Also handle if user didn't input anything - -

- - -

- Day15 (2022/02/02): - -
Follow google official tutorial create a cloud database -
The good thing is from the day 11 practice, -
I had already create python3 + flask + google app engine -
, so part of the set up work has been done. - -
BTW: I found two parts weren't mentioned in the tutorial, which are very important: - -
you need to do (or pip install requirements.txt): -
pip install google-cloud-datastore - -
also must follow this page to setup Google authentication: - - -

- -

- Day16 (2022/02/03): - -
Totoally pissed off by Firebase set up -
Just created a simple page with google translate on it - -

- - -

- Day17 (2022/02/04): - -
followed this tutorial -
make a diary website with Django and Python -
tried to deploy it with Heroku with this tutorial , successed but not working, something is wrong -
-
https://pure-plateau-10092.herokuapp.com/ - -

- - -

- Day18 (2022/02/05): - -
used this repo -
finally got python + django + heroku to work -
and then ingerate the other diary project in, feel so good ! - - - -

- Day19 (2022/02/06): - -
used this tutorial -
got flask + python project deployed on heroku -
no issues, just need to remember to add the gunicorn into requirements.txt - - -

- Day20 (2022/02/07): - -
follow heroku official tutorial -
get my first Docker image deployed on heroku -
happy - -
-
-Day21 (2022/02/08): - -
follow official Django tutorial -
create a polls project -
still have issue deploy it with heroku: collectestatic : no input error - - -

- -Day22 (2022/02/09): - -
tired of those heroku deploy issue -
just create a random picture website with https://picsum.photos/ -
add a bit function to let user customize the picture size -
add another bit function to let user undo - -
- -
-Day23 (2022/02/012): - -
C# interface -
C# Event Action -
condition from actions -
interface implemented into multiple objects - -
-
public interface IInteractable -
{ -
void Interact(); -
public event Action Interacted; -
} -
Inside player.cs: -
var interactable = nearestGameObject.GetComponent(); -
if (interactable != null) -
{ -
interactable.Interact(); -
} -
Inside Cube.cs: -
public void Interact() -
{ -
ColorChange(); // let each interactable object deside what to do -
-
Interacted?.Invoke(string); -
} - - -

- -Day24 (2022/02/14): - -
use same code base as mini Spelling -
create a phrase sandbox game, let player construct phrase -
and show the picutre of the phrase -

-Day25 (2022/02/15): - -
Angular with Rainer -
create new app -
create a new component -
create a new router -
one way, two way, structrual data binding - -Day26 (2022/02/16): - -
Angular todo list -
also, to make angular work in Github page -
need change index.html to 404.html -
update base herf if needed -
and add those lines at the top of the html file: -
--- -
permalink: cqpfirstangular/404.html -
--- - -
- -Day27 (2022/02/18): - -
ASP.NET core 6.0 website deploy -
using Azure web service -
using Azure database -
not so existing yet - - - + + + +

Back

+ +

Logs

+ +

+ Day1 (2022/01/19): 在github pages上创建了一个repo; 用aws +
route53申请了一个域名，并且用CNAME record指向git的io页面； +
试着安装Jekyll但是失败了，它的安装前提需要另外四个软件，Ruby, RubyGems, +
GCC, Make，后面两个不知道怎么安装； 随便写了一些JS代码。 +

+ +

+ Day2 (2022/01/20): build a sample Unity project into WEBGL and then +
uploaded to the site; known issue: If I build the webgl version with +
compress, then I need do some setting on the web server site, otherwise, +
the unity content won't load; compare: compressed: 4MB, un compressed: 14 + MB +

+ +

+ Day3 (2022/01/21): Interesing, seems if I add this in to .html file I have +
JQuery ready to use, Goolge is the CDN of JQuery: explored something about +
css position, and with hide/show function in JQuery +

+ +

+ Day4 (2022/01/22): follow React's tutorial, made a Tic Tac Toe game then +
build and deploy the react project to a git repo then download the +
reop...and copy to this main project I am sure this is not the best way to + do it... +

+ +

+ Day5 (2022/01/23): tried a little bit Vue, very powerful JS frontend stuff +
I have tried both the old way and new way to toggle a shape's Color In the +
old way, it has a method inside Vue, to create a toggle function there In +
the new way, it only has one data show: true, there, a bool, apparently +
Then, in the html, it is using v-on:click = "show =!show" to do the basic +
logic and then, it is using a v-if, and a v-else to call different +
components to render them , very cool. Then there is anotherway to change +
color, which is pick up a color and apply to the inline css style, by +
using v-bind: style I think to switch color, the third way is the right +
way, we don't really need to create a component to do color switch also, I +
could embed the -webkit-transition into inline css to have vue's +
transition things...cool beans +

+ +

+ Day6 (2022/01/24): use webstorage to store user input and read it use Vue +
to store and pass the data to DOM +

+ +

+ Day7 (2022/01/25): javascript + Vue create two simple progress bar first +
one could reflect current year progression by getting the Date() second +
one could record personal year Goal also using web storage to record the +
goal and update it in the progress bar +

+ +

+ Day8 (2022/01/26): Bootstrap + CSS animation using bootstrap spinners + +
CSS animation create something...very strange also using Bootstrap navbar +
and shadow for the top banners +

+ +

+ Day9 (2022/01/27): a simple todo list from Vue offical website I have +
added a delete all button and a check box in the template of the + +

+ +

+ Day10 (2022/01/28): + + a simple loop with interval setInterval(myFunction, 1000); +
also created an array to hold the loop + +

+ +

+ Day11 (2022/01/29): + + follow this tutorial +
using python + Flask create a web app +
create google app engine account and create a test project +
using gcloud to deploy the app to google app engine + +

+ +

+ Day12 (2022/01/30): + + Get weather info from Open Weather API + + +

+ +

+ Day13 (2022/01/31): + + Get user current country name, region, IP, and ISP by calling this API +
and get info from JSON file +
Show country flag by this repo + + +

+ + +

+ Day14 (2022/02/01): + +
Get user input and check if it's a number +
if it's a number +
Then check if it's a prime number +
Also handle if user didn't input anything + +

+ + +

+ Day15 (2022/02/02): + +
Follow google official tutorial create a cloud database +
The good thing is from the day 11 practice, +
I had already create python3 + flask + google app engine +
, so part of the set up work has been done. + +
BTW: I found two parts weren't mentioned in the tutorial, which are very important: + +
you need to do (or pip install requirements.txt): +
pip install google-cloud-datastore + +
also must follow this page to setup Google authentication: + + +

+ +

+ Day16 (2022/02/03): + +
Totoally pissed off by Firebase set up +
Just created a simple page with google translate on it + +

+ + +

+ Day17 (2022/02/04): + +
followed this tutorial +
make a diary website with Django and Python +
tried to deploy it with Heroku with this tutorial , successed but not working, something is wrong +
+
https://pure-plateau-10092.herokuapp.com/ + +

+ + +

+ Day18 (2022/02/05): + +
used this repo +
finally got python + django + heroku to work +
and then ingerate the other diary project in, feel so good ! + + + +

+ Day19 (2022/02/06): + +
used this tutorial +
got flask + python project deployed on heroku +
no issues, just need to remember to add the gunicorn into requirements.txt + + +

+ Day20 (2022/02/07): + +
follow heroku official tutorial +
get my first Docker image deployed on heroku +
happy + +
+
+Day21 (2022/02/08): + +
follow official Django tutorial +
create a polls project +
still have issue deploy it with heroku: collectestatic : no input error + + +

+ +Day22 (2022/02/09): + +
tired of those heroku deploy issue +
just create a random picture website with https://picsum.photos/ +
add a bit function to let user customize the picture size +
add another bit function to let user undo + +
+ +
+Day23 (2022/02/012): + +
C# interface +
C# Event Action +
condition from actions +
interface implemented into multiple objects + +
+
public interface IInteractable +
{ +
void Interact(); +
public event Action Interacted; +
} +
Inside player.cs: +
var interactable = nearestGameObject.GetComponent(); +
if (interactable != null) +
{ +
interactable.Interact(); +
} +
Inside Cube.cs: +
public void Interact() +
{ +
ColorChange(); // let each interactable object deside what to do +
+
Interacted?.Invoke(string); +
} + + +

+ +Day24 (2022/02/14): + +
use same code base as mini Spelling +
create a phrase sandbox game, let player construct phrase +
and show the picutre of the phrase +

+Day25 (2022/02/15): + +
Angular with Rainer +
create new app +
create a new component +
create a new router +
one way, two way, structrual data binding + +Day26 (2022/02/16): + +
Angular todo list +
also, to make angular work in Github page +
need change index.html to 404.html +
update base herf if needed +
and add those lines at the top of the html file: +
--- +
permalink: cqpfirstangular/404.html +
--- + +
+ +Day27 (2022/02/18): + +
ASP.NET core 6.0 website deploy +
using Azure web service +
using Azure database +
not so existing yet + + + diff --git a/python_json_and_others.html b/learn/python_json_and_others.html similarity index 94% rename from python_json_and_others.html rename to learn/python_json_and_others.html index 1772386..423bb88 100644 --- a/python_json_and_others.html +++ b/learn/python_json_and_others.html @@ -1,48 +1,48 @@ - - - - day10 javascript loop and async - - -

Back

- -

Learn some Python

- - -
- - Create a Json file by Python: - - 
-            
-                import json
-                data = {
-                    "name": "cqp",
-                    "age": 38,
-                    "city": "Sydney"
-                }
-                with open("data.json", "w") as write_file:
-                    json.dump(data, write_file)
-            
-
-
- -
- - Read a Json file by Python: - - 
-            
-                import json
-                with open ("data.json", "r") as read_file:
-                    data = json.load(read_file)
-                    print(data)
-            
-
-
- - - - - - + + + + day10 javascript loop and async + + +

Back

+ +

Learn some Python

+ + +
+ + Create a Json file by Python: + + 
+            
+                import json
+                data = {
+                    "name": "cqp",
+                    "age": 38,
+                    "city": "Sydney"
+                }
+                with open("data.json", "w") as write_file:
+                    json.dump(data, write_file)
+            
+
+
+ +
+ + Read a Json file by Python: + + 
+            
+                import json
+                with open ("data.json", "r") as read_file:
+                    data = json.load(read_file)
+                    print(data)
+            
+
+
+ + + + + + diff --git a/swim.html b/learn/swim.html similarity index 93% rename from swim.html rename to learn/swim.html index 30a442b..c1d9dab 100644 --- a/swim.html +++ b/learn/swim.html @@ -1,20 +1,20 @@ - - - -

Back

- -

Swim 2022 Progress

- - -
- - - -
- - - - - + + + +

Back

+ +

Swim 2022 Progress

+ + +
+ + + +
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d8b3b40 --- /dev/null +++ b/script.js @@ -0,0 +1,100 @@ +// Navigation functionality +const navVideos = document.getElementById('nav-videos'); +const navArticles = document.getElementById('nav-articles'); +const navDemos = document.getElementById('nav-demos'); +const navAbout = document.getElementById('nav-about'); +const siteTitle = document.getElementById('site-title'); +const videosSection = document.getElementById('videos'); +const articlesSection = document.getElementById('articles'); +const demosSection = document.getElementById('demos'); +const aboutSection = document.getElementById('about'); +const loadMoreButton = document.getElementById('load-more-videos'); + +navVideos.addEventListener('click', (e) => { + e.preventDefault(); + showSection('videos'); +}); + +navArticles.addEventListener('click', (e) => { + e.preventDefault(); + showSection('articles'); +}); + +navDemos.addEventListener('click', (e) => { + e.preventDefault(); + showSection('demos'); +}); + +navAbout.addEventListener('click', (e) => { + e.preventDefault(); + showSection('about'); +}); + +siteTitle.addEventListener('click', () => { + showSection('all'); +}); + +function showSection(section) { + videosSection.style.display = (section === 'videos' || section === 'all') ? 'block' : 'none'; + articlesSection.style.display = (section === 'articles' || section === 'all') ? 'block' : 'none'; + demosSection.style.display = (section === 'demos' || section === 'all') ? 'block' : 'none'; + aboutSection.style.display = (section === 'about' || section === 'all') ? 'block' : 'none'; +} + +// Search functionality +const searchInput = document.getElementById('search'); + +searchInput.addEventListener('input', () => { + const query = searchInput.value.toLowerCase(); + filterContent(query); +}); + +function filterContent(query) { + const allContent = document.querySelectorAll('.video, .article, .demo'); + + allContent.forEach(content => { + const title = content.querySelector('h3').textContent.toLowerCase(); + if (title.includes(query)) { + content.style.display = ''; + } else { + content.style.display = 'none'; + } + }); +} + +// Load more videos functionality +let currentVideoIndex = 0; +const videosPerPage = 3; // Number of videos to show per load +const videoContainer = document.getElementById('video-container'); + +const videoData = [ + // Example data, replace with your actual video data + { title: 'Shooting feeling - Doom Eternal - Hit Marker', src: 'https://www.youtube.com/embed/ezL6b_VbOQY' }, + { title: 'Shooting feeling - Doom Eternal - Body Explode VFX', src: 'https://www.youtube.com/embed/HqsFsx9Kzpo' }, + { title: 'Shooting feeling - Doom Eternal - Hit Reaction', src: 'https://www.youtube.com/embed/oO1S7AixjKM' }, + // Add more video data here... +]; + +function loadVideos() { + for (let i = 0; i < videosPerPage && currentVideoIndex < videoData.length; i++, currentVideoIndex++) { + const video = videoData[currentVideoIndex]; + const videoElement = document.createElement('div'); + videoElement.className = 'video'; + videoElement.innerHTML = ` +

${video.title}

+ + `; + videoContainer.appendChild(videoElement); + } + + if (currentVideoIndex >= videoData.length) { + loadMoreButton.style.display = 'none'; + } else { + loadMoreButton.style.display = 'block'; + } +} + +loadMoreButton.addEventListener('click', loadVideos); + +// Load initial set of videos +loadVideos(); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..078957d --- /dev/null +++ b/styles.css @@ -0,0 +1,96 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f0f0f0; +} + +header { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; +} + +header h1 { + cursor: pointer; +} + +nav { + margin-top: 10px; +} + +nav ul { + list-style-type: none; + padding: 0; +} + +nav ul li { + display: inline; + margin-right: 20px; +} + +nav ul li a { + color: #fff; + text-decoration: none; + font-size: 1.2em; +} + +header input { + width: 80%; + padding: 10px; + margin-top: 10px; + font-size: 1em; +} + +.container { + max-width: 1000px; + margin: auto; + padding: 20px; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.category { + margin-bottom: 40px; +} + +.category h2 { + font-size: 2em; + margin-bottom: 20px; +} + +.video, .article, .demo { + margin-bottom: 20px; +} + +.video h3, .article h3, .demo h3 { + font-size: 1.5em; + margin-bottom: 10px; +} + +#load-more-videos { + display: block; + margin: 20px auto; + padding: 10px 20px; + font-size: 1em; + cursor: pointer; +} + +#about p { + font-size: 1.2em; +} + +#about a { + margin-right: 10px; +} + +@media (max-width: 600px) { + .video iframe, .article iframe, .demo iframe { + height: 200px; + } + + header input { + width: 95%; + } +}