diff --git a/README.md b/README.md index 426baef..601199c 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,3 @@ -# _Personal Portfolio Website - @ashmin-bhujel_ +# Web Technology Final Project -## _script.js_ - -```js -const portfolioWebsite = new Website("Jugadu Portfolio Website 😝"); - -portfolioWebsite.author = "ashmin-bhujel"; - -console.log(portfolioWebsite.url); -``` - -## _terminal_ - -```bash -> node script.js - -> https://ashminbhujel.com.np/ -``` +A Simple web application built using HTML, CSS and JavaScript. diff --git a/images/favicon.png b/assets/favicon.png similarity index 100% rename from images/favicon.png rename to assets/favicon.png diff --git a/assets/image01.jpeg b/assets/image01.jpeg new file mode 100644 index 0000000..293056b Binary files /dev/null and b/assets/image01.jpeg differ diff --git a/assets/image02.jpeg b/assets/image02.jpeg new file mode 100644 index 0000000..4c77fa9 Binary files /dev/null and b/assets/image02.jpeg differ diff --git a/assets/image03.jpeg b/assets/image03.jpeg new file mode 100644 index 0000000..2970103 Binary files /dev/null and b/assets/image03.jpeg differ diff --git a/assets/image04.jpeg b/assets/image04.jpeg new file mode 100644 index 0000000..bb013e6 Binary files /dev/null and b/assets/image04.jpeg differ diff --git a/assets/image05.jpeg b/assets/image05.jpeg new file mode 100644 index 0000000..2a4ee7c Binary files /dev/null and b/assets/image05.jpeg differ diff --git a/assets/image06.jpeg b/assets/image06.jpeg new file mode 100644 index 0000000..7ee491d Binary files /dev/null and b/assets/image06.jpeg differ diff --git a/assets/image07.jpeg b/assets/image07.jpeg new file mode 100644 index 0000000..e7df9bf Binary files /dev/null and b/assets/image07.jpeg differ diff --git a/assets/image08.jpeg b/assets/image08.jpeg new file mode 100644 index 0000000..193beea Binary files /dev/null and b/assets/image08.jpeg differ diff --git a/assets/image09.jpeg b/assets/image09.jpeg new file mode 100644 index 0000000..51a5a54 Binary files /dev/null and b/assets/image09.jpeg differ diff --git a/assets/image10.jpeg b/assets/image10.jpeg new file mode 100644 index 0000000..140bd0a Binary files /dev/null and b/assets/image10.jpeg differ diff --git a/assets/image11.jpeg b/assets/image11.jpeg new file mode 100644 index 0000000..8b650f2 Binary files /dev/null and b/assets/image11.jpeg differ diff --git a/assets/image12.jpeg b/assets/image12.jpeg new file mode 100644 index 0000000..beb0c7a Binary files /dev/null and b/assets/image12.jpeg differ diff --git a/assets/image13.jpg b/assets/image13.jpg new file mode 100644 index 0000000..f2c8647 Binary files /dev/null and b/assets/image13.jpg differ diff --git a/assets/image14.jpeg b/assets/image14.jpeg new file mode 100644 index 0000000..bd70201 Binary files /dev/null and b/assets/image14.jpeg differ diff --git a/assets/image15.jpg b/assets/image15.jpg new file mode 100644 index 0000000..0ee43d2 Binary files /dev/null and b/assets/image15.jpg differ diff --git a/components/about-me.txt b/components/about-me.txt new file mode 100644 index 0000000..9cb3a8d --- /dev/null +++ b/components/about-me.txt @@ -0,0 +1,20 @@ +
+

About Me

+
+

+ Hello, My name is Ashmin Bhujel. I'm currently studying BIT (Bachelors in + Information Technology) at Bhaktapur Multiple Campus. +

+

+ I'm currently learning Web Devlopment and Music Production (as Hobby). +

+

+ I like to explore computer technologies and make something out of what + I've learned together with my friends. +

+

+ I also like to listening to music, watching movies (Sci-Fi, Animation, + Romance, Biopic), anime and sometimes K-Drama also. +

+
+
diff --git a/components/contact.txt b/components/contact.txt new file mode 100644 index 0000000..2932375 --- /dev/null +++ b/components/contact.txt @@ -0,0 +1,47 @@ +
+

Contact

+
+
+ Get In Touch + +
+ + +
+ +
+ + +
+ + + + + + +
+
+
diff --git a/components/home.txt b/components/home.txt new file mode 100644 index 0000000..68ca393 --- /dev/null +++ b/components/home.txt @@ -0,0 +1,22 @@ +
+

Web Technology I

+
+

+ This web application is final lab project of Web Technology I. Built using + basic web development technologies like HTML, CSS, JavaScript. +

+

+ You can navigate to various section of the web application using the + provided navigation links. +

+

Some of the technologies/concepts used while building this project.

+
+ +
diff --git a/components/photographs.txt b/components/photographs.txt new file mode 100644 index 0000000..ff30faf --- /dev/null +++ b/components/photographs.txt @@ -0,0 +1,119 @@ +
+

Photographs

+
+
+ Nagarkot Tower +
+

Nagarkot Tower

+
+
+
+ Stone Structure +
+

Stone Structure

+
+
+
+ Stone Structure +
+

Stone Structure

+
+
+
+ Guras Flower Tree +
+

Guras Flower Tree

+
+
+
+ Guras Flower +
+

Guras Flower

+
+
+
+ Guras Flower +
+

Guras Flower

+
+
+
+ Green Tree +
+

Green Tree

+
+
+
+ Sidhhapokhari +
+

Sidhhapokhari

+
+
+
+ Sidhhapokhari +
+

Sidhhapokhari

+
+
+
+ Bell Shaped Flower +
+

Bell Shaped Flower

+
+
+
+ Rose Flower +
+

Rose Flower

+
+
+
+ White Flower +
+

White Flower

+
+
+
+ Green Plant +
+

Green Plant

+
+
+
+ Plum Blossoms Flower +
+

Plum Blossoms Flower

+
+
+
+ Milk Tea +
+

Milk Tea

+
+
+
+
diff --git a/components/skills.txt b/components/skills.txt new file mode 100644 index 0000000..8d20a5a --- /dev/null +++ b/components/skills.txt @@ -0,0 +1,54 @@ +
+

Skills

+
+
+ +
+

HTML5

+

Intermediate

+
+
+
+ +
+

CSS3

+

Intermediate

+
+
+
+ +
+

JavaScript

+

Intermediate

+
+
+
+ +
+

Git

+

Basics

+
+
+
+ +
+

GitHub

+

Basics

+
+
+
+ +
+

Windows

+

Basics

+
+
+
+ +
+

Linux

+

Basics

+
+
+
+
diff --git a/images/hello.gif b/images/hello.gif deleted file mode 100644 index ce16e75..0000000 Binary files a/images/hello.gif and /dev/null differ diff --git a/index.html b/index.html index 5413c01..309c9a1 100644 --- a/index.html +++ b/index.html @@ -3,67 +3,57 @@ - + - Ashmin Bhujel - Personal Portfolio + Web Technology I Final Project - + - - - - + + - + - - - -
- - Hello from fluffy duck - - -
-

- - HELLO, WORLD! - -

- -

- - PORTFOLIO WEBSITE UNDER CONSTRUCTION - -

+
+ +
+
+

WEB TECHNOLOGY I

+

Final Project ( HTML | CSS | JS )

+
-

YOU CAN FIND ME IN THESE PLATFORMS

+ + +
-

BUT DON'T EXPECT TOO MUCH...

+ +
-

@ashmin-bhujel

+ +
+
+

Web Technology I

+

Final Project

+
- -
-
+ +

+ © 2024 Ashmin Bhujel +

+
- + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6025bf7 --- /dev/null +++ b/script.js @@ -0,0 +1,68 @@ +// Navigation +const pageHeading = document.querySelector("#page-heading"); +const homeBtn = document.querySelector("#home-btn"); +const aboutMeBtn = document.querySelector("#about-me-btn"); +const skillsBtn = document.querySelector("#skills-btn"); +const photographsBtn = document.querySelector("#photographs-btn"); +const contactBtn = document.querySelector("#contact-btn"); + +// Content +const content = document.querySelector(".content"); + +// Event listeners +window.addEventListener("DOMContentLoaded", renderHomePage); +pageHeading.addEventListener("click", renderHomePage); +homeBtn.addEventListener("click", renderHomePage); +aboutMeBtn.addEventListener("click", renderAboutMePage); +skillsBtn.addEventListener("click", renderSkillsPage); +photographsBtn.addEventListener("click", renderPhotographsPage); +contactBtn.addEventListener("click", renderContactPage); + +// Functions +// Renderer +function Renderer(page) { + const XHR = new XMLHttpRequest(); + XHR.open("GET", page, true); + XHR.send(); + + XHR.onload = function () { + if (this.status === 304) { + return; + } else if (this.status === 200) { + content.innerHTML = this.response; + } + }; +} + +function renderHomePage() { + Renderer("./components/home.txt"); +} + +function renderAboutMePage() { + Renderer("./components/about-me.txt"); +} + +function renderSkillsPage() { + Renderer("./components/skills.txt"); +} + +function renderPhotographsPage() { + Renderer("./components/photographs.txt"); +} + +function renderContactPage() { + Renderer("./components/contact.txt"); + + setTimeout(() => { + const form = document.querySelector("form"); + let firstName = document.querySelector("#first-name"); + + form.addEventListener("submit", (event) => { + event.preventDefault(); + + alert( + `Thank you ${firstName.value} for your message will get in touch with you soon.` + ); + }); + }, 500); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..c951f24 --- /dev/null +++ b/style.css @@ -0,0 +1,310 @@ +/* Google fonts */ +@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + +/* CSS reset and boilerplate */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Poppins, sans-serif; +} + +:root { + --primary-color: #ff8104; + --dark-color: #282828; + --light-color: #f9f6ef; + --light-color-overlay: rgba(249, 246, 239, 0.75); +} + +a { + text-decoration: none; + cursor: pointer; + color: var(--dark-color); +} + +ul:not(.list) { + list-style: none; + display: flex; + align-items: center; + gap: 2rem; +} + +.list { + list-style-position: inside; + margin-top: 2rem; +} + +body { + font-size: 16px; + background-color: var(--light-color); + color: var(--dark-color); +} + +/* Header */ +header { + background-color: var(--light-color-overlay); + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + position: sticky; + top: 0; + -webkit-backdrop-filter: blur(2rem); + backdrop-filter: blur(2rem); +} + +#page-heading { + cursor: pointer; +} + +/* Nav */ +nav li { + cursor: pointer; + transition: color, text-decoration; + transition-duration: 250ms; + transition-timing-function: ease-in-out; +} + +nav li:hover, +nav li.btn-dark:hover { + color: var(--primary-color); +} + +nav li:not(.btn-dark):hover { + text-decoration: underline; + text-underline-offset: 0.5em; + text-decoration-thickness: 2px; +} + +/* Content */ +.content { + min-height: 100vh; +} + +/* Sections */ +.section { + width: 100%; + height: 100%; +} + +.section-heading { + font-weight: 900; + text-transform: uppercase; + -webkit-text-fill-color: transparent; + -webkit-text-stroke: 2px var(--dark-color); + margin-bottom: 2rem; +} + +.section-body, +.list { + font-size: 1.5rem; + font-style: italic; +} + +/* Card */ +.section-card-container { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; + padding-top: 4rem; +} + +.card { + display: flex; + flex-direction: column; + gap: 1rem; + align-items: center; + text-align: center; +} + +.card-body { + padding: 1rem; +} + +.card-icon { + padding: 2rem; + font-size: 8rem; +} + +.card-image { + max-width: 400px; + aspect-ratio: 1; + object-fit: cover; + object-position: bottom; +} + +.card-heading { + font-size: 1.15rem; + font-weight: bold; +} + +/* Form */ +form { + max-width: 800px; + margin: 0 auto; + background-color: var(--dark-color); + color: var(--light-color); + padding: 4rem; +} + +fieldset { + display: flex; + flex-direction: column; + gap: 1rem; + border: none; + margin: 0 auto; + padding: 1rem; +} + +legend { + padding: 0 1rem; + font-size: 1.5rem; + font-weight: 600; +} + +.form-sub-group { + display: flex; + gap: 1rem; +} + +.form-sub-group input { + flex-grow: 1; +} + +form input, +textarea { + font-size: 1rem; + padding: 0.5rem 1rem; +} + +/* Footer */ +footer { + background-color: var(--dark-color); + color: var(--light-color); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.footer-header { + text-align: center; +} + +.footer-heading { + font-size: 1.5rem; + text-transform: uppercase; +} + +.footer-sub-heading { + font-weight: 200; + font-size: 0.8rem; +} + +footer i { + font-size: 1.5rem; + color: var(--light-color); + transition: color, text-decoration; + transition-duration: 250ms; + transition-timing-function: ease-in-out; +} + +footer i:hover { + color: var(--primary-color); +} + +.footer-copyright { + font-weight: 200; +} + +/* Utility classes */ +.container { + max-width: 1920px; + margin: 0 auto; + padding: 2rem 4rem; + text-align: justify; +} + +/* Button */ +.btn-primary { + background-color: var(--primary-color); + color: var(--light-color); + padding: 0.5em 1.25em; + outline: none; + border: none; + transition: filter; + transition-duration: 250ms; + transition-timing-function: ease-in-out; +} + +.btn-primary:hover { + filter: brightness(80%); +} + +.btn-dark { + background-color: var(--dark-color); + color: var(--light-color); + padding: 0.5em 1.25em; +} + +/* Text */ +.text-lg { + font-size: 8rem; +} + +.text-md { + font-size: 1.15rem; +} + +/* Responsiveness */ +@media (max-width: 1200px) { + header { + position: static; + flex-direction: column; + gap: 2rem; + } + + #page-header { + text-align: center; + } + + nav ul { + flex-direction: column; + } + + .text-lg { + text-align: center; + font-size: 2rem; + -webkit-text-fill-color: inherit; + -webkit-text-stroke: 0; + font-weight: 400; + } + + nav li:not(.btn-dark):hover { + text-decoration: none; + } +} + +@media (max-width: 768px) { + .container { + padding: 2rem; + } + + form { + max-width: 100%; + padding: 2rem 0; + } + + .form-sub-group { + flex-direction: column; + } +} + +@media (max-width: 500px) { + .card-image { + max-width: 300px; + } +} diff --git a/style/style.css b/style/style.css deleted file mode 100644 index 5085636..0000000 --- a/style/style.css +++ /dev/null @@ -1,106 +0,0 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -:root { - --primary-color: #00a9ff; - --dark-color: #111111; - --light-color: #eef5ff; -} - -a { - color: var(--light-color); - text-decoration: none; - cursor: pointer; -} - -body { - background-color: var(--dark-color); - color: var(--light-color); - font-family: Poppins, sans-serif; -} - -main { - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.my-info { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - font-style: italic; -} - -.hello-world { - font-size: 2.5rem; - font-weight: 400; - margin: 1rem 0 4rem 0; -} - -.socials .links { - list-style: none; - display: flex; - align-items: center; - justify-content: center; - gap: 2rem; - margin-top: 1rem; -} - -.socials .links a { - font-size: 1.5rem; - transition: color 250ms ease-in-out; -} - -.socials .links a:hover { - color: var(--primary-color); -} - -.container { - padding: 2rem; -} - -@media (max-width: 400px) { - .hello-world { - font-size: 1.5rem; - } - - .my-info-text { - font-size: 0.8rem; - } -} - -@media (min-width: 400px) and (max-width: 768px) { - .hello-world { - font-size: 2rem; - } - - .my-info-text { - font-size: 0.8rem; - } -} - -@media (min-width: 2560px) { - .hello-world-gif { - width: 800px; - } - - .hello-world { - font-size: 6rem; - } - - .my-info-text { - font-size: 2rem; - } - - .socials .links a { - font-size: 2rem; - } -}