Skip to content

sving updates and implementation of tailwind #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FelixS2000 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

sving updates and implementation of tailwind #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 100 additions & 97 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,107 +2,110 @@
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Felix Guzman - Personal Website</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Felix Guzman - Personal Website</title>

<!-- box icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
<!-- Box Icons -->
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

<!-- custom css -->
<link rel="stylesheet" href="styles.css" />
<!-- Tailwind CSS -->
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<!-- header design -->
<header>
<img src="https://felixc2000.github.io/FelixProjects/felix.png" alt="Felix Guzman's Profile Picture">
<h1>Felix Guzman</h1>
<p class="typed"></p>
</header>

<!-- home section design -->
<nav>
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About Me</a></li>
<!-- Add more navigation links as needed -->
</ul>
</nav>

<!-- projects section design -->
<section id="projects">
<h2>My Projects</h2>
<!-- Add links and descriptions to your projects -->
<div class="project">
<h3>AdviWeather</h3>
<p>AdviWeather is a weather app that provides weather information, forecasts, and a 5-day outlook for any
location in the world.</p>
<a href="https://felixc2000.github.io/FelixProjects/AdviWeather/">Visit AdviWeather</a>
</div>

<div class="project">
<h3>RecipeFinder</h3>
<p>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.</p>
<a href="https://felixc2000.github.io/FelixProjects/RecipeFinder/">Visit RecipeFinder</a>
</div>

<div class="project">
<h3>CurrencyFlipper</h3>
<p>CurrencyFlipper is a currency converter web app that supports 150+ currencies. It also provides exchange rate
forecasts based on historical data.</p>
<a href="https://felixc2000.github.io/FelixProjects/CurrencyFlipper/">Visit CurrencyFlipper</a>
</div>

<div class="project">
<h3>New Year CountDown</h3>
<p>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.</p>
<a href="https://felixc2000.github.io/FelixProjects/NewYearCountDown">Visit NewYearCountDown</a>
</div>
</section>

<!-- about section design -->
<section id="about">
<h2>About Me</h2>
<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>
</section>

<!-- footer design -->
<footer>
<p>&copy; 2024 Felix Guzman. All rights reserved.</p>
</footer>

<!-- scroll reveal -->
<script src="https://unpkg.com/scrollreveal"></script>

<!-- typed js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<!-- custom js -->
<script src="script.js"></script>
<body class="bg-bg-color text-text-color font-poppins scroll-smooth">

<!-- Header -->
<header class="text-center p-8 bg-second-bg-color">
<img src="https://felixc2000.github.io/FelixProjects/felix.png"
alt="Felix Guzman's Profile Picture"
class="mx-auto w-24 h-24 rounded-full">
<h1 class="text-4xl font-bold mt-4">Felix Guzman</h1>
<p class="typed mt-2 text-lg font-light"></p>
</header>

<!-- Navigation -->
<nav class="bg-main-color text-text-color">
<ul class="flex justify-around py-4 text-lg font-semibold">
<li><a href="#projects" class="hover:underline">Projects</a></li>
<li><a href="#about" class="hover:underline">About Me</a></li>
</ul>
</nav>

<!-- Projects Section -->
<section id="projects" class="py-12 px-6 text-center">
<h2 class="text-3xl font-bold mb-8">My Projects</h2>

<div class="space-y-10">
<div class="project">
<h3 class="text-2xl font-semibold">AdviWeather</h3>
<p class="mt-2 mb-4">AdviWeather is a weather app that provides weather information, forecasts, and a 5-day
outlook for any location in the world.</p>
<a href="https://felixc2000.github.io/FelixProjects/AdviWeather/"
class="text-main-color hover:underline font-medium">Visit AdviWeather</a>
</div>

<div class="project">
<h3 class="text-2xl font-semibold">RecipeFinder</h3>
<p class="mt-2 mb-4">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.</p>
<a href="https://felixc2000.github.io/FelixProjects/RecipeFinder/"
class="text-main-color hover:underline font-medium">Visit RecipeFinder</a>
</div>

<div class="project">
<h3 class="text-2xl font-semibold">CurrencyFlipper</h3>
<p class="mt-2 mb-4">CurrencyFlipper is a currency converter web app that supports 150+ currencies. It also
provides exchange rate forecasts based on historical data.</p>
<a href="https://felixc2000.github.io/FelixProjects/CurrencyFlipper/"
class="text-main-color hover:underline font-medium">Visit CurrencyFlipper</a>
</div>

<div class="project">
<h3 class="text-2xl font-semibold">New Year CountDown</h3>
<p class="mt-2 mb-4">A user-friendly countdown app for the New Year with festive visuals and optional reminders to
celebrate with joy and anticipation.</p>
<a href="https://felixc2000.github.io/FelixProjects/NewYearCountDown"
class="text-main-color hover:underline font-medium">Visit NewYearCountDown</a>
</div>
</div>
</section>

<!-- About Section -->
<section id="about" class="py-12 px-6 text-center">
<h2 class="text-3xl font-bold mb-8">About Me</h2>

<div class="space-y-6 max-w-4xl mx-auto text-base leading-relaxed">
<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>Beyond technical skills, I hold a PathwayConnect Certificate from BYU-Pathway Worldwide, emphasizing effective
communication, leadership, and problem-solving.</p>
</div>
</section>

<!-- Footer -->
<footer class="text-center py-4 bg-second-bg-color text-sm text-text-color">
<p>&copy; 2024 Felix Guzman. All rights reserved.</p>
</footer>

<!-- Scroll Reveal -->
<script src="https://unpkg.com/scrollreveal"></script>

<!-- Typed.js -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<!-- Custom Script -->
<script src="script.js"></script>

</body>

</html>
11 changes: 11 additions & 0 deletions input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
}
94 changes: 76 additions & 18 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: '|'
});
}
});
3 changes: 3 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
23 changes: 23 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: [],
}