From fefceeceb66bfe234758b6c84ac63e0b57caeabc Mon Sep 17 00:00:00 2001 From: Felix Samuel Guzman Ceri <113263790+FelixS2000@users.noreply.github.com> Date: Wed, 11 Jun 2025 15:30:42 -0400 Subject: [PATCH] sving updates and implementation of tailwind --- index.html | 197 +++++++++++++++++++++++---------------------- input.css | 11 +++ script.js | 94 ++++++++++++++++----- styles.css | 3 + tailwind.config.js | 23 ++++++ 5 files changed, 213 insertions(+), 115 deletions(-) create mode 100644 input.css create mode 100644 tailwind.config.js diff --git a/index.html b/index.html index 1f28320..5cb9c92 100644 --- a/index.html +++ b/index.html @@ -2,107 +2,110 @@ - - - - Felix Guzman - Personal Website + + + + Felix Guzman - Personal Website - - + + - - + + - - -
- Felix Guzman's Profile Picture -

Felix Guzman

-

-
- - - - - -
-

My Projects

- -
-

AdviWeather

-

AdviWeather is a weather app that provides weather information, forecasts, and a 5-day outlook for any - location in the world.

- Visit AdviWeather -
- -
-

RecipeFinder

-

RecipeFinder is a web app that allows users to search for recipes using ingredients, dishes, or cuisines. It - also provides a list of recently viewed recipes.

- Visit RecipeFinder -
- -
-

CurrencyFlipper

-

CurrencyFlipper is a currency converter web app that supports 150+ currencies. It also provides exchange rate - forecasts based on historical data.

- Visit CurrencyFlipper -
- -
-

New Year CountDown

-

New Year Countdown App is a user-friendly application designed to keep users excited and engaged as they - eagerly anticipate the arrival of the New Year. The app features a dynamic countdown timer, festive visual - elements, and optional customizable reminders, offering a delightful and interactive experience to help - users usher in the upcoming year with joy and anticipation.

- Visit NewYearCountDown -
-
- - -
-

About Me

-

Welcome to my personal corner of the web! I'm Felix Guzman, a passionate Web Developer with a knack for - crafting digital experiences. I am on a journey to explore the vast realms of technology and create - innovative solutions that leave a lasting impression.

- -

My academic background includes a Bachelor's degree in Software Development from Brigham Young University - - Idaho, where I honed my skills in developing applications across diverse domains. During my studies, I - delved into the world of web development, creating visually captivating, user-centric websites that adhere - to industry standards and best practices. I'm always eager to leverage cutting-edge technologies to elevate - my programming skills and efficiency.

- -

As a proud recipient of an Associate Certificate in Web & Computer Programming, I have engineered Single Page - Applications (SPAs) using JavaScript and node.js. My approach to projects involves orchestrating seamless - teamwork, promoting robust collaboration, and effective communication. I enjoy integrating APIs into - websites to enhance functionality and user satisfaction. I'm also adept at utilizing tools like Trello for - streamlined project management, both individually and collaboratively.

- -

Beyond my technical skills, I hold a PathwayConnect Certificate from BYU-Pathway Worldwide, emphasizing - proficiency in English language, effective online collaboration, and the nurturing of leadership and - problem-solving skills.

-
- - - - - - - - - - - - + + + +
+ Felix Guzman's Profile Picture +

Felix Guzman

+

+
+ + + + + +
+

My Projects

+ +
+
+

AdviWeather

+

AdviWeather is a weather app that provides weather information, forecasts, and a 5-day + outlook for any location in the world.

+ Visit AdviWeather +
+ +
+

RecipeFinder

+

RecipeFinder is a web app that allows users to search for recipes using ingredients, dishes, + or cuisines. It also provides a list of recently viewed recipes.

+ Visit RecipeFinder +
+ +
+

CurrencyFlipper

+

CurrencyFlipper is a currency converter web app that supports 150+ currencies. It also + provides exchange rate forecasts based on historical data.

+ Visit CurrencyFlipper +
+ +
+

New Year CountDown

+

A user-friendly countdown app for the New Year with festive visuals and optional reminders to + celebrate with joy and anticipation.

+ Visit NewYearCountDown +
+
+
+ + +
+

About Me

+ +
+

Welcome to my personal corner of the web! I'm Felix Guzman, a passionate Web Developer with a knack for + crafting digital experiences. I am on a journey to explore the vast realms of technology and create innovative + solutions that leave a lasting impression.

+ +

My academic background includes a Bachelor's degree in Software Development from Brigham Young University - Idaho, + where I honed my skills in developing applications across diverse domains.

+ +

I’ve engineered SPAs using JavaScript and Node.js, integrated APIs, and managed projects efficiently using + tools like Trello. My approach is focused on teamwork, collaboration, and effective communication.

+ +

Beyond technical skills, I hold a PathwayConnect Certificate from BYU-Pathway Worldwide, emphasizing effective + communication, leadership, and problem-solving.

+
+
+ + + + + + + + + + + + + diff --git a/input.css b/input.css new file mode 100644 index 0000000..70ddd1e --- /dev/null +++ b/input.css @@ -0,0 +1,11 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* Variables para selección */ +*::selection { + background: theme('colors.main-color'); + color: theme('colors.bg-color'); +} diff --git a/script.js b/script.js index bb1de90..82a122f 100644 --- a/script.js +++ b/script.js @@ -1,22 +1,80 @@ -document.addEventListener("DOMContentLoaded", function() { - // Display the current date in the footer +document.addEventListener("DOMContentLoaded", () => { + // Footer: current date const currentDate = new Date(); - const options = { year: 'numeric', month: 'long', day: 'numeric' }; - const formattedDate = currentDate.toLocaleDateString('en-US', options); - document.querySelector("footer p").innerHTML += ` ${formattedDate}`; - - // Scroll reveal animation - ScrollReveal().reveal('#projects, #about', { - distance: '60px', - duration: 2500, - delay: 400 + const formattedDate = currentDate.toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' }); + const footerParagraph = document.querySelector("footer p"); + if (footerParagraph) { + footerParagraph.innerHTML += ` - ${formattedDate}`; + } - // Typed.js animation for header - new Typed('.typed', { - strings: ['Web Developer', 'Creative Thinker', 'Problem Solver'], - typeSpeed: 60, - backSpeed: 60, - loop: true - }); + // ScrollReveal: advanced animation per section + if (typeof ScrollReveal !== "undefined") { + ScrollReveal().reveal('header', { + origin: 'top', + distance: '60px', + duration: 1000, + delay: 100, + opacity: 0, + reset: true + }); + + ScrollReveal().reveal('nav', { + origin: 'left', + distance: '80px', + duration: 1000, + delay: 300, + opacity: 0, + reset: true + }); + + ScrollReveal().reveal('#projects h2', { + origin: 'top', + distance: '50px', + duration: 800, + delay: 300, + reset: true + }); + + ScrollReveal().reveal('.project', { + interval: 200, + origin: 'bottom', + distance: '40px', + duration: 800, + opacity: 0, + reset: true + }); + + ScrollReveal().reveal('#about h2, #about p', { + origin: 'right', + distance: '60px', + duration: 900, + delay: 200, + reset: true + }); + + ScrollReveal().reveal('footer', { + origin: 'bottom', + distance: '40px', + duration: 1000, + delay: 500, + reset: true + }); + } + + // Typed.js animated subtitle + if (typeof Typed !== "undefined") { + new Typed('.typed', { + strings: ['Web Developer', 'Creative Thinker', 'Problem Solver'], + typeSpeed: 60, + backSpeed: 60, + backDelay: 1200, + loop: true, + showCursor: true, + cursorChar: '|' + }); + } }); diff --git a/styles.css b/styles.css index 55dfb5a..d2fb74a 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); +@tailwind base; +@tailwind components; +@tailwind utilities; * { margin: 0; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..96fa612 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,23 @@ +// tailwind.config.js +module.exports = { + content: ["./*.html", "./*.js"], + theme: { + extend: { + animation: { + fadeIn: "fadeIn 1s ease-in forwards", + fadeInUp: "fadeInUp 1s ease-in forwards", + }, + keyframes: { + fadeIn: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + fadeInUp: { + '0%': { opacity: '0', transform: 'translateY(20px)' }, + '100%': { opacity: '1', transform: 'translateY(0)' }, + }, + }, + }, + }, + plugins: [], +}