Initial commit
This commit is contained in:
commit
3ea52e4b54
|
|
@ -0,0 +1,21 @@
|
||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
<IfModule mod_negotiation.c>
|
||||||
|
Options -MultiViews -Indexes
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
# Handle Authorization Header
|
||||||
|
RewriteCond %{HTTP:Authorization} .
|
||||||
|
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
|
||||||
|
|
||||||
|
# Redirect Trailing Slashes If Not A Folder...
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteCond %{REQUEST_URI} (.+)/$
|
||||||
|
RewriteRule ^ %1 [L,R=301]
|
||||||
|
|
||||||
|
# Send Requests To Front Controller...
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteRule ^ index.php [L]
|
||||||
|
</IfModule>
|
||||||
|
|
@ -0,0 +1,555 @@
|
||||||
|
/*===== GOOGLE FONTS =====*/
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
|
||||||
|
/*===== VARIABLES CSS =====*/
|
||||||
|
:root {
|
||||||
|
--header-height: 3rem;
|
||||||
|
--font-semi: 600;
|
||||||
|
/*===== Colores =====*/
|
||||||
|
/*Purple 260 - Red 355 - Blue 224 - Pink 340*/
|
||||||
|
/* HSL color mode */
|
||||||
|
--hue-color: 199;
|
||||||
|
--first-color: hsl(var(--hue-color), 92%, 83%);
|
||||||
|
--second-color: hsl(var(--hue-color), 56%, 12%);
|
||||||
|
/*===== Fuente y tipografia =====*/
|
||||||
|
--body-font: "Poppins", sans-serif;
|
||||||
|
--big-font-size: 2rem;
|
||||||
|
--h2-font-size: 1.25rem;
|
||||||
|
--normal-font-size: .938rem;
|
||||||
|
--smaller-font-size: .75rem;
|
||||||
|
/*===== Margenes =====*/
|
||||||
|
--mb-2: 1rem;
|
||||||
|
--mb-4: 2rem;
|
||||||
|
--mb-5: 2.5rem;
|
||||||
|
--mb-6: 3rem;
|
||||||
|
/*===== z index =====*/
|
||||||
|
--z-back: -10;
|
||||||
|
--z-fixed: 100;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 968px) {
|
||||||
|
:root {
|
||||||
|
--big-font-size: 3.5rem;
|
||||||
|
--h2-font-size: 2rem;
|
||||||
|
--normal-font-size: 1rem;
|
||||||
|
--smaller-font-size: .875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== BASE =====*/
|
||||||
|
*, ::before, ::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: var(--header-height) 0 0 0;
|
||||||
|
font-family: var(--body-font);
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
color: var(--second-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tutor__video {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px; /* Atur ukuran maksimal */
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #333;
|
||||||
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 70vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#video-webcam {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px; /* Maksimal ukuran video */
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 3px solid #9191e2;
|
||||||
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== CLASS CSS ===== */
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
font-size: var(--h2-font-size);
|
||||||
|
color: #001f3f;
|
||||||
|
margin-top: var(--mb-5);
|
||||||
|
margin-bottom: var(--mb-1);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.section-title::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 64px;
|
||||||
|
height: 0.18rem;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
top: 2rem;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== LAYOUT =====*/
|
||||||
|
.bd-grid {
|
||||||
|
max-width: 1024px;
|
||||||
|
display: grid;
|
||||||
|
margin-left: var(--mb-2);
|
||||||
|
margin-right: var(--mb-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.l-header {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: var(--z-fixed);
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 1px 4px rgba(146, 161, 176, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== NAV =====*/
|
||||||
|
.nav {
|
||||||
|
height: var(--header-height);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
.nav__menu {
|
||||||
|
position: fixed;
|
||||||
|
top: var(--header-height);
|
||||||
|
right: -100%;
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: var(--second-color);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav__item {
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
.nav__link {
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.nav__link:hover {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav__link:hover::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 0.18rem;
|
||||||
|
left: 0;
|
||||||
|
top: 2rem;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
.nav__logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: var(--second-color);
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
height: 40px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__toggle {
|
||||||
|
color: var(--second-color);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Active menu*/
|
||||||
|
.active-link::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 100%;
|
||||||
|
height: 0.18rem;
|
||||||
|
left: 0;
|
||||||
|
top: 2rem;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=== Show menu ===*/
|
||||||
|
.show {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== HOME =====*/
|
||||||
|
.home {
|
||||||
|
position: relative;
|
||||||
|
row-gap: 5rem;
|
||||||
|
padding: 4rem 0 5rem;
|
||||||
|
}
|
||||||
|
.home__data {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.home__title {
|
||||||
|
font-size: var(--big-font-size);
|
||||||
|
margin-bottom: var(--mb-5);
|
||||||
|
}
|
||||||
|
.home__title-color {
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
.home__social {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.home__social-icon {
|
||||||
|
width: max-content;
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--second-color);
|
||||||
|
}
|
||||||
|
.home__social-icon:hover {
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
.home__img {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
.home__blob {
|
||||||
|
fill: var(--first-color);
|
||||||
|
}
|
||||||
|
.home__blob-img {
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*BUTTONS*/
|
||||||
|
.button {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #001f3f;;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.75rem 2.5rem;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
box-shadow: 0px 10px 36px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
.nav__dropdown {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
background-color: white;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: none;
|
||||||
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__dropdown:hover .dropdown__menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__link {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown__link:hover {
|
||||||
|
background-color: #90c7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ===== ABOUT =====*/
|
||||||
|
.about__container {
|
||||||
|
row-gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.about__subtitle {
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
.about__img {
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
.about__img img {
|
||||||
|
width: 200px;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== SKILLS =====*/
|
||||||
|
.skills__container {
|
||||||
|
row-gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.skills__subtitle {
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
.skills__text {
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
.skills__data {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
|
||||||
|
}
|
||||||
|
.skills__icon {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-right: var(--mb-2);
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
.skills__names {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.skills__bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
height: 0.25rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
z-index: var(--z-back);
|
||||||
|
}
|
||||||
|
.skills__html {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
.skills__css {
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
.skills__js {
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
.skills__ux {
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
.skills__img {
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== WORK =====*/
|
||||||
|
.work__container {
|
||||||
|
row-gap: 2rem;
|
||||||
|
}
|
||||||
|
.work__img {
|
||||||
|
box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.work__img img {
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
.work__img img:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CONTACT =====*/
|
||||||
|
.contact__input {
|
||||||
|
width: 100%;
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 1.5px solid var(--second-color);
|
||||||
|
outline: none;
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
.contact__button {
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== FOOTER =====*/
|
||||||
|
.footer {
|
||||||
|
background-color: var(--second-color);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
.footer__title {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
.footer__social {
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
.footer__icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 var(--mb-2);
|
||||||
|
}
|
||||||
|
.footer__copy {
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== MEDIA QUERIES=====*/
|
||||||
|
@media screen and (max-width: 320px) {
|
||||||
|
.home {
|
||||||
|
row-gap: 2rem;
|
||||||
|
}
|
||||||
|
.home__img {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
.home {
|
||||||
|
padding: 4rem 0 2rem;
|
||||||
|
}
|
||||||
|
.home__social {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
flex-direction: row;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.home__social-icon {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: var(--mb-4);
|
||||||
|
}
|
||||||
|
.home__img {
|
||||||
|
width: 300px;
|
||||||
|
bottom: 25%;
|
||||||
|
}
|
||||||
|
.about__container {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
align-items: center;
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
.skills__container {
|
||||||
|
grid-template-columns: 0.7fr;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
.work__container {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
.contact__form {
|
||||||
|
width: 360px;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
.contact__container {
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.section {
|
||||||
|
padding-top: 4rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.section-title {
|
||||||
|
margin-bottom: var(--mb-6);
|
||||||
|
}
|
||||||
|
.section-title::after {
|
||||||
|
width: 80px;
|
||||||
|
top: 3rem;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
height: calc(var(--header-height) + 1.5rem);
|
||||||
|
}
|
||||||
|
.nav__list {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.nav__item {
|
||||||
|
margin-left: var(--mb-6);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.nav__toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.nav__link {
|
||||||
|
color: var(--second-color);
|
||||||
|
}
|
||||||
|
.home {
|
||||||
|
padding: 8rem 0 2rem;
|
||||||
|
}
|
||||||
|
.home__img {
|
||||||
|
width: 400px;
|
||||||
|
bottom: 10%;
|
||||||
|
}
|
||||||
|
.about__container {
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
.about__img img {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.skills__container {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
.work__container {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
.bd-grid {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.home {
|
||||||
|
padding: 10rem 0 2rem;
|
||||||
|
}
|
||||||
|
.home__img {
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
|
|
@ -0,0 +1,57 @@
|
||||||
|
/*===== MENU SHOW =====*/
|
||||||
|
const showMenu = (toggleId, navId) =>{
|
||||||
|
const toggle = document.getElementById(toggleId),
|
||||||
|
nav = document.getElementById(navId)
|
||||||
|
|
||||||
|
if(toggle && nav){
|
||||||
|
toggle.addEventListener('click', ()=>{
|
||||||
|
nav.classList.toggle('show')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
showMenu('nav-toggle','nav-menu')
|
||||||
|
|
||||||
|
/*==================== REMOVE MENU MOBILE ====================*/
|
||||||
|
const navLink = document.querySelectorAll('.nav__link')
|
||||||
|
|
||||||
|
function linkAction(){
|
||||||
|
const navMenu = document.getElementById('nav-menu')
|
||||||
|
// When we click on each nav__link, we remove the show-menu class
|
||||||
|
navMenu.classList.remove('show')
|
||||||
|
}
|
||||||
|
navLink.forEach(n => n.addEventListener('click', linkAction))
|
||||||
|
|
||||||
|
/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
|
||||||
|
const sections = document.querySelectorAll('section[id]')
|
||||||
|
|
||||||
|
const scrollActive = () =>{
|
||||||
|
const scrollDown = window.scrollY
|
||||||
|
|
||||||
|
sections.forEach(current =>{
|
||||||
|
const sectionHeight = current.offsetHeight,
|
||||||
|
sectionTop = current.offsetTop - 58,
|
||||||
|
sectionId = current.getAttribute('id'),
|
||||||
|
sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')
|
||||||
|
|
||||||
|
if(scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight){
|
||||||
|
sectionsClass.classList.add('active-link')
|
||||||
|
}else{
|
||||||
|
sectionsClass.classList.remove('active-link')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll', scrollActive)
|
||||||
|
|
||||||
|
/*===== SCROLL REVEAL ANIMATION =====*/
|
||||||
|
const sr = ScrollReveal({
|
||||||
|
origin: 'top',
|
||||||
|
distance: '60px',
|
||||||
|
duration: 2000,
|
||||||
|
delay: 200,
|
||||||
|
// reset: true
|
||||||
|
});
|
||||||
|
|
||||||
|
sr.reveal('.home__data, .about__img, .skills__subtitle, .skills__text',{});
|
||||||
|
sr.reveal('.home__img, .about__subtitle, .about__text, .skills__img',{delay: 400});
|
||||||
|
sr.reveal('.home__social-icon',{ interval: 200});
|
||||||
|
sr.reveal('.skills__data, .work__img, .contact__input',{interval: 200});
|
||||||
|
|
@ -0,0 +1,525 @@
|
||||||
|
/*===== GOOGLE FONTS =====*/
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
|
||||||
|
|
||||||
|
/*===== VARIABLES CSS =====*/
|
||||||
|
:root{
|
||||||
|
--header-height: 3rem;
|
||||||
|
--font-semi: 600;
|
||||||
|
|
||||||
|
/*===== Colores =====*/
|
||||||
|
/*Purple 260 - Red 355 - Blue 224 - Pink 340*/
|
||||||
|
/* HSL color mode */
|
||||||
|
--hue-color: 224;
|
||||||
|
--first-color: hsl(var(--hue-color), 89%, 60%);
|
||||||
|
--second-color: hsl(var(--hue-color), 56%, 12%);
|
||||||
|
|
||||||
|
/*===== Fuente y tipografia =====*/
|
||||||
|
--body-font: 'Poppins', sans-serif;
|
||||||
|
|
||||||
|
--big-font-size: 2rem;
|
||||||
|
--h2-font-size: 1.25rem;
|
||||||
|
--normal-font-size: .938rem;
|
||||||
|
--smaller-font-size: .75rem;
|
||||||
|
|
||||||
|
/*===== Margenes =====*/
|
||||||
|
--mb-2: 1rem;
|
||||||
|
--mb-4: 2rem;
|
||||||
|
--mb-5: 2.5rem;
|
||||||
|
--mb-6: 3rem;
|
||||||
|
|
||||||
|
/*===== z index =====*/
|
||||||
|
--z-back: -10;
|
||||||
|
--z-fixed: 100;
|
||||||
|
|
||||||
|
@media screen and (min-width: 968px){
|
||||||
|
--big-font-size: 3.5rem;
|
||||||
|
--h2-font-size: 2rem;
|
||||||
|
--normal-font-size: 1rem;
|
||||||
|
--smaller-font-size: .875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== BASE =====*/
|
||||||
|
*,::before,::after{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html{
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
margin: var(--header-height) 0 0 0;
|
||||||
|
font-family: var(--body-font);
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
color: var(--second-color);
|
||||||
|
}
|
||||||
|
h1,h2,p{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== CLASS CSS ===== */
|
||||||
|
.section-title{
|
||||||
|
position: relative;
|
||||||
|
font-size: var(--h2-font-size);
|
||||||
|
color: var(--first-color);
|
||||||
|
margin-top: var(--mb-2);
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 64px;
|
||||||
|
height: 0.18rem;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
top: 2rem;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section{
|
||||||
|
padding-top: 3rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== LAYOUT =====*/
|
||||||
|
.bd-grid{
|
||||||
|
max-width: 1024px;
|
||||||
|
display: grid;
|
||||||
|
margin-left: var(--mb-2);
|
||||||
|
margin-right: var(--mb-2);
|
||||||
|
}
|
||||||
|
.l-header{
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: var(--z-fixed);
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 1px 4px rgba(146,161,176,.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== NAV =====*/
|
||||||
|
.nav{
|
||||||
|
height: var(--header-height);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
|
||||||
|
&__menu{
|
||||||
|
@media screen and (max-width: 767px){
|
||||||
|
position: fixed;
|
||||||
|
top: var(--header-height);
|
||||||
|
right: -100%;
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
background-color: var(--second-color);
|
||||||
|
transition: .5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__item{
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
&__link{
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after{
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 0.18rem;
|
||||||
|
left: 0;
|
||||||
|
top: 2rem;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__logo{
|
||||||
|
color: var(--second-color);
|
||||||
|
}
|
||||||
|
&__toggle{
|
||||||
|
color: var(--second-color);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*Active menu*/
|
||||||
|
.active-link::after{
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 0.18rem;
|
||||||
|
left: 0;
|
||||||
|
top: 2rem;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=== Show menu ===*/
|
||||||
|
.show{
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*===== HOME =====*/
|
||||||
|
.home{
|
||||||
|
position: relative;
|
||||||
|
row-gap: 5rem;
|
||||||
|
padding: 4rem 0 5rem;
|
||||||
|
|
||||||
|
&__data{
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
&__title{
|
||||||
|
font-size: var(--big-font-size);
|
||||||
|
margin-bottom: var(--mb-5);
|
||||||
|
|
||||||
|
&-color{
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__social{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&-icon{
|
||||||
|
width: max-content;
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--second-color);
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
&__blob{
|
||||||
|
fill: var(--first-color);
|
||||||
|
|
||||||
|
&-img{
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*BUTTONS*/
|
||||||
|
.button{
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
color: #fff;
|
||||||
|
padding: .75rem 2.5rem;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
border-radius: .5rem;
|
||||||
|
transition: .3s;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0px 10px 36px rgba(0,0,0,.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== ABOUT =====*/
|
||||||
|
.about{
|
||||||
|
&__container{
|
||||||
|
row-gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&__subtitle{
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img{
|
||||||
|
justify-self: center;
|
||||||
|
|
||||||
|
& img{
|
||||||
|
width: 200px;
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== SKILLS =====*/
|
||||||
|
.skills{
|
||||||
|
&__container{
|
||||||
|
row-gap: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&__subtitle{
|
||||||
|
margin-bottom: var(--mb-2);
|
||||||
|
}
|
||||||
|
&__text{
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
&__data{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
border-radius: .5rem;
|
||||||
|
box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
|
||||||
|
}
|
||||||
|
&__icon{
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-right: var(--mb-2);
|
||||||
|
color: var(--first-color);
|
||||||
|
}
|
||||||
|
&__names{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&__bar{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--first-color);
|
||||||
|
height: .25rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
z-index: var(--z-back);
|
||||||
|
}
|
||||||
|
&__html{
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
&__css{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
&__js{
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
&__ux{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
&__img{
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* ===== WORK =====*/
|
||||||
|
.work{
|
||||||
|
&__container{
|
||||||
|
row-gap: 2rem;
|
||||||
|
}
|
||||||
|
&__img{
|
||||||
|
box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
|
||||||
|
border-radius: .5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
& img{
|
||||||
|
transition: 1s;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CONTACT =====*/
|
||||||
|
.contact{
|
||||||
|
&__input{
|
||||||
|
width: 100%;
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: .5rem;
|
||||||
|
border: 1.5px solid var(--second-color);
|
||||||
|
outline: none;
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
&__button{
|
||||||
|
display: block;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: var(--normal-font-size);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== FOOTER =====*/
|
||||||
|
.footer{
|
||||||
|
background-color: var(--second-color);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: var(--font-semi);
|
||||||
|
padding: 2rem 0;
|
||||||
|
|
||||||
|
&__title{
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
&__social{
|
||||||
|
margin-bottom: var(--mb-4);
|
||||||
|
}
|
||||||
|
&__icon{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 var(--mb-2);
|
||||||
|
}
|
||||||
|
&__copy{
|
||||||
|
font-size: var(--smaller-font-size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== MEDIA QUERIES=====*/
|
||||||
|
@media screen and (max-width: 320px){
|
||||||
|
.home{
|
||||||
|
row-gap: 2rem;
|
||||||
|
|
||||||
|
&__img{
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px){
|
||||||
|
.home{
|
||||||
|
padding: 4rem 0 2rem;
|
||||||
|
&__social{
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 2.5rem;
|
||||||
|
flex-direction: row;
|
||||||
|
align-self: flex-end;
|
||||||
|
|
||||||
|
&-icon{
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: var(--mb-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__img{
|
||||||
|
width: 300px;
|
||||||
|
bottom: 25%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__container{
|
||||||
|
grid-template-columns: repeat(2,1fr);
|
||||||
|
align-items: center;
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills__container{
|
||||||
|
grid-template-columns: .7fr;
|
||||||
|
justify-content: center;
|
||||||
|
column-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.work__container{
|
||||||
|
grid-template-columns: repeat(2,1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact{
|
||||||
|
&__form{
|
||||||
|
width: 360px;
|
||||||
|
padding-top: 2rem ;
|
||||||
|
}
|
||||||
|
&__container{
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
body{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.section{
|
||||||
|
padding-top: 4rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title{
|
||||||
|
margin-bottom: var(--mb-6);
|
||||||
|
|
||||||
|
&::after{
|
||||||
|
width: 80px;
|
||||||
|
top: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav{
|
||||||
|
height: calc(var(--header-height) + 1.5rem);
|
||||||
|
&__list{
|
||||||
|
display: flex;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
&__item{
|
||||||
|
margin-left: var(--mb-6);
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
&__toggle{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&__link{
|
||||||
|
color: var(--second-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.home{
|
||||||
|
padding: 8rem 0 2rem;
|
||||||
|
|
||||||
|
&__img{
|
||||||
|
width: 400px;
|
||||||
|
bottom: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about{
|
||||||
|
&__container{
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
&__img{
|
||||||
|
& img{
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.skills__container{
|
||||||
|
grid-template-columns: repeat(2,1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
text-align: initial;
|
||||||
|
}
|
||||||
|
.work__container{
|
||||||
|
grid-template-columns: repeat(3,1fr);
|
||||||
|
column-gap: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px){
|
||||||
|
.bd-grid{
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.home{
|
||||||
|
padding: 10rem 0 2rem;
|
||||||
|
|
||||||
|
&__img{
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Contracts\Http\Kernel;
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
|
||||||
|
define('LARAVEL_START', microtime(true));
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Check If The Application Is Under Maintenance
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| If the application is in maintenance / demo mode via the "down" command
|
||||||
|
| we will load this file so that any pre-rendered content can be shown
|
||||||
|
| instead of starting the framework, which could cause an exception.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (file_exists($maintenance = __DIR__.'/../storage/framework/maintenance.php')) {
|
||||||
|
require $maintenance;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Register The Auto Loader
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Composer provides a convenient, automatically generated class loader for
|
||||||
|
| this application. We just need to utilize it! We'll simply require it
|
||||||
|
| into the script here so we don't need to manually load our classes.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
require __DIR__.'/../vendor/autoload.php';
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Run The Application
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Once we have the application, we can handle the incoming request using
|
||||||
|
| the application's HTTP kernel. Then, we will send the response back
|
||||||
|
| to this client's browser, allowing them to enjoy our application.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
$app = require_once __DIR__.'/../bootstrap/app.php';
|
||||||
|
|
||||||
|
$kernel = $app->make(Kernel::class);
|
||||||
|
|
||||||
|
$response = $kernel->handle(
|
||||||
|
$request = Request::capture()
|
||||||
|
)->send();
|
||||||
|
|
||||||
|
$kernel->terminate($request, $response);
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1 @@
|
||||||
|
{"format": "layers-model", "generatedBy": "keras v2.14.0", "convertedBy": "TensorFlow.js Converter v4.22.0", "modelTopology": {"keras_version": "2.14.0", "backend": "tensorflow", "model_config": {"class_name": "Sequential", "config": {"name": "sequential", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 99], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_1"}}, {"class_name": "Dense", "config": {"name": "dense", "trainable": true, "dtype": "float32", "units": 32, "activation": "relu", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_1", "trainable": true, "dtype": "float32", "units": 64, "activation": "relu", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_2", "trainable": true, "dtype": "float32", "units": 128, "activation": "relu", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_3", "trainable": true, "dtype": "float32", "units": 14, "activation": "softmax", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}}, "training_config": {"loss": "categorical_crossentropy", "metrics": [[{"class_name": "MeanMetricWrapper", "config": {"name": "categorical_accuracy", "dtype": "float32", "fn": "categorical_accuracy"}}]], "weighted_metrics": null, "loss_weights": null, "optimizer_config": {"class_name": "Custom>Adam", "config": {"name": "Adam", "weight_decay": null, "clipnorm": null, "global_clipnorm": null, "clipvalue": null, "use_ema": false, "ema_momentum": 0.99, "ema_overwrite_frequency": null, "jit_compile": false, "is_legacy_optimizer": false, "learning_rate": 0.0010000000474974513, "beta_1": 0.9, "beta_2": 0.999, "epsilon": 1e-07, "amsgrad": false}}}}, "weightsManifest": [{"paths": ["group1-shard1of1.bin"], "weights": [{"name": "dense/kernel", "shape": [99, 32], "dtype": "float32"}, {"name": "dense/bias", "shape": [32], "dtype": "float32"}, {"name": "dense_1/kernel", "shape": [32, 64], "dtype": "float32"}, {"name": "dense_1/bias", "shape": [64], "dtype": "float32"}, {"name": "dense_2/kernel", "shape": [64, 128], "dtype": "float32"}, {"name": "dense_2/bias", "shape": [128], "dtype": "float32"}, {"name": "dense_3/kernel", "shape": [128, 14], "dtype": "float32"}, {"name": "dense_3/bias", "shape": [14], "dtype": "float32"}]}]}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1 @@
|
||||||
|
{"format": "layers-model", "generatedBy": "keras v2.14.0", "convertedBy": "TensorFlow.js Converter v4.22.0", "modelTopology": {"keras_version": "2.14.0", "backend": "tensorflow", "model_config": {"class_name": "Sequential", "config": {"name": "sequential", "layers": [{"class_name": "InputLayer", "config": {"batch_input_shape": [null, 99], "dtype": "float32", "sparse": false, "ragged": false, "name": "input_1"}}, {"class_name": "Dense", "config": {"name": "dense", "trainable": true, "dtype": "float32", "units": 32, "activation": "relu", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_1", "trainable": true, "dtype": "float32", "units": 64, "activation": "relu", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_2", "trainable": true, "dtype": "float32", "units": 128, "activation": "relu", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}, {"class_name": "Dense", "config": {"name": "dense_3", "trainable": true, "dtype": "float32", "units": 14, "activation": "softmax", "use_bias": true, "kernel_initializer": {"module": "keras.initializers", "class_name": "GlorotUniform", "config": {"seed": null}, "registered_name": null}, "bias_initializer": {"module": "keras.initializers", "class_name": "Zeros", "config": {}, "registered_name": null}, "kernel_regularizer": null, "bias_regularizer": null, "activity_regularizer": null, "kernel_constraint": null, "bias_constraint": null}}]}}, "training_config": {"loss": "categorical_crossentropy", "metrics": [[{"class_name": "MeanMetricWrapper", "config": {"name": "categorical_accuracy", "dtype": "float32", "fn": "categorical_accuracy"}}]], "weighted_metrics": null, "loss_weights": null, "optimizer_config": {"class_name": "Custom>Adam", "config": {"name": "Adam", "weight_decay": null, "clipnorm": null, "global_clipnorm": null, "clipvalue": null, "use_ema": false, "ema_momentum": 0.99, "ema_overwrite_frequency": null, "jit_compile": false, "is_legacy_optimizer": false, "learning_rate": 0.0010000000474974513, "beta_1": 0.9, "beta_2": 0.999, "epsilon": 1e-07, "amsgrad": false}}}}, "weightsManifest": [{"paths": ["group1-shard1of1.bin"], "weights": [{"name": "dense/kernel", "shape": [99, 32], "dtype": "float32"}, {"name": "dense/bias", "shape": [32], "dtype": "float32"}, {"name": "dense_1/kernel", "shape": [32, 64], "dtype": "float32"}, {"name": "dense_1/bias", "shape": [64], "dtype": "float32"}, {"name": "dense_2/kernel", "shape": [64, 128], "dtype": "float32"}, {"name": "dense_2/bias", "shape": [128], "dtype": "float32"}, {"name": "dense_3/kernel", "shape": [128, 14], "dtype": "float32"}, {"name": "dense_3/bias", "shape": [14], "dtype": "float32"}]}]}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
import './bootstrap';
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/**
|
||||||
|
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||||
|
* to our Laravel back-end. This library automatically handles sending the
|
||||||
|
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import axios from 'axios';
|
||||||
|
window.axios = axios;
|
||||||
|
|
||||||
|
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Echo exposes an expressive API for subscribing to channels and listening
|
||||||
|
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||||
|
* allows your team to easily build robust real-time web applications.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// import Echo from 'laravel-echo';
|
||||||
|
|
||||||
|
// import Pusher from 'pusher-js';
|
||||||
|
// window.Pusher = Pusher;
|
||||||
|
|
||||||
|
// window.Echo = new Echo({
|
||||||
|
// broadcaster: 'pusher',
|
||||||
|
// key: import.meta.env.VITE_PUSHER_APP_KEY,
|
||||||
|
// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
|
||||||
|
// wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
|
||||||
|
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
|
||||||
|
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
|
||||||
|
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
|
||||||
|
// enabledTransports: ['ws', 'wss'],
|
||||||
|
// });
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('title', 'Deteksi Real-Time')
|
||||||
|
|
||||||
|
@section('contents')
|
||||||
|
<section class="about section" id="about">
|
||||||
|
<h2 class="section-title text-center">Deteksi Pose Jurus 1 Tangan Kosong IPSI</h2>
|
||||||
|
<div class="about__container" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;">
|
||||||
|
<div class="video-container" style="position: relative;">
|
||||||
|
<video id="webcam" width="640" height="480" autoplay playsinline muted></video>
|
||||||
|
<canvas id="output-canvas" width="640" height="480"
|
||||||
|
style="position: absolute; top: 0; left: 0;"></canvas>
|
||||||
|
</div>
|
||||||
|
<div id="prediction-result" class="prediction-box">
|
||||||
|
<p>Prediksi: <span id="pose-label">-</span></p>
|
||||||
|
<p>Probability: <span id="pose-accuracy">-</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@section('script')
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const poseClasses = [
|
||||||
|
'A1_benar', 'A1_salah','A2_benar', 'A2_salah', 'A3_benar', 'A3_salah',
|
||||||
|
'A4_benar', 'A4_salah', 'A5_benar', 'A5_salah', 'A6_benar', 'A6_salah',
|
||||||
|
'A7_benar', 'A7_salah'
|
||||||
|
];
|
||||||
|
|
||||||
|
const videoElement = document.getElementById('webcam');
|
||||||
|
const canvasElement = document.getElementById('output-canvas');
|
||||||
|
const ctx = canvasElement.getContext('2d');
|
||||||
|
const poseLabelElement = document.getElementById('pose-label');
|
||||||
|
const poseAccuracyElement = document.getElementById('pose-accuracy');
|
||||||
|
|
||||||
|
let model = null;
|
||||||
|
let poseDetector = null;
|
||||||
|
let camera = null;
|
||||||
|
|
||||||
|
async function loadModel() {
|
||||||
|
try {
|
||||||
|
model = await tf.loadLayersModel('/models/model.json');
|
||||||
|
console.log('✅ Model loaded');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('❌ Gagal load model:', err);
|
||||||
|
alert('Model gagal dimuat');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupPose() {
|
||||||
|
poseDetector = new Pose({
|
||||||
|
locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`
|
||||||
|
});
|
||||||
|
|
||||||
|
poseDetector.setOptions({
|
||||||
|
modelComplexity: 1,
|
||||||
|
smoothLandmarks: true,
|
||||||
|
enableSegmentation: false,
|
||||||
|
minDetectionConfidence: 0.5,
|
||||||
|
minTrackingConfidence: 0.5
|
||||||
|
});
|
||||||
|
|
||||||
|
poseDetector.onResults(onPoseResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPoseResults(results) {
|
||||||
|
if (!results.poseLandmarks) return;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
ctx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
|
||||||
|
drawLandmarks(results.poseLandmarks);
|
||||||
|
|
||||||
|
const landmarks = results.poseLandmarks.map(landmark => [
|
||||||
|
landmark.x * canvasElement.height,
|
||||||
|
landmark.y * canvasElement.height,
|
||||||
|
landmark.z * canvasElement.width
|
||||||
|
]).flat();
|
||||||
|
|
||||||
|
predictPose(landmarks);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLandmarks(landmarks) {
|
||||||
|
drawConnections(landmarks);
|
||||||
|
ctx.fillStyle = '#FF0000';
|
||||||
|
landmarks.forEach(landmark => {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(landmark.x * canvasElement.width, landmark.y * canvasElement.height, 4, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawConnections(landmarks) {
|
||||||
|
const connections = [
|
||||||
|
[0, 1], [1, 2], [2, 3], [3, 7], [0, 4], [4, 5], [5, 6], [6, 8],
|
||||||
|
[11, 13], [13, 15], [15, 17], [15, 19], [15, 21],
|
||||||
|
[12, 14], [14, 16], [16, 18], [16, 20], [16, 22],
|
||||||
|
[11, 12], [11, 23], [12, 24], [23, 24],
|
||||||
|
[23, 25], [25, 27], [27, 29], [27, 31],
|
||||||
|
[24, 26], [26, 28], [28, 30], [28, 32]
|
||||||
|
];
|
||||||
|
|
||||||
|
ctx.strokeStyle = '#00FF00';
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
|
||||||
|
connections.forEach(([i, j]) => {
|
||||||
|
if (landmarks[i] && landmarks[j]) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(landmarks[i].x * canvasElement.width, landmarks[i].y * canvasElement.height);
|
||||||
|
ctx.lineTo(landmarks[j].x * canvasElement.width, landmarks[j].y * canvasElement.height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function predictPose(landmarks) {
|
||||||
|
if (!model) return;
|
||||||
|
|
||||||
|
const inputTensor = tf.tensor2d([landmarks]);
|
||||||
|
const prediction = model.predict(inputTensor);
|
||||||
|
const [predictedClass] = await prediction.argMax(1).data();
|
||||||
|
const confidence = await prediction.max(1).data();
|
||||||
|
|
||||||
|
poseLabelElement.textContent = poseClasses[predictedClass] || 'Unknown';
|
||||||
|
poseAccuracyElement.textContent = `${(confidence[0]).toFixed(4)}`;
|
||||||
|
|
||||||
|
inputTensor.dispose();
|
||||||
|
prediction.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
function startCamera() {
|
||||||
|
camera = new Camera(videoElement, {
|
||||||
|
onFrame: async () => {
|
||||||
|
await poseDetector.send({ image: videoElement });
|
||||||
|
},
|
||||||
|
width: 640,
|
||||||
|
height: 480
|
||||||
|
});
|
||||||
|
camera.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
await loadModel();
|
||||||
|
setupPose();
|
||||||
|
startCamera();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #001f3f; /* biru dongker */
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
position: relative;
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
border: 2px solid #ccc;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prediction-box {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 280px;
|
||||||
|
height: fit-content;
|
||||||
|
padding: 20px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#pose-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pose-accuracy {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #27ae60;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,289 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('title', 'Deteksi Video')
|
||||||
|
|
||||||
|
@section('contents')
|
||||||
|
<section class="about section" id="about">
|
||||||
|
<h2 class="section-title text-center">Deteksi Pose Jurus 1 Tangan Kosong IPSI</h2>
|
||||||
|
<div class="about__container">
|
||||||
|
<div style="display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;">
|
||||||
|
<div class="video-container">
|
||||||
|
<video id="video-upload" controls></video>
|
||||||
|
<canvas id="output-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="text-center mt-4 flex gap-3 justify-center">
|
||||||
|
<label class="cursor-pointer inline-block px-6 py-3 bg-blue-600 text-white rounded-xl shadow hover:bg-blue-700 transition">
|
||||||
|
Upload Video
|
||||||
|
<input type="file" accept="video/*" onchange="handleVideoUpload(event)" class="hidden" id="video-input">
|
||||||
|
</label>
|
||||||
|
<button onclick="resetVideo()" class="inline-block px-6 py-3 bg-red-600 text-white rounded-xl shadow hover:bg-red-700 transition">
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="prediction-result" class="prediction-box mt-4">
|
||||||
|
<p>Prediksi: <span id="pose-label">-</span></p>
|
||||||
|
<p>Probability: <span id="pose-accuracy">-</span></p>
|
||||||
|
<ul id="all-probabilities" class="text-left mt-2"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@section('script')
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const poseClasses = [
|
||||||
|
'A1_benar', 'A1_salah','A2_benar', 'A2_salah', 'A3_benar', 'A3_salah',
|
||||||
|
'A4_benar', 'A4_salah', 'A5_benar', 'A5_salah', 'A6_benar', 'A6_salah',
|
||||||
|
'A7_benar', 'A7_salah'
|
||||||
|
];
|
||||||
|
|
||||||
|
const videoElement = document.getElementById('video-upload');
|
||||||
|
const canvasElement = document.getElementById('output-canvas');
|
||||||
|
const ctx = canvasElement.getContext('2d');
|
||||||
|
const poseLabelElement = document.getElementById('pose-label');
|
||||||
|
const poseAccuracyElement = document.getElementById('pose-accuracy');
|
||||||
|
const fileInput = document.getElementById('video-input');
|
||||||
|
const probList = document.getElementById('all-probabilities');
|
||||||
|
|
||||||
|
let model = null;
|
||||||
|
let poseDetector = null;
|
||||||
|
let animationFrameId = null;
|
||||||
|
|
||||||
|
async function loadTFModel() {
|
||||||
|
try {
|
||||||
|
model = await tf.loadLayersModel('/models/model.json');
|
||||||
|
console.log('✅ Model loaded');
|
||||||
|
} catch (error) {
|
||||||
|
alert('Model gagal dimuat');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupPoseDetection() {
|
||||||
|
poseDetector = new Pose({
|
||||||
|
locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`
|
||||||
|
});
|
||||||
|
|
||||||
|
poseDetector.setOptions({
|
||||||
|
modelComplexity: 1,
|
||||||
|
smoothLandmarks: true,
|
||||||
|
enableSegmentation: false,
|
||||||
|
minDetectionConfidence: 0.5,
|
||||||
|
minTrackingConfidence: 0.5
|
||||||
|
});
|
||||||
|
|
||||||
|
poseDetector.onResults(onPoseResults);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPoseResults(results) {
|
||||||
|
if (!results.poseLandmarks) return;
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
ctx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
|
||||||
|
drawLandmarks(results.poseLandmarks);
|
||||||
|
|
||||||
|
const landmarks = results.poseLandmarks.map(landmark => [
|
||||||
|
landmark.x * canvasElement.height,
|
||||||
|
landmark.y * canvasElement.height,
|
||||||
|
landmark.z * canvasElement.width
|
||||||
|
]).flat();
|
||||||
|
|
||||||
|
predictPose(landmarks);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLandmarks(landmarks) {
|
||||||
|
drawConnections(landmarks);
|
||||||
|
|
||||||
|
ctx.fillStyle = '#FF0000';
|
||||||
|
landmarks.forEach(landmark => {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(landmark.x * canvasElement.width, landmark.y * canvasElement.height, 5, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawConnections(landmarks) {
|
||||||
|
const connections = [
|
||||||
|
[0, 1], [1, 2], [2, 3], [3, 7], [0, 4], [4, 5], [5, 6], [6, 8],
|
||||||
|
[11, 13], [13, 15], [15, 17], [15, 19], [15, 21],
|
||||||
|
[12, 14], [14, 16], [16, 18], [16, 20], [16, 22],
|
||||||
|
[11, 12], [11, 23], [12, 24], [23, 24],
|
||||||
|
[23, 25], [25, 27], [27, 29], [27, 31],
|
||||||
|
[24, 26], [26, 28], [28, 30], [28, 32]
|
||||||
|
];
|
||||||
|
|
||||||
|
ctx.strokeStyle = '#00FF00';
|
||||||
|
ctx.lineWidth = 2;
|
||||||
|
|
||||||
|
connections.forEach(([i, j]) => {
|
||||||
|
if (landmarks[i] && landmarks[j]) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(landmarks[i].x * canvasElement.width, landmarks[i].y * canvasElement.height);
|
||||||
|
ctx.lineTo(landmarks[j].x * canvasElement.width, landmarks[j].y * canvasElement.height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function predictPose(landmarks) {
|
||||||
|
if (!model) return;
|
||||||
|
|
||||||
|
const inputTensor = tf.tensor2d([landmarks]);
|
||||||
|
const prediction = model.predict(inputTensor);
|
||||||
|
|
||||||
|
const predictionData = await prediction.data();
|
||||||
|
const [predictedClass] = await prediction.argMax(1).data();
|
||||||
|
const confidence = predictionData[predictedClass];
|
||||||
|
|
||||||
|
poseLabelElement.textContent = poseClasses[predictedClass] || 'Unknown';
|
||||||
|
poseAccuracyElement.textContent = `${confidence.toFixed(4)}`;
|
||||||
|
|
||||||
|
// Tampilkan semua probabilitas
|
||||||
|
probList.innerHTML = '';
|
||||||
|
predictionData.forEach((prob, idx) => {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.textContent = `${poseClasses[idx] || 'Label-' + idx}: ${prob.toFixed(4)}`;
|
||||||
|
probList.appendChild(li);
|
||||||
|
});
|
||||||
|
|
||||||
|
inputTensor.dispose();
|
||||||
|
prediction.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleVideoUpload(event) {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
|
||||||
|
const url = URL.createObjectURL(file);
|
||||||
|
videoElement.src = url;
|
||||||
|
videoElement.load();
|
||||||
|
|
||||||
|
videoElement.onloadedmetadata = () => {
|
||||||
|
canvasElement.width = videoElement.videoWidth;
|
||||||
|
canvasElement.height = videoElement.videoHeight;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function analyzeVideoFrame() {
|
||||||
|
if (!poseDetector || !videoElement) return;
|
||||||
|
|
||||||
|
const process = async () => {
|
||||||
|
if (videoElement.paused || videoElement.ended) {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await poseDetector.send({ image: videoElement });
|
||||||
|
animationFrameId = requestAnimationFrame(process);
|
||||||
|
};
|
||||||
|
|
||||||
|
animationFrameId = requestAnimationFrame(process);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetVideo() {
|
||||||
|
videoElement.pause();
|
||||||
|
videoElement.currentTime = 0;
|
||||||
|
videoElement.removeAttribute('src');
|
||||||
|
videoElement.load();
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
|
||||||
|
poseLabelElement.textContent = '-';
|
||||||
|
poseAccuracyElement.textContent = '-';
|
||||||
|
probList.innerHTML = '';
|
||||||
|
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
|
||||||
|
fileInput.value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
videoElement.addEventListener('play', () => {
|
||||||
|
analyzeVideoFrame();
|
||||||
|
});
|
||||||
|
videoElement.addEventListener('pause', () => {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
});
|
||||||
|
videoElement.addEventListener('ended', () => {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function initializeApp() {
|
||||||
|
await loadTFModel();
|
||||||
|
setupPoseDetection();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', initializeApp);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
position: relative;
|
||||||
|
width: 640px;
|
||||||
|
height: 480px;
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
video, canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prediction-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 15px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pose-label {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pose-accuracy {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #27ae60;
|
||||||
|
}
|
||||||
|
|
||||||
|
#all-probabilities {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-left: 0;
|
||||||
|
list-style: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
#all-probabilities li {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('title', 'Home')
|
||||||
|
|
||||||
|
@section('contents')
|
||||||
|
<section class="home bd-grid" id="home">
|
||||||
|
<div class="home__data">
|
||||||
|
<h1 class="home__title">Welcome,<br>Pose<span class="home__title-color"> Detection</span><br> Website</h1>
|
||||||
|
|
||||||
|
<a href="{{ route('realtime') }}" class="button">Coba Deteksi</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home__social">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home__img">
|
||||||
|
<svg class="home__blob" viewBox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<mask id="mask0" mask-type="alpha">
|
||||||
|
<path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0)">
|
||||||
|
<path d="M9.19024 145.964C34.0253 76.5814 114.865 54.7299 184.111 29.4823C245.804 6.98884 311.86 -14.9503 370.735 14.143C431.207 44.026 467.948 107.508 477.191 174.311C485.897 237.229 454.931 294.377 416.506 344.954C373.74 401.245 326.068 462.801 255.442 466.189C179.416 469.835 111.552 422.137 65.1576 361.805C17.4835 299.81 -17.1617 219.583 9.19024 145.964Z"/>
|
||||||
|
<image class="home__blob-img" x="90" y="30" href="{{asset('assets/img/silat.png')}}"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!--===== ABOUT =====-->
|
||||||
|
<section class="about section " id="about">
|
||||||
|
<h2 class="section-title">About</h2>
|
||||||
|
<div class="about__container bd-grid">
|
||||||
|
<div class="about__img">
|
||||||
|
<img src="{{asset('assets/img/silat.png')}}" alt="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 class="about__subtitle">PoseAI</h2>
|
||||||
|
<p class="about__text">Merupakan website untuk deteksi 7 gerakan pada jurus 1 tangan kosong IPSI. Menggunakan teknologi AI yaitu Mediapipe untuk model deteksinya.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
@endsection
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="icon" type="image/png" href="{{ asset('assets/img/silat2.png') }}">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{asset('assets/css/styles.css')}}">
|
||||||
|
|
||||||
|
<!-- =====BOX ICONS===== -->
|
||||||
|
<link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
|
||||||
|
<title>Deteksi Pose </title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--===== HEADER =====-->
|
||||||
|
<header class="l-header">
|
||||||
|
@include('layouts.navbar')
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="l-main">
|
||||||
|
<!--===== HOME =====-->
|
||||||
|
@yield('contents')
|
||||||
|
@yield('script')
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!--===== FOOTER =====-->
|
||||||
|
|
||||||
|
@include('layouts.footer')
|
||||||
|
|
||||||
|
<!--===== SCROLL REVEAL =====-->
|
||||||
|
<script src="https://unpkg.com/scrollreveal"></script>
|
||||||
|
|
||||||
|
<!--===== MAIN JS =====-->
|
||||||
|
<script src="{{asset('assets/js/main.js')}}"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<footer class="footer">
|
||||||
|
<p class="footer__title">Contact</p>
|
||||||
|
<div class="footer__social">
|
||||||
|
<a href="https://id.linkedin.com/in/eka-sulistyaningsih" class="footer__icon"><i class='bx bxl-linkedin' ></i></a>
|
||||||
|
<a href="https://github.com/ekastn15" class="footer__icon"><i class='bx bxl-github' ></i></a>
|
||||||
|
<a href="https://wa.me/6282127686455" class="footer__icon"><i class='bx bxl-whatsapp' ></i></a>
|
||||||
|
</div>
|
||||||
|
<p class="footer__copy">© 2025. All rigths reserved</p>
|
||||||
|
</footer>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<nav class="nav bd-grid">
|
||||||
|
<div class="nav__logo">
|
||||||
|
<img src="{{ asset('assets/img/silat.png') }}" alt="Logo" class="logo-img">
|
||||||
|
<span>PoseAI Silat</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav__menu" id="nav-menu">
|
||||||
|
<ul class="nav__list">
|
||||||
|
<li class="nav__item"><a href="{{ route('home') }}" class="nav__link {{ Request::is('/') ? 'active-link' : '' }}">Beranda</a></li>
|
||||||
|
<li class="nav__item"><a href="{{ route('tutorial') }}" class="nav__link nav__link {{ Request::is('tutorial') ? 'active-link' : '' }}">Tutorial</a></li>
|
||||||
|
<li class="nav__item nav__dropdown">Deteksi
|
||||||
|
<ul class="dropdown__menu">
|
||||||
|
<li><a href="{{ route('upload') }}" class="dropdown__link">Upload Video</a></li>
|
||||||
|
<li><a href="{{ route('realtime') }}" class="dropdown__link">Realtime</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav__toggle" id="nav-toggle">
|
||||||
|
<i class='bx bx-menu'></i>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('title', 'Tutorial')
|
||||||
|
|
||||||
|
@section('contents')
|
||||||
|
<!--===== WORK (TUTORIAL VIDEO) =====-->
|
||||||
|
<section class="work section" id="work">
|
||||||
|
<h2 class="section-title">Tutorial</h2>
|
||||||
|
<div class="work__container bd-grid">
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A1003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A2003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A3003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A4003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A5003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A6003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video class="tutor__video" controls>
|
||||||
|
<source src="{{ asset('assets/videos/A7003.mp4') }}" type="video/mp4">
|
||||||
|
Browser Anda tidak mendukung tag video.
|
||||||
|
</video>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
@endsection
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| API Routes
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Here is where you can register API routes for your application. These
|
||||||
|
| routes are loaded by the RouteServiceProvider and all of them will
|
||||||
|
| be assigned to the "api" middleware group. Make something great!
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
|
||||||
|
return $request->user();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Support\Facades\Broadcast;
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Broadcast Channels
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Here you may register all of the event broadcasting channels that your
|
||||||
|
| application supports. The given channel authorization callbacks are
|
||||||
|
| used to check if an authenticated user can listen to the channel.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
|
||||||
|
return (int) $user->id === (int) $id;
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Foundation\Inspiring;
|
||||||
|
use Illuminate\Support\Facades\Artisan;
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Console Routes
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| This file is where you may define all of your Closure based console
|
||||||
|
| commands. Each Closure is bound to a command instance allowing a
|
||||||
|
| simple approach to interacting with each command's IO methods.
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
Artisan::command('inspire', function () {
|
||||||
|
$this->comment(Inspiring::quote());
|
||||||
|
})->purpose('Display an inspiring quote');
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
||||||
|
/*
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
| Web Routes
|
||||||
|
|--------------------------------------------------------------------------
|
||||||
|
|
|
||||||
|
| Here is where you can register web routes for your application. These
|
||||||
|
| routes are loaded by the RouteServiceProvider and all of them will
|
||||||
|
| be assigned to the "web" middleware group. Make something great!
|
||||||
|
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
Route::get('/',function () {
|
||||||
|
return view('home');
|
||||||
|
})->name('home');
|
||||||
|
|
||||||
|
Route::get('/tutorial',function () {
|
||||||
|
return view('tutorial.index');
|
||||||
|
})->name('tutorial');
|
||||||
|
|
||||||
|
Route::get('/deteksi/upload',function () {
|
||||||
|
return view('deteksi.upload');
|
||||||
|
})->name('upload');
|
||||||
|
|
||||||
|
Route::get('/deteksi/realtime',function () {
|
||||||
|
return view('deteksi.realtime');
|
||||||
|
})->name('realtime');
|
||||||
|
|
||||||
|
// Route::get('/', function () {
|
||||||
|
// return view('welcome');
|
||||||
|
// });
|
||||||
Loading…
Reference in New Issue