diff --git a/Alex.jpg b/Alex.jpg new file mode 100644 index 0000000..691014c Binary files /dev/null and b/Alex.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..92ffc98 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + My Tech Goals + + + +
+

My Tech Goals for the Next 2 Years

+
+
+
+
+ Slack Profile Picture +
+
+
+ Slack Display Name: Alex Asciencio +
+
+ Current Time (UTC): Tue, 02 Jul 2024 20:42:32 GMT +
+
+ Current Day of the Week: Tuesday +
+
+ Slack Email: asciencioalex@gmail.com +
+
+
+
+

My Tech Goals

+ +
+ +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..54ded65 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +window.onload = function() { + // Set your Slack details + const slackDisplayName = "Alex Asciencio"; + const slackEmail = "asciencioalex@gmail.com"; + const slackProfilePicture = "Alex.jpg"; + + // Display Slack details + document.getElementById('displayName').textContent = slackDisplayName; + document.getElementById('email').textContent = slackEmail; + document.getElementById('profilePicture').src = slackProfilePicture; + + // Display current time in UTC + function updateTime() { + const now = new Date(); + const utcString = now.toUTCString(); + document.getElementById('currentTime').textContent = utcString; + document.getElementById('currentDay').textContent = now.toLocaleDateString('en-US', { weekday: 'long' }); + } + + updateTime(); + setInterval(updateTime, 1000); +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d95b3b6 --- /dev/null +++ b/styles.css @@ -0,0 +1,155 @@ +/* General Styles */ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + background-color: #f4f4f4; + color: #333; +} + +header { + background-color: #4CAF50; + color: white; + padding: 20px; + width: 100%; + text-align: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease-in-out; +} + +header h1 { + margin: 0; +} + +main { + width: 100%; + max-width: 900px; + margin: 20px auto; + padding: 20px; + background: white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +.container { + margin-bottom: 40px; + transition: all 0.3s ease-in-out; +} + +.profile { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.profile img { + width: 150px; + height: 150px; + border-radius: 50%; + display: block; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: transform 0.3s ease-in-out; +} + +.profile img:hover { + transform: scale(1.1); +} + +.details { + text-align: center; + margin-top: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +.detail-item { + margin: 10px 0; + font-size: 1.2em; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; +} + +.detail-item strong { + margin-right: 10px; + font-weight: 700; + color: #4CAF50; +} + +#goals h2, #links h2 { + text-align: center; + color: #4CAF50; + margin-bottom: 20px; +} + +#goals ul { + list-style-type: disc; + padding-left: 20px; + line-height: 1.6; +} + +#links .links { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +#links .links a { + display: inline-block; + margin: 10px; + padding: 10px 15px; + background: #4CAF50; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; +} + +#links .links a:hover { + background: #45a049; + transform: translateY(-3px); +} + +footer { + background-color: #333; + color: white; + padding: 10px; + width: 100%; + text-align: center; + position: fixed; + bottom: 0; + left: 0; +} + +footer p { + margin: 0; +} + +@media (max-width: 600px) { + header, footer { + padding: 10px; + } + + main { + padding: 10px; + } + + .profile img { + width: 100px; + height: 100px; + } + + .details p { + font-size: 1em; + } + + #links .links a { + margin: 5px; + padding: 8px 10px; + } +}