From 2cc1377821dabb7294ece103c75337b95f66eda5 Mon Sep 17 00:00:00 2001 From: hugh5 Date: Sun, 28 Apr 2024 21:09:59 +1000 Subject: [PATCH] added testimonials page --- css/style.css | 92 ++++++++++++++++++++++++++++- images/connor.png | Bin 0 -> 1545 bytes images/harrison.png | Bin 0 -> 1542 bytes images/lorenzo.png | Bin 0 -> 1549 bytes js/script.js | 77 +++++++++++++++++++++--- testimonials.html | 140 ++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 300 insertions(+), 9 deletions(-) create mode 100644 images/connor.png create mode 100644 images/harrison.png create mode 100644 images/lorenzo.png create mode 100644 testimonials.html diff --git a/css/style.css b/css/style.css index 12a7365..e978fc2 100644 --- a/css/style.css +++ b/css/style.css @@ -3,11 +3,12 @@ :root { - --accent-color: #9B70ff; + --background-color: #808080; /* Dark theme */ body[data-theme="dark"] { + --accent-color: #9B70ff; --background-color: #141414; --secondary-background-color: #525252; --secondary-background-color-rgb: 82, 82, 82; @@ -19,6 +20,7 @@ /* Light theme */ body[data-theme="light"] { + --accent-color: #3a47f0; --background-color: #ececec; --secondary-background-color: #fff; --secondary-background-color-rgb: 255, 255, 255; @@ -177,6 +179,11 @@ footer a { .theme-button { position: fixed; top: 20px; + + @media (min-width: 801px) and (max-width: 960px) { + top: 80px; + } + right: 20px; width: 50px; height: 50px; @@ -486,4 +493,87 @@ ul { background-color: var(--accent-color); } } +} + +#testimonials { + width: 1000px; +} + +.split-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + width: 100%; + padding: 20px 0; + + @media (max-width: 800px) { + grid-template-columns: 1fr; + } +} + +.linear-grid { + display: grid; + grid-template-columns: 1fr; + gap: 40px; + width: 100%; + height: min-content; +} + +.card { + display: flex; + flex-direction: row; + height: min-content; + border-radius: 25px; + background-color: var(--secondary-background-color); + padding: 15px; + cursor: pointer; + border: 2px solid transparent; + + @media (max-width: 800px) { + flex-direction: column; + } + + &:hover { + background-color: var(--tertiary-background-color); + } + + &.active { + background-color: var(--tertiary-background-color); + border: 2px solid var(--accent-color); + } + +} + +.testimonial-image { + border-radius: 50%; + width: 120px; + height: 120px; + object-fit: cover; + display: block; + + @media (max-width: 800px) { + width: 60px; + height: 60px; + } +} + +.card-content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-left: 20px; + line-height: 2; + + @media (max-width: 800px) { + margin-left: 0; + } +} + +.testimonial { + display: none; + font-size: 20px; + padding: 40px; + border-radius: 25px; + background-color: var(--tertiary-background-color); } \ No newline at end of file diff --git a/images/connor.png b/images/connor.png new file mode 100644 index 0000000000000000000000000000000000000000..00a79112d32ca614cd38207c5cd1814603c06fc4 GIT binary patch literal 1545 zcmeAS@N?(olHy`uVBq!ia0y~yU|a&i985rwk9x&p*tY!cvDCZw^6$)M$LG(%`se)V}p1LeqlvvPYr@;|u!H-0a}0iGmwl@8en3S|yW zHyAl-%gMQ{X8XQBbMvyB=aav3g@1CZpKo3@^E97_fVG0-n+BGR%tA+oB`0yVS*AVE z;}4>Ly6YF;q;)vcD?V}9v)%C6D_Mqn=ThmHvT(SBhRON%D^|N3pZ`VdJ@ob4XCOIs zkKq0odSoK{dlepvhjM!i(=UDgH^Z3YhtBUxpBaxf4c8otD2{gY8iu`R_)w-tzcT8f dIs?Q1|0gw+JOV$rRs)N822WQ%mvv4FO#nUb^`8I$ literal 0 HcmV?d00001 diff --git a/images/harrison.png b/images/harrison.png new file mode 100644 index 0000000000000000000000000000000000000000..70831a14e873e8609c40b4d7faa01d0812f6f4b7 GIT binary patch literal 1542 zcmeAS@N?(olHy`uVBq!ia0y~yU|a&i985rwk9x=bM;?j_`R1SSvWbX<*qnEIBuhP3!wBb9+|d z`qwYj1HSBw&ulwAoV~nlE~kfn_7J z5N$aY$JA`&&TouNes}%$JJF27{(H~P)6aH#`EsP$(~|t1>Hgb~Rqx^+9tKCO-OC#G zBe$O=m2ZlEqO|e!&vlo0&PUKEg^jeZr+uD$kH5~5WT~0{`>UD3Q;8Xc zNyhCa&!)($q#w~A?(zF@)3sZBnGekWoX)P&Av-~#%%SN9BWDs#Ie%Cf82FVdQ&MBb@05+5Rw*UYD literal 0 HcmV?d00001 diff --git a/js/script.js b/js/script.js index 1dd2bec..8952c52 100644 --- a/js/script.js +++ b/js/script.js @@ -1,25 +1,45 @@ +/** + * Sets the appearance of the page to light mode + */ function setLightMode() { + // Set the theme attribute to light $("body").attr("data-theme", "light"); + // Change the theme icon to the light theme icon $(".theme-icon").attr("src", "images/light-theme.png"); + // Save the theme to local storage window.localStorage.setItem("data-theme", "light"); } +/** + * Sets the appearance of the page to dark mode + */ function setDarkMode() { + // Set the theme attribute to dark $("body").attr("data-theme", "dark"); + // Change the theme icon to the dark theme icon $(".theme-icon").attr("src", "images/dark-theme.png"); + // Save the theme to local storage window.localStorage.setItem("data-theme", "dark"); } +/** + * Toggle the theme between light and dark mode + */ function toggleTheme() { - // Toggle between light and dark mode if (isLightMode) { + // If the current theme is light, set the dark theme setDarkMode(); } else { + // If the current theme is dark, set the light theme setLightMode(); } + // Toggle the theme variable isLightMode = !isLightMode; } +/** + * Load the theme toggle based on the current theme + */ function loadThemeToggle() { if (isLightMode) { setLightMode(); @@ -28,6 +48,11 @@ function loadThemeToggle() { } } +/** + * Performs the following actions when the page is loaded: + * 1. Highlight the current page in the nav menu + * 2. Show/hide the nav menu on mobile using a button + */ function loadNav() { // Determine the current page var path = window.location.pathname; @@ -46,17 +71,24 @@ function loadNav() { // Show/hide the nav menu on mobile using the menu image $("nav > .menu-image").on("click", function () { - $("nav > .menu-item").slideToggle(150); + $("nav > .menu-item").slideToggle(200); }); } +/** + * Perform the following actions when the page is scrolled: + * 1. Add event listener to make sure the navbar is shown when the window is resized + * 2. Add event listener to show/hide the navbar and theme toggle on scroll + */ function loadScrollBehavior() { // Show the nav menu when the window is resized $(window).resize(function () { - if ($(window).width() > 800) { + if (window.innerWidth > 800) { + $("nav").show(); $("nav > .menu-item").show(); } else { $("nav").show(); + $("nav > .menu-item").hide(); } }); @@ -72,12 +104,12 @@ function loadScrollBehavior() { // Otherwise, if the scroll direction is down, hide the navbar if (current < 20 || (current < lastScroll && current < scrollMax)) { // Scroll up, show the navbar - $("nav").show(150); - $(".theme-button").show(150); + $("nav").fadeIn(150); + $(".theme-button").fadeIn(150); } else if (current > lastScroll) { // Scroll down, hide the navbar - $("nav").hide(150); - $(".theme-button").hide(150); + $("nav").fadeOut(350); + $(".theme-button").fadeOut(350); } lastScroll = current; }); @@ -131,7 +163,9 @@ function updateSlider(projectname) { } /** - * Load the image sliders for each project on the Projects page + * Perform the following actions when the page is loaded: + * 1. Set the content for the first image for each project + * 2. Add click event listeners to the left and right arrows to change the image */ function loadImageSliders() { // For each project, set the content for the first image @@ -168,6 +202,30 @@ function loadImageSliders() { }); } +/** + * Add click event listeners to the cards on the Testimonials page + * to show the testimonial for the clicked card + */ +function loadTestimonials() { + // Add click event listeners to the cards + $("#testimonials .card").each(function () { + // On click, show the testimonial for the clicked card + // Hide the testimonial for the other cards + $(this).on("click", function () { + let id = $(this).attr("id"); + // Remove the active class for the other cards + $("#testimonials .card").not(this).removeClass("active"); + $("p.testimonial").not(`p#${id}`).slideUp(300); + + // Add the active class for the clicked card + $(this).addClass("active"); + $(`p#${id}`).slideDown(300); + }); + }); + $("#testimonials .card").first().addClass("active"); + $("p.testimonial").first().show(); +} + // Holds the current theme mode let isLightMode = window.localStorage.getItem("data-theme") === "light"; @@ -190,5 +248,8 @@ $(function () { for (let i = 1; i <= numProjects; i++) { counts[`project${i}`] = $(`#project${i} > .content`).length; } + // Projects page loadImageSliders(); + // Testimonials page + loadTestimonials(); }); diff --git a/testimonials.html b/testimonials.html new file mode 100644 index 0000000..0a295d2 --- /dev/null +++ b/testimonials.html @@ -0,0 +1,140 @@ + + + + + + Hugh's Portfolio | Testimonials + + + + + + +
+ +
+ +
+
+
+
+
+ Testimonial 1 +
+

Connor

+

Penetration Tester - IBM

+
+
+
+ Testimonial 1 +
+

Harrison

+

AI Engineer - OpenAI

+
+
+
+ Testimonial 1 +
+

Lorenzo

+

Software Engineer - Netflix

+
+
+
+
+

+ "Hugh is not just a mobile app developer; he is a + problem solver, a creative thinker, and a true + collaborator. I had the pleasure of working with him + on a project that required innovative solutions and + tight deadlines, and he exceeded expectations at + every turn. His ability to communicate complex + technical concepts in a clear and concise manner + made him an invaluable member of our team. With his + passion for excellence and drive to push boundaries, + I have no doubt that Hugh will continue to achieve + great things in his career." +

+

+ "Hugh is a true asset to any team. His passion for + mobile development is evident in the quality of work + they deliver. I had the pleasure of collaborating + with him on a challenging project, and I was + consistently impressed by his ability to tackle + complex problems with creativity and efficiency. His + commitment to continuous learning and growth is + admirable, making him a valuable addition to any + organization." +

+

+ "As a mentor to Hugh, I've had the privilege of + witnessing his growth and development firsthand. His + enthusiasm for exploring new ideas and technologies + is matched only by his dedication to mastering them. + Hugh approaches every task with a positive attitude + and a willingness to learn, making him a standout in + their field. I have no doubt that he will continue + to excel in his career and make significant + contributions to the world of mobile development." +

+
+
+
+
+ + +