diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..dfddb3b --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,335 @@ +/* Font */ +@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); + +/* Variables */ +:root { + --c-brand: #f83691; + --c-brand-rgb: 248, 54, 145; + --c-dark: #303050; + --c-body: #636383; + --c-light: #f6f6f6; + --f-main: "Bai Jamjuree", sans-serif; + --transition: all .4s cubic-bezier(.165, .84, .44, 1); + --shadow: 0px 15px 40px rgba(0, 0, 0, 0.1); +} +html{ + scroll-behavior: smooth; +} +/* Reset & Helpers */ +body { + font-family: var(--f-main); + color: var(--c-body); + line-height: 1.7; +} + +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + font-weight: 700; + color: var(--c-dark); +} + +a { + text-decoration: none; + color: var(--c-dark); + transition: var(--transition); +} + +a:hover { + color: var(--c-brand); +} + +img { + width: 100%; +} + +.section-padding { + padding-top: 120px; + padding-bottom: 120px; +} + +.text-brand { + color: var(--c-brand); +} + +.setion-title { + max-width: 560px; + margin: 0 auto 60px auto; +} + +.setion-title .line { + width: 60px; + height: 2px; + background-color: var(--c-brand); + display: inline-block; +} + +.section-connector { + position: relative; +} + +.section-connector::after { + content: ''; + width: 2px; + height: 100px; + background-color: var(--c-brand); + position: absolute; + top: -50px; + left: 50%; +} + +/* Navbar */ +.navbar { + padding-top: 30px; + padding-bottom: 30px; + transition: var(--transition); +} + +.navbar.scrolled { + padding-top: 7px; + padding-bottom: 7px; + background-color: white; + box-shadow: var(--shadow); +} + +.navbar-toggler { + border-radius: 0; +} + +.navbar-toggler:focus { + box-shadow: none; +} + +@media (min-width: 992px) { + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 16px; + padding-left: 16px; + } +} + +.navbar .navbar-nav .nav-link { + font-weight: 700; + color: var(--c-dark); +} + +.navbar .navbar-nav .nav-link:hover, +.navbar .navbar-nav .nav-link.active { + color: var(--c-brand); +} + +.navbar-brand { + font-size: 24px; + font-weight: 700; + color: var(--c-dark); +} + +.social-icon { + width: 36px; + height: 36px; + background-color: var(--c-brand); + color: white; + border: 2px solid var(--c-brand); + display: inline-flex; + align-items: center; + justify-content: center; + margin-right: 6px; +} + +.social-icon:hover { + background-color: transparent; +} + +/* Btn */ +.btn { + padding: 10px 24px; + border-radius: 0; + border-width: 2px; + font-weight: 500; +} + +.btn-brand, +.btn-brand:focus { + background-color: var(--c-brand); + color: white; + border-color: var(--c-brand); +} + +.btn-brand:hover { + background-color: transparent; + color: var(--c-brand); + border-color: var(--c-brand); +} + + +/* Home */ +#home { + background-image: url(../images/hero.jpg); + background-position: center; + background-size: cover; +} + +/* Services */ +.service-icon { + width: 60px; + height: 60px; + background-color: var(--c-brand); + color: white; + font-size: 28px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.custom-link { + display: inline-flex; + align-items: center; +} + +.custom-link span { + font-weight: 700; +} + +.custom-link i { + width: 24px; + height: 24px; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--c-brand); + border-radius: 100px; + color: white; + margin-left: 6px; + transition: var(--transition); +} + +.custom-link:hover i { + transform: translateX(6px); +} + +/* Project */ +.project { + overflow: hidden; + position: relative; +} + +.project .content { + position: absolute; + top: 100%; + left: 0; + background-color: var(--c-brand); + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.project img, +.project .content { + transition: var(--transition); +} + +.project:hover .content { + top: 0; +} + +.project:hover img { + transform: translateY(-100%); +} + +/* Client */ +.client { + margin-top: -1px; + margin-left: -1px; +} +.client img { + opacity: 0.7; + height: 30px; +} + +/* Resume */ +.eduexp { + position: relative; +} + +.eduexp::before { + content: ''; + height: 100%; + width: 1px; + background-color: rgba(var(--c-brand-rgb), 0.4); + position: absolute; + left: 0; + top: 0; +} + +.eduexp::after { + content: ''; + width: 14px; + height: 14px; + background-color: var(--c-brand); + position: absolute; + left: -7px; + top: 0; +} + +#contact .form-control { + border-radius: 0; +} + +#contact .form-control:focus { + box-shadow: none; + border-color: var(--c-brand); +} + +#contact input.form-control { + height: 44px; +} + +/* Footer */ +footer { + background-color: var(--c-dark); + padding-top: 80px; +} + +footer h4 { + color: white; + margin-bottom: 24px; +} + +footer p, +footer li, +footer li a { + color: rgba(255,255,255, 0.7); +} + +footer ul { + list-style: none; + padding: 0; +} + +footer ul li { + margin-top: 6px; +} + +.footer-top { + padding-bottom: 40px; + border-bottom: 1px solid rgba(255,255,255, 0.1); +} + +.footer-bottom { + padding-top: 40px; + padding-bottom: 40px; +} + +.footer-bottom a { + color: var(--c-brand); +} \ No newline at end of file diff --git a/assets/images/about.jpg b/assets/images/about.jpg new file mode 100644 index 0000000..7446cc1 Binary files /dev/null and b/assets/images/about.jpg differ diff --git a/assets/images/avatar-2.jpg b/assets/images/avatar-2.jpg new file mode 100644 index 0000000..34a7dcc Binary files /dev/null and b/assets/images/avatar-2.jpg differ diff --git a/assets/images/avatar-3.jpg b/assets/images/avatar-3.jpg new file mode 100644 index 0000000..1b1ff81 Binary files /dev/null and b/assets/images/avatar-3.jpg differ diff --git a/assets/images/avatar-4.jpg b/assets/images/avatar-4.jpg new file mode 100644 index 0000000..f2f31fa Binary files /dev/null and b/assets/images/avatar-4.jpg differ diff --git a/assets/images/blog-post1.jpg b/assets/images/blog-post1.jpg new file mode 100644 index 0000000..d5f065f Binary files /dev/null and b/assets/images/blog-post1.jpg differ diff --git a/assets/images/blog-post2.jpg b/assets/images/blog-post2.jpg new file mode 100644 index 0000000..6cc44ff Binary files /dev/null and b/assets/images/blog-post2.jpg differ diff --git a/assets/images/blog-post3.jpg b/assets/images/blog-post3.jpg new file mode 100644 index 0000000..f9f0ad7 Binary files /dev/null and b/assets/images/blog-post3.jpg differ diff --git a/assets/images/blog-post4.jpg b/assets/images/blog-post4.jpg new file mode 100644 index 0000000..55c3e6e Binary files /dev/null and b/assets/images/blog-post4.jpg differ diff --git a/assets/images/hero.jpg b/assets/images/hero.jpg new file mode 100644 index 0000000..f39b739 Binary files /dev/null and b/assets/images/hero.jpg differ diff --git a/assets/images/logo-dark.svg b/assets/images/logo-dark.svg new file mode 100644 index 0000000..f956b08 --- /dev/null +++ b/assets/images/logo-dark.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/logo01.svg b/assets/images/logo01.svg new file mode 100644 index 0000000..e56062c --- /dev/null +++ b/assets/images/logo01.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/logo02.svg b/assets/images/logo02.svg new file mode 100644 index 0000000..d866821 --- /dev/null +++ b/assets/images/logo02.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/logo03.svg b/assets/images/logo03.svg new file mode 100644 index 0000000..d764077 --- /dev/null +++ b/assets/images/logo03.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/logo04.svg b/assets/images/logo04.svg new file mode 100644 index 0000000..a9a4b4f --- /dev/null +++ b/assets/images/logo04.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/logo05.svg b/assets/images/logo05.svg new file mode 100644 index 0000000..5578276 --- /dev/null +++ b/assets/images/logo05.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/logo06.svg b/assets/images/logo06.svg new file mode 100644 index 0000000..604273f --- /dev/null +++ b/assets/images/logo06.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/assets/images/logo07.svg b/assets/images/logo07.svg new file mode 100644 index 0000000..273359b --- /dev/null +++ b/assets/images/logo07.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/images/logo08.svg b/assets/images/logo08.svg new file mode 100644 index 0000000..63de807 --- /dev/null +++ b/assets/images/logo08.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/logo09.svg b/assets/images/logo09.svg new file mode 100644 index 0000000..a01cf64 --- /dev/null +++ b/assets/images/logo09.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/logo10.svg b/assets/images/logo10.svg new file mode 100644 index 0000000..7006631 --- /dev/null +++ b/assets/images/logo10.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/p-1.jpg b/assets/images/p-1.jpg new file mode 100644 index 0000000..c1faa24 Binary files /dev/null and b/assets/images/p-1.jpg differ diff --git a/assets/images/p-2.jpg b/assets/images/p-2.jpg new file mode 100644 index 0000000..005117e Binary files /dev/null and b/assets/images/p-2.jpg differ diff --git a/assets/images/p-3.jpg b/assets/images/p-3.jpg new file mode 100644 index 0000000..155249c Binary files /dev/null and b/assets/images/p-3.jpg differ diff --git a/assets/images/p-4.jpg b/assets/images/p-4.jpg new file mode 100644 index 0000000..d63ff48 Binary files /dev/null and b/assets/images/p-4.jpg differ diff --git a/assets/images/p-5.jpg b/assets/images/p-5.jpg new file mode 100644 index 0000000..8cb358a Binary files /dev/null and b/assets/images/p-5.jpg differ diff --git a/assets/images/p-6.jpg b/assets/images/p-6.jpg new file mode 100644 index 0000000..9e0d06b Binary files /dev/null and b/assets/images/p-6.jpg differ diff --git a/assets/js/app.js b/assets/js/app.js new file mode 100644 index 0000000..9f62554 --- /dev/null +++ b/assets/js/app.js @@ -0,0 +1,12 @@ +window.onscroll = function() { + if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0 ) { + document.getElementById('navbar').classList.add('scrolled'); + } else { + document.getElementById('navbar').classList.remove('scrolled'); + } +} + +// AOS +AOS.init({ + duration: 800, +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f29add7 --- /dev/null +++ b/index.html @@ -0,0 +1,507 @@ + + + + + + + + Code Cascade - Web Designer and Photographer + + + + + + + + + + + + + +
+
+
+
+

Hi there! I am Ihfaz Alam.

+

Mars based web designer and photographer

+
Get Connected
+
+
+
+
+ + +
+
+
+
+
+

Services

+

I design beautiful and user-friendly websites that help businesses attract more customers and grow online.

+
+
+
+
+
+
+
+
+ +
+
Branding
+

Branding shapes identity, builds trust, and fosters lasting connections.

+ + Read More + + +
+
+
+
+
+ +
+
UI Design
+

UI design guides interactions with intuitive, user-friendly interfaces.

+ + Read More + + +
+
+
+
+
+ +
+
Photography
+

Photography tells stories through captivating, visual narratives.

+ + Read More + + +
+
+
+
+
+ +
+
UX Design
+

UX design crafts seamless digital experiences for user satisfaction.

+ + Read More + + +
+
+
+
+
+ + +
+
+
+
+
+

Work

+

The pursuit of purpose, productivity, and professional fulfillment.

+
+
+
+
+
+
+
+ +
+ View Project +
+
+
+
+
+ +
+ View Project +
+
+
+
+
+ +
+ View Project +
+
+
+
+
+ +
+ View Project +
+
+
+
+
+ +
+ View Project +
+
+
+
+
+ +
+ View Project +
+
+
+
+
+
+
+
+
+
+

Clients I've worked with

+

+ Clients I've collaborated with represent diverse industries, united by a pursuit of innovation and excellence, fostering mutual growth and success.

+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ + +
+
+
+
+
+

Education & Experience

+

A combination of rigorous academics and hands-on involvement, shaping a foundation for expertise and proficiency.

+
+
+
+
+
+
+
+
+
+
University of Boston, Computer Science
+ 2010 - 2016 +

+ I attended the University of Boston from 2010 to 2016, earning a Bachelor's degree in Computer Science, honing my expertise.

+
+
+
+
+
Masters in UI Animations
+ 2016 - 2018 +

I completed a Master's program specializing in UI Animations, refining my skills in creating dynamic and user-friendly digital experiences.

+
+
+
+
+
Graduate in Information Technology
+ 2016 - 2018 +

+ I graduated with a degree in Information Technology, equipped with the knowledge and skills to tackle complex technological challenges effectively. + + +

+
+
+
+
+
+
+
+
+
Front End Developer, Freelance
+ 2010 - 2016 +

As a freelance Front End Developer, I specialize in crafting responsive, visually appealing websites that elevate user experiences and drive engagement.

+
+
+
+
+
Website Developer, Google
+ 2016 - 2018 +

I work as a Website Developer at Google, where I contribute to creating innovative digital solutions that empower users worldwide. + + + +

+
+
+
+
+
Wiredraw Designer, Dribble
+ 2016 - 2018 +

+ I serve as a Wiredraw Designer at Dribble, focusing on crafting intuitive digital layouts that streamline user interactions and experiences.

+
+
+
+
+
+
+
+ + +
+
+
+
+
+

Blog

+

Discover the transformation practice of mindfulness, from ancient roots to modern applications. Learn how mindfulness enhances mental health, reduces stress, and boosts focus. Explore practical tips to incorporate mindfulness into daily life for inner peace and self-discovery.

+
+
+
+
+
+
+
+ +
+

Website Design

+

We design sleek, user-friendly websites with captivating visuals and functionality.

+ + Read More + + +
+
+
+
+
+ +
+

Crafting Digital Experiences

+

Merging design, innovation, and user engagement seamlessly.

+ + Read More + + +
+
+
+
+
+ +
+

Digital Artistry

+

Where creativity meets technology, crafting unforgettable online experiences.

+ + Read More + + +
+
+
+
+
+
+ + +
+
+
+
+
+

Contact

+

+ Our contact page is your gateway to reaching out. Whether you have questions, feedback, or collaboration ideas, we're here to listen.

+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+ + + + + + + + + \ No newline at end of file