diff --git a/homepage/website/about.html b/homepage/website/about.html new file mode 100644 index 0000000..0533c60 --- /dev/null +++ b/homepage/website/about.html @@ -0,0 +1,36 @@ + + + + + About | PWS + + + + +
+
+ + +
+
+ +
+
+

About

+

PWS is a homelabbing project that has taught me much about Linux, hardware, networking, and security practices. I use it to host a variety of self-created projects, open source software, and anything that piques my interest.

+
+
+ + + + + \ No newline at end of file diff --git a/homepage/website/index.html b/homepage/website/index.html index 233af81..6f20919 100644 --- a/homepage/website/index.html +++ b/homepage/website/index.html @@ -2,12 +2,46 @@ - Simple Webpage + PWS | Pinner Web Services + -

Hello, World!

-

This is a simple HTML/CSS/JS webpage.

+
+
+ + +
+
+ +
+
+

PWS | Pinner Web Services

+

Experience the ultimate web service tailored just for you.

+ Learn More +
+
+ +
+
+

Quote of the Day

+
+ +
+
+
+ + \ No newline at end of file diff --git a/homepage/website/script.js b/homepage/website/script.js index ae9e3a9..23c406a 100644 --- a/homepage/website/script.js +++ b/homepage/website/script.js @@ -1 +1,71 @@ -console.log("Hello, World!"); \ No newline at end of file +const quotes = [ + { + text: "The only way to do great work is to love what you do.", + author: "Steve Jobs", + link: "https://en.wikipedia.org/wiki/Steve_Jobs" + }, + { + text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", + author: "Winston Churchill", + link: "https://en.wikipedia.org/wiki/Winston_Churchill" + }, + { + text: "In the end, it's not the years in your life that count. It's the life in your years.", + author: "Abraham Lincoln", + link: "https://en.wikipedia.org/wiki/Abraham_Lincoln" + }, + { + text: "I should be on in a few minutes.", + author: "Jake, in the moments before baiting", + link: "https://www.youtube.com/channel/UCZctf3QSXXk9a5KzrAJ2bmw" + }, + { + text: "It's good news!", + author: "Sujay", + link: "https://anditsgood.news/" + }, + { + text: "It's bad news.", + author: "Sujay", + link: "https://anditsgood.news/" + }, + { + text: "Meow", + author: "Tobee", + link: "https://gallery.whitney.rip/library/albums/as3wif72i18kzs9q/tobee-and-maymay" + }, + { + text: "Meow", + author: "MayMay", + link: "https://gallery.whitney.rip/library/albums/as3wif72i18kzs9q/tobee-and-maymay" + }, +]; +const failureMessageQOTD = 'Failed to fetch the quote of the day. Please try again later.'; + +async function getQOTD() { + var daysSinceEpoch = new Date().getTime() / (1000 * 60 * 60 * 24); + const idx = Math.floor(daysSinceEpoch % quotes.length); + return quotes[idx]; +} + +async function renderQOTD() { + const quoteData = await getQOTD(); + const quoteElement = document.getElementById('quote-content'); + + console.log(`Rendering Today's Quote: "${quoteData.text}" - ${quoteData.author}`); + + try { + if(quoteData) { + const html = `

"${quoteData.text}" - ${quoteData.author}

`; + quoteElement.innerHTML = html; + } else { + quoteSection.innerHTML = `

${failureMessageQOTD}

`; + } + } catch (error) { + console.error('Error rendering Quote of the Day:', error); + quoteSection.innerHTML = `

${failureMessageQOTD}

`; + } +} + +console.log("Thanks for checking out PWS!"); +document.addEventListener('DOMContentLoaded', renderQOTD); \ No newline at end of file diff --git a/homepage/website/services.html b/homepage/website/services.html new file mode 100644 index 0000000..c180848 --- /dev/null +++ b/homepage/website/services.html @@ -0,0 +1,56 @@ + + + + + Services | PWS + + + + +
+
+ + +
+
+ +
+
+

PWS Services

+

Check out some of the PWS services!

+
+
+ +
+
+
+ Service Image 1 +
+

Service Title 1

+

Coming soon

+
+
+
+ Service Image 2 +
+

Service Title 2

+

Coming soon

+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/homepage/website/static/image.png b/homepage/website/static/image.png new file mode 100644 index 0000000..d54e2fa Binary files /dev/null and b/homepage/website/static/image.png differ diff --git a/homepage/website/styles.css b/homepage/website/styles.css index e69de29..6e8f7be 100644 --- a/homepage/website/styles.css +++ b/homepage/website/styles.css @@ -0,0 +1,134 @@ +body { + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; + color: #333333; + line-height: 1.6; +} + +.container { + width: 80%; + margin: 0 auto; +} + +header { + background-color: #333333; + color: #FFFFFF; + padding: 20px 0; +} + +header .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +header .logo { + font-family: 'Montserrat', sans-serif; + font-size: 1.5em; + font-weight: 600; +} + +header nav ul { + list-style: none; + display: flex; + gap: 20px; +} + +header nav ul li { + display: inline; +} + +header nav ul li a { + color: #FFFFFF; + text-decoration: none; + font-weight: 500; +} + +.nav-button { + display: inline-block; + padding: 10px 20px; + background-color: #F5844C; + color: #240f0f; + text-decoration: none; + font-weight: 600; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.nav-button:hover { + background-color: #cf5416; +} + +.hero { + background: #f4f4f4; + text-align: center; + padding: 60px 0; +} + +.hero h1 { + font-family: 'Montserrat', sans-serif; + font-size: 2.5em; + margin: 0; +} + +.hero p { + font-size: 1.2em; + margin: 20px 0; +} + +.sub-section { + background: #f4f4f4; + text-align: center; + padding: 60px 0; +} + +.sub-section h1 { + font-family: 'Montserrat', sans-serif; + font-size: 2.5em; + margin: 0; +} + +.sub-section p { + font-size: 1.2em; + margin: 20px 0; +} + +.cta-button { + display: inline-block; + padding: 10px 20px; + background-color: #F5844C; + color: #333333; + text-decoration: none; + font-weight: 600; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.cta-button:hover { + background-color: #e0a806; +} + +footer { + position: fixed; + bottom: 0; + width: 100%; + background: #333333; + color: #ffffff; + text-align: center; + padding: 20px 0; +} + +footer .social-media a { + color: #ffffff; + text-decoration: none; + margin: 0 10px; +} + +footer .social-media a:hover { + text-decoration: underline; +} + +footer p { + margin: 0; +} \ No newline at end of file