diff --git a/Code New Roman Nerd Font Complete Mono.otf b/Code New Roman Nerd Font Complete Mono.otf new file mode 100644 index 0000000..8ff276e Binary files /dev/null and b/Code New Roman Nerd Font Complete Mono.otf differ diff --git a/GregariousBitterConch-max-1mb.gif b/GregariousBitterConch-max-1mb.gif new file mode 100644 index 0000000..752047f Binary files /dev/null and b/GregariousBitterConch-max-1mb.gif differ diff --git a/IMG-20220502-WA0000.jpg b/IMG-20220502-WA0000.jpg new file mode 100644 index 0000000..da1165b Binary files /dev/null and b/IMG-20220502-WA0000.jpg differ diff --git a/index.html b/index.html index 41f52ed..2719a5d 100644 --- a/index.html +++ b/index.html @@ -9,48 +9,34 @@ - - - -
-
-
Hi, I am <name>
-

Frontend developer

- -
-
- MyImage -
+ +
+
Scroll Down
+
Scroll Down Gif
+

Hi

+
I am Iman Kalyan Chakraborty.
+
Welcome to my Website.
+
+
+
About Me:
+
I am a current first year student at Indian Institute of Information Technology, Kalyani. I love learning new things about computers. I love competitive programming and am learning more and more about new things in computer science.
+ Iman's Photo +
+
+
Contact me
+ - - -
-
- About me -
- -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum voluptates provident molestias a - animi facilis iusto voluptatum repellat eligendi consequatur distinctio placeat mollitia veritatis - recusandae, ad, quasi commodi enim quos! Quasi aspernatur veniam, blanditiis sint necessitatibus dicta - libero voluptatibus reiciendis asperiores nemo maiores ducimus corrupti magnam error voluptatum ab velit. -

-
- - -
-
- Contact Me -
-
- - -
Mobile no : +91 XXXXXXXXXX
- -
linkdin : Linkdin IN
-
Github : Github
-
Others : BIO
-
+
+ + + - \ No newline at end of file + diff --git a/script.js b/script.js new file mode 100644 index 0000000..a6c4c0e --- /dev/null +++ b/script.js @@ -0,0 +1,112 @@ +gsap.registerPlugin(ScrollTrigger); + +const tl = gsap.timeline(); + +tl.to("#element-1", { + opacity: 0, + duration: 1, +}) + +tl.to("#elementPurgatory", { + opacity: 0, + duration: 1, +}) + +tl.from("#element0", { + opacity: 0, + duration: 1, +}) + +tl.from("#element1", { + y: '-30vh', + opacity: 0, + duration: 1, +}) + +tl.from("#element2", { + y: '30vh', + opacity: 0, + duration: 1, +}); + +ScrollTrigger.create({ + animation: tl, + trigger: ".page1", + scrub: true, + pin: true +}) + +const tl2 = gsap.timeline(); + +ScrollTrigger.create({ + animation: tl2, + trigger: ".page2", + scrub: true, + pin: true +}) + +tl2.from("#element3", { + x: '-1vw', + opacity: 0 +}) + +tl2.from("#element4", { + x: '-1vw', + opacity: 0 +}) + +tl2.from("#element5", { + x: '1vw', + opacity: 0 +}) + +function github() { + location.href = "https://github.com/ImanKalyanChakraborty" +} + +function twitter() { + location.href = "https://twitter.com/ikc1975" +} + +function linkedin() { + location.href = "https://in.linkedin.com/in/iman-kalyan-chakraborty-33822b260?trk=people-guest_people_search-card" +} + +const tl3 = gsap.timeline(); + +ScrollTrigger.create({ + animation: tl3, + trigger: ".page3", + scrub: true, + pin: true +}) + +tl3.from("#element6", { + y: '1vh', + opacity: 0 +}) + +tl3.from("#element7", { + y: '1vh', + opacity: 0 +}) + +tl3.from("#element8", { + y: '1vh', + opacity: 0 +}) + +tl3.from("#element9", { + y: '1vh', + opacity: 0 +}) + +tl3.from("#element10", { + y: '1vh', + opacity: 0 +}) + +tl3.from("#element11", { + y: '1vh', + opacity: 0 +}) diff --git a/style.css b/style.css index 7e137a6..9202b1d 100644 --- a/style.css +++ b/style.css @@ -1,98 +1,146 @@ *{ margin: 0; - padding: 0; /* providing default margin and padding to be 0 */ + padding: 0; } -/* home page styling */ +@font-face { + font-family: 'codeNewRoman'; + src: url(Code\ New\ Roman\ Nerd\ Font\ Complete\ Mono.otf); +} + +.page1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + width: 100vw; + font-family: 'codeNewRoman', sans-serif; + font-size: 3vh; + color: white; +} -.homePage{ /* selecting div with class "homePage" and adding styling to it */ - display: flex; /* creating a flex box */ - justify-content: space-around; - height: 100vh; - align-items: center; +#element-1, #elementPurgatory { + position: absolute; + z-index: 3; + top: 50vh; } -.myImage img{ /* selecting div with class "myImage" then navigating to img tag inside it, and adding styling to it */ - height: 18rem; - width: auto; - border-radius: 1rem; +#elementPurgatory { + padding-top: 4vh; } -.name{ /* selecting div with class "name" and adding styling to it */ - font-size: 3rem; +#element0 { + position: relative; + z-index: 1; + padding-bottom: 10vh; } -.intro p{ /* selecting div with class "intro" then navigating to p tag inside it, and adding styling to it */ - font-size: 2rem; - line-height: 3rem; +#element1, #element2 { + position: relative; + z-index: 1; } -.your_button{ /* selecting button with class "your_button" and adding styling to it */ - font-size: 1rem; - padding: 5px; - cursor: pointer; - background-color: rgb(42, 42, 255); - border-radius: 5px; - width:100px; - height:50px; - border:2px solid white; - color:white; - text-transform: capitalize; +.page2 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: 'codeNewRoman', sans-serif; + background: linear-gradient(45deg, black 45%, green); + height: 100vh; + width: 100vw; + color: white; } -.your_button:hover{ /* here we add a special animation to button when it is hovered (hover: when a cursor roams in the specified setion it is the hover state for that element) */ - - box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; + +#element3 { + position: relative; + right: 29.5vw; + font-size: 6vh; + padding-bottom: 10vh; + top: 15vh; } -/* about me */ -.about{ /* selecting div with class "about" and adding styling to it */ - min-height: 60vh; + +#interiorelement3 { + background: linear-gradient(45deg, #e66465, #9198e5); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 370; } -.about_heading{ /* selecting div with class "about_heading" and adding styling to it */ - font-size: 3rem; - text-align: center; - text-decoration: underline; - font-weight:600; +#element4 { + width: 40vw; + font-size: 2.5vh; + position: relative; + right: 17.6vw; + top: 15vh; } -/* contact */ -.contact_sec{ /* selecting div with class "contact_sec" and adding styling to it */ - height: 60vh; - width:70vw; - margin: 0 auto; +.coloredText { + background: linear-gradient(45deg, #e66465, #9198e5); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -.contact_heading{ /* selecting div with class "contact_heading" and adding styling to it */ - font-weight:600; - font-size: 3rem; - text-align: center; - text-decoration: underline; +#element5 { + position: relative; + left: 25vw; + bottom: 20vh; + width: 40vw; + height: 40vh; + object-fit: contain; } -.contact_info{ /* selecting div with class "contact_info" and adding styling to it */ - font-size:1.3em; - font-weight: 600; - margin-top:10vh; +.page3 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-family: 'codeNewRoman', sans-serif; + background: linear-gradient(45deg, black 45%, purple); + height: 100vh; + width: 100vw; } -.data{ /* selecting div with class "data" and adding styling to it */ - font-weight:initial; + +.Buttons { + display: flex; + justify-content: space-evenly; } -.Email,.mobile_no,.linkdin,.github,.others{ /* selecting many divs with the class listed and adding same styling to all of them */ - padding:2vh 0; +#element6 { + font-size: 10vh; + padding-bottom: 10vh; + background: linear-gradient(45deg, #e66465, #9198e5); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -span a{ /* selecting span and then navigating to a tag in it and adding styling to it */ - color:black; +#element7, #element8 { + font-size: 5vh; + background: linear-gradient(45deg, #e66465, #9198e5); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -span a:hover{ /* here we add a special animation to anchor tag when it is hovered (hover: when a cursor roams in the specified setion it is the hover state for that element) */ - color:blue; +#element8 { + padding-bottom: 10vh; } +#element9, #element10, #element11 { + border-radius: 20px; + height: 10vh; + width: 20vh; + font-size: 3vh; + font-family: 'codeNewRoman'; + background: linear-gradient(45deg, pink, rgba(240, 210, 33, 0.8)); +} -.para{ /* selecting div with class "para" and adding styling to it */ - width:70vw; - margin:8vh auto; - font-size: 2em; -} \ No newline at end of file +#element9:hover, #element10:hover, #element11:hover { + background: linear-gradient(45deg, #e66465, #9198e5); + border: 0px solid red; + cursor: pointer; +}