diff --git a/assets/css/animation.css b/assets/css/animation.css new file mode 100644 index 0000000..3d324df --- /dev/null +++ b/assets/css/animation.css @@ -0,0 +1,154 @@ +/* ================================================================================================= */ +/* 1. Morph Blob style - used in home page [ index.html] */ +/* ================================================================================================= */ + +/* .blob { + + overflow: hidden; + width: 15rem; + height: 15rem; + border-radius: 42%; +} */ + +.morph-blob { + min-width: 215px; + height: auto; + background-color: #793FDF; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ; + animation: morphBorders 4s linear infinite; +} + +@keyframes morphBorders { + 0% , 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ; } + + 25% { border-radius: 70% 30% 31% 69% / 34% 23% 77% 66% ; } + + 50% { border-radius: 53% 47% 19% 81% / 59% 76% 24% 41% ; } + + 75% { border-radius: 46% 54% 74% 26% / 73% 52% 48% 27% ;} + +} + +/* ================================================================================================= */ +/* 2.color-fill style - used in home page [ index.html] */ +/* ================================================================================================= */ + +/* ---- common style ----- + +.color-fill { + border-radius: 60px 70px 40px 140px; + display: block; + width: 250px; + height: 220px; + background-color: #6C00FF; + position: relative; + filter: drop-shadow(8px 3px 10px #7D7C7C); + border: 3px solid #793FDF; +} + +*/ + +/* ---- 2.1 : hover effect ---- + +.color-fill:hover { + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + display: block; + width: 250px; + height: 220px; + background-color: #793FDF; + position: relative; + filter: drop-shadow(8px 3px 10px #7D7C7C); + border: 3px solid #864AF9; +} + + ---- end of 2.1 ---- */ + +/* ---- 2.2 : instead of using hover effect on the .color-fill class , + we can use pseudo class ( .color-fill2 ) + along with jscript to made the same hover effect. ---- + +.color-fill2 { + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; + display: block; + width: 250px; + height: 220px; + background-color: #793FDF; + position: relative; + filter: drop-shadow(8px 3px 10px #7D7C7C); + border: 3px solid #864AF9; +} + + + + ---- end of 2.2 ---- */ + + /* ============================================================================== */ + /* 3. Wave header style - used in contacts.html */ + /* ============================================================================== */ + + .wave { + position: relative; + display: grid; + place-items: center; + } + + .wave h2 { + position: absolute; + /* transform: translate(-50%, -50%); */ + font-size: 4em; + } + + + .wave h2:nth-child(1) { + color: transparent; + -webkit-text-stroke: 2px #793FDF; + } + + .wave h2:nth-child(2) { + color: #793FDF; + animation: wave-text 4s ease-in-out infinite; + } + + @keyframes wave-text { + + 0%, + 100% { + clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%) + } + + 50% { + clip-path: polygon(0 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 40%, 100% 100%, 0% 100%) + } + } + + /* ============================================================================================ */ + /* 4. wave header reflection bottom - used in contacts.html */ + /* ============================================================================================ */ + + /* .css-reflect { + -webkit-box-reflect: below -11px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(47%, transparent), to(rgba(255, 255, 255, 0.34))); + } */ + + /* ============================================================================================ */ + /* responsive styles */ + /* ============================================================================================ */ + +/* for mobile view */ + + @media only screen and (max-width: 500px) { + .wave h2 { + font-size: 3rem !important; + } + } \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..2a17d5f --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,340 @@ +/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Syne:wght@400..800&display=swap') ; */ + +@import url('https://fonts.googleapis.com/css2?family=Monda:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Syne:wght@400..800&display=swap') ; + + /* ==== Font family used ==== + + font-family: "Syne", sans-serif; + font-family: "Open Sans", sans-serif; + font-family: "Monda", sans-serif; + + */ + + +/* ============================================================================================================ */ +/* universal */ +/* ============================================================================================================ */ + +h1,h4,h5,h6 { + color: #31363F; + + font-family: "Open Sans", sans-serif; + font-weight: 600 !important; +} +p { + text-indent: 5%; + + +} +.colortxt { + color: #793FDF; +} +.colortxt-2 { + color: #FF3EA5; +} +.colortxt-3 { + color:#7D7C7C; +} + +.background-body { + display: grid; + background-color: #793FDF; + + letter-spacing: 0.7px; + line-height: 1.7rem; +} + +.body-container { + background-color: #FFF7F1; + min-height: 700px; + border-radius: 15px; + margin: 8% auto 1%; + display: grid; +} + +/* ============================================================================================================ */ +/* Buttons */ +/* ============================================================================================================ */ + +.Hire_Me, .Download_CV { + width: 60%; +} +#Button { + color: #FF3EA5; + border: 2px solid #864AF9; + margin: 20px 0; + background-color: #FFF7F1; + /* filter: drop-shadow(3px 3px 0px #240A34); */ +} +#Button:hover { + background-color: #793FDF; + color: #FFF7F1; + filter: drop-shadow(3px 3px 0px #240A34); +} +#Button:active , #Button-2:active { + transform: scale(.96); +} + +#Button-2 { + color: #FFF7F1; + /* border: 2px solid #FF3EA5; */ + margin: 10px 10px; + background-color: #864AF9; + /* filter: drop-shadow(3px 3px 0px #240A34); */ +} +#Button-2:hover { + background-color: #FFF7F1; + border: 2px solid #793FDF; + color: #FF3EA5; + filter: drop-shadow(3px 3px 0px #240A34); +} + + +/* ============================================================================================================ */ +/* footer-icons */ +/* ============================================================================================================ */ + +.icons { + text-decoration: none; + margin: 0 25px; + /* color: #7D7C7C; */ + font-size: 1.2rem; +} + +.icons:hover { + color: #793FDF; +} + +.footer-icons { + margin: 25px auto 15px auto !important; + display: flex; + justify-content: center; +} + +.address-icons { + filter: drop-shadow(3px 3px 0px #240A34); +} + + +/* ============================================================================================================ */ +/* navigation bar */ +/* ============================================================================================================ */ + +.nav-link { + position: relative; + display: inline-block; + margin: 0 20px; + + font-family: "Open Sans", sans-serif; +} + +.nav-link.active { + color:#793FDF !important; + text-transform: uppercase !important; + font-weight: bold; + + font-family: "Open Sans", sans-serif; +} + +.nav-link:hover { + color: rebeccapurple !important; +} + +.nav-link::after { + content: ""; + position: absolute; + width: 100%; + height: 2px; + bottom: 0; + left: 0; + background-color: rebeccapurple; + transform: scaleX(0); + transform-origin: right; + transition: transform 0.5s ease; +} + +.nav-link:hover::after { + transform: scaleX(1); + transform-origin: right; +} + +.navbar-brand { + margin-left: 10%; + margin-right: 30% !important; + color: #793FDF !important; + + font-family: "Syne", sans-serif; + font-weight: 400; + font-style: normal; +} + +.navbar { + flex-wrap: wrap; + align-content: flex-start; + padding: 20px 0 0 !important; + height: max-content; +} + + +/* ============================================================================================================ */ +/* index.html */ +/* ============================================================================================================ */ + + +.home-content-1{ + padding: 45px 45px 0 !important; + text-wrap: balance; + +} + +.home-content-2 { + display: grid; + place-items: center; + padding: 15px; +} + +.profile-img { + position: relative; + /* top: 60%; + left: 50%; + transform: translate(-50%, -50%); */ + width: 150px; + height: auto; + left: 35px; + filter: drop-shadow(10px 1px 5px #240A34); +} + +.home-container-2 { + text-align: center; +} + +.download-link { + all: unset; +} + +/* ============================================================================================================ */ +/* skills.html */ +/* ============================================================================================================ */ + +.progress-bar { + background-color: #A076F9 !important; +} + +.skills-content-1 { + padding: 0 30px; +} + +.skills-content-2 { + padding: 0 15px; +} + +.progress { + height: 10px !important; +} + + +/* ============================================================================================================ */ +/* contacts.html */ +/* ============================================================================================================ */ + +.wave { + /* filter: drop-shadow(5px 4px 2px #240A34); */ +} + +.contacts-container-1 { + margin-top: 20px; +} + +.contacts-container-2 { + /* padding: 45px 45px 0 !important; */ + margin-top: 20px; +} + +.contacts-content-1, .contacts-content-2, .contacts-content-3 { + display: grid; +} + +.contacts-content-1 { + justify-content: center; + align-content: end; + margin-top: 10px; +} + +.contacts-content-2 { + place-items: center; +} + +.contacts-content-3{ + justify-content: left; +} + +.contacts-info td { + padding: 10px; +} + +iframe { + filter: drop-shadow(5px 5px 6px #240A34); +} + +/* ============================================================================================================ */ +/* projects.html */ +/* ============================================================================================================ */ + +.projects-container-1 { + margin-top: 30px; + margin-bottom: 10px; +} + +.projects-container-1 .card { + border: 3px solid #793FDF; + border-radius: 7px; +} +.card { + position: relative; +} + +/* ============================================================================================================ */ +/* Responsive styles */ +/* ============================================================================================================ */ + +/* mobile view */ + +@media only screen and (max-width: 500px) { + + .contacts-content-3 { + visibility: hidden; + } + + .contacts-container-1 { + margin-top: 60px; + } + + .contacts-container-2 { + margin-top: 80px; + } + + .contacts-info td { + padding:10px 0 !important; + } + + .navbar { + margin-bottom: 15px; + } + + +} + +/* small screen */ + +@media only screen and (max-width: 360px) { + + .contacts-info { + font-size: small; + } + +} + + + + + diff --git a/assets/file/Mugesh-M_CV.pdf b/assets/file/Mugesh-M_CV.pdf new file mode 100644 index 0000000..aae3577 Binary files /dev/null and b/assets/file/Mugesh-M_CV.pdf differ diff --git a/assets/images/Mugesh.png.png b/assets/images/Mugesh.png.png new file mode 100644 index 0000000..b49b899 Binary files /dev/null and b/assets/images/Mugesh.png.png differ diff --git a/assets/images/doggy-date-project.jpg b/assets/images/doggy-date-project.jpg new file mode 100644 index 0000000..4258b6a Binary files /dev/null and b/assets/images/doggy-date-project.jpg differ diff --git a/assets/images/skill-job-project.png b/assets/images/skill-job-project.png new file mode 100644 index 0000000..4eb39d6 Binary files /dev/null and b/assets/images/skill-job-project.png differ diff --git a/assets/images/tamizh-arivom-project.png b/assets/images/tamizh-arivom-project.png new file mode 100644 index 0000000..e67d61f Binary files /dev/null and b/assets/images/tamizh-arivom-project.png differ diff --git a/contacts.html b/contacts.html new file mode 100644 index 0000000..c9caf95 --- /dev/null +++ b/contacts.html @@ -0,0 +1,124 @@ + + + + + + + Mugesh Manoharan Portfolio + + + + + + + + + + + + + + +
+
+ + + +
+ +
+

Contact Me

+

Contact Me

+
+
+ +
+ +
+ +
+ + + + + + + + + + + + + + +
+91-7395903647
samcharlesmugesh@gmail.com
No : 42 , A.V nagar, Periyapanicheri, Chennai-600122
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ + + + + +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..244e989 --- /dev/null +++ b/projects.html @@ -0,0 +1,182 @@ + + + + + + + Mugesh Manoharan Portfolio + + + + + + + + + + + + +
+
+ + + +
+ +
+ +
+ +
+ + ... + +
+
Doggy-Date
+
+ +
+

+ Created using : Html , Cascading Style Sheet , Bootstrap5. +

+
+ +
+ + + + + Live link +
+ +
+
+ +
+ +
+ + ... + +
+
Tamizh-Arivom
+
+ +
+

+ This site was designed using Wixsite. +

+
+
+ + + Live link +
+ +
+
+ +
+ +
+ + ... + +
+
Skill and Job recommender
+
+ +
+

+ This project was created by using Html, Cascading Style Sheet, Jscript, Python, Django. +

+
+ + + +
+
+ + + +
+
+ + +
+
+ + + + \ No newline at end of file diff --git a/skills.html b/skills.html new file mode 100644 index 0000000..e08941b --- /dev/null +++ b/skills.html @@ -0,0 +1,145 @@ + + + + + + + Mugesh Manoharan Portfolio + + + + + + + + + + + + +
+
+ + + +
+ +
+ +
+

SKILL'S :

+
+ +
    + +
  • +

    HTML

    +
    +
    +

    +
    • + +
  • +

    CSS

    +
    +
    +

    +
    • + +
  • +

    JScript

    +
    +
    +

    +
    • + +
+ +

Design & Framework :

+
    +
  • Wixsite
    • +
  • Bootstrap
    • +
+ + +
+ +
+

EDUCATION :

+
+ +
    + +
  • +
    B.Tech ( 80.3% )
    +
      +

    • Loyola Institute of Technology , pazhanchur.

      • +

    • 2019 - 2023

      • +
    +
    • + +
  • +
    HSC ( 73% )
    +
      +

    • ST.Mary's Mat.hr.sec.school , porur.

      • +

    • 2018 - 2019

      • +
    +
    • + +
  • +
    SSLC ( 92.4% )
    +
      +

    • ST.Mary's Mat.hr.sec.school , porur.

      • +

    • 2016 - 2017

      • +
    +
    • + +
+
+ + + +
+
+ +
+ +
+ + + + +