diff --git a/README.md b/README.md index 7ed589e..aa9f225 100644 --- a/README.md +++ b/README.md @@ -1,107 +1,68 @@ -# AD - SBA - HTML/CSS/JavaScript +# AD - SBA - HTML/CSS/JavaScript * My 3 Page Website * + +###### Link to my github website: + * https://surikanda.github.io/sba.javascript_3-page-website/index.html + +## Description: + #### A multi-page website with follwing features: + ###### Home Page + * Features a Nav bar with buttons to the *multiple pages* within the website and HOME button to navigate back to the home page. + * Nav bar is *responsive* and can become a *dropdown hamburger menu* in small screens. + * Nav bar is featured *across all the pages*. + * HTML body + * Begins with **some beautiful scenic pictures to enjoy**. + * Follwed by a functional BMI calulator for **Calculating BMI** with detailed description. + * Footer + * Ends with a footer section with copyright text and date that updates *dynamically*. + ###### ROLL THE DICE Page + * Features a simple game of rolling the dice. + * User first sees images of two dice showing six dots in both corresponding to *Player 1* and *Player 2*. + * User then presses **Roll Dice** button and random dice are shown. + * Player with the highest number of dots wins the game! + * Also displays a footer with copyright text. + ###### DRUM KIT Page + * Features an electronic version of Drum Kit. + * User can show their musical skills with the fully functional electronic drum kit. + * When the user presses the *drum* or *music instument* buttons the corresponding sounds will play. + * The buttons respond to both *mouse clicks* as well as *keyboard presses*. + ###### SKILLS Page + * Displays information about my skills. + * Begins with an image showing skills. + * Followed by my Technical Skills. + * Followed by some images portraying skills. + * Ends with a footer section with copyright and date that updates *dynamically*. + ###### EDUCATION Page + * Displays information about my education. + * Begins with an image showing learning. + * Followed by my Education Background + * Followed by some images of beautiful scenaries + * Ends with a footer section with copyright and date that updates *dynamically* + ###### EXPERIENCE Page + * Displays information about my experience + * Begins with an image indicating a journey. + * Followed by my Professional Experience. + * Followed by some images some more beautiful scenaries. + * Ends with a footer section with copyright and date that updates *dynamically*. + + + ## Technical Specifications: + ###### Technology used: + * HTML5 + * Used various HTML tags including + * *nav, div, table, ul, li, p, h1, h3, img, a etc.,.* + * Implemented *form* to get user inputs of height and weight to calculate BMI. + * Used **images** and **sound files**. + * CSS + * Used *Bootstrap* for nav bar, layout of the pages and making the webpage responsive. + * Used various css and bootstrap classes + * Used **External, Internal and Inline Styling**. + * Used **animation** for *BMI Result*. + + * JavaScript + * Used **external script**, **internal script**. + * Used *functions, callback functions, events, event handlers, arrays, for loops, if else statements, variables and so on. + -### Description -* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. -* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor. - -* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements. - -* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system. - - -* Some resources for free content: - * Photos: `https://www.pexels.com/search/template/` - * Text: `https://www.lipsum.com/` - * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k` - -* Useful API sites: - * https://rapidapi.com/ (Links to an external site.) - * https://any-api.com/ (Links to an external site.) - * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.) - * https://apilist.fun/ - -### Deliverable: -* A theme for your site that you feel comfortable with - * Complete all technical requirements for HTML, CSS, and Javascript - * Have markups of your pages - * Research for a public API that can provide you with content (Optional) - * Include a README file. The file should include technical specifications and description of your website. - * Host on GitHub, include the link to your GitHub account in the README file(optional) - * Submit the project in a ZIP file - - - - -## Technical requirements - -* HTML - * Have at least 3 pages, keep the grid system consistent as much as possible - * Use at least 10 different HTML tags - * Use HTML tables - * Implement at least two uses for forms - * Dropped Down Menu - * Use web fonts - * Use different types of content in the form of text, images, videos, and GIFs - * Use regex validation - -* CSS - * Inline, internal, and external styling - * Use five different CSS selectors - * Don’t use too many fonts - * Use colors that complement each other - * Use Flexbox (Optional) - * Use SASS/SCSS (Optional) - * Use animations (Optional) - -* Javascript - * External scripts - * Use variables, if statements, loops, at least one form of collections, functions/call back, and events - * Use AJAX (Optional) - * Use JSON or XML (Optional) - * Use JQuery (Optional) - - - -## How to Download - -#### Part 1 - Forking the Project -* To _fork_ the project, click the `Fork` button located at the top right of the project. - - -#### Part 2 - Navigating to _forked_ Repository -* Navigate to your github profile to find the _newly forked repository_. -* Copy the URL of the project to the clipboard. - -#### Part 3 - Cloning _forked_ repository -* Clone the repository from **your account** into the `~/dev` directory. - * if you do not have a `~/dev` directory, make one by executing the following command: - * * `mkdir ~/dev` - * navigate to the `~/dev` directory by executing the following command: - * * `cd ~/dev` - * clone the project by executing the following command: - * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}` - - - - - - -## How to Submit - -#### Part 1 - _Pushing_ local changes to remote repository -* from a _terminal_ navigate to the root directory of the _cloned_ project. -* from the root directory of the project, execute the following commands: - * * add all changes - * * `git add .` - * * commit changes to be pushed - * * `git commit -m 'I have added changes'` - * * push changes to your repository - * * `git push -u origin master` - -#### Part 2 - Submitting assignment -* from the browser, navigate to the _forked_ project from **your** github account. -* click the `Pull Requests` tab. -* select `New Pull Request` diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c50ff38 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-merlot \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..0a474af 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,238 @@ -body { - background-color: navy; +@import url('https://fonts.googleapis.com/css2?family=Montserrat,wght@0,100;0,400;0,700;1,300;1,500&family=Open+Sans,wght@1,300;1,400&display=swap'); + +body{ + font-family: "Montserrat", sans-serif; + font-family: "Open Sans", sans-serif; +} +.navbar { + padding-top: 10px; + padding-bottom: 10px; + border: 0; + border-radius: 0; + margin-bottom: 10px; + font-size: 12px; + letter-spacing: 5px; + } +.navbar-nav a:hover { + background-color: #40bad5 !important; + padding: 15px 27px; + border-radius: 3px; + color:#ffffff !important; +} +.menu-group { + padding-left: 800px; +} +ul li { + letter-spacing: 2px; + text-align: left; + padding: 2px; +} +li{ + padding: 2px; +} -object { - height: 100vh; - width: 100vh; +p{ + font-size: larger; +} +.bg-1{ + background-color: #3798b6; + color: #ffffff; + padding-bottom: 20px; + padding-top: 20px; +} +.bg-2 { + background-color: #6c7b95; + color: #ffffff; +} +.bg-3 { + background-color: #2f2f2f; + color: #ffffff; + text-align: center; +} +.bg1-images { + height: 400px; + width: 400px; + border-radius: 5%; + box-shadow: 10px 6px 6px #555555; + +} +.bmi, .bmi-table{ + background-color: #3798b6; + border-radius: 5%; + height: 400px; + width: 300px; + text-align: center; + border: 5px solid white; } +.contact a{ + font-size: 1.5em; + padding-bottom: 2px; + padding-left: 5px; + padding-right: 5px; +} +.container-fluid .bg-3{ + text-align: center; +} +#footer { + text-align: center; +} +table, .bmi{ + height: 400px; + width: 300px; + text-align: center; + border: 5px solid white; + background-color: #3798b6; + border-radius: 5%; + +} +th, td { + border: 2px solid wheat; +} +tr, th{ + font-size: larger; + text-align: center; +} +#bmiResult{ + font-size: x-large; + animation: blink 2s infinite; + color: red +} +@keyframes blink { + from { + opacity: 1; + } + to{ + opacity: 0;; + } +} + +/* Roll The Dice game stylesheet */ + +.container { + width: 70%; + margin: auto; + text-align: center; + } + + .dice { + text-align: center; + display: inline-block; + + } + + #dice-body { + background-color: #393E46; + } + + h1 { + margin: 30px; + font-family: 'Lobster', cursive; + text-shadow: 5px 0 #232931; + font-size: 8rem; + color: #4ECCA3; + } + + .dice-p { + font-size: 2rem; + color: #4ECCA3; + font-family: 'Indie Flower', cursive; + } + + img { + width: 80%; + } + + #dice-footer { + margin-top: 5%; + color: #EEEEEE; + text-align: center; + font-family: 'Indie Flower', cursive; + + } + + +/* Drum kit stylesheet */ +.drum-kit-body { + text-align: center; + background-color: #283149; + } + + .drum-kit-h1 { + font-size: 5rem; + color: #DBEDF3; + font-family: "Arvo", cursive; + text-shadow: 3px 0 #DA0463; + + } + + .drum-kit-footer { + color: #DBEDF3; + font-family: sans-serif; + } + + .w { + background-image: url("../img/images/tom1.png"); + } + + .a { + background-image: url("../img/images/tom1.png"); + } + + .s { + background-image: url("../img/images/tom3.png"); + } + + .d { + background-image: url("../img/images/tom4.png"); + } + + .j { + background-image: url("../img/images/snare.png"); + } + + .k { + background-image: url("../img/images/crash.png"); + } + + .l { + background-image: url("../img/images/kick.png"); + } + + .set { + margin: 10% auto; + } + + .game-over { + background-color: red; + opacity: 0.8; + } + + .pressed { + box-shadow: 0 3px 4px 0 #DBEDF3; + opacity: 0.5; + } + + .red { + color: red; + } + + .drum { + outline: none; + border: 10px solid #404B69; + font-size: 5rem; + font-family: 'Arvo', cursive; + line-height: 2; + font-weight: 900; + color: #DA0463; + text-shadow: 3px 0 #DBEDF3; + border-radius: 15px; + display: inline-block; + width: 150px; + height: 150px; + text-align: center; + margin: 10px; + background-color: white; + } + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..8afca7b --- /dev/null +++ b/css/styles.css @@ -0,0 +1,81 @@ +.bg-1 { + background-color: #40bad5; + color: #ffffff; +} +.bg-2 { + background-color: #474e5d; + color: #ffffff; +} +.bg-3 { + background-color: #ffffff; + color: #555555; + +} +.bg-4 { + background-color: #2f2f2f; + color: #ffffff; +} + .img { + border-radius: 50%; + width: 400px; + height: 400px; + +} +.bg3-images { + width: 400px; + height: 400px; + border-radius: 5%; + box-shadow: 8px 5px 3px #555555 ; +} +.container-fluid{ + padding-top: 70px; + padding-bottom: 70px; + text-align: center; +} +.contact-logo { + font-size: 2em; + padding: 5px; +} +p { + font-size: 16px; +} +.navbar { + padding-top: 10px; + padding-bottom: 10px; + border: 0; + border-radius: 0; + margin-bottom: 10px; + font-size: 12px; + letter-spacing: 5px; + +} +.navbar-nav a:hover { + background-color: #40bad5 !important; + padding: 15px 27px; + border-radius: 3px; + color:#ffffff !important; + +} +ul li { + letter-spacing: 2px; + text-align: left; + padding: 2px; +} +li{ + padding: 2px; +} + +.contact a{ + font-size: 1.5em; + padding-bottom: 2px; + padding-left: 5px; + padding-right: 5px; +} +.bg-2 h4 { + padding-top: 10px; + text-align: left; +} +.education, .experience { + display: flex; + align-content: flex-end; +} \ No newline at end of file diff --git a/dicee.html b/dicee.html new file mode 100644 index 0000000..cf99ee4 --- /dev/null +++ b/dicee.html @@ -0,0 +1,132 @@ + + + + + Dicee + + + + + + + + + + + + + + + +
+

Roll The Dice

+ +
+

Player 1

+ +
+ +
+

Player 2

+ +
+
+
+
+ +
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/drumkit.html b/drumkit.html new file mode 100644 index 0000000..b37c007 --- /dev/null +++ b/drumkit.html @@ -0,0 +1,76 @@ + + + + + + Drum Kit + + + + + + + + + + + + + + +

Drum 🥁 Kit

+
+ + + + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/education.html b/education.html new file mode 100644 index 0000000..c121bc1 --- /dev/null +++ b/education.html @@ -0,0 +1,161 @@ + + + + + + Portfolio + + + + + + + + + + + + + +
+
+
+

Who am I?

+ Bird +

An Ardent learner

+
+
+ +
+ + + +
+

Education

+ + + Find me +
+ + + + +
+

Where to find me?

+
+
+

Maryland

+ BirdsImage +
+
+

Brooklyn, NY

+ BirdsImage +
+
+

Hyderabad, India

+ BirdsImage +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/experience.html b/experience.html new file mode 100644 index 0000000..fa95a24 --- /dev/null +++ b/experience.html @@ -0,0 +1,163 @@ + + + + + Portfolio + + + + + + + + + + + + +
+
+
+

What's my experience?

+ Bird +

Here is my journey..

+
+
+ +
+ + + +
+

Technical Experience

+ + +

+

Pharmacy Experience

+
+ + + + +
+

Where to find me?

+

Hint: My interests

+
+
+

Serenity of nature

+ BirdsImage +
+
+

What a beautiful sight

+ BirdsImage +
+
+

You found me!

+ BirdsImage +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/img/images/NZ1.JPEG b/img/images/NZ1.JPEG new file mode 100644 index 0000000..e8bb87e Binary files /dev/null and b/img/images/NZ1.JPEG differ diff --git a/img/images/NZ10.JPEG b/img/images/NZ10.JPEG new file mode 100644 index 0000000..175ea7b Binary files /dev/null and b/img/images/NZ10.JPEG differ diff --git a/img/images/NZ11.JPG b/img/images/NZ11.JPG new file mode 100644 index 0000000..48b4614 Binary files /dev/null and b/img/images/NZ11.JPG differ diff --git a/img/images/NZ13.JPEG b/img/images/NZ13.JPEG new file mode 100644 index 0000000..7c0af6e Binary files /dev/null and b/img/images/NZ13.JPEG differ diff --git a/img/images/NZ2.JPEG b/img/images/NZ2.JPEG new file mode 100644 index 0000000..8edc9a2 Binary files /dev/null and b/img/images/NZ2.JPEG differ diff --git a/img/images/NZ3.JPEG b/img/images/NZ3.JPEG new file mode 100644 index 0000000..d599d0d Binary files /dev/null and b/img/images/NZ3.JPEG differ diff --git a/img/images/NZ5.JPG b/img/images/NZ5.JPG new file mode 100644 index 0000000..c961c10 Binary files /dev/null and b/img/images/NZ5.JPG differ diff --git a/img/images/NZ7.JPEG b/img/images/NZ7.JPEG new file mode 100644 index 0000000..336899a Binary files /dev/null and b/img/images/NZ7.JPEG differ diff --git a/img/images/NZ8.JPEG b/img/images/NZ8.JPEG new file mode 100644 index 0000000..1323b88 Binary files /dev/null and b/img/images/NZ8.JPEG differ diff --git a/img/images/NZ9.JPEG b/img/images/NZ9.JPEG new file mode 100644 index 0000000..4dc20b1 Binary files /dev/null and b/img/images/NZ9.JPEG differ diff --git a/img/images/bird.jpg b/img/images/bird.jpg new file mode 100644 index 0000000..d9d447b Binary files /dev/null and b/img/images/bird.jpg differ diff --git a/img/images/birds1.jpg b/img/images/birds1.jpg new file mode 100644 index 0000000..80f44c9 Binary files /dev/null and b/img/images/birds1.jpg differ diff --git a/img/images/birds2.jpg b/img/images/birds2.jpg new file mode 100644 index 0000000..09484d0 Binary files /dev/null and b/img/images/birds2.jpg differ diff --git a/img/images/birds3.jpg b/img/images/birds3.jpg new file mode 100644 index 0000000..859ef86 Binary files /dev/null and b/img/images/birds3.jpg differ diff --git a/img/images/crash.png b/img/images/crash.png new file mode 100644 index 0000000..a992fa0 Binary files /dev/null and b/img/images/crash.png differ diff --git a/img/images/dice1.png b/img/images/dice1.png new file mode 100644 index 0000000..543a9ee Binary files /dev/null and b/img/images/dice1.png differ diff --git a/img/images/dice2.png b/img/images/dice2.png new file mode 100644 index 0000000..472bbac Binary files /dev/null and b/img/images/dice2.png differ diff --git a/img/images/dice3.png b/img/images/dice3.png new file mode 100644 index 0000000..5bb30aa Binary files /dev/null and b/img/images/dice3.png differ diff --git a/img/images/dice4.png b/img/images/dice4.png new file mode 100644 index 0000000..2c116a9 Binary files /dev/null and b/img/images/dice4.png differ diff --git a/img/images/dice5.png b/img/images/dice5.png new file mode 100644 index 0000000..d566cd8 Binary files /dev/null and b/img/images/dice5.png differ diff --git a/img/images/dice6.png b/img/images/dice6.png new file mode 100644 index 0000000..8b98b3c Binary files /dev/null and b/img/images/dice6.png differ diff --git a/img/images/kick.png b/img/images/kick.png new file mode 100644 index 0000000..b64877e Binary files /dev/null and b/img/images/kick.png differ diff --git a/img/images/snare.png b/img/images/snare.png new file mode 100644 index 0000000..1e089ba Binary files /dev/null and b/img/images/snare.png differ diff --git a/img/images/suri1.jpg b/img/images/suri1.jpg new file mode 100644 index 0000000..70ae7b3 Binary files /dev/null and b/img/images/suri1.jpg differ diff --git a/img/images/tom1.png b/img/images/tom1.png new file mode 100644 index 0000000..855b211 Binary files /dev/null and b/img/images/tom1.png differ diff --git a/img/images/tom2.png b/img/images/tom2.png new file mode 100644 index 0000000..3e9f363 Binary files /dev/null and b/img/images/tom2.png differ diff --git a/img/images/tom3.png b/img/images/tom3.png new file mode 100644 index 0000000..762cbf8 Binary files /dev/null and b/img/images/tom3.png differ diff --git a/img/images/tom4.png b/img/images/tom4.png new file mode 100644 index 0000000..e79c49e Binary files /dev/null and b/img/images/tom4.png differ diff --git a/index.html b/index.html index 4dc0c72..9f1c18d 100644 --- a/index.html +++ b/index.html @@ -4,54 +4,199 @@ - + + + - + First SBA Assignment + + + + - + + + + + + + + + + + + +
+ +
+

Welcome! Enjoy some scenic pictures while you are here.

+
+

Mount Cook, NZ

+ BirdsImage +
+
+

Hot Springs, Rotorua, NZ

+ BirdsImage +
+
+

Milford Sound, NZ

+ BirdsImage +
+
+
+ + + + + + +
+

Use the BMI calculator to know your BMI

+
+
+

What is BMI ?

+

Body mass index (BMI) is a measure of body fat based on height and weight that applies to adult men and women.

+
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
BMIComaprision
BMI < 18.5Underweight
BMI 18.5 - 24.9Normal weight
BMI 25 - 29.9Overweight
BMI >= 30Obesity
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ +

+
+
+
+
+ + - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - + + + + + + - \ No newline at end of file + + + + + diff --git a/js/dicee.js b/js/dicee.js new file mode 100644 index 0000000..8daea89 --- /dev/null +++ b/js/dicee.js @@ -0,0 +1,20 @@ + +document.querySelector("img.img1").src= "./img/images/dice6.png"; +document.querySelector("img.img2").src= "./img/images/dice6.png"; + +function rollDice (){ + var randomNumber1 = Math.floor(Math.random() * 6); + var randomNumber2 = Math.floor(Math.random() * 6); + var imgArr = ["./img/images/dice1.png", "./img/images/dice2.png", "./img/images/dice3.png", "./img/images/dice4.png", "./img/images/dice5.png", "./img/images/dice6.png"]; + document.querySelector("img.img1").setAttribute("src", imgArr[randomNumber1]); + document.querySelector("img.img2").setAttribute("src", imgArr[randomNumber2]); + + if (randomNumber1 > randomNumber2) { + document.querySelector("h1").innerHTML = "🚩Player 1 wins"; + } else if (randomNumber1 < randomNumber2) { + document.querySelector("h1").innerHTML = "Player 2 wins🚩"; + } else { + document.querySelector("h1").innerHTML = "Draw!"; + } +} + diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..95de16a --- /dev/null +++ b/js/index.js @@ -0,0 +1,91 @@ + +// BMI --------- +function calculateBMI(){ + + var heightInFeet = Number(document.getElementById("height-feet").value); + var heightInInches = Number(document.getElementById("height-inches").value); + var weight = Number(document.getElementById("weight").value); + var height = (heightInFeet * 12) + heightInInches; + + var bmi = Math.round((weight / (height * height)) * 703) ; + + + if (bmi < 18.5){ + document.getElementById("bmiResult").innerHTML = "Your BMI is: " + bmi + " - Underweight"; + } else if(bmi >= 18.5 && bmi <= 24.9){ + document.getElementById("bmiResult").innerHTML ="Your BMI is: " + bmi + " - Normal weight"; + } else if(bmi > 24.9 && bmi <= 29.9){ + document.getElementById("bmiResult").innerHTML = "Your BMI is: " + bmi + " - Overweight"; + } else if(bmi >= 30){ + document.getElementById("bmiResult").innerHTML = "Your BMI is: " + bmi + " - Obesity"; + } +} + + +// Drum Kit --------- + +var numberOfButtons = document.querySelectorAll(".drum").length; + +for (i=0; i < numberOfButtons; i++) { + +document.querySelectorAll(".drum")[i].addEventListener("click", handleClick); + + function handleClick() { + + var drumButton = this.innerHTML; + + makeSound(drumButton); + buttonAnimation(drumButton); + + } + + } + + document.addEventListener("keypress", function(event) { + + makeSound(event.key); + buttonAnimation(event.key); + }); + + function makeSound(drumLetter) { + if (drumLetter =="w") { + var tom1 = new Audio("sounds/tom-1.mp3"); + tom1.play(); + } else if (drumLetter == "a") { + var tom2 = new Audio("sounds/tom-2.mp3"); + tom2.play(); + } else if (drumLetter == "s") { + var tom3 = new Audio("sounds/tom-3.mp3"); + tom3.play(); + } else if (drumLetter == "d") { + var tom4 = new Audio("sounds/tom-4.mp3"); + tom4.play(); + } else if (drumLetter == "j") { + var snare = new Audio("sounds/snare.mp3"); + snare.play(); + } else if (drumLetter == "k") { + var crash = new Audio("sounds/crash.mp3"); + crash.play(); + } else if (drumLetter == "l") { + var kick = new Audio("sounds/kick-bass.mp3"); + kick.play(); + } else { + console.log ("this.innerHTML"); + } + + } + + +function buttonAnimation (currentKey) { + var activeButton = document.querySelector("." + currentKey); + + activeButton.classList.add("pressed"); + + setTimeout (function (){ + + activeButton.classList.remove("pressed"); + +}, 100); +} + + diff --git a/skills.html b/skills.html new file mode 100644 index 0000000..f0a273d --- /dev/null +++ b/skills.html @@ -0,0 +1,128 @@ + + + + + Skills + + + + + + + + + + + + + +
+
+
+

Curious About My Skills?

+ Bird +

Read along below..

+
+
+ +
+ + + +
+

Technical Skills

+

Programming Languages/Tech:

+ + C, C#, Java, Python, HTML5, CSS3, Bootstrap, JavaScript, SQL, Node.js, Express, React.js, ES6, JSX, Angular + API creation and managment

+ +

Tools:

+ + + Visual Studio Code, Atom, HyperTerminal, Git Bash, GitHub, Postman +

+

Database Systems:

+ + + MySQL, MongoDB +

+

Operating Systems:

+ + + MS DOS, Unix, Windows, Linux, OS X +

+ + Find me +
+ + + + +
+

Where to find me?

+
+
+

Always learning

+ BirdsImage +
+
+

Practice makes perfect

+ BirdsImage +
+
+

Aspiring for new skills

+ BirdsImage +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/sounds/crash.mp3 b/sounds/crash.mp3 new file mode 100644 index 0000000..d568062 Binary files /dev/null and b/sounds/crash.mp3 differ diff --git a/sounds/kick-bass.mp3 b/sounds/kick-bass.mp3 new file mode 100644 index 0000000..faf06c6 Binary files /dev/null and b/sounds/kick-bass.mp3 differ diff --git a/sounds/snare.mp3 b/sounds/snare.mp3 new file mode 100644 index 0000000..e7cf5b8 Binary files /dev/null and b/sounds/snare.mp3 differ diff --git a/sounds/tom-1.mp3 b/sounds/tom-1.mp3 new file mode 100644 index 0000000..7dc3003 Binary files /dev/null and b/sounds/tom-1.mp3 differ diff --git a/sounds/tom-2.mp3 b/sounds/tom-2.mp3 new file mode 100644 index 0000000..f3c0485 Binary files /dev/null and b/sounds/tom-2.mp3 differ diff --git a/sounds/tom-3.mp3 b/sounds/tom-3.mp3 new file mode 100644 index 0000000..3806033 Binary files /dev/null and b/sounds/tom-3.mp3 differ diff --git a/sounds/tom-4.mp3 b/sounds/tom-4.mp3 new file mode 100644 index 0000000..58b04be Binary files /dev/null and b/sounds/tom-4.mp3 differ