diff --git a/WEBSITE_ASOF/about.html b/WEBSITE_ASOF/about.html new file mode 100644 index 0000000..2cd3ede --- /dev/null +++ b/WEBSITE_ASOF/about.html @@ -0,0 +1,215 @@ + + + + + + AI-LYN + + + + + + + + +
+ +
+
+
+
+ +

Ailyn Diaz 🤠

+
+ Profile Image +
+

Fullstack Software Engineer

+
+
+ + +
+

me = Person()
+ while(me.awake()):
+ me.code247()

+
+ +
+

LANGUAGES

+
+
+ Python Logo +
PYTHON
+
+
+
+
+
+ HTML Logo +

HTML

+
+
+
+
+
+ HTML Logo +

CSS

+
+
+
+
+
+ JavaScript Logo +

JS

+
+
+
+
+
+ HTML Logo +

C#

+
+
+
+
+
+ HTML Logo +

C++

+
+
+
+
+
+ HTML Logo +

JAVA

+
+
+
+
+
+ HTML Logo +

BA$H

+
+
+
+
+
+ HTML Logo +

SQL

+
+
+
+
+ +
+
+ + +
+

TECHNOLOGY & FRAMEWORKS

+
+
+ Python Logo +

Django

+

Python Web Framework

+
+
+ React Logo +

React

+

React Native, Redux

+
+
+ Raspberry Pi Logo +
Raspberry Pi
+

IoT, GPIO

+
+
+ Unity Logo +

Unity

+

Game Development

+
+
+ Blender Logo +

Blender

+

3D Modeling

+
+
+ 3D Printing Logo +

3D Printing

+

FDM, PLA

+
+ +
+
+ +
+

OPERATING SYSTEMS

+
+
+ Windows Logo +

Windows

+

Windows 10, Windows 11

+
+
+ Mac Logo +

Mac

+

macOS Big Sur, macOS Monterey

+
+
+ Linux Logo +

Linux

+

Ubuntu, Fedora, Arch

+
+ +
+
+
+

Find me...

+
+
+ +
+
+ + + + diff --git a/WEBSITE_ASOF/assets/css/aboutme.css b/WEBSITE_ASOF/assets/css/aboutme.css new file mode 100644 index 0000000..ac92fbf --- /dev/null +++ b/WEBSITE_ASOF/assets/css/aboutme.css @@ -0,0 +1,214 @@ +/*skill section in the about me after all that other stuff*/ +/* this is an extra page for everything thats about me */ +@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap'); + +.skills-section { + text-align: center; + padding: 20px; + background-image: url('../images/trianglespurp.gif'); /* Replace with your background image */ + background-size: cover; + color: #ffffff; + font-family: 'Orbitron', monospace; /* Apply a cool font */ + } + + .skills-section h2 { + padding: 10px; + background-color: black; + } + + .skills-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 20px; + flex-direction: row; /* Add this line to display cards side by side */ + + } + + .skill-card { + background-color: #0f1217; + padding: 20px; + border-radius: 10px; + width: 180px; + text-align: center; + } + + .skill-card img { + width: 80px; + height: 80px; + margin-bottom: 10px; + } + + .progress-bar { + width: 100%; + height: 8px; + background-color: #393e49; + border-radius: 4px; + overflow: hidden; + } + + .progress { + height: 100%; + background-image: linear-gradient(to right, #01203d, #006eff); /* Replace with desired gradient */ + } + + @media only screen and (max-width: 600px) { + .skills-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 5px; + flex-direction: row; /* Add this line to display cards side by side */ + } + + .skill-card { + width: 40%; + } + + .skill-box { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 0px; + flex-direction: row; /* Add this line to display cards side by side */ + width: calc(50% - 20px); + } + } + .skill-box img { + width: 40px; + height: 40px; + margin-bottom: 10px; + } + + + /* end of skill section */ + /* this is the other skill technology and frameworks section */ + .skill-box { + background-color: #0f1217; + padding: 20px; + border-radius: 10px; + width: 180px; + text-align: center; + } + + .skill-box img { + width: 80px; + height: 80px; + margin-bottom: 10px; + } + + .skill-box h3 { + color: #fff; + margin-bottom: 5px; + } + + .skill-box p { + color: #aaa; + } + + /* the following section is for all the os i know */ + .os-section { + text-align: center; + padding: 20px; + background-color: #0f1217; + color: #fff; + font-family: 'Orbitron', sans-serif; /* Apply the 'Orbitron' font */ + } + + .os-section h2 { + padding: 10px; + background-color: #000; + color: #fff; + } + + .os-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + } + + .os-box { + background-color: #212529; + padding: 10px; + border-radius: 10px; + width: 200px; + text-align: center; + } + + .os-box img { + width: 100px; + height: 100px; + margin-bottom: 10px; + } + + .os-box h3 { + color: #fff; + margin-bottom: 5px; + font-size: 14px; + } + + .os-box p { + color: #aaa; + font-size: 12px; + } + + @media only screen and (max-width: 600px) { + .os-box { + width: 30%; + flex-direction: row; + align-items: center; + } + + } + +/* the end of operating systems */ +/* start of biography its more in the front but i added it a bit later not to cause confuse since this page is +almost finished up anyways */ + +.bio-section { + background-color: #0f0f0f; + padding: 20px; + color: #ffffff; + font-family: 'Lato', monospace; + text-align: center; + display: flex; + justify-content: center; + align-items: column; + border: 2px solid #00ff00; + } + + .bio-section p { + font-size: 20px; + line-height: 1.5; + } + + .bio-section::before { + content: ''; + position: absolute; + height: 100%; + width: 100%; + opacity: 0.9; + } + + .bio-section::after { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: url('../images/stars_background.gif'); + z-index: -2; + } + + @media only screen and (max-width: 600px) { + .os-box { + width: 30%; + flex-direction: column; + align-items: center; + } +} \ No newline at end of file diff --git a/WEBSITE_ASOF/assets/css/contactme.css b/WEBSITE_ASOF/assets/css/contactme.css new file mode 100644 index 0000000..85ec0c4 --- /dev/null +++ b/WEBSITE_ASOF/assets/css/contactme.css @@ -0,0 +1,80 @@ +.contactinfo { + max-width: 1000px; + margin: 0 auto; + padding: 40px; + text-align: center; + background-color: #0f0f0f; + color: #ffffff; + font-family: Arial, sans-serif; + } + + h2 { + margin-bottom: 30px; + } + + input[type="text"], + input[type="email"], + textarea { + width: 100%; + padding: 15px; + margin-bottom: 20px; + border-radius: 5px; + border: 1px solid #ffffff; + } + + textarea { + height: 150px; + } + + button[type="submit"] { + background-color: #00ff00; + color: #000000; + padding: 15px 30px; + border: none; + border-radius: 5px; + cursor: pointer; + font-weight: bold; + font-size: 16px; + } + + button[type="submit"]:hover { + background-color: #ffffff; + color: #000000; + } + + + .collaboration-header { + background-image: url('../images/blacklines.gif'); /* Replace with your desired background image */ + background-size: cover; + background-position: center; + height: 50vh; + display: flex; + align-items: center; + justify-content: center; + } + + .header-content { + text-align: center; + color: #ffffff; + } + + .header-content h1 { + font-size: 48px; + margin-bottom: 20px; + } + + .header-content p { + font-size: 24px; + margin-bottom: 30px; + } + + + @media only screen and (max-width: 668px) { + .header-content { + max-width: 50%; + } + } + + + + \ No newline at end of file diff --git a/WEBSITE_ASOF/assets/css/style.css b/WEBSITE_ASOF/assets/css/style.css new file mode 100644 index 0000000..24a4667 --- /dev/null +++ b/WEBSITE_ASOF/assets/css/style.css @@ -0,0 +1,757 @@ +/*the top is the main content for most of the pages displayed these would be all the essentials needed*/ +body { + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: #000000; + color: #00ff00; + font-family: monospace; + } + + header { + + background-image: url(../images/highrez_code.gif); + background-repeat: repeat; + background-size: cover; + padding: 10px; + text-align: center; + } + + @media (max-width: 768px) { + header { + position: static; /* Change to static positioning for smaller screens */ + background-size: contain; /* Adjust the background size for better visibility on smaller screens */ + } + } + + @media (max-width: 1200px) { + header { + padding: 20px; /* Adjust the padding for medium-sized screens */ + } + } + + @media (max-width: 1600px) { + header { + padding: 30px; /* Adjust the padding for larger screens */ + } + } + + .main { + flex: 1; + display: flex; + } + + footer { + background-color: #000000; + color: #00ff00; + padding: 10px; + text-align: center; + margin-top: auto; /* Push the footer to the bottom */ + } + + .navbar { + background-color: #000000; + } + + .navbar-dark .navbar-brand { + color: #00ff00; + font-weight: bold; + + } + + .navbar-dark .navbar-nav .nav-link { + color: #00ff00; + letter-spacing: 3px; /* Increased letter spacing for a more spread out look */ + margin-right: 20px; /* Adjust the margin as needed */ + text-transform: uppercase; /* Uppercase business name */ + } + + .navbar-dark .navbar-nav .nav-link:hover { + color: #00cc00; + } + + .container { + background-color: #000000; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; + } + + .container h2 { + color: #00ff00; + } + + .container p { + color: #00cc00; + } + + .footer { + background-color: #424242; + color: #00ff00; + padding: 20px; + text-align: center; + } + + /*the container that comes first is here the coding world one */ + .parent-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + } + + @media (max-width: 768px) { + .parent-container { + flex-direction: column; /* Change flex-direction to column for smaller screens */ + height: auto; /* Adjust the height to auto for smaller screens */ + padding: 20px; /* Add padding for better spacing on smaller screens */ + } + } + @media (min-width: 769px) and (max-width: 1024px) { + .parent-container { + flex-direction: column; /* Change flex-direction to column for smaller screens */ + height: auto; /* Adjust the height to auto for smaller screens */ + padding-top: 60px; /* Add top padding to avoid covering the nav */ + } + } + @media (min-width: 1025px) { + .parent-container { + display: flex; + justify-content: center; + align-items: flex-start; + height: 100vh; + padding-top: 60px; /* Add top padding to avoid covering the nav */ + } + } + + .coding-world-container { + background-color: #333333; + padding: 20px; + border-radius: 5px; + color: #ffffff; + text-align: center; + transition: background-color 0.3s ease-in-out; + max-width: 600px; /* Adjust the maximum width as needed */ + margin: 0 auto; + } + + .coding-world-container h2 { + font-size: 36px; + font-weight: bold; + text-transform: uppercase; + margin-bottom: 20px; + } + + .coding-world-container p { + margin-bottom: 20px; + } + + #play-game-btn { + margin-top: 10px; + background-color: #9300f5; + border: none; + color: #ffffff; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s ease-in-out; + } + + #play-game-btn:hover { + background-color: #1822aa; + } + + #game-result { + margin-top: 20px; + font-weight: bold; + color:red; + } + + .matrixpic { + margin-bottom: 20px; + } + + .coding-world-image { + width: 100%; + border-radius: 5px; + } + + @keyframes shake { + 0% { transform: translateX(0); } + 10% { transform: translateX(-5px) rotate(-5deg); } + 20% { transform: translateX(5px) rotate(5deg); } + 30% { transform: translateX(-5px) rotate(-5deg); } + 40% { transform: translateX(5px) rotate(5deg); } + 50% { transform: translateX(-5px) rotate(-5deg); } + 60% { transform: translateX(5px) rotate(5deg); } + 70% { transform: translateX(-5px) rotate(-5deg); } + 80% { transform: translateX(5px) rotate(5deg); } + 90% { transform: translateX(-5px) rotate(-5deg); } + 100% { transform: translateX(0); } + } + + .shake { + animation: shake 0.5s; + } + + .logo { + display: inline-block; + width: 100px; + height: 100px; + background-image: url('../images/pika_hat.png'); + background-repeat: no-repeat; + background-size: contain; + margin-left: 5px; + vertical-align: middle; + } + + /*end of this container */ + + + /*the following is the about me container and allthat on the index page still */ + .about-container { + background-image: url('../images/saiki_eyes.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + padding: 40px; + border-radius: 10px; + color: #ffffff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + .image-container { + width: 100px; /* Adjust the width as needed */ + height: 100px; /* Adjust the height as needed */ + overflow: hidden; + border-radius: 50%; + margin: 0 auto; + } + + .image-container img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .about-container h3 { + font-size: 20px; + margin-bottom: 10px; + color: #ffffff; + border: 1px solid #000000; /* Add a border with white color */ + padding: 2px; /* Add padding to create space between the text and the border */ + background-color: rgba(0, 0, 0, 0.555); /* Add a color to the padding area */ + } + + .about-container p { + font-size: 20px; + line-height: 1.5; + color: #ffffff; + border: 1px solid #000000; /* Add a border with white color */ + padding: 2px; /* Add padding to create space between the text and the border */ + background-color: rgba(0, 0, 0, 0.555); /* Add a color to the padding area */ + } + /*the about me container ends here to maintain organized u knowww*/ + + +/*this is for the div right above the slideshow showing all the projects*/ +.header { + background-image: url("../images/skull_.gif"); + background-size: cover; + background-position: center; + height: 300px; /* Adjust height as needed */ + display: flex; + align-items: center; + justify-content: center; + } + + .header-content { + text-align: center; + color: #ffffff; + } + + .header-content h2 { + font-size: 36px; + margin-bottom: 10px; + font-weight: bold; + text-transform: uppercase; + } + + .header-content p { + font-size: 18px; + margin-bottom: 20px; + } + + .header-content a { + display: inline-block; + background-color: #9300f5; + color: #ffffff; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease-in-out; + } + + .header-content a:hover { + background-color: #1822aa; + } +/*end of the header for the slideshow projects*/ + + + /*slide show about all the projects ive done include links that go to github and all that good stuff*/ + .slideshow-container { + position: relative; + max-width: 100%; + margin: 0 auto; + margin-top: 20px; /* Adjust margin as needed */ + } + + .slide { + display: none; + text-align: center; + position: relative; + + } + + .slide img { + width: 400px; + height: 300px; + object-fit: cover; + border-radius: 10px; + } + + /* Media query for smaller screens */ +@media (max-width: 768px) { + .slide img { + max-width: 70%; /* Adjust the maximum width as desired for smaller screens */ + } + } + + /* Media query for larger screens */ + @media (min-width: 1200px) { + .slide img { + max-width: 90%; /* Adjust the maximum width as desired for larger screens */ + } + } + + .slide-details { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 20px; + background-color: rgba(0, 0, 0, 0.7); /* Adjust opacity as needed */ + color: #fff; + text-align: center; + transition: opacity 0.3s ease-in-out; + opacity: 0; + } + + .slide:hover .slide-details { + opacity: 1; + } + + .slide-details h3 { + font-size: 24px; + margin-bottom: 10px; + } + + .slide-details p { + margin-bottom: 10px; + } + + .slide-details a { + display: inline-block; + background-color: #9300f5; + color: #ffffff; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + text-decoration: none; + transition: background-color 0.3s ease-in-out; + } + + .slide-details a:hover { + background-color: #1822aa; + } + + .controls { + text-align: center; + margin-top: 20px; + margin-bottom: 30px; + } + + .prev-btn, + .next-btn { + background-color: #333; + color: #fff; + border: none; + padding: 20px 100px; + font-size: 36px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + .prev-btn:hover, + .next-btn:hover { + background-color: #ff0707ad; +} +.prev-btn:active, +.next-btn:active { + transform: translateY(2px); +} + +@media (max-width: 780px) { + .prev-btn, + .next-btn { + font-size: 20px; + padding: 12px 20px; + } +} + + /*end of the slide show of projects--------------------------------*/ + + + +/* for the random text div at the bottom */ +.text-animation-container { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + z-index: 1; /* Set a higher z-index value to ensure it's not covered by other elements */ +} + +#textAnimation { + font-size: 24px; + text-transform: uppercase; + text-align: center; + line-height: 1.5; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: textAnimation 3s infinite; + z-index: 2; /* Set a higher z-index value than .text-animation-container to ensure it's above it */ +} + + +@keyframes textAnimation { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + transform: translateY(20px); + } +} + + + /*the start of the social media find me all this are the links on the bottom*/ + h2.custom-heading { + color: #ffffff; + font-family: 'Roboto', sans-serif; + font-size: 24px; + letter-spacing: 2px; + text-transform: uppercase; + margin: 0; + padding: 5px; + background-color: #333333; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + text-align: center; + transition: background-color 0.3s ease-in-out; + margin-top: 2%; + } + + h2.custom-heading:hover { + background-color: #5f0085; + } + /*this is the header right above the social media links*/ + + /*start of links */ + .social-media { + background-image: url("../images/girlsea.gif"); + background-size: 150%; + background-position: center; + padding: 40px; + } + .social-shapes { + display: flex; + justify-content: center; + align-items: center; + gap: 80px; /* Adjust the gap as needed */ + } + + .shape-link { + display: inline-block; + width: 70px; /* Adjust the width as needed */ + height: 70px; /* Adjust the height as needed */ + border-radius: 30px; /* Adjust the border-radius as needed */ + transition: transform 0.5s ease-in-out; + } + + .shape-link:hover { + transform: scale(1.1); + } + + .shape-link img { + width: auto; + height: 100%; + } + + .shape-link.floating { + animation: floatAnimation 3s ease-in-out infinite alternate; + } + + @keyframes floatAnimation { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-10px); + } + } /*end of links*/ + + /*The footer and its goodstuff*/ + .container { + display: flex; + justify-content: space-between; + align-items: center; + } + + .logo-footer { + display: flex; + align-items: center; + } + + .logo-footer img { + width: 100px; + height: auto; + } + + footer { + font-size: 14px; + } +/*end of the footer and the pokemon underneath it*/ + + /* Media query for iPhone SE */ +@media only screen and (max-width: 500px) { + .container { + justify-content: center; + align-items: flex-start; + } + + .logo-footer { + align-items: flex-start; + } + + .logo-footer img { + max-width: 100%; /* Prevent image overflow */ + max-height: 100%; /* Prevent image overflow */ + } + + footer { + font-size: 12px; + } + + body { + font-size: 12px; + justify-content: center; + } + + header { + padding: 5px; + } + + .navbar-dark .navbar-brand { + font-size: 16px; + } + + .navbar-dark .navbar-nav .nav-link { + font-size: 10px; + margin-right: 5px; + } + + .container { + padding: 5px; + } + + .container h2 { + font-size: 16px; + } + + .container p { + font-size: 12px; + } + + .footer { + padding: 10px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + } + + .social-media { + background-size: 150%; + background-position: center; + padding: 20px; /* Decrease the padding for smaller screens */ + background-repeat: no-repeat; /* Prevent the background image from repeating */ + } + + .social-shapes { + display: flex; + flex-wrap: wrap; /* Allow shapes to wrap within the container */ + gap: 50px; /* Adjust the gap between shapes as needed */ + } + + .shape-link { + width: 40px; /* Adjust the width as needed */ + height: 40px; /* Adjust the height as needed */ + border-radius: 20px; /* Adjust the border-radius as needed */ + } + + .shape-link img { + max-width: 100%; /* Prevent image overflow */ + max-height: 100%; /* Prevent image overflow */ + } + + .shape-link.floating { + animation: floatAnimation 2s ease-in-out infinite alternate; + } + + .about-container { + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; /* Center the text */ + } + + .image-container { + width: 100px; + height: 100px; + overflow: hidden; + border-radius: 50%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + } + + .about-container h3 { + font-size: 16px; + text-align: center; /* Center the text */ + } + + .about-container p { + font-size: 16px; + text-align: center; /* Center the text */ + } + } + /* Additional adjustments for iPhone SE */ +/* end of media queries */ + + + +/* FOR THE MINI GAME TILE SECTION styles.css */ +.sliding-tile-game-container { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #111; + color: #fff; + font-family: 'Arial', sans-serif; + padding: 20px; /* This applies 20px padding to all sides */ +} +.mini-game-container { + display: flex; + justify-content: center; + align-items: center; + perspective: 600px; +} + +.mini-game-section { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 10px; + background-color: #111; + padding: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + border: 2px solid #222; + border-radius: 10px; + transform-style: preserve-3d; /* Enable 3D transforms on child elements */ +} + +.mini-game-section div { + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + font-weight: bold; + background-color: #2e2e2e; + border: 2px solid #1a1a1a; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); + cursor: pointer; + transition: background-color 0.2s; + border-radius: 5px; + user-select: none; /* Prevent text selection on tiles */ +} + +.mini-game-section div.empty { + background-color: #111; + cursor: default; +} + +button { + font-size: 18px; + padding: 12px 20px; + background-color: #9c0c0c; + color: #fff; + border: none; + cursor: pointer; + border-radius: 5px; + margin-top: 20px; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); + transition: background-color 0.2s, transform 0.2s; + font-family: 'Creepster', cursive; /* Using the "Creepster" font */ +} + +button:hover { + background-color: #610808; + transform: scale(1.05); +} + +button:active { + background-color: #8c0808; + transform: scale(0.95); +} + +@media only screen and (max-width: 500px) { + .sliding-tile-game-container .mini-game-section { + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(4, 100px); +} +} +/* END END END FOR THE MINI GAME TILE SECTION styles.css */ \ No newline at end of file diff --git a/WEBSITE_ASOF/assets/images/3dprint.png b/WEBSITE_ASOF/assets/images/3dprint.png new file mode 100644 index 0000000..8cecbf5 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/3dprint.png differ diff --git a/WEBSITE_ASOF/assets/images/Bash.png b/WEBSITE_ASOF/assets/images/Bash.png new file mode 100644 index 0000000..676e1d8 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/Bash.png differ diff --git a/WEBSITE_ASOF/assets/images/Blender.png b/WEBSITE_ASOF/assets/images/Blender.png new file mode 100644 index 0000000..381e369 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/Blender.png differ diff --git a/WEBSITE_ASOF/assets/images/OpenBSD.png b/WEBSITE_ASOF/assets/images/OpenBSD.png new file mode 100644 index 0000000..55c1b22 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/OpenBSD.png differ diff --git a/WEBSITE_ASOF/assets/images/Screenshot 2023-07-03 151557.png b/WEBSITE_ASOF/assets/images/Screenshot 2023-07-03 151557.png new file mode 100644 index 0000000..f47eb9b Binary files /dev/null and b/WEBSITE_ASOF/assets/images/Screenshot 2023-07-03 151557.png differ diff --git a/WEBSITE_ASOF/assets/images/Weather_project.PNG b/WEBSITE_ASOF/assets/images/Weather_project.PNG new file mode 100644 index 0000000..a2cb1ac Binary files /dev/null and b/WEBSITE_ASOF/assets/images/Weather_project.PNG differ diff --git a/WEBSITE_ASOF/assets/images/anime-hacking.gif b/WEBSITE_ASOF/assets/images/anime-hacking.gif new file mode 100644 index 0000000..be2d899 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/anime-hacking.gif differ diff --git a/WEBSITE_ASOF/assets/images/apple.png b/WEBSITE_ASOF/assets/images/apple.png new file mode 100644 index 0000000..d1c4a46 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/apple.png differ diff --git a/WEBSITE_ASOF/assets/images/ash_twink.jpg b/WEBSITE_ASOF/assets/images/ash_twink.jpg new file mode 100644 index 0000000..a61f7f6 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/ash_twink.jpg differ diff --git a/WEBSITE_ASOF/assets/images/blacklines.gif b/WEBSITE_ASOF/assets/images/blacklines.gif new file mode 100644 index 0000000..2bb62b6 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/blacklines.gif differ diff --git a/WEBSITE_ASOF/assets/images/blacksea.gif b/WEBSITE_ASOF/assets/images/blacksea.gif new file mode 100644 index 0000000..0b69cf2 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/blacksea.gif differ diff --git a/WEBSITE_ASOF/assets/images/blurry_saiki.jpg b/WEBSITE_ASOF/assets/images/blurry_saiki.jpg new file mode 100644 index 0000000..a2434cb Binary files /dev/null and b/WEBSITE_ASOF/assets/images/blurry_saiki.jpg differ diff --git a/WEBSITE_ASOF/assets/images/c++.png b/WEBSITE_ASOF/assets/images/c++.png new file mode 100644 index 0000000..c371039 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/c++.png differ diff --git a/WEBSITE_ASOF/assets/images/charmander.png b/WEBSITE_ASOF/assets/images/charmander.png new file mode 100644 index 0000000..471ae65 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/charmander.png differ diff --git a/WEBSITE_ASOF/assets/images/charzard.png b/WEBSITE_ASOF/assets/images/charzard.png new file mode 100644 index 0000000..70ecd6f Binary files /dev/null and b/WEBSITE_ASOF/assets/images/charzard.png differ diff --git a/WEBSITE_ASOF/assets/images/city.gif b/WEBSITE_ASOF/assets/images/city.gif new file mode 100644 index 0000000..34468fa Binary files /dev/null and b/WEBSITE_ASOF/assets/images/city.gif differ diff --git a/WEBSITE_ASOF/assets/images/coder_num.gif b/WEBSITE_ASOF/assets/images/coder_num.gif new file mode 100644 index 0000000..f17cd71 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/coder_num.gif differ diff --git a/WEBSITE_ASOF/assets/images/csharp.png b/WEBSITE_ASOF/assets/images/csharp.png new file mode 100644 index 0000000..17b4f94 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/csharp.png differ diff --git a/WEBSITE_ASOF/assets/images/css.png b/WEBSITE_ASOF/assets/images/css.png new file mode 100644 index 0000000..2b7284a Binary files /dev/null and b/WEBSITE_ASOF/assets/images/css.png differ diff --git a/WEBSITE_ASOF/assets/images/discord.png b/WEBSITE_ASOF/assets/images/discord.png new file mode 100644 index 0000000..17da18d Binary files /dev/null and b/WEBSITE_ASOF/assets/images/discord.png differ diff --git a/WEBSITE_ASOF/assets/images/django.png b/WEBSITE_ASOF/assets/images/django.png new file mode 100644 index 0000000..249abae Binary files /dev/null and b/WEBSITE_ASOF/assets/images/django.png differ diff --git a/WEBSITE_ASOF/assets/images/gary_creds.jpg b/WEBSITE_ASOF/assets/images/gary_creds.jpg new file mode 100644 index 0000000..bf9406f Binary files /dev/null and b/WEBSITE_ASOF/assets/images/gary_creds.jpg differ diff --git a/WEBSITE_ASOF/assets/images/girlsea.gif b/WEBSITE_ASOF/assets/images/girlsea.gif new file mode 100644 index 0000000..01f87a0 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/girlsea.gif differ diff --git a/WEBSITE_ASOF/assets/images/github_clear.png b/WEBSITE_ASOF/assets/images/github_clear.png new file mode 100644 index 0000000..9490ffc Binary files /dev/null and b/WEBSITE_ASOF/assets/images/github_clear.png differ diff --git a/WEBSITE_ASOF/assets/images/gmail_clear.png b/WEBSITE_ASOF/assets/images/gmail_clear.png new file mode 100644 index 0000000..73e9456 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/gmail_clear.png differ diff --git a/WEBSITE_ASOF/assets/images/highrez_code.gif b/WEBSITE_ASOF/assets/images/highrez_code.gif new file mode 100644 index 0000000..7c4ff81 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/highrez_code.gif differ diff --git a/WEBSITE_ASOF/assets/images/html.png b/WEBSITE_ASOF/assets/images/html.png new file mode 100644 index 0000000..0f294d8 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/html.png differ diff --git a/WEBSITE_ASOF/assets/images/java.png b/WEBSITE_ASOF/assets/images/java.png new file mode 100644 index 0000000..3232c9b Binary files /dev/null and b/WEBSITE_ASOF/assets/images/java.png differ diff --git a/WEBSITE_ASOF/assets/images/js.png b/WEBSITE_ASOF/assets/images/js.png new file mode 100644 index 0000000..49629ab Binary files /dev/null and b/WEBSITE_ASOF/assets/images/js.png differ diff --git a/WEBSITE_ASOF/assets/images/laaaain.jpg b/WEBSITE_ASOF/assets/images/laaaain.jpg new file mode 100644 index 0000000..9c023b8 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/laaaain.jpg differ diff --git a/WEBSITE_ASOF/assets/images/lain_me.jpg b/WEBSITE_ASOF/assets/images/lain_me.jpg new file mode 100644 index 0000000..b02092a Binary files /dev/null and b/WEBSITE_ASOF/assets/images/lain_me.jpg differ diff --git a/WEBSITE_ASOF/assets/images/linux.png b/WEBSITE_ASOF/assets/images/linux.png new file mode 100644 index 0000000..bda094c Binary files /dev/null and b/WEBSITE_ASOF/assets/images/linux.png differ diff --git a/WEBSITE_ASOF/assets/images/matrix.gif b/WEBSITE_ASOF/assets/images/matrix.gif new file mode 100644 index 0000000..672735a Binary files /dev/null and b/WEBSITE_ASOF/assets/images/matrix.gif differ diff --git a/WEBSITE_ASOF/assets/images/mew.png b/WEBSITE_ASOF/assets/images/mew.png new file mode 100644 index 0000000..eb6daac Binary files /dev/null and b/WEBSITE_ASOF/assets/images/mew.png differ diff --git a/WEBSITE_ASOF/assets/images/pfpforeal.png b/WEBSITE_ASOF/assets/images/pfpforeal.png new file mode 100644 index 0000000..e171f18 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/pfpforeal.png differ diff --git a/WEBSITE_ASOF/assets/images/pika_hat.png b/WEBSITE_ASOF/assets/images/pika_hat.png new file mode 100644 index 0000000..333f847 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/pika_hat.png differ diff --git a/WEBSITE_ASOF/assets/images/pika_pixel.png b/WEBSITE_ASOF/assets/images/pika_pixel.png new file mode 100644 index 0000000..c00507a Binary files /dev/null and b/WEBSITE_ASOF/assets/images/pika_pixel.png differ diff --git a/WEBSITE_ASOF/assets/images/python.png b/WEBSITE_ASOF/assets/images/python.png new file mode 100644 index 0000000..49ea8f5 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/python.png differ diff --git a/WEBSITE_ASOF/assets/images/rasp.png b/WEBSITE_ASOF/assets/images/rasp.png new file mode 100644 index 0000000..e99db98 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/rasp.png differ diff --git a/WEBSITE_ASOF/assets/images/react.png b/WEBSITE_ASOF/assets/images/react.png new file mode 100644 index 0000000..11b507e Binary files /dev/null and b/WEBSITE_ASOF/assets/images/react.png differ diff --git a/WEBSITE_ASOF/assets/images/saiki_eyes.jpg b/WEBSITE_ASOF/assets/images/saiki_eyes.jpg new file mode 100644 index 0000000..6634745 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/saiki_eyes.jpg differ diff --git a/WEBSITE_ASOF/assets/images/skull_.gif b/WEBSITE_ASOF/assets/images/skull_.gif new file mode 100644 index 0000000..cecedc7 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/skull_.gif differ diff --git a/WEBSITE_ASOF/assets/images/sql.png b/WEBSITE_ASOF/assets/images/sql.png new file mode 100644 index 0000000..9e11836 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/sql.png differ diff --git a/WEBSITE_ASOF/assets/images/stars_background.gif b/WEBSITE_ASOF/assets/images/stars_background.gif new file mode 100644 index 0000000..fbca364 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/stars_background.gif differ diff --git a/WEBSITE_ASOF/assets/images/trianglespurp.gif b/WEBSITE_ASOF/assets/images/trianglespurp.gif new file mode 100644 index 0000000..15043ed Binary files /dev/null and b/WEBSITE_ASOF/assets/images/trianglespurp.gif differ diff --git a/WEBSITE_ASOF/assets/images/twitter_clear.png b/WEBSITE_ASOF/assets/images/twitter_clear.png new file mode 100644 index 0000000..0ae0d42 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/twitter_clear.png differ diff --git a/WEBSITE_ASOF/assets/images/unity.png b/WEBSITE_ASOF/assets/images/unity.png new file mode 100644 index 0000000..2cdb793 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/unity.png differ diff --git a/WEBSITE_ASOF/assets/images/windows.png b/WEBSITE_ASOF/assets/images/windows.png new file mode 100644 index 0000000..656f593 Binary files /dev/null and b/WEBSITE_ASOF/assets/images/windows.png differ diff --git a/WEBSITE_ASOF/assets/js/aboutme.js b/WEBSITE_ASOF/assets/js/aboutme.js new file mode 100644 index 0000000..e0a8063 --- /dev/null +++ b/WEBSITE_ASOF/assets/js/aboutme.js @@ -0,0 +1,8 @@ +/*for the hamburger menu toggles it on or off u know*/ +$(function() { + $('.navbar-toggler').on('click', function() { + $('.navbar-collapse').toggleClass('show'); + }); + }); +//end of hamburger menu + diff --git a/WEBSITE_ASOF/assets/js/contactme.js b/WEBSITE_ASOF/assets/js/contactme.js new file mode 100644 index 0000000..d9a888e --- /dev/null +++ b/WEBSITE_ASOF/assets/js/contactme.js @@ -0,0 +1,7 @@ +/*for the hamburger menu toggles it on or off u know*/ +$(function() { + $('.navbar-toggler').on('click', function() { + $('.navbar-collapse').toggleClass('show'); + }); + }); +//end of hamburger menu \ No newline at end of file diff --git a/WEBSITE_ASOF/assets/js/main.js b/WEBSITE_ASOF/assets/js/main.js new file mode 100644 index 0000000..918b20e --- /dev/null +++ b/WEBSITE_ASOF/assets/js/main.js @@ -0,0 +1,61 @@ +/*for the hamburger menu toggles it on or off u know*/ +$(function() { + $('.navbar-toggler').on('click', function() { + $('.navbar-collapse').toggleClass('show'); + }); + }); +//end of hamburger menu + +/* this is for the index page minivideo game*/ +/* the welcome section*/ +document.addEventListener("DOMContentLoaded", function() { + document.getElementById("play-game-btn").addEventListener("click", playGame); + + function playGame() { + var randomNumber = Math.floor(Math.random() * 10) + 1; + var userGuess = prompt("Guess a number between 1 and 10:"); + + if (userGuess == randomNumber) { + document.getElementById("game-result").textContent = "Congratulations! You guessed it right!"; + } else { + document.getElementById("game-result").textContent = "Sorry, wrong guess. The number was " + randomNumber + "."; + } + } + }); + + //this makes the btn shake and more interactive + document.addEventListener("DOMContentLoaded", function() { + var playGameBtn = document.getElementById("play-game-btn"); + + playGameBtn.addEventListener("mouseover", function() { + playGameBtn.classList.add("shake"); + }); + + playGameBtn.addEventListener("mouseout", function() { + playGameBtn.classList.remove("shake"); + }); + }); + //end of btn that is cool + +//end of game on top + + +// for the text box +const messages = ["Welcome!", "Hello!", "Greetings!","Bonjour", "Hola", "Ciao","Hey there!"]; +const textAnimationElement = document.getElementById("textAnimation"); + +function startTextAnimation() { + let currentIndex = 0; + + function animateText() { + textAnimationElement.textContent = messages[currentIndex]; + currentIndex = (currentIndex + 1) % messages.length; + } + + animateText(); + setInterval(animateText, 3000); // Change text every 3 seconds +} + +startTextAnimation(); + + diff --git a/WEBSITE_ASOF/assets/js/minigame.js b/WEBSITE_ASOF/assets/js/minigame.js new file mode 100644 index 0000000..a535cf7 --- /dev/null +++ b/WEBSITE_ASOF/assets/js/minigame.js @@ -0,0 +1,93 @@ +// Mini Game 4 - Sliding Tile Puzzle +document.addEventListener("DOMContentLoaded", () => { + const gameSection = document.getElementById("mini-game"); + const shuffleBtn = document.getElementById("shuffle-btn"); + + const gridSize = 3; + + let tiles = []; + + initGame(); + + function initGame() { + // Create an array with tile numbers from 1 to 9 + tiles = Array.from({ length: gridSize * gridSize }, (_, index) => index + 1); + // Set the last element as an empty space + tiles[tiles.length - 1] = ""; + + renderTiles(); + addTileClickListeners(); + } + + function renderTiles() { + gameSection.innerHTML = ""; + tiles.forEach((tileNumber, index) => { + const tile = document.createElement("div"); + tile.textContent = tileNumber; + tile.classList.add("tile"); + if (tileNumber === "") { + tile.classList.add("empty"); + } + gameSection.appendChild(tile); + }); + } + + function addTileClickListeners() { + const tiles = document.querySelectorAll(".tile"); + tiles.forEach(tile => { + tile.addEventListener("click", () => { + const emptyTile = document.querySelector(".empty"); + if (isAdjacent(tile, emptyTile)) { + swapTiles(tile, emptyTile); + if (isPuzzleSolved()) { + setTimeout(() => { + alert("Congratulations! You solved the puzzle!"); + }, 100); + } + } + }); + }); + } + + function isAdjacent(tile1, tile2) { + const tileIndex1 = Array.from(gameSection.children).indexOf(tile1); + const tileIndex2 = Array.from(gameSection.children).indexOf(tile2); + + return ( + (Math.abs(tileIndex1 - tileIndex2) === 1 && Math.floor(tileIndex1 / gridSize) === Math.floor(tileIndex2 / gridSize)) || + (Math.abs(tileIndex1 - tileIndex2) === gridSize) + ); + } + + function swapTiles(tile1, tile2) { + const tempText = tile1.textContent; + tile1.textContent = tile2.textContent; + tile2.textContent = tempText; + + tile1.classList.toggle("empty"); + tile2.classList.toggle("empty"); + } + + function isPuzzleSolved() { + for (let i = 0; i < tiles.length - 1; i++) { + if (tiles[i] !== i + 1) { + return false; + } + } + return true; + } + + shuffleBtn.addEventListener("click", () => { + // Randomize the tiles + shuffleTiles(); + renderTiles(); + addTileClickListeners(); + }); + + function shuffleTiles() { + for (let i = tiles.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [tiles[i], tiles[j]] = [tiles[j], tiles[i]]; + } + } +}); diff --git a/WEBSITE_ASOF/assets/js/slideshow.js b/WEBSITE_ASOF/assets/js/slideshow.js new file mode 100644 index 0000000..38c7c60 --- /dev/null +++ b/WEBSITE_ASOF/assets/js/slideshow.js @@ -0,0 +1,68 @@ + + /*start of the PROJECT SLIDESHOW */ + const slides = document.querySelectorAll('.slide'); + let currentSlide = 0; + + function showSlide(index) { + slides.forEach((slide, i) => { + if (i === index) { + slide.style.display = 'block'; + } else { + slide.style.display = 'none'; + } + }); + } + + function nextSlide() { + currentSlide++; + if (currentSlide >= slides.length) { + currentSlide = 0; + } + showSlide(currentSlide); + } + + function prevSlide() { + currentSlide--; + if (currentSlide < 0) { + currentSlide = slides.length - 1; + } + showSlide(currentSlide); + } + + // Event listeners for prev/next buttons + const prevButton = document.querySelector('.prev-btn'); + const nextButton = document.querySelector('.next-btn'); + + prevButton.addEventListener('click', prevSlide); + nextButton.addEventListener('click', nextSlide); + + // Show initial slide + showSlide(currentSlide); + + //end of the slide show + + //the slide show required its own js at the bottom of the index page to work properly + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/WEBSITE_ASOF/contact.html b/WEBSITE_ASOF/contact.html new file mode 100644 index 0000000..63ad3bb --- /dev/null +++ b/WEBSITE_ASOF/contact.html @@ -0,0 +1,90 @@ + + + + + + AI-LYN + + + + + + + + +
+ +
+
+ +
+
+

Let's Code!

+

Join me in creating innovative code projects.

+
+
+ +
+

Contact Me

+
+ + + + + +
+
+ +
+

Find me...

+
+
+ +
+
+ + + + + + + diff --git a/WEBSITE_ASOF/index.html b/WEBSITE_ASOF/index.html new file mode 100644 index 0000000..f6a5994 --- /dev/null +++ b/WEBSITE_ASOF/index.html @@ -0,0 +1,168 @@ + + + + + + AI-LYN + + + + + + + +
+ +
+ +
+
+
+
+
+

Welcome to My World

+

How lucky are you? Test your luck.

+ +
+
+
+
+
+ Coding World Image +
+
+
+
+ + + +
+
Welcome!
+
+ + + +
+
+
+ +
+ +
+
+ + +
+
+ +

Who Am I?..

+
+ Profile Image +
+

My name is Ailyn Diaz.

+
+
+ + +
+
+

My Projects

+

Enjoy.

+
+
+ +
+ +
+
+ Project 1 +
+

Project 1

+

Web Application with Modern Framework: Developed a web application using a popular and modern frameworks.

+ Websites +
+
+
+ Project 2 +
+

Project 2

+

Machine Learning Model for Predictive Analytics: Built a machine learning model that solves a real-world problem and showcases your expertise in data analysis and predictive analytics.

+ I ❤ Problems +
+
+
+ Project 2 +
+

Project 3

+

Mobile Application with Cross-Platform Compatibility: Created a mobile application that runs on both iOS and Android platforms, using frameworks like React Native or Flutter.

+ Mobile Apps +
+
+
+ +
+ + +
+ + + + +
+
+

Find me...

+
+
+ +
+
+ + + + + + + + + + diff --git a/WEBSITE_ASOF/send_email.php b/WEBSITE_ASOF/send_email.php new file mode 100644 index 0000000..8158825 --- /dev/null +++ b/WEBSITE_ASOF/send_email.php @@ -0,0 +1,19 @@ +" . "\r\n" . + "Reply-To: $email" . "\r\n" . + "Content-type: text/html; charset=UTF-8" . "\r\n"; + + if (mail($to, $subject, $message, $headers)) { + echo "Message sent successfully!"; + } else { + echo "Failed to send the message."; + } +} +?>