diff --git a/css/preloader.css b/css/preloader.css index 9c7e427..d4cdcaa 100644 --- a/css/preloader.css +++ b/css/preloader.css @@ -1,7 +1,7 @@ .loader-bg { position: fixed; z-index: 99999; - background-color: #171717; + background-color: #000000; width: 100%; height: 100%; } diff --git a/css/responsive.css b/css/responsive.css index 7e25949..8970ffa 100644 --- a/css/responsive.css +++ b/css/responsive.css @@ -132,7 +132,7 @@ padding-top: 120px; } - .enlace1{font-size: .8em;} + .DownArrow{font-size: .8em;} h2.texto1{ text-align: center; font-size: 1.5em; diff --git a/css/style.css b/css/style.css index 7b73c58..8e10a50 100644 --- a/css/style.css +++ b/css/style.css @@ -216,42 +216,67 @@ CLIENTS SECTION } - -.enlace1{ - color:white; - padding-top:2.8em; - display:inline-block;/* or block */ - position:relative; - border-color:white; - text-decoration:none; - transition:all .3s ease-out; - font-size: 1.5em; - +.DownArrow { + color: black; + padding-top: 2.8em; + display: inline-block; + position: relative; + border-color: white; + + transition: all 0.3s ease-out; + font-size: 1.5em; } -.enlace1:before{ - content:'▲'; - font-size:1.9em; - position:absolute; - top:0; - left:50%; - margin-left:-.7em; - border:solid .13em white; - border-radius:10em; - width:1.4em; - height:1.4em; - line-height:1.3em; - border-color:inherit; - transition:transform .5s ease-in; -} -.enlace1:hover{ - color:rgb(255, 255, 255); - border-color:rgb(255, 255, 255); -} -.enlace1:hover:before{ - transform: rotate(180deg); +.DownArrow:before { + content: '🢁'; + font-size: 1.9em; + position: absolute; + top: 0; + left: 50%; + margin-left: -0.7em; + border: solid 0.13em white; + border-radius: 50%; + width: 1.4em; + height: 1.4em; + line-height: 1.3em; + border-color: inherit; + box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7); /* Brillo desde el inicio */ + transition: transform 0.5s ease-in, box-shadow 0.3s ease-out, filter 0.3s ease-out; /* Añadida transición al filter */ + transform-origin: center; + filter: brightness(8) hue-rotate(90deg); /* Cambiado el brillo y el tono */ + animation: brillo 2s infinite; /* Añadida animación de brillo */ +} + +.DownArrow:hover { + color: rgb(255, 255, 255); + border-color: rgb(255, 255, 255); +} + +.DownArrow:hover:before { + transform: translateY(-2px) rotate(180deg); + box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7); /* Brillo al pasar el mouse */ + filter: brightness(2) hue-rotate(90deg); /* Cambiado el brillo y el tono */ + animation: brillo 2s infinite; /* Añadida animación de brillo */ +} + +/* Definición de la animación de brillo */ +@keyframes brillo { + 0% { + filter: brightness(2) hue-rotate(90deg); + } + 50% { + filter: brightness(4) hue-rotate(90deg); + } + 100% { + filter: brightness(2) hue-rotate(90deg); + } } + + + + + /*================================ CAROUSEL EXPERIENCE ================================*/ @@ -456,44 +481,14 @@ img{ -moz-box-shadow:0 0 3px rgba(0,0,0,0.3); box-shadow:0 0 3px rgba(0,0,0,0.3); width:100%; - max-width:1140px; + max-width:800px; } .opened img{ z-index:5; } -.ombra{ - position:absolute; - bottom:20px; - left:10px; - width:90%; - height:20px; - -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - -webkit-transform:rotate(-2deg); - -moz-transform:rotate(-2deg); - transform:rotate(-2deg); - display:none; - z-index:-1; -} - -.ombra:after{ - display:block; - content:""; - position:absolute; - bottom:-8px; - right:-93px; - width:90%; - height:20px; - -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - -webkit-transform:rotate(4deg); - -moz-transform:rotate(4deg); - transform:rotate(4deg); -} + .txt{ display:block; @@ -502,7 +497,7 @@ img{ width:98%; padding-left:2%; height:33px; - background: #000000; + background: #ffffff; } @@ -664,17 +659,17 @@ PORTFOLIO SECTION } } /*================================ -TESTIMONIAL SECTION +EXPERTISE SECTION ================================*/ -.clientsphoto img{ +.techImage img{ width: 80px; float: left; margin-right: 20px; border-radius: 50%; } -.clientsphoto img:hover{ +.techImage img:hover{ border-radius: 15%; } @@ -846,3 +841,37 @@ FOLLOW BUTTON background: #111; } +.arrow +{ + position: relative; + bottom: -2rem; + left: 50%; + margin-left:-20px; + width: 40px; + height: 40px; + + /** + * Dark Arrow Down + */ + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==); + background-size: contain; +} + +.bounce { + animation: bounce 2s infinite; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} + +/* Slider Boomerang */ + diff --git a/css/styles.css b/css/styles.css index a95cf80..389d1cc 100644 --- a/css/styles.css +++ b/css/styles.css @@ -619,3 +619,4 @@ outline: none; height: 640px; } } + diff --git a/img/after_effects.svg b/img/after_effects.svg deleted file mode 100644 index 114be52..0000000 --- a/img/after_effects.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/img/amazon.png b/img/amazon.png deleted file mode 100644 index 6207525..0000000 Binary files a/img/amazon.png and /dev/null differ diff --git a/img/apple-touch-icon-ipad-retina.png b/img/apple-touch-icon-ipad-retina.png deleted file mode 100644 index 383e0dd..0000000 Binary files a/img/apple-touch-icon-ipad-retina.png and /dev/null differ diff --git a/img/apple-touch-icon-ipad.png b/img/apple-touch-icon-ipad.png deleted file mode 100644 index 363a156..0000000 Binary files a/img/apple-touch-icon-ipad.png and /dev/null differ diff --git a/img/apple-touch-icon-iphone-retina.png b/img/apple-touch-icon-iphone-retina.png deleted file mode 100644 index 0306800..0000000 Binary files a/img/apple-touch-icon-iphone-retina.png and /dev/null differ diff --git a/img/apple-touch-icon-iphone.png b/img/apple-touch-icon-iphone.png deleted file mode 100644 index 5b5fdde..0000000 Binary files a/img/apple-touch-icon-iphone.png and /dev/null differ diff --git a/img/s1.png b/img/s1.png deleted file mode 100644 index 5f5b0b5..0000000 Binary files a/img/s1.png and /dev/null differ diff --git a/img/s2.png b/img/s2.png deleted file mode 100644 index acc73a4..0000000 Binary files a/img/s2.png and /dev/null differ diff --git a/img/s3.png b/img/s3.png deleted file mode 100644 index fba8e43..0000000 Binary files a/img/s3.png and /dev/null differ diff --git a/img/s4.png b/img/s4.png deleted file mode 100644 index d9f9206..0000000 Binary files a/img/s4.png and /dev/null differ diff --git a/img/s5.png b/img/s5.png deleted file mode 100644 index f4ae4b2..0000000 Binary files a/img/s5.png and /dev/null differ diff --git a/img/s6.png b/img/s6.png deleted file mode 100644 index 3df04dc..0000000 Binary files a/img/s6.png and /dev/null differ diff --git a/index.html b/index.html index 0957588..7551f05 100644 --- a/index.html +++ b/index.html @@ -77,10 +77,10 @@ + flood-color="#00000"/> - + @@ -97,7 +97,8 @@

Bienvenidos a mi portafolio

Descubre un poco de lo que me gusta y mis experiencias.

- Ver más + +

Ver más

@@ -169,13 +170,13 @@

¡Hola! Me llamo Rogelio Rold

Soy Ingeniero en computación, especializado en la programación de software.

-

Me apasiona mucho cada área de la tecnología, pero últimamente me encuentro más enfocado en el desarrollo de aplicaciones para la web, desktop y smartphones.

+

Me apasiona mucho cada área de la tecnología, pero últimamente me encuentro más enfocado en el desarrollo de aplicaciones para la web, desktop y smartphones.

- GitHub +

GitHub

- +
Contactame 🫡
@@ -214,28 +215,28 @@

He tenido la oportunidad de trabajar en:

-

Mobiik

-

Inicie en un proyecto de semilleros enfocado al desarrollo de programación en Java, y actualmente me encuentro trabajando en un proyecto para el SAT.

+

Mobiik/ Desarrollador Jr.

+

Formularios - C# y JavaScript. Desarrollador Jr. - Desarollo de paginas web con ASP.NET, Vue y SQL.

-

End to End

-

Trabaje en el área de soporte técnico de primer nivel, donde resolvía problemas con clientes directamente.

+

End to End / Contact Center

+

Trabaje en el área de soporte técnico de primer nivel, manteniendo y supervisando Puntos de venta, catalogos y sitios web en general.
-

Mercado Libre

+

Mercado Libre / Analista

Altas de pedidos, recolección de mercancía, ajustes y construcción de órdenes por producción.
-

Doc Solutions

+

Doc Solutions / Analista

Proyecto de digitalización de documentación de Infonavit, escaneo y revisión de documentos.

 @@ -276,72 +277,57 @@

Desarrollo, bases de datos, redes y más áreas son de mi interés

-
-
+
+
Java
-

He creado aplicaciones enfocadas al uso en PC, interfaces gráficas, hilos, sockets y muchas cosas más enfocadas al entorno laboral, todo con el framework de Spring Boot.

+

He creado aplicaciones enfocadas al uso en PC, interfaces gráficas, hilos, sockets y muchas cosas más enfocadas al entorno laboral, todo con el framework de Spring Boot.

-
Java
-

Spring boot, Maven

+
Java y C#
+
Spring boot, .NET
-
+
Web
-

El desarrollo de páginas web también es algo que he hecho con bastante frecuencia, portafolios, landing page e integración de servicios como Keycloak.

+

El desarrollo de páginas web también es algo que he hecho con bastante frecuencia, portafolios, landing page e integración de servicios como Keycloak.

Web
-

HTML, CSS, JavaScript

+
HTML, CSS, JavaScript
-
+
DB
-

El análisis, diseño, creación y mantenimiento de bases de datos también son algo que he realizado a lo largo de mi carrera, manejando relacionales y no relacionales.

+

El análisis, diseño, creación y mantenimiento de bases de datos también son algo que he realizado a lo largo de mi carrera, manejando relacionales y no relacionales.

Bases de datos
-

SQL Server, MySQL, MongoDB

+
SQL Server, MySQL
- -
-
- Flutter -
- -
-
-

Actualmente, me encuentro aprendiendo tecnologías enfocadas en el desarrollo móvil, siendo Flutter una de ellas.

-
-
Desarrollo Movil
-

Flutter

-
-
-
-
+

Experiencias

@@ -349,26 +335,25 @@

¡Explora mi viaje profesional!

-
+
- Portfolio img
- Mobiik -
+ Portfolio img +
Mobiik
+
Portfolio img
- End to End -
+

End to End

+
-
+
-
-
+ @@ -390,7 +375,6 @@

¡Explora mi viaje profesional!

- diff --git a/js/carouselportfolio.js b/js/carouselportfolio.js deleted file mode 100644 index 6226a8c..0000000 --- a/js/carouselportfolio.js +++ /dev/null @@ -1,111 +0,0 @@ -var radius = 140; // how big of the radius -var autoRotate = true; // auto rotate or not -var rotateSpeed = -60; // unit: seconds/360 degrees -var imgWidth = 120; // width of images (unit: px) -var imgHeight = 170; // height of images (unit: px) - -// Link of background music - set 'null' if you dont want to play background music -/* var bgMusicURL = 'https://api.soundcloud.com/tracks/143041228/stream?client_id=587aa2d384f7333a886010d5f52f302a'; -var bgMusicControls = true; // Show UI music control */ - -/* - NOTE: - + imgWidth, imgHeight will work for video - + if imgWidth, imgHeight too small, play/pause button in