diff --git a/PortfolioTemplate/PORT_SS.PNG b/PortfolioTemplate/PORT_SS.PNG new file mode 100644 index 0000000..e35bf59 Binary files /dev/null and b/PortfolioTemplate/PORT_SS.PNG differ diff --git a/PortfolioTemplate/PORT_SS2.PNG b/PortfolioTemplate/PORT_SS2.PNG new file mode 100644 index 0000000..0b85a29 Binary files /dev/null and b/PortfolioTemplate/PORT_SS2.PNG differ diff --git a/PortfolioTemplate/index.js b/PortfolioTemplate/index.js new file mode 100644 index 0000000..b7a85dc --- /dev/null +++ b/PortfolioTemplate/index.js @@ -0,0 +1,56 @@ +function Page(evt, tabName) { + // Declare all variables + let i, SlideContent, Btn; + + // Get all elements with class="tabcontent" and hide them + SlideContent = document.getElementsByClassName("SlideContent"); + for (i = 0; i < SlideContent.length; i++) { + SlideContent[i].style.display = "none"; + } + + // Get all elements with class="tablinks" and remove the class "active" + Btn = document.getElementsByClassName("Btn"); + for (i = 0; i < Btn.length; i++) { + Btn[i].className = Btn[i].className.replace(" active", ""); + } + + // Show the current tab, and add an "active" class to the button that opened the tab + document.getElementById(tabName).style.display = ""; + evt.currentTarget.className += " active"; +} + +document.getElementById("DefaultOpen").click(); + +//Disables right click +document.addEventListener( + "contextmenu", + function (event) { + event.preventDefault(); + }, + false +); + +// NAVIGATION MENU JS +const mainMenu = document.querySelector('.mainMenu'); +const closeMenu = document.querySelector('.closeMenu'); +const openMenu = document.querySelector('.openMenu'); +const NavBtn = document.querySelectorAll('.Btn'); + +openMenu.addEventListener('click', show); +closeMenu.addEventListener('click', close); +// NavBtn.addEventListener('click' , close); + +// close menu when you click on a menu item +NavBtn.forEach(item => { + item.addEventListener('click',function(){ + close(); + }) +}) + +function show(){ + mainMenu.style.display = 'flex'; + mainMenu.style.top = '-2px'; +} +function close(){ + mainMenu.style.top = '-113%'; +} diff --git a/PortfolioTemplate/portfolio b/PortfolioTemplate/portfolio new file mode 100644 index 0000000..31ca4ff --- /dev/null +++ b/PortfolioTemplate/portfolio @@ -0,0 +1,225 @@ + + + + + + PORTFOLIO + + + + + + + +
+
+ +
+
+

CHINMAY PUNDIR

+

━━━━━━━━━━━━━━━━

+

+ I am this and that and dont know why i am this but because i am + that so thats why i am doing this. +

+
+
+ avatar +
+
+ +
+
+
+ I am +
+
+
+

ABOUT ME

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Repellat quod incidunt. Quis ipsum eaque hic blanditiis sequi + sed, nemo eos, iste inventore amet excepturi. Iure, obcaecati + similique. Obcaecati, iusto + + + Lorem, ipsum dolor sit amet consectetur adipisicing + elit.Architecto pariatur tempore nam vitae corrupti alias, quis + inventore error et illo mollitia molestiae dolore. Totam + quisquam repellendus, ad magnam beatae at? + Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse + doloribus amet molestiae rerum doloremque ipsa maxime assumenda, + ratione corporis fuga, aliquid facere repellendus explicabo rem + odit autem quos. Cum, ullam. + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Laborum totam obcaecati, recusandae animi, itaque eius placeat + soluta suscipit dolores qui adipisci earum doloremque sint optio + possimus accusantium ea eaque ratione. +

+
+
+

SKILLS

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

PROJECTS

+
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Earum rerum dolore sint voluptatem. Id sunt porro, vitae + possimus maiores in dolorem itaque sit sapiente velit animi, + eius expedita totam quod. +
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Earum rerum dolore sint voluptatem. Id sunt porro, vitae + possimus maiores in dolorem itaque sit sapiente velit animi, + eius expedita totam quod. +
+
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Earum rerum dolore sint voluptatem. Id sunt porro, vitae + possimus maiores in dolorem itaque sit sapiente velit animi, + eius expedita totam quod. +
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Earum rerum dolore sint voluptatem. Id sunt porro, vitae + possimus maiores in dolorem itaque sit sapiente velit animi, + eius expedita totam quod. +
+
+
+
+
+
+
+
+

CONNECT

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

SOCIALS

+
+ + + + + +
+
+
+
+
+ + + + + + + diff --git a/PortfolioTemplate/responsive.css b/PortfolioTemplate/responsive.css new file mode 100644 index 0000000..c60e94a --- /dev/null +++ b/PortfolioTemplate/responsive.css @@ -0,0 +1,237 @@ +@media only screen and (max-width: 768px) { + .responsive { + display: flex; + flex-direction: row; + } + .Btn { + margin: 20px; + } + #MainPage { + display: flex; + flex-direction: column-reverse; + margin: 26px -65px 64px 32px; + width: 517px; + } + .ImgAvatar { + margin: 15px 0 0 0; + } + .Intro-text { + margin: 35px 0 0 0; + } + #SecPage .static-text { + font-size: 61px; + } + .AboutPage { + width: 508px; + } + h2 { + font-size: 32px; + } + #AboutText { + font-size: 14px; + } + #icons { + font-size: 13px; + display: flex; + align-items: center; + } + .box { + display: flex; + flex-direction: column; + } + .ProjectPage { + height: 826px; + width: 505px; + margin: 49px 0 0 79px; + } + .Socials { + font-size: 13px; + margin: 41px 0 0 51px; + } + nav .mainMenu { + margin: 2px 6px 12px 101px; + } + #SecPage { + margin: 13px 0 0 117px; + } + #form { + margin: 42px 0 0 87px; + } +} + +/* PHONE CSS */ +@media only screen and (max-width: 375px) { + .responsive { + display: flex; + flex-direction: row; + } + .ImgAvatar { + margin: -16px 0 0 0; + } + h1 { + font-size: 40px; + } + h4 { + font-size: 15px; + } + #IntroPage { + width: 256px; + } + h3 { + font-size: 14px; + } + img { + height: 207px; + width: 216px; + } + .Btn { + margin: 37px 111px 2px 115px; + font-size: 25px; + padding: 7px 18px 9px 16px; + } + .burger { + visibility: visible; + background: 0 0; + } + .Intro-text { + margin: -35px 0 0 0; + } + #SecPage { + margin: 17px 21px 0 6px; + } + #SecPage .static-text { + margin: 2px 2px 3px 5px; + font-size: 46px; + } + #icons { + font-size: 8px; + display: flex; + align-items: center; + } + .box { + display: flex; + flex-direction: column; + } + .Socials { + font-size: 13px; + margin: 24px 2px 2px 2px; + } + .AboutPage { + width: 302px; + margin: 27px 2px 3px 31px; + height: 497px; + } + span { + font-size: 11px; + } + .dynamic-text { + border-radius: 8px; + font-size: 38px; + } + #AboutText { + font-size: 12px; + } + .static-text { + font-size: 45px; + } + h2 { + font-size: 29px; + } + .ProjectPage { + height: 772px; + width: 311px; + margin: 2px 0 8px 28px; + } + #box1, + #box2, + #box3, + #box4 { + font-size: 13px; + margin: -11px -2px 27px 9px; + padding: 14px 0 3px 2px; + } + h2 { + font-size: 24px; + } + #ContactBox { + width: 291px; + height: 365px; + align-items: inherit; + } + input[type="email"], + input[type="text"], + textarea { + width: 72%; + height: 49%; + } + #form { + width: 311px; + height: 502px; + margin: 2px 2px 2px 25px; + } + #email, + #msg, + #name { + font-size: 9px; + height: 70px; + padding: 1px 0 52px 0; + margin: -41px 0 0 17px; + } + #SubmitBtn { + margin: -2px 120px 0 104px; + } + #social-icons { + font-size: 9px; + } + #LabEmail, + #LabMsg, + #LabName { + font-size: 18px; + } + #MainPage { + margin: 2px 28px 34px 34px; + width: 308px; + } + .skills { + padding: 20px 2px 2px 2px; + } + nav .openMenu { + display: block; + } + nav .mainMenu { + height: 101vh; + position: fixed; + top: 0; + right: -9px; + left: -101px; + z-index: 10; + flex-direction: column; + justify-content: center; + align-items: center; + background: #bbd7d7; + transition: top 1s ease 0s; + display: none; + } + nav .mainMenu .closeMenu { + display: block; + position: absolute; + top: 20px; + background: 0 0; + right: 20px; + } + nav .openMenu { + display: block; + } + #cross { + background: 0 0; + color: #000; + } + textarea { + height: 69px; + width:200px; + } + .typed-cursor { + font-size: 39px; + opacity: 1; +} +} diff --git a/PortfolioTemplate/style.css b/PortfolioTemplate/style.css new file mode 100644 index 0000000..a8539e1 --- /dev/null +++ b/PortfolioTemplate/style.css @@ -0,0 +1,416 @@ +@import url(https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&family=Kanit&family=Lato&family=Overpass&display=swap); +* { + margin: 0; + padding: 0; + background-color: #bbd7d7; +} + +/* Cant select text */ +* { + user-select: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; +} + +/* Scrollbar */ +* { + scrollbar-width: thin; + scrollbar-color: #034775 #dfe9eb; +} +::-webkit-scrollbar { + width: 10px; + width: 10px; +} +::-webkit-scrollbar-track { + border-radius: 5px; + background-color: #dfe9eb; + border: 1px double #fff; +} +::-webkit-scrollbar-track:hover { + background-color: #b8c0c2; +} +::-webkit-scrollbar-track:active { + background-color: #b8c0c2; +} +::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: #034775; + border: 1px groove #fff; +} +::-webkit-scrollbar-thumb:hover { + background-color: #034775; +} +::-webkit-scrollbar-thumb:active { + background-color: #1c76a3; +} + +/* COMMON CSS */ +.colorlayer { + padding: 15px 0 3px 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + + +/* FIRST PAGE CSS */ +#MainPage { + background: linear-gradient(315deg, #5259b9, #616adb); + border: 4px solid #000; + border-radius: 18px; + box-shadow: 0 3px 7px #49501e, 21px 22px 59px #6d77f6; + height: 200px; + display: flex; + align-items: center; + width: 60%; + height: 80%; + justify-content: space-between; + margin: 34px 0 23px 0; +} +.ImgAvatar { + display: flex; + box-sizing: border-box; + background: 0 0; +} +img { + width: 20px; + align-items: left; + justify-content: left; + margin: 29px; + height: 243px; + width: 249px; + border: 4px solid #000; + box-sizing: border-box; + border-radius: 116px; + background: #e0e0e0; + box-shadow: inset -25px 25px 44px #9d9d9d, inset 25px -25px 44px #fff; +} +h1 { + display: inline-block; + text-align: left; + margin: -23px 6px 5px 16px; + font-size: 75px; + font-family: Overpass, sans-serif; + background: 0 0; +} +#IntroPage { + height: 294px; + border-radius: 14px; + background: #e0e0e0; + box-shadow: inset -28px 24px 47px #989898, inset 24px -24px 47px #fffff5; + border: 3px solid #000; + padding: 32px 12px 12px 12px; + margin: 15px; +} + +/* NAVBAR */ +nav { + display: flex; + align-items: center; + justify-content: space-between; +} +.Btn { + padding: 18px; + border-radius: 16px; + margin: 60px; + background: linear-gradient(315deg, #5259b9, #616adb); + box-shadow: 0 3px 7px #49501e, 21px 22px 59px #6d77f6; + font-family: Kanit, sans-serif; + border: 3px solid #000; + cursor: pointer; + font-size: 16px; +} +.Btn:hover { + border: 10px solid balck; + border-radius: 10px; + font-size: 20px; + box-shadow: #e0e0e0; +} +nav .mainMenu { + display: flex; + list-style: none; +} +nav .mainMenu li a { + display: inline-block; + padding: 15px; + text-decoration: none; + text-transform: uppercase; + color: #fff; + font-size: 18px; + transition: 0.2s ease; +} +nav .mainMenu .closeMenu { + font-size: 2rem; + display: none; + cursor: pointer; +} +nav .openMenu { + font-size: 2rem; + margin: 20px; + display: none; + cursor: pointer; +} + +/* TEXT */ +h2 { + background: 0 0; + font-size: 49px; + font-family: Lato, sans-serif; +} +h3 { + padding: 2px 2px 3px 19px; + background: 0 0; +} +h4 { + padding: 2px 2px 3px 20px; + font-family: Kanit, sans-serif; + background: 0 0; +} + +/* SECOND PAGE AND THIRD PAGE */ +#SecPage { + display: flex; + margin: 12px 0 0 0; + flex-direction: column; + align-items: center; + background: 0 0; +} +.static-text { + color: #121313; + font-size: 96px; + font-weight: 400; + font-family: Kanit, sans-serif; + margin: -27px 15px 8px -5px; + background: 0 0; +} +.dynamic-text { + color: #df1c1c; + border-radius: 19px; + background: linear-gradient(225deg, #cacaca, #f0f0f0); + box-shadow: -14px 14px 28px #828282, 14px -14px 28px #fff; + font-family: Inconsolata, monospace; +} +.AboutPage, +.ProjectPage { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 116px; + box-shadow: inset -25px 25px 44px #666397, inset 25px -25px 44px #5a71c7; + height: 511px; + width: 927px; + border-radius: 16px; + border: 4px solid #000; + background: linear-gradient(315deg, #5259b9, #616adb); + margin: 29px 2px 2px 2px; +} +#AboutText { + margin: 4px 14px 18px 18px; + font-family: Kanit, sans-serif; + border-radius: 14px; + background: #e0e0e0; + border: 3px solid #000; + box-shadow: inset -28px 24px 47px #989898, inset 24px -24px 47px #fffff5; + height: 500px; +} + +/* THIRD PAGE */ +#ThirdPage { + border-radius: 36px; + background: 0 0; +} +.box { + display: flex; + flex-direction: row; + width: 80%; + background: 0 0; + margin: 34px 0 0 0; +} +#box1, +#box2, +#box3, +#box4 { + border-radius: 20px; + display: flex; + box-sizing: border-box; + background: #e0e0e0; + border: 3px solid #000; + box-shadow: inset -28px 24px 47px #989898, inset 24px -24px 47px #fffff5; + margin: 0 0 30px 0; + height: 150px; + padding: 17px 0 0 0; + text-align: center; + font-family: Kanit, sans-serif; +} +.BIGBOX1, +.BIGBOX2 { + background: 0 0; + margin: 0 12px 0 0; +} +.Intro-text { + display: flex; +} +.skills { + display: flex; + flex-direction: column; + align-items: center; + padding: 36px 2px 2px 2px; +} +#i-fb, +#i-ig, +#i-li, +#i-tw, +#i1, +#i2, +#i3, +#i4 { + margin: 20px; + color: #000; +} +#i1:hover:before, +#i2:hover:before, +#i3:hover:before, +#i4:hover:before { + content: attr(data-hover); + width: 2px; + font-size: 20px; + background-color: #000; + color: #fff; + text-align: center; + border: 2px solid grey; + border-radius: 5px; + padding: 2px 5px; + transition: width 1s ease-in-out; + z-index: 1; + left: 0; + top: 0; + font-family: Inconsolata, monospace; +} +#ContactUs, +#LabEmail, +#LabMsg, +#LabName, +#MsgText, +#SlideContent, +#femail, +#fname, +.SubmitBtn, +span { + background: 0 0; +} +#line1::after, +#line2::after, +#line3::after, +#line4::after { + content: "\a\a"; + white-space: pre; +} +#LabEmail::after, +#LabMsg::after, +#LabName::after { + content: "\a"; + white-space: pre-line; +} + + +/* CONTACT PAGE */ +#form { + display: flex; + flex-direction: column; + align-items: center; + border-radius: 116px; + box-shadow: inset -25px 25px 44px #666397, inset 25px -25px 44px #5a71c7; + height: 611px; + width: 500px; + border-radius: 16px; + border: 4px solid #000; + background: linear-gradient(315deg, #5259b9, #616adb); + justify-content: center; + margin: 0 0 25px 0; +} +#email, +#msg, +#name { + padding: 0 0 19px 0; + background: 0 0; + font-family: Kanit, sans-serif; + font-size: 30px; + margin: 0 0 0 19px; +} +input[type="email"], +input[type="text"], +textarea { + width: 123%; + height: 41%; + border: 2px solid #000; + border-radius: 6px; + margin: 5px 36px 10px 11px; + padding: 1px 6px 1px 11px; + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", + "Lucida Sans Unicode", Geneva, Verdana, sans-serif; + font-size: 15px; + resize: none; +} +#SubmitBtn { + font-family: Kanit, sans-serif; + font-size: 20px; + border: 2px solid #000; + border-radius: 6px; + background: 0 0; + margin: -63px 0 0 154px; + padding: 0 9px 0 9px; +} +#SubmitBtn:hover { + background-color: #5259b9; + font-size: 23px; + cursor: pointer; +} +#SubmitBtn:active { + transform: scale(0.98); +} +#ContactBox { + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; + background: #e0e0e0; + border: 3px solid #000; + box-shadow: inset -28px 24px 47px #989898, inset 24px -24px 47px #fffff5; + height: 506px; + width: 428px; + border-radius: 16px; +} +#CntTxt { + background: 0 0; + margin: 0 0 19px 0; +} +#boxformsocial { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: 0 0; +} +.Socials { + display: flex; + flex-direction: column; + align-items: center; +} +#social-icons a { + text-decoration: none; +} +#social-icons:hover { + color: #034775; +} + +/* FOOTER */ +.FooterText { + display: flex; + align-items: center; + flex-direction: column-reverse; + margin: 85px 2px 8px 2px; + font-family: Verdana, Geneva, Tahoma, sans-serif; +}