diff --git a/README.md b/README.md deleted file mode 100644 index f2f22b8..0000000 --- a/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# 💫 About Me: -🔭 I'm currently working on GIS-Based App
🤝 I'm looking to collaborate on Unity's Game Project
🌱 I'm currently learning React Js
💬 Ask me about Anime, Movies or Series
⚡Fun fact: i have suprise on my github page - - -## 🌐 Socials: -[![Discord](https://img.shields.io/badge/Discord-%237289DA.svg?logo=discord&logoColor=white)](https://discord.gg/QuXVUa2Q) [![Facebook](https://img.shields.io/badge/Facebook-%231877F2.svg?logo=Facebook&logoColor=white)](https://facebook.com/leo.t.1293) [![Instagram](https://img.shields.io/badge/Instagram-%23E4405F.svg?logo=Instagram&logoColor=white)](https://instagram.com/leoprangs) [![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?logo=linkedin&logoColor=white)](https://linkedin.com/in/leoptobing) - -# 💻 Tech Stack: -![C++](https://img.shields.io/badge/c++-%2300599C.svg?style=for-the-badge&logo=c%2B%2B&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![C#](https://img.shields.io/badge/c%23-%23239120.svg?style=for-the-badge&logo=csharp&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![Windows Terminal](https://img.shields.io/badge/Windows%20Terminal-%234D4D4D.svg?style=for-the-badge&logo=windows-terminal&logoColor=white) ![Python](https://img.shields.io/badge/python-3670A0?style=for-the-badge&logo=python&logoColor=ffdd54) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![GithubPages](https://img.shields.io/badge/github%20pages-121013?style=for-the-badge&logo=github&logoColor=white) ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) ![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=for-the-badge&logo=Cloudflare&logoColor=white) ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) ![WordPress](https://img.shields.io/badge/WordPress-%23117AC9.svg?style=for-the-badge&logo=WordPress&logoColor=white) ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) ![MySQL](https://img.shields.io/badge/mysql-4479A1.svg?style=for-the-badge&logo=mysql&logoColor=white) ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) ![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white) ![Affinity Photo](https://img.shields.io/badge/affinityphoto-%237E4DD2.svg?style=for-the-badge&logo=affinity-photo&logoColor=white) ![Canva](https://img.shields.io/badge/Canva-%2300C4CC.svg?style=for-the-badge&logo=Canva&logoColor=white) ![Aseprite](https://img.shields.io/badge/Aseprite-FFFFFF?style=for-the-badge&logo=Aseprite&logoColor=#7D929E) ![Pandas](https://img.shields.io/badge/pandas-%23150458.svg?style=for-the-badge&logo=pandas&logoColor=white) ![NumPy](https://img.shields.io/badge/numpy-%23013243.svg?style=for-the-badge&logo=numpy&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white) ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![Portfolio](https://img.shields.io/badge/Portfolio-%23000000.svg?style=for-the-badge&logo=firefox&logoColor=#FF7139) -# 📊 GitHub Stats: -![](https://github-readme-stats.vercel.app/api?username=leo42night&theme=dark&hide_border=false&include_all_commits=false&count_private=false)
-![](https://github-readme-streak-stats.herokuapp.com/?user=Leo42night&theme=dark&hide_border=false)
-![](https://github-readme-stats.vercel.app/api/top-langs/?username=Leo42night&theme=dark&hide_border=false&include_all_commits=true&count_private=true&layout=compact) - -## 🏆 GitHub Trophies -![](https://github-profile-trophy.vercel.app/?username=Leo42night&theme=radical&no-frame=false&no-bg=false&margin-w=4) - -### ✍️ Random Dev Quote -![](https://quotes-github-readme.vercel.app/api?type=vetical&theme=tokyonight) - -### 🔝 Top Contributed Repo -![](https://github-contributor-stats.vercel.app/api?username=Leo42night&limit=5&theme=dark&combine_all_yearly_contributions=true) - ---- -[![](https://visitcount.itsvg.in/api?id=Leo42night&icon=6&color=13)](https://visitcount.itsvg.in) - - ## 💰 You can help me by Donating - [![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://paypal.me/leoprangs) - - - diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png deleted file mode 100644 index f3b64e0..0000000 Binary files a/android-chrome-192x192.png and /dev/null differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png deleted file mode 100644 index 8a3f6b3..0000000 Binary files a/android-chrome-512x512.png and /dev/null differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png deleted file mode 100644 index ce3b73d..0000000 Binary files a/apple-touch-icon.png and /dev/null differ diff --git a/css.html b/css.html deleted file mode 100644 index 4c8d8a2..0000000 --- a/css.html +++ /dev/null @@ -1,157 +0,0 @@ - - - - - - - - - - - Dokumentasi CSS - - - - -
- -
-

- Pengenalan CSS -

-

- Cascading StyleSheet. StyleSheet secara sederhana berarti - Kumpulan Gaya pada element. Cascading memberi struktur gaya - mana yang dipakai dulu, gaya apa yang diprioritaskan. -

-
-
- -
-
-

Konsep CSS yang krusial :

-
    -
  • Property Style dan relasi antar propertinya
    • -

    - contoh : display menjadi pembuka untuk flex dan grid. variasi - position membuat item inline bisa memiliki modifikasi block - (inline-block) -

    -
  • Style default dari tag
    • -
  • Modifikasi inherit dari tag parent bisa diikuti turunanya
    • -
-
-
-

Konsep dan Elemen CSS (yang penulis pahami):

-
    -
  • Padding, Border, Margin
    • -
  • text dan font styles
    • -
  • display dan position
    • -
  • List Style
    • -
  • Parallax
    • -
-
-
-

hal-hal CSS yang penulis masih belajar konsepnya :

-
    -

  1. Grid dan Flex container items

    2. -

    - dibutuhkan untuk web yang responsive. untuk membagi kolom dan - baris masing-masing item dan sifat-sifat atributnya. justify - merujuk main axis -

    -

  2. Global Values

    3. -

    -

  3. Media Responsive width

    4. -

    -

  4. Absolute, Relative, Fixed

    5. -

    -

  5. ::before dan ::after

    6. -

  6. px ex vh fr rem ch mm % auto

    7. -

    selain px dan mm. sifat yang lainnnya relatif terhadap

    -
-
-
-

Poin-poin dalam Course Introducing to CSS (Sololearn) :

-
    -
  • - Getting Started {What is CSS, CSS Selector, Class & ID, Text - Color & Size, Styling Text, Font Style} -
    • -
  • - Styling Element {The Box Model, Box Size, Borders, Backgrounds, - Styling Lists, Links, Styling Tables, Styling Forms, CSS Layout, - Positioning} -
    • -
  • - Transition & Transforms {Transforms, Transitions, Keyframes & - Animation, Animation Properties} -
    • -
-
-
-
- - -
- - - - diff --git a/favicon.ico b/favicon.ico deleted file mode 100644 index 8f0119c..0000000 Binary files a/favicon.ico and /dev/null differ diff --git a/gasping-zombie.wav b/gasping-zombie.wav deleted file mode 100644 index 9eba3c3..0000000 Binary files a/gasping-zombie.wav and /dev/null differ diff --git a/icon.svg b/icon.svg deleted file mode 100644 index 69f2792..0000000 --- a/icon.svg +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/icon/diagonal-arrow-right-up.svg b/icon/diagonal-arrow-right-up.svg new file mode 100644 index 0000000..f7f9343 --- /dev/null +++ b/icon/diagonal-arrow-right-up.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/image/astronaut.jpeg b/image/astronaut.jpeg new file mode 100644 index 0000000..f03e7a7 Binary files /dev/null and b/image/astronaut.jpeg differ diff --git a/image/planet.jpeg b/image/planet.jpeg new file mode 100644 index 0000000..4a46dfe Binary files /dev/null and b/image/planet.jpeg differ diff --git a/image/rocket.jpeg b/image/rocket.jpeg new file mode 100644 index 0000000..fcdf1ce Binary files /dev/null and b/image/rocket.jpeg differ diff --git a/image/time.jpeg b/image/time.jpeg new file mode 100644 index 0000000..14e3512 Binary files /dev/null and b/image/time.jpeg differ diff --git a/img/apostle.png b/img/apostle.png deleted file mode 100644 index b6ea5a6..0000000 Binary files a/img/apostle.png and /dev/null differ diff --git a/img/github.jpg b/img/github.jpg deleted file mode 100644 index a41da4b..0000000 Binary files a/img/github.jpg and /dev/null differ diff --git a/img/logo.png b/img/logo.png deleted file mode 100644 index af7bf44..0000000 Binary files a/img/logo.png and /dev/null differ diff --git a/img/rock.jpg b/img/rock.jpg deleted file mode 100644 index 1091a0f..0000000 Binary files a/img/rock.jpg and /dev/null differ diff --git a/img/walk.jpeg b/img/walk.jpeg deleted file mode 100644 index 51a9dbb..0000000 Binary files a/img/walk.jpeg and /dev/null differ diff --git a/index.html b/index.html index 7073ff7..f364b7d 100644 --- a/index.html +++ b/index.html @@ -1,194 +1,74 @@ - - - - - - - - - dokumentasi HTML - - - - - - - -
-

Pengenalan HTML

-

- HyperText Markup Language. Ini bukanlah bahasa pemrograman murni, - melainkan sebuah "Markup" language. -

-

- Sederhananya, - Markup adalah sebuah cetakan data/dokumen berisi konten yang - dibungkus dalam tag <HTML>. -

-

- Kemudian, "HyperText" merujuk pada kemampuan - dokumen yang saling terhubung melalui link dan kecepatannya dalam - bergerak, contohnya tag anchor: -

- 
<a href="/">...</a>
-

- Jadi, kenapa HTML tidak disebut bahasa pemrograman murni? Itu karena - HTML hanya mendeklarasikan elemen, - tanpa menjalankan logika tertentu. -

-
- - -
- -
-
-

jenis Tag yang penulis pahami (ckp tw):

-

- Ini yang dimaksud elemen dengan turunan(nested) jadi setiap tag - memiliki relasi saling bungkus. -

-
    -
  • - Tag Utama : - 
    <!DOCTIPE html> <html> <head> <body>
    -
    • -
  • - Tag nested dan descendant : - 
    <HEAD> : <meta> <title> <link> </pre>
    <BODY> : <header> <nav> <main> <section> <article> <aside> <footer>
    -
    • -
  • - Tag element display: - 
    -  Block : <h1..6> <p> <img> ( <ol> <ul> <li>) <form> <pre>
    - 
    -  Inline: <a> <u> <em> <strong> <span> <div> <i> <button> <input> <abbr> <blockquote>
    -
    • -
-
-
-

- Hal-Hal Penting dalam tema HTML (bagi penulis - sekarang) -

-
    -
  1. -

    Struktur turunan Html Tree model

    -
    2. -

    - seperti yang ditampilkan di atas. setiap tag memiliki hubungan ayah - anak atau kakek cucu. contohnya ol dan li. namun yang menjadi - masalah adalah tag yang tidak ada aturan pasti struktur turunanya, - seperti div dsb. -

    -
  2. -

    Penggunaan tag yang bermakna (format semantic)

    -
    3. -

    - contoh : i dan em, bold dan strong, div dan span, section dan - artikel. Hal ini untuk meningkatkan SEO web kedepannya -

    -
  3. -

    Block dan Inline

    -
    4. -

    - tag Block memenuhi lebar layar, jadi tidak akan ada tag tipe block - yang satu baris dengan tag lain. sebaliknya, tag inline hanya - mengikuti lebar isian nya, selebihnya bisa diisi tag lain. tidak - terlalu sulit -

    -
  4. -

    Tag Atribut

    -
    5. -

    - beberapa tag memiliki atribut bawaan dan tag tambahan seperti - style="" untuk CSS -

    -
  5. -

    Posisi Main, Aside, Section dan Article

    -
    6. -

    - merujuk pada content utama dalam halaman. Pengaturannya akan cukup - membingungkan, karena tidak mengikuti aturan absolute yang ada pada - header, nav, dan footer -

    -
  6. -

    Responsive Web

    -
    7. -

    pada layar berbeda, seperti smartphone. tapi itu pembahasan CSS

    -
  7. -

    Pembungkusan dari section dan Div

    -
    8. -

    - tujuannya agar konten didalamnya dapat di edit secara berkelompok. -

    -
-
-
- "Permasalahan terbesar dalam html adalah semantik. tidak akan - mengganggu sampai nantinya dipublish dan digunakan dalam search - engine" -
-
-

Konsep yang didapat penulis dalam course pengenalan HTML di - Sololearn

-
    -
  • Getting Started { heading, image, landing page}
    • -
  • - Going Deeper { Commenting Code, Standarts & Best Practice, Text - Formating, HyperText, List } -
    • -
  • - Using Attributes { Attributes, Website Navigation, Forms, Form Data, - Drop-Down Menu } -
    • -
  • - Mastering HTML { Videos, Audio Media, Page Layout, The Style - Attribute, Inline and Block, Content Division, Tables, Introducing - JS } -
    • -
-
-
-
- - - - - + + + + Portfolio Project Web + + + + +
+
{gambar pribadi}
+

Hallo, Nama saya Leo Prangs Tobing

+

+70% Web Dev, 70% Unity, 90% Game

+
+
+
+

Projects

+
+
+ + + + + + + + +
+
+
+
+ + + \ No newline at end of file diff --git a/javaScript.html b/javaScript.html deleted file mode 100644 index 6baf588..0000000 --- a/javaScript.html +++ /dev/null @@ -1,193 +0,0 @@ - - - - - - - - - - - Dokumentasi JavaScript - - - -
- -
-

Pengenalan JS

-

- JavaScript. bahasa pemograman pada browser untuk menjalankan interaksi - antarmuka. turunannya bisa berjalan di server untuk mengelola protoko - HTTP dan manipulasi database -

-
-
- - -
- -
- -
-
-

- Materi JS dan setelahnya yang perlu diperdalam lagi (cara dan - tujuannya) -

-
    -
  1. Synchronous & Asynchronous
    2. -
  2. DOM object, event Listener, dan animation
    3. -

    - menjalankan fungsi CRUD, melakukan event handler, dan - menghubungkan interaksi antar element -

    -
  3. Modern Javascript (ES6)
    4. -

    - Pengolahan data object, parameter rest dan spread. callback - promise -

    -
  4. Generate function "yield" logic
    5. -

    - gen function next() memiliki perilaku Pointer pada setiap - yield. perilaku yield juga seperti return. yield bertambah - setiap dipanggil -

    -
  5. GIT & CLI (Command Line Interface)
    6. -
  6. Package Manager (Node & NPM)
    7. -
-
-
-

- Poin-poin dalam Course Introducing to JavaScript (Sololearn) : -

-
    -
  • - Getting Started {JS in Html, Operation, Variable, Data Type} -
    • -
  • - Operator and String {Arithmetic Operators, Assignment Operators, - Strings, Template Literals, String Concatenation, Video Game - Score} -
    • -
  • - Decision Making {Booleans & Comparisons, The if statement, else - if statements, switch statements, Ternary operator} -
    • -
  • Loops {for loop, while loop, break & continue}
    • -
  • Functions {parameter, return}
    • -
-
-
-

- Poin-poin dalam Course JavaScript intermediate (Sololearn) : -

-
    -
  • Objects {Intro, Creating, Initialization, Adding Method}
    • -
  • - Core Objects {Arrays, Array Property & Method, Associative - Array, Math Obj., Date Obj.} -
    • -
  • - DOM & Events {intro, Selecting Element, Changing El, Adding & - Removing el, Create Animations, Handling Events, Event - Propagation, Creating an Image Slider, Form Validation} -
    • -
  • - ECMAScript {intro, ES6 Var & Strings, ES6 Loops & Func, Object, - Destructuring, Rest & Spread, ES6 Classes, Map & Set, - More on ES6} -
    • -
-
-
-
- -
- - - diff --git a/site.webmanifest b/site.webmanifest deleted file mode 100644 index 52b6bb1..0000000 --- a/site.webmanifest +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "", - "short_name": "", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} \ No newline at end of file diff --git a/style.css b/style.css index caeafa6..d281413 100644 --- a/style.css +++ b/style.css @@ -1,153 +1,179 @@ -body { - font-family: monospace; - background-image: url('img/rock.jpg'); -} -.container { - position: relative; - background-color: white; - padding: 5px; - margin:-5px; - overflow: hidden; +:root { + --wrap-dinamic: 80px; /* icon width(50px) + (margin(15px) * 2), mobile became card height */ + --row-full: 600px; /* row */ + --desc-width: 520px; /* sesuain row-full - wrap dinamic */ + --con-card-height: 400px; /* row */ } -@media only screen and (min-width: 900px){ - .container { - margin: 0 70px 0 70px; - background-color: white - } +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; } -/*@media only screen and (max-width: 767px){ - :root{ - --width:50%; - --content: 'This is mobile'; - } +body { } -*/ -#sword { - position: relative; - height: 90px; + +header { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 2rem 0; + padding: 0 1rem; } -nav { - display: flex; - align-items: center; - font-size: 15px; - width: 250px; - justify-content: space-between; +#project { + background-color: #eeeeea; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 2rem 0; + gap: 1rem; } -@keyframes rainbow-background { - 0% { background-color: #ff0000; } - 8.333% { background-color: #ff8000; } - 16.667% { background-color: #ffff00; } - 25.000% { background-color: #80ff00; } - 33.333% { background-color: #00ff00; } - 41.667% { background-color: #00ff80; } - 50.000% { background-color: #00ffff; } - 58.333% { background-color: #0080ff; } - 66.667% { background-color: #0000ff; } - 75.000% { background-color: #8000ff; } - 83.333% { background-color: #ff00ff; } - 91.667% { background-color: #ff0080; } - 100.00% { background-color: #ff0000; } +#project > h2 { } -nav img{ - animation: rainbow-background 5s infinite; - border-radius: 10%; +.wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; } -nav a{ - transition: all 400ms ease; + +.container { + height: var(--con-card-height); + display: flex; + /* flex-wrap: nowrap; */ + /* justify-content: start; */ } -nav a:hover { - text-decoration: none; - font-weight: bold; - font-size: 20px; - color: white; - background-color: blue; +.card { + width: var(--wrap-dinamic); + background-size: cover; + cursor: pointer; + overflow: hidden; + border-radius: 2rem; + margin: 0 10px; + display: flex; + align-items: flex-end; + transition: 0.6s cubic-bezier(0.28, -0.03, 0, 0.99); + -moz-transition: cubic-bezier(0.215, 0.61, 0.355, 1); + -o-transition: cubic-bezier(0.075, 0.82, 0.165, 1); + /* transition tidak bekerja di awal */ + /* transition: .6s cubic-bezier(0.95, 0.05, 0.795, 0.035); */ + box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8); } -header { - padding: 1rem; +.card > .row { + color: white; + display: flex; + flex-wrap: nowrap; } -header h1 { - display: inline; - border-bottom: 3px solid magenta; +.card > .row > .icon { + background: #223; + color: white; + border-radius: 50%; + width: 50px; + display: flex; + justify-content: center; + align-items: center; + margin: 15px; } -main { - display: flex; +.card > .row > .description { + display: flex; + justify-content: center; + flex-direction: column; + overflow: hidden; + height: var(--wrap-dinamic); + width: var(--desc-width); + opacity: 0; + transform: translateY(30px); + transition-delay: 0.3s; + transition: all 0.3s ease; } -aside { - padding: 1rem; - margin-right: .5rem; - background: #aabbcc; +.description p { + color: #ffffff; + padding-top: 5px; } -aside ul { - padding: 1rem; +.description h4 { + text-transform: uppercase; } -aside ul li { - margin: .3rem 0; +input { + height: var(--con-card-height); + display: none; } -.boo { - opacity: 0; - position: absolute; - right: 0px; - top: 20px; - width: 80px; - height: 100px; +input:checked + label .row { + background: rgba(40, 40, 40, 0.5); } -.active { - background-color: magenta; - text-decoration: none; - border: 2px solid gray; - color: white; - font-weight: bold; + +input:checked + label { + width: var(--row-full); } -.boo img { - height: 100%; +input:checked + label .description { + opacity: 1 !important; + transform: translateY(0) !important; } -.boo:hover { - opacity: 1; - +.card[for="c1"] { + background-image: url("./image/rocket.jpeg"); } -button{ - position: absolute; - right: 30px; - top:50px; + +.card[for="c2"] { + background-image: url("./image/planet.jpeg"); } -footer { - width: 100%; - margin: 0 0 -5px -5px; - padding: 5px 20px 5px 20px; - color: white; - background-color: rgb(1,7,53); + +.card[for="c3"] { + background-image: url("./image/astronaut.jpeg"); } +.card[for="c4"] { + background-image: url("./image/time.jpeg"); +} -footer a { - text-decoration: none; - color: rgb(46,71,250); +a { + color: #afdceb; + text-decoration: none; } -footer a img{ - z-index: 2; - position: relative; - top:10px; - border-radius: 50%; - width: 30px; +@media (max-width: 600px) { + .container { + height: auto; + flex-direction: column; + } + .card { + width: auto; + align-items: flex-start; + margin: 10px 0; + height: var(--wrap-dinamic); + } + + .card > .row > .description { + transform: translateY(-30px); + width: calc(90vw - var(--wrap-dinamic)); + } + + input:checked + label { + width: auto; + height: calc(90vw * 6 / 10); + } } -footer a img:hover{ - transform: scale(2,2); - transition-duration: 2s; - transition-property: transform; + +footer { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 2rem 0; + padding: 0 1rem; }