diff --git a/assets/Styles/about.css b/assets/Styles/about.css index 9665d0a..52e5d46 100644 --- a/assets/Styles/about.css +++ b/assets/Styles/about.css @@ -18,7 +18,7 @@ .card__about { - overflow: hidden; + overflow: hidden; width: 31rem; height: 54rem; padding: 0 0 239px; @@ -26,7 +26,7 @@ flex-direction: column; justify-content: center; align-items: center; - background: rgba(255, 56, 152, 0.284); + background: rgb(20 0 51); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); @@ -34,19 +34,19 @@ border: 1px solid rgba(255, 255, 255, 0.18); } -.card-title { +.card-title p{ text-align: center; - color: var(--main-color); font-size: 2.5rem; font-weight: 700; margin-top: -6rem; + color: var(--green-terminal); } .card-title span { font-size: 2rem; font-weight: 500; - color: var(--purple); + color: var(--pink-terminal); } .card-photo { transform: scale(0.3) translate(226px, 747px); @@ -75,10 +75,11 @@ border: none; cursor: pointer; } -.icon__size{ +.about__icons{ width: 3rem; + filter: invert(100%); } -.icon__size:hover{ +.about__icons:hover{ transform: scale(1.2); } @@ -154,6 +155,7 @@ } .contactar__boton__icono { width: 25px; + filter: invert(100%) saturate(5); } @media (min-width: 768px) { diff --git a/assets/Styles/dark-mode/darkmode.css b/assets/Styles/dark-mode/darkmode.css index 41f5dcd..f16d00f 100644 --- a/assets/Styles/dark-mode/darkmode.css +++ b/assets/Styles/dark-mode/darkmode.css @@ -168,13 +168,26 @@ transition: 3s ease-in-out; } .dark-mode .card__about{ - background-color: var(--blue); + background-color: var(--terminal-bg-dark); } + +.dark-mode .card-title p{ + color: var(--blue); + filter: var(--glow-blue); + } + + + .card-title span { + color: var(--pink-terminal); + } .dark-mode .terminal__content span { color: var(--blue); filter: var(--glow-blue); transition: 3s ease-in-out; } +.dark-mode .icon__size{ + filter: var(--icons-glow-dark); +} .dark-mode .terminal__content p { color: white; @@ -186,7 +199,7 @@ filter: invert(100%) saturate(0%) drop-shadow(-1px 2px 4px #76ffc3); } .dark-mode .boton { - background: rgba(0, 0, 0, 0.8); + background:var(--pure-black); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(19px); -webkit-backdrop-filter: blur(19px); @@ -235,7 +248,7 @@ } /* Seccion Hobbies */ -.dark-mode .frase{ +.dark-mode .hobbies{ background: linear-gradient(var(--gradient)); } diff --git a/assets/Styles/elements/cajaTerminal.css b/assets/Styles/elements/cajaTerminal.css index 82b0b49..54513f0 100644 --- a/assets/Styles/elements/cajaTerminal.css +++ b/assets/Styles/elements/cajaTerminal.css @@ -111,7 +111,7 @@ } .terminal__content span{ color: var(--green-terminal); - font-weight: bold; + font-weight: 500; font-family: 'Source Code Pro', monospace; } .terminal__content a{ diff --git a/assets/Styles/elements/toogleDark.css b/assets/Styles/elements/toogleDark.css index 16ff58e..336ae42 100644 --- a/assets/Styles/elements/toogleDark.css +++ b/assets/Styles/elements/toogleDark.css @@ -45,7 +45,7 @@ box-shadow: -15px 35px 68px 0px rgba(145, 192, 255, 0.5), inset 12px -12px 16px 0px rgba(214, 232, 255, 0.214), inset 0px 11px 28px 0px rgb(255, 255, 255); padding: 7px; display: flex; - bottom: 36vh; + bottom: 92vh; right: 1.7rem; position: fixed; diff --git a/assets/Styles/hobbies.css b/assets/Styles/hobbies.css new file mode 100644 index 0000000..10ca4fd --- /dev/null +++ b/assets/Styles/hobbies.css @@ -0,0 +1,357 @@ +.hobbies{ + display: flex; + position: relative; + width: 100%; + justify-content: center; + align-content: flex-start; + flex-wrap: wrap; + align-items: center; +} +.hobbies__caja{ + display: flex; + align-items: center; + width: 100%; + flex-wrap: wrap; + height: 105vh; + justify-content: center; + align-content: flex-start; +} +.card{ + width: 276px; + height: 263px; + background: #15001f; + border: 1px solid #c042ff; + font-size: 20px; + font-family: monospace; + display: flex; + flex-direction: column; +} +.titlebar { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 21px; + font-weight: 450; + background-color: #2e0043; + width: 100%; + text-align: right; + } + button { + width: 40px; + height: 35px; + margin-left: -5px; + border: 0; + outline: 0; + background: transparent; + transition: 0.2s; + } + + + + button svg path, + button svg rect, + button svg polygon { + fill: #ffffff; + } + + button svg { + width: 10px; + height: 10px; + } + + + .close:hover { + background-color: #e81123; + } + + .maximize:hover { + background-color: #c042ff2e; + } + + .minimize:hover { + background-color: #c042ff2e; + } + /* hobbies codigo */ +.cppcode{ + text-align: left; + display: flex; + font-size: 1.2rem; +} + + +#pre { + overflow: auto; + width: 100%; + padding: 10px; + height: auto; + color: #bafff8; +} + +#pre code{ + text-align: left; + display: flex; + width: 67%; + justify-content: flex-start; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + font-size: 2rem; +} + +.curlies { + color: #ff0000; +} + +.sc { + color: #e600ff; +} + +.rounds { + color: #ffffff; +} + +.operator { + color: #ffff00; +} + +.you__can { + color: #22ff00; + margin-left: 30px; +} +.s1 { + color: #22ff00; +} + +.s2 { + color: #4281ff; +} + +.you__cant { + color: #ff4284; + width: 100%; + margin-left: 30px; +} +.s3 { + color: #ff4284; +} + +.s4 { + color: #ffae00; +} + +/* side area, hobbies */ +.hobbies__imagen{ + min-width: 232px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: wrap; + align-content: center; +} + +.sofi__pixel{ + width: 220px; + border-radius: 28px; +} +.hobbies__iconos{ + display: flex; + width: 100%; + flex-wrap: wrap; + gap: 15px; + justify-content: space-evenly; + position: relative; + align-content: stretch; +} +.hobbies__grupo{ + display: flex; + flex-direction: column; + align-items: center; + position: relative; + gap: 17px; + height: 12vh; +} +.hobbies__icono__caja{ + display: flex; + width: 60px; + height: 60px; + min-width: 60px; + min-height: 60px; + border-radius: 50%; + background: rgba(188, 188, 188, 0.5); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 19px ); + -webkit-backdrop-filter: blur( 19px ); + border: 3px solid rgba(255, 255, 255, 0.1); + justify-content: center; + align-items: center; +} +.hobbies__icono { + width: 26px; +} + +.hobbies__grupo:hover .gym{ + filter: invert(73%) sepia(93%) saturate(2588%) hue-rotate(2deg) brightness(110%) contrast(109%); +} + +.hobbies__grupo:hover .boxing{ + filter: invert(9%) sepia(100%) saturate(6481%) hue-rotate(1deg) brightness(95%) contrast(106%); +} + + + +.hobbies__grupo:hover .coding{ + filter: invert(96%) sepia(34%) saturate(6363%) hue-rotate(132deg) brightness(105%) contrast(101%); + + +} +.hobbies__grupo:hover .music{ + filter: invert(53%) sepia(99%) saturate(1703%) hue-rotate(70deg) brightness(113%) contrast(110%); +} + + + + + +.hobbies__grupo:hover .hobbies__icono__caja{ + background-color: black; + transform: scale(1.2); +} +.hobbies__icono__descripcion{ + display: none; +} + + + .hobbies__grupo:hover .hobbies__icono__descripcion{ + display: inline-block; + font-size: 2rem; +} + +@media (min-width:768px){ + .hobbies{ + justify-items: center; + display: flex; + justify-content: center; + align-items: center; + align-content: center; + } + .hobbies__caja{ + align-items: center; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: start; + } + .card { + width: 262px; + height: 251px; + background: #15001f; + border: 1px solid #c042ff; + font-size: 20px; + font-family: monospace; + } + #pre code{ + font-size: 3rem; + } + .cppcode{ + text-align: left; + display: flex; + font-size: 1.3rem; + } + .sofi__pixel{ + width: 262px; + } + .hobbies__iconos{ + display: flex; + width: 100%; + gap: 64px; + flex-wrap: wrap; + } + .hobbies__grupo{ + display: flex; + flex-direction: column; + align-items: center; + position: relative; + gap: 17px; + } + .hobbies__icono__caja{ + width: 55px; + height: 55px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .hobbies__icono { + width: 32px; + } +} + + +@media (min-width:1200px){ + + .hobbies__caja{ + display: flex; + width: 100%; + flex-wrap: wrap; + flex-direction: row; + align-items: center; + justify-content: center; + } + .card { + width: 396px; + height: 323px; + background: #15001f; + border: 1px solid #c042ff; + font-size: 20px; + font-family: monospace; + } + .cppcode{ + text-align: left; + display: flex; + font-size: 1.4rem; + } + .hobbies__imagen{ + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + flex-wrap: wrap; + align-items: center; + } + .hobbies__imagen{ + display: flex; + width: 500px; + flex-direction: column; + align-items: center; + } + .sofi__pixel{ + width: 317px; + } + .hobbies__iconos{ + display: flex; + width: 100%; + flex-wrap: wrap; + justify-content: space-evenly; + gap: 5px; + } + .hobbies__grupo{ + display: flex; + flex-direction: column; + align-items: center; + position: relative; + gap: 17px; + height: 11vh; + margin-bottom: 59px; + justify-content: center; + } + .hobbies__icono__caja{ + display: flex; + height: 80px; + width: 80px; + border-radius: 50%; + justify-content: center; + align-items: center; + margin-top: -45px; + } + .hobbies__icono { + width: 40px; + } +} \ No newline at end of file diff --git a/assets/Styles/settings.css b/assets/Styles/settings.css index 06c1b4c..4fa3460 100644 --- a/assets/Styles/settings.css +++ b/assets/Styles/settings.css @@ -23,11 +23,12 @@ html{ --yellow-terminal:rgb(182, 182, 3); --pink-terminal:rgb(255, 0, 144); - /* Darktheme */ + /* Darktheme */ --pure-black: #000000; --form-ok-color: #4caf50; --form-error-color: #f44336; + --terminal-bg-dark: rgba(18, 0, 33, 0.734); } a{ diff --git a/index.html b/index.html index 1e761df..b8a1334 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + SofiDev @@ -75,7 +76,7 @@ - + @@ -183,7 +184,7 @@

+

Skills

@@ -199,21 +200,16 @@

Skills

- Studying at The Project "One Oracle Next Education" - and Platzi. -

I also have a - strong - foundation in HTML5, CSS3, and JavaScript and React +

+ Strong foundation in semantic HTML, CSS, SCSS, Javascript, React, Styled Components, + SASS, React Router, Axios, and Astro. I also have basic knowledge of MySQL.

- Experience in content management platforms (CMS) such as - WordPress with low code tools like Elementor, WooCommerce, and LMS like Learndash. I - also excel in SEO writing, - graphic design, and the Adobe Suite. + In addition to my technical skills, I have experince in SEO, graphic design, and UI design.

@@ -479,26 +475,27 @@

Who
-
SofiDev
+
+

SofiDev

frontend Developer
@@ -520,25 +517,21 @@

Angela Sofía Osorio

- I'm a dedicated junior front-end developer based in Mexico, passionate about technology and - constantly expanding my skills. + I'm a dedicated junior front-end developer based in Mexico, passionate about technology and constantly expanding my skills. I also have a deep love for coffee and enjoy writing articles

What sets me apart?

- I genuinely love what I do! 💙 I believe that blending - creativity and code - can create magical user experiences. Let's collaborate and build something amazing together. - Get in touch and let the frontend adventures begin! + I genuinely love what I do! 💙 I believe that blending creativity and code can craft enchanting user experiences. In my free time, you'll often find me sipping coffee, writing articles on my blog, and creating YouTube videos about programming.

- @@ -558,11 +551,11 @@

Portfolio

-
+

Hobbies

-
+
@@ -593,35 +586,35 @@

Hobbies

}
-
+
sofi-pixel art -
-
-
- icono gym +
+
+
+ icono gym
- Gym + Gym
-
-
- icono boxing +
+
+ icono boxing
- Boxing + Boxing
-
-
- icono codding +
+
+ icono codding
- Coding + Coding
-
-
- icono music +
+
+ icono music
- Music + Music