From 8d9bbfa851b23dfc0d9e9c06388f615decfda0eb Mon Sep 17 00:00:00 2001 From: Jose Cortes Date: Mon, 12 Feb 2024 16:50:32 -0800 Subject: [PATCH 1/4] Projects Page --- projects/index.html | 314 ++++++++++++++++++++++++++++++++++++++++++ projects/projects.css | 254 ++++++++++++++++++++++++++++++++++ projects/projects.js | 67 +++++++++ 3 files changed, 635 insertions(+) create mode 100644 projects/index.html create mode 100644 projects/projects.css create mode 100644 projects/projects.js diff --git a/projects/index.html b/projects/index.html new file mode 100644 index 0000000..00b49c7 --- /dev/null +++ b/projects/index.html @@ -0,0 +1,314 @@ + + + + + Projects | Code By Jose + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Code By Jose + + +
+ + +
+

Projects

+ +
+
+ + +
+ +
+ diff --git a/projects/projects.css b/projects/projects.css new file mode 100644 index 0000000..afbd8b0 --- /dev/null +++ b/projects/projects.css @@ -0,0 +1,254 @@ +html { + scroll-behavior: smooth; +} + +.Title { + font: 2em "Lora"; + font-weight: 600; + color: #d2d9d8; + line-height: 0.25; + transition: color 0.3s ease-in-out; +} +/* Header */ +header { + position: fixed; + top: 0; + left: 0; + height: 3em; + width: 100%; + z-index: 1; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #204359; + padding: 0.25em; + border-bottom: 0.2em solid #d2d9d8; +} +header .Title { + text-decoration: none; + margin-right: auto; + padding-left: 0.5em; +} +header .Title:hover { + color: #a5d0e1; +} +/* Tabs */ +header nav { + display: flex; + gap: 1em; + padding-right: 1em; +} +nav a { + color: #d2d9d8; + font-size: 1em; + text-decoration: none; + font-family: Lato; + display: flex; + gap: 0.5em; + border-bottom: #d2d9d8 solid 0em; + transition: border-bottom 0.3s ease-in-out, color 0.3s ease-in-out; +} +nav a i { + opacity: 0%; + transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out; +} +nav a:hover, +nav a:active { + color: #a5d0e1; +} + +nav a:hover i, +nav a:active i { + color: #a5d0e1 !important; +} + +nav a.active { + border-bottom: #d2d9d8 solid 0.1em; +} +nav a.active:hover, +nav a.active:active { + border-color: #a5d0e1; +} + +nav a.active i { + opacity: 100%; +} + +/* Body */ + +body { + background-color: #d2d9d8; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 15em; + margin: 0; +} + +/* Projects */ + +.project-section { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 2em; + width: 100%; +} + +#AltTitle { + color: #204359; + margin-top: 0.25em; +} + +#searchInput { + padding: 0.625em; + border-radius: 0.625em; + font-family: "Lato"; + font-size: 1em; + width: 90%; + margin: 0 0 1em 0; + border: none; +} + +.projects-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 1em; + width: 100%; +} + +#NoProjects { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5em; + font-family: "Lato"; + font-size: 2em; + font-weight: bold; + color: #204359; +} + +.project { + display: flex; + flex-direction: row; + width: 90%; + background-color: #204359; + border-radius: 0.625em; +} + +.project-image { + width: 35%; +} + +.project-image img { + width: 100%; + height: auto; + border-radius: 0.625em; +} + +.project-info { + display: flex; + flex-direction: column; + gap: 0.5em; + width: 65%; + padding: 0 1em; +} + +/* Footer */ + +footer { + background-color: #204359; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} +.contactform { + width: 70%; +} +form { + text-align: left; +} +label { + font: 1em "Lato"; + color: #d2d9d8; +} +#contact { + padding-top: 17em; + margin-top: -17em; + width: 100%; +} +footer input { + padding: 0.625em; + border-radius: 0.625em; + font-family: "Lato"; + width: 97%; + margin: 0.625em 0; + border: none; +} +footer textarea { + padding: 0.625em; + border-radius: 0.625em; + font-family: "Lato"; + width: 97%; + margin: 0.625em 0 0 0; + resize: vertical; +} +#submit { + appearance: none; + -webkit-appearance: none; + padding: 0.625em; + border: none; + font: 1em "Lato"; + background-color: #a5d0e1; + color: #080d0c; + font-weight: 600; + border-radius: 5px; + width: 100%; + cursor: pointer; + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; +} +#submit:active, +#submit:hover { + background-color: #080d0c; + color: #a5d0e1; +} +.email { + font: 1em "Lato"; + color: #d2d9d8; + margin-top: 0.5em; + text-decoration: none; + display: flex; + gap: 0.5em; + align-items: center; +} +.email svg { + width: 1.5em; +} +.socials { + font: 1em "Lato"; + color: #d2d9d8; + margin: 1em 0; +} +.social-icons a { + color: #d2d9d8; + text-decoration: none; +} +.social-icons a:hover svg .st0 { + fill: #a5d0e1; +} +.icon { + width: 2.5em; +} + +/* Media Queries */ + +@media only screen and (max-width: 425px) { + header nav { + display: none; + } + .contactform { + width: 80%; + } +} diff --git a/projects/projects.js b/projects/projects.js new file mode 100644 index 0000000..028312c --- /dev/null +++ b/projects/projects.js @@ -0,0 +1,67 @@ +// Hover effect for the navigation links +const navLinks = document.querySelectorAll("nav a"); + +navLinks.forEach((navLink) => { + navLink.addEventListener("mouseover", () => { + navLink.classList.add("active"); + }); + + navLink.addEventListener("mouseout", () => { + navLink.classList.remove("active"); + }); +}); + +// Project Information +const project_container = document.querySelector(".projects-container"); + +// Fetch the projects from the JSON file +fetch("../projects.json") + .then((response) => response.json()) + .then((data) => { + displayProjects(data); + }); + +// Display the projects +function displayProjects(data) { + project_container.innerHTML = ""; // Clear the projects container + + if (data.length === 0) { + const noProjectsElement = document.createElement("div"); + noProjectsElement.id = "NoProjects"; + noProjectsElement.textContent = "No Projects Found"; + cardContainer.appendChild(noProjectsElement); + } else { + data.forEach((project) => { + // Create the project element + const projectElement = document.createElement("div"); + projectElement.classList.add("project"); + + // Create the project image + const projectImageContainer = document.createElement("div"); + projectImageContainer.classList.add("project-image"); + const projectImage = document.createElement("img"); + projectImage.src = `../` + project.backgroundImage; + projectImage.alt = project.cardName; + projectImageContainer.appendChild(projectImage); + + // Create the project information + const projectInfo = document.createElement("div"); + projectInfo.classList.add("project-info"); + projectInfo.innerHTML = ` +

${project.cardName}

+

${project.description}

+
+ Live Demo + Source Code +
+ `; + + // Add the image and information to the project element + projectElement.appendChild(projectImageContainer); + projectElement.appendChild(projectInfo); + + // Add the project to the container + project_container.appendChild(projectElement); + }); + } +} From 1705de08b60a09159143d3885e2b6a1286e68325 Mon Sep 17 00:00:00 2001 From: Web-Jose <119899203+Web-Jose@users.noreply.github.com> Date: Tue, 20 Feb 2024 12:15:03 -0800 Subject: [PATCH 2/4] Update padding and width in projects.css --- projects/index.html | 2 ++ projects/projects.css | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/projects/index.html b/projects/index.html index 00b49c7..58a0aae 100644 --- a/projects/index.html +++ b/projects/index.html @@ -94,6 +94,8 @@ +
+

Projects

Date: Wed, 28 Feb 2024 16:56:12 -0800 Subject: [PATCH 3/4] Update web design and experience section --- index.html | 70 ++++++++++++++++++++++++++++++------------- portfolio.css | 17 +++++++++-- projects/projects.css | 8 ++--- projects/projects.js | 10 +++---- 4 files changed, 70 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 1205413..64ac2d5 100644 --- a/index.html +++ b/index.html @@ -566,52 +566,80 @@

Education

- -

Experience

- Web Designer with Fresno State Student Housing - May 2023 - Present + Web Designer/ Developer with Fresno State Student Housing + May 2023 - Present
- As a Web Designer, I am responsible for designing, coding, and - modifying the Student Housing website. I work closely with the - Student Housing team to ensure that the website is up-to-date - and user-friendly. I also collaborate with the Student Housing - Marketing team to ensure that the website is aesthetically - pleasing and consistent with the Student Housing brand. + As the Web Designer for Fresno State Student Housing, I play a + critical role in enhancing the digital presence and user + experience for our campus community. Under the direct + supervision of the Marketing and Summer Conference Coordinator, + my responsibilities are tailored to support the vibrant and + dynamic environment of Student Housing through strategic web + design and maintenance. -
- My responsibilities include: + My responsibilities include:
  • - Designing and implementing new features and functionality + Overseeing the planning, development, and routine maintenance + of the Student Housing website to align with marketing + objectives and user expectations. +
    • +
  • + Designing and implementing user-friendly features and + functionalities, focusing on the ease of navigation, + interaction, and accessibility, to foster an engaging online + experience.
    • -
  • Establishing and guiding the website’s architecture
  • - Ensuring high-performance and availability, and managing all - technical aspects of the CMS + Collaborating closely with the Student Housing and Marketing + teams to ensure the website's content, usability, and design + are up-to-date and reflect the brand's values and aesthetics.
  • - Helping formulate an effective, responsive design and turning - it into a working theme and plugin + Troubleshooting and resolving website operational issues, + maintaining high performance and availability, and managing + technical aspects of the CMS.
  • - Working closely with both the Student Housing and Marketing - teams to ensure that the website is up-to-date and - user-friendly + Enhancing the visual appeal and functionality of the website + through graphic design, layout adjustments, and content + updates. +
    • +
  • + Maintaining digital signage content, ensuring the information + is current and visually appealing to enhance resident + engagement.
+
diff --git a/portfolio.css b/portfolio.css index 359560b..c8e782f 100644 --- a/portfolio.css +++ b/portfolio.css @@ -322,8 +322,8 @@ section[id] { align-items: center; } .ExperienceContainer { - display: flex; width: 94%; + display: flex; } .Experience { display: flex; @@ -351,6 +351,14 @@ section[id] { color: #d2d9d8; margin: 0.25em 0; width: 100%; + gap: 0.5em; +} + +ul { + margin: 0; +} +ul li { + line-height: 1.25; } /* Projects Section */ @@ -643,7 +651,12 @@ footer textarea { } .ExpTitle { flex-direction: column; - gap: 0.5rem; + gap: 0.25rem; + margin: 0; + } + .JobDate { + font: bold 0.75em "Lato"; + text-align: right; } .card { width: 90%; diff --git a/projects/projects.css b/projects/projects.css index 6afcf01..93967f7 100644 --- a/projects/projects.css +++ b/projects/projects.css @@ -135,16 +135,12 @@ body { width: 95%; background-color: #204359; border-radius: 0.625em; + overflow: hidden; } .project-image { width: 35%; -} - -.project-image img { - width: 100%; - height: auto; - border-radius: 0.625em; + object-fit: cover; } .project-info { diff --git a/projects/projects.js b/projects/projects.js index 028312c..45c4de8 100644 --- a/projects/projects.js +++ b/projects/projects.js @@ -37,19 +37,17 @@ function displayProjects(data) { projectElement.classList.add("project"); // Create the project image - const projectImageContainer = document.createElement("div"); - projectImageContainer.classList.add("project-image"); const projectImage = document.createElement("img"); + projectImage.classList.add("project-image"); projectImage.src = `../` + project.backgroundImage; projectImage.alt = project.cardName; - projectImageContainer.appendChild(projectImage); // Create the project information const projectInfo = document.createElement("div"); projectInfo.classList.add("project-info"); projectInfo.innerHTML = ` -

${project.cardName}

-

${project.description}

+ ${project.cardName} + ${project.description}
Live Demo Source Code @@ -57,7 +55,7 @@ function displayProjects(data) { `; // Add the image and information to the project element - projectElement.appendChild(projectImageContainer); + projectElement.appendChild(projectImage); projectElement.appendChild(projectInfo); // Add the project to the container From efdc131540a06691414bf5b88eaba9eea515286b Mon Sep 17 00:00:00 2001 From: Web-Jose <119899203+Web-Jose@users.noreply.github.com> Date: Thu, 29 Feb 2024 09:44:02 -0800 Subject: [PATCH 4/4] Update project layout and styles --- projects/projects.css | 88 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 4 deletions(-) diff --git a/projects/projects.css b/projects/projects.css index 93967f7..fe16d09 100644 --- a/projects/projects.css +++ b/projects/projects.css @@ -83,6 +83,7 @@ body { align-items: center; padding-top: 5em; margin: 0; + width: 100%; } /* Projects */ @@ -92,7 +93,7 @@ body { flex-direction: column; align-items: center; padding-bottom: 2em; - width: 100%; + width: 95%; } #AltTitle { @@ -105,7 +106,7 @@ body { border-radius: 0.625em; font-family: "Lato"; font-size: 1em; - width: calc(95% - 1.25em); + width: calc(100% - 1.25em); margin: 0 0 1em 0; border: none; } @@ -132,7 +133,7 @@ body { .project { display: flex; flex-direction: row; - width: 95%; + width: 100%; background-color: #204359; border-radius: 0.625em; overflow: hidden; @@ -148,7 +149,42 @@ body { flex-direction: column; gap: 0.5em; width: 65%; - padding: 0 1em; + padding: 1em; +} + +.ProjectTitle { + font: bold 1.5em "Lato"; + color: #d2d9d8; +} + +.ProjectDesc { + font: 1em "Lato"; + color: #d2d9d8; +} + +.buttons { + display: flex; + gap: 0.5em; + padding: 0.5em 0; + justify-content: flex-end; +} + +.buttons a { + padding: 0.25em 0.5em; + border-radius: 0.625em; + font: bold 1em "Lato"; + text-decoration: none; + color: #204359; + background-color: #d2d9d8; + transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, + transform 0.3s ease-in-out; +} + +.buttons a:hover, +.buttons a:active { + background-color: #a5d0e1; + color: #080d0c; + transform: scale(1.05); } /* Footer */ @@ -247,4 +283,48 @@ footer textarea { .contactform { width: 80%; } + .project { + flex-direction: column; + } + .project-image { + width: 100%; + } + .project-info { + width: calc(100% - 1em); + flex-wrap: wrap; + padding: 0.5em; + } + .ProjectTitle { + text-align: center; + } + .buttons { + justify-content: center; + } +} + +/* Tablet */ +@media only screen and (min-width: 426px) and (max-width: 768px) { + .buttons { + padding: 0; + } +} + +/* Laptop Xl */ + +@media only screen and (min-width: 1025px) { + #AltTitle { + font-size: 3em; + } + #searchInput { + font-size: 1.5em; + } + .ProjectTitle { + font-size: 2em; + } + .ProjectDesc { + font-size: 1.25em; + } + .buttons a { + font-size: 1.25em; + } }