diff --git a/css/about.css b/css/about.css index 4710afb..170e191 100644 --- a/css/about.css +++ b/css/about.css @@ -1,256 +1,92 @@ -body { +html, body { margin: 0; padding: 0; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - color: #333; - overflow-x: hidden; scroll-behavior: smooth; + height: 100%; + font-family: sans-serif; + background: #232323; + color: #fff; } -.portfolio { +main { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; } -.portfolio__section { +.section { scroll-snap-align: start; - position: relative; height: 100vh; - width: 100%; - overflow: hidden; -} -.portfolio__section .content { - position: relative; - z-index: 2; - max-width: 1200px; - margin: 0 auto; - padding: 2rem; - height: 100%; display: flex; flex-direction: column; justify-content: center; + align-items: center; + padding: 2rem; + box-sizing: border-box; + position: relative; } -.portfolio__section .bg-image { +.section::before { + content: ""; position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; + right: 0; + bottom: 0; background-size: cover; background-position: center; + filter: blur(5px); + opacity: 0.2; + z-index: 0; +} +.section .content { + position: relative; z-index: 1; -} -.portfolio__section .bg-image::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); -} -.portfolio__section--intro { text-align: center; -} -.portfolio__section--intro .intro-title { - font-size: 3.5rem; - margin-bottom: 1rem; - color: #fff; -} -.portfolio__section--intro .intro-title .highlight { - color: #3498db; -} -.portfolio__section--intro .intro-subtitle { - font-size: 1.5rem; - color: rgba(255, 255, 255, 0.8); - margin-bottom: 2rem; -} -.portfolio__section--intro .social-links { - display: flex; - justify-content: center; - gap: 1.5rem; -} -.portfolio__section--intro .social-links .social-link { - color: #fff; - text-decoration: none; - font-size: 1.1rem; - transition: color 0.3s; -} -.portfolio__section--intro .social-links .social-link:hover { - color: #3498db; -} -.portfolio__section .section-title { - font-size: 2.5rem; - margin-bottom: 2rem; - color: #fff; - position: relative; - display: inline-block; -} -.portfolio__section .section-title::after { - content: ""; - position: absolute; - bottom: -10px; - left: 0; - width: 50px; - height: 3px; - background: #3498db; -} -.portfolio__section .about-content { - display: flex; - gap: 2rem; - align-items: center; -} -.portfolio__section .about-content .about-text { - flex: 1; - color: #fff; - line-height: 1.6; -} -.portfolio__section .about-content .about-image { - flex: 1; -} -.portfolio__section .about-content .about-image img { - max-width: 100%; - border-radius: 10px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); -} -.portfolio__section .timeline { - position: relative; - padding-left: 2rem; - color: #fff; -} -.portfolio__section .timeline::before { - content: ""; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 2px; - background: #3498db; -} -.portfolio__section .timeline-item { - margin-bottom: 2rem; - position: relative; -} -.portfolio__section .timeline-item::before { - content: ""; - position: absolute; - left: -2.5rem; - top: 0.5rem; - width: 1rem; - height: 1rem; - border-radius: 50%; - background: #fff; - border: 2px solid #3498db; -} -.portfolio__section .timeline-title { - font-size: 1.3rem; - margin-bottom: 0.3rem; -} -.portfolio__section .timeline-company { - font-style: italic; - margin-bottom: 0.5rem; - opacity: 0.8; -} -.portfolio__section .timeline-description { - line-height: 1.5; -} -.portfolio__section .projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.5rem; -} -.portfolio__section .project-card { - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-radius: 10px; - padding: 1.5rem; - transition: transform 0.3s; - color: #fff; -} -.portfolio__section .project-card:hover { - transform: translateY(-5px); -} -.portfolio__section .project-title { - font-size: 1.3rem; - margin-bottom: 0.5rem; - color: #fff; -} -.portfolio__section .project-description { - margin-bottom: 1rem; - line-height: 1.5; -} -.portfolio__section .project-link { - color: #3498db; - text-decoration: none; - font-weight: bold; -} -.portfolio__section .project-link:hover { - text-decoration: underline; -} -.portfolio__section--footer { - background: #2c3e50; -} -.portfolio__section--footer .content { - text-align: center; -} -.portfolio__section--footer .contact-info { - margin-bottom: 2rem; - color: #fff; -} -.portfolio__section--footer .contact-info a { - color: #3498db; - text-decoration: none; -} -.portfolio__section--footer .contact-info a:hover { - text-decoration: underline; -} -.portfolio__section--footer .footer-links { - display: flex; - justify-content: center; - gap: 2rem; - margin-bottom: 2rem; -} -.portfolio__section--footer .footer-links .footer-link { - color: #fff; - text-decoration: none; - transition: color 0.3s; -} -.portfolio__section--footer .footer-links .footer-link:hover { - color: #3498db; -} -.portfolio__section--footer .copyright { - color: rgba(255, 255, 255, 0.6); - font-size: 0.9rem; + max-width: 800px; } -@media (max-width: 768px) { - .portfolio__section .content { - padding: 1rem; - } - .portfolio__section--intro .intro-title { - font-size: 2.5rem; - } - .portfolio__section--intro .intro-subtitle { - font-size: 1.2rem; - } - .portfolio__section .about-content { - flex-direction: column; - } - .portfolio__section .about-content .about-text { - order: 2; - } - .portfolio__section .about-content .about-image { - order: 1; - margin-bottom: 1.5rem; - } - .portfolio__section .section-title { - font-size: 2rem; - } +.intro .content h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 2rem; + margin-bottom: 1rem; +} + +ul { + list-style: none; + padding: 0; +} +ul li { + margin: 0.5rem 0; +} + +footer { + margin-top: auto; + padding: 1rem; + font-size: 0.875rem; + text-align: center; + opacity: 0.5; +} + +#intro::before { + background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg"); +} + +#about::before { + background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg"); +} + +#skills::before { + background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg"); +} + +#projects::before { + background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg"); +} + +#contact::before { + background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg"); } diff --git a/html/about.html b/html/about.html index b658bdc..c2f63f2 100644 --- a/html/about.html +++ b/html/about.html @@ -1,101 +1,55 @@ - - - Your Name | Portfolio - + + + Shaheem - Portfolio + -
- -
-
-

Hello, I'm Your Name

-

Job Title / Profession

- -
-
-
+
+
+
+

Hello, I'm Shaheem

+

I like building cool stuff and learning new things.

+
+
- -
-
-

About Me

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

-

Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.

-
-
- Your Name -
-
-
-
-
+
+
+

About Me

+

A short, informal overview about who you are and what you enjoy doing.

+
+
- -
-
-

Experience

-
-
-

Senior Developer

-

Tech Company Inc. (2020-Present)

-

Lead developer for web applications.

-
-
-

Web Developer

-

Digital Agency (2017-2020)

-

Front-end development and UX design.

-
-
-
-
-
+
+
+

Skills

+
    +
  • Web development
    • +
  • Linux & system tinkering
    • +
  • Rust, Python, Bash
    • +
  • Designing interfaces, ricing desktops
    • +
+
+
- -
-
-

Projects

-
-
-

Project 1

-

Description of project and technologies used.

- View Project -
-
-

Project 2

-

Description of project and technologies used.

- View Project -
-
-
-
-
+
+
+

Projects

+

A few interesting things I\u2019ve made or contributed to.

+
+
- -
-
-

Get In Touch

-
-

Email: you@example.com

-

Phone: (123) 456-7890

-
-
- Resume (PDF) - GitHub - LinkedIn -
-

© 2023 Your Name. All rights reserved.

-
-
-
- +
+
+

Contact

+

Email: you@example.com
Mastodon / GitHub / etc.

+
+ +
+
- \ No newline at end of file + diff --git a/scss/about.scss b/scss/about.scss index cf8cad7..0d3e571 100644 --- a/scss/about.scss +++ b/scss/about.scss @@ -1,334 +1,109 @@ -// Variables -$primary-color: #3498db; -$secondary-color: #2c3e50; -$text-color: #333; -$light-color: #fff; -$dark-color: #222; -$overlay-color: rgba(0, 0, 0, 0.6); -$blur-amount: 5px; -$section-padding: 2rem; -$max-content-width: 1200px; +// styles.scss -// Mixins -@mixin flex-center { - display: flex; - justify-content: center; - align-items: center; +$font-stack: sans-serif; +$background:#232323; +$text-color: #fff; + +html, body { + margin: 0; + padding: 0; + scroll-behavior: smooth; + height: 100%; + font-family: $font-stack; + background: $background; + color: $text-color; } -@mixin absolute-cover { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -// Base Styles -body { - margin: 0; - padding: 0; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: $text-color; - overflow-x: hidden; - scroll-behavior: smooth; -} - -// Portfolio Container -.portfolio { - scroll-snap-type: y mandatory; +main { + scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; - scroll-behavior: smooth; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; } -// Sections -.portfolio__section { - scroll-snap-align: start; +.section { + scroll-snap-align: start; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 2rem; + box-sizing: border-box; + position: relative; + + &::before { + content: ""; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background-size: cover; + background-position: center; + filter: blur(5px); + opacity: 0.2; + z-index: 0; + } + + .content { position: relative; - height: 100vh; - width: 100%; - overflow: hidden; - - .content { - position: relative; - z-index: 2; - max-width: $max-content-width; - margin: 0 auto; - padding: $section-padding; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - } - - // Background image styling - .bg-image { - @include absolute-cover; - background-size: cover; - background-position: center; - z-index: 1; - - &::after { - content: ''; - @include absolute-cover; - background: $overlay-color; - backdrop-filter: blur($blur-amount); - -webkit-backdrop-filter: blur($blur-amount); - } - } - - // Intro section specific styles - &--intro { - text-align: center; - - .intro-title { - font-size: 3.5rem; - margin-bottom: 1rem; - color: $light-color; - - .highlight { - color: $primary-color; - } - } - - .intro-subtitle { - font-size: 1.5rem; - color: rgba($light-color, 0.8); - margin-bottom: 2rem; - } - - .social-links { - display: flex; - justify-content: center; - gap: 1.5rem; - - .social-link { - color: $light-color; - text-decoration: none; - font-size: 1.1rem; - transition: color 0.3s; - - &:hover { - color: $primary-color; - } - } - } - } - - // Section titles - .section-title { - font-size: 2.5rem; - margin-bottom: 2rem; - color: $light-color; - position: relative; - display: inline-block; - - &::after { - content: ''; - position: absolute; - bottom: -10px; - left: 0; - width: 50px; - height: 3px; - background: $primary-color; - } - } - - // About section - .about-content { - display: flex; - gap: 2rem; - align-items: center; - - .about-text { - flex: 1; - color: $light-color; - line-height: 1.6; - } - - .about-image { - flex: 1; - - img { - max-width: 100%; - border-radius: 10px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); - } - } - } - - // Timeline/Experience - .timeline { - position: relative; - padding-left: 2rem; - color: $light-color; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 2px; - background: $primary-color; - } - } - - .timeline-item { - margin-bottom: 2rem; - position: relative; - - &::before { - content: ''; - position: absolute; - left: -2.5rem; - top: 0.5rem; - width: 1rem; - height: 1rem; - border-radius: 50%; - background: $light-color; - border: 2px solid $primary-color; - } - } - - .timeline-title { - font-size: 1.3rem; - margin-bottom: 0.3rem; - } - - .timeline-company { - font-style: italic; - margin-bottom: 0.5rem; - opacity: 0.8; - } - - .timeline-description { - line-height: 1.5; - } - - // Projects - .projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.5rem; - } - - .project-card { - background: rgba($light-color, 0.1); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-radius: 10px; - padding: 1.5rem; - transition: transform 0.3s; - color: $light-color; - - &:hover { - transform: translateY(-5px); - } - } - - .project-title { - font-size: 1.3rem; - margin-bottom: 0.5rem; - color: $light-color; - } - - .project-description { - margin-bottom: 1rem; - line-height: 1.5; - } - - .project-link { - color: $primary-color; - text-decoration: none; - font-weight: bold; - - &:hover { - text-decoration: underline; - } - } - - // Footer section - &--footer { - background: $secondary-color; - - .content { - text-align: center; - } - - .contact-info { - margin-bottom: 2rem; - color: $light-color; - - a { - color: $primary-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - .footer-links { - display: flex; - justify-content: center; - gap: 2rem; - margin-bottom: 2rem; - - .footer-link { - color: $light-color; - text-decoration: none; - transition: color 0.3s; - - &:hover { - color: $primary-color; - } - } - } - - .copyright { - color: rgba($light-color, 0.6); - font-size: 0.9rem; - } + z-index: 1; + text-align: center; + max-width: 800px; + } +} + +.intro .content h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +h2 { + font-size: 2rem; + margin-bottom: 1rem; +} + +ul { + list-style: none; + padding: 0; + + li { + margin: 0.5rem 0; + } +} + +footer { + margin-top: auto; + padding: 1rem; + font-size: 0.875rem; + text-align: center; + opacity: 0.5; +} + +// Example background images per section +#intro { + &::before { + background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg'); } } -// Responsive adjustments -@media (max-width: 768px) { - .portfolio__section { - .content { - padding: 1rem; - } - - &--intro { - .intro-title { - font-size: 2.5rem; - } - - .intro-subtitle { - font-size: 1.2rem; - } - } - - .about-content { - flex-direction: column; - - .about-text { - order: 2; - } - - .about-image { - order: 1; - margin-bottom: 1.5rem; - } - } - - .section-title { - font-size: 2rem; - } +#about { + &::before { + background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg'); } -} \ No newline at end of file +} + +#skills { + &::before { + background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg'); + } +} + +#projects { + &::before { + background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg'); + } +} + +#contact { + &::before { + background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg'); + } +}