diff --git a/Asset/New shortcut.lnk b/Asset/New shortcut.lnk deleted file mode 100644 index 7607283..0000000 Binary files a/Asset/New shortcut.lnk and /dev/null differ diff --git a/Asset/2_Soumya_Potrait.png b/Asset/Pic/2_Soumya_Potrait.png similarity index 100% rename from Asset/2_Soumya_Potrait.png rename to Asset/Pic/2_Soumya_Potrait.png diff --git a/Asset/Soumya_Potrait.png b/Asset/Pic/Soumya_Potrait.png similarity index 100% rename from Asset/Soumya_Potrait.png rename to Asset/Pic/Soumya_Potrait.png diff --git a/Asset/Pic/abstract-bg.jpg b/Asset/Pic/abstract-bg.jpg new file mode 100644 index 0000000..8328231 Binary files /dev/null and b/Asset/Pic/abstract-bg.jpg differ diff --git a/Asset/Pic/cube.png b/Asset/Pic/cube.png new file mode 100644 index 0000000..61e8b77 Binary files /dev/null and b/Asset/Pic/cube.png differ diff --git a/Asset/Pic/geometric-shape-1.jpeg b/Asset/Pic/geometric-shape-1.jpeg new file mode 100644 index 0000000..d42fc6b Binary files /dev/null and b/Asset/Pic/geometric-shape-1.jpeg differ diff --git a/Asset/Pic/illusion-square.png b/Asset/Pic/illusion-square.png new file mode 100644 index 0000000..54c05ba Binary files /dev/null and b/Asset/Pic/illusion-square.png differ diff --git a/Asset/Pic/metal.png b/Asset/Pic/metal.png new file mode 100644 index 0000000..e4fcd77 Binary files /dev/null and b/Asset/Pic/metal.png differ diff --git a/Asset/Pic/pcbg.jpg b/Asset/Pic/pcbg.jpg new file mode 100644 index 0000000..b4c4eb5 Binary files /dev/null and b/Asset/Pic/pcbg.jpg differ diff --git a/Asset/Pic/red-cube.jpeg b/Asset/Pic/red-cube.jpeg new file mode 100644 index 0000000..1328e9e Binary files /dev/null and b/Asset/Pic/red-cube.jpeg differ diff --git a/Asset/Resume/SoumyaRanjanSahooResume.pdf b/Asset/Resume/SoumyaRanjanSahooResume.pdf new file mode 100644 index 0000000..92459da Binary files /dev/null and b/Asset/Resume/SoumyaRanjanSahooResume.pdf differ diff --git a/Asset/Resume/Soumya_Ranjan_Frontend_Dev.pdf b/Asset/Resume/Soumya_Ranjan_Frontend_Dev.pdf new file mode 100644 index 0000000..fbbe297 Binary files /dev/null and b/Asset/Resume/Soumya_Ranjan_Frontend_Dev.pdf differ diff --git a/Asset/Resume/Soumya_Ranjan_Programmer_Dev.pdf b/Asset/Resume/Soumya_Ranjan_Programmer_Dev.pdf new file mode 100644 index 0000000..f257e3d Binary files /dev/null and b/Asset/Resume/Soumya_Ranjan_Programmer_Dev.pdf differ diff --git a/index.html b/index.html index a091558..bfc06ef 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Soumya Ranjan - @@ -16,11 +15,12 @@ +
- +

...Hello...

@@ -42,8 +42,8 @@

...Hello...

  • Project
    • -
  • - Resume +
  • Contact @@ -82,9 +82,9 @@

    ...Hello...

    Project
    • -
  • - - Resume +
  • @@ -95,20 +95,23 @@

    ...Hello...

    Clone Projects

    Works

    - +
    -
    +

    ...Hello...

    - I'm Soumya Ranjan Sahoo + I'm Soumya Ranjan Sahoo

    -

    +

    Frontend Developer & Cybersecurity Enthusiast.


    I create responsive, secure, and user-friendly web applications. Passionate about ethical hacking and solving real-world problems with code. -

    - -
    + + -
    - SCROLL DOWN -
    + +
    + SCROLL DOWN +
    -
    -

    A B.Tech Computer Science student with a passion for crafting web experiences and securing digital landscapes. From building sleek, responsive websites to diving deep into the world of ethical hacking, I love turning ideas into real-world projects.

    +
    +

    A B.Tech Computer Science student with a passion for crafting web experiences and securing digital landscapes. From building + sleek, responsive websites to diving deep into the world of ethical hacking, I love turning ideas into real-world projects. +


    -

    I’m constantly pushing my boundaries in web development and cybersecurity. My goal ? To create secure , innovative solutions that make a difference. Explore my projects and let’s connect through GitHub or LinkedIn!

    +

    I’m constantly pushing my boundaries in web development and cybersecurity. My goal ? + To create secure , innovative solutions that make a + difference. Explore my projects and let’s connect through GitHub or LinkedIn!

    -
    -

    Projects

    +
    +
    +

    Projects

    +
    @@ -205,11 +225,72 @@

    Projects

    -
    Resume
    -
    Contact
    + +
    + +
    +
    +
    +
    +
    + + + + + + + +
    +
    +
    +
    - diff --git a/minimal-style.css b/minimal-style.css index 3cd9fb9..8c608d7 100644 --- a/minimal-style.css +++ b/minimal-style.css @@ -49,32 +49,35 @@ display: none; } } +.decor-container { + width: 150px; + height: 100px; + /* outline: solid; */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + gap: 4px; -#Hero::before { - content: ""; - width: 200px; - height: 200px; - background-color: #867d0000; + transform: rotate(45deg); position: absolute; - top: 10%; - left: 10%; - filter: blur(10rem); - z-index: -1; + right: 4vw; } -#Hero::after { - content: ""; - width: 200px; - height: 200px; - background-color: #4c018600; - position: absolute; - bottom: 10%; - right: 10%; - z-index: -1; - filter: blur(10rem); - transition: all ease 0.5s; - transform: rotateZ(-30deg); - transform-origin: left bottom; +.decor-box { + background-color: var(--data-color); + /* background-color: #00ff2a; */ + width: 100%; + height: 100%; + border-radius: 4px; + transition: all ease-in-out 0.4s; +} + +.decor-box:hover{ + /* transform: rotateX(70deg); */ + /* display: none; */ + /* opacity: 0; */ + filter: blur(30px); + } html { @@ -209,13 +212,15 @@ li { } -#About p{ - font-size: clamp(16px, 1.5rem, 48px); +#About p { + font-size: clamp(16px, 1.3rem, 48px); max-width: 65ch; padding: 1rem; text-align: justify; line-height: 2.5rem; opacity: 0.1; + margin-top: 100px; + /* transition: all ease-in-out 1s; */ animation: fade-in linear forwards; @@ -223,12 +228,13 @@ li { } @keyframes fade-in { - to{ + to { + margin-top: 0; opacity: 1; } } -#About p span{ +#About p span { /* outline: 1px solid; */ padding: 2px 10px; border-radius: 8px; @@ -237,75 +243,123 @@ li { } -.l-1{ +.l-1 { background-color: rgb(17, 17, 128); } -.l-2{ +.l-2 { background-color: rgb(192, 0, 58); } -.l-3{ +.l-3 { background-color: rgb(0, 192, 16); } -.l-4{ +.l-4 { background-color: rgb(168, 84, 45); } -.l-5{ +.l-5 { background-color: rgb(14, 109, 99); } -.l-6{ +.l-6 { background-color: rgb(145, 10, 122); } -.l-7{ +.l-7 { background-color: rgb(248, 23, 72); } -.l-8{ +.l-8 { background-color: rgb(0, 192, 16); } -.l-9{ +.l-9 { background-color: rgb(182, 15, 224); } -.l-10{ +.l-10 { background-color: rgb(46, 46, 46); } -.l-11{ +.l-11 { background-color: blue; } /* PROJECT */ -.card-container{ +.card-container { width: 100%; } -#Projects h2{ - font-size: 5rem; +.gradient-box-holder { margin: 40vh; - outline: solid; + position: sticky; + top: 50%; + transform: translate(0, -50%); + z-index: -1; +} + +.gradient-box { + font-size: 4rem; + background-color: var(--color-secondary); padding: 0 2rem; border-radius: 6rem; - transform: rotate(4deg) translate(0, -50%); - position: sticky; + /* position: relative; */ + +} + +@property --angle { + syntax: ''; + inherits: false; + initial-value: 0deg; +} + +.gradient-box::before { + content: ''; + position: absolute; + background-image: conic-gradient(from var(--angle), #1515dd, #db1547, #db1547, #1515dd); + height: 100%; + width: 100%; + border-radius: 6rem; + /* scale: 1.01; */ + padding: 2px; + animation: autorotate 2s linear infinite; + z-index: -1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all ease-in-out 0.3s; +} + +.gradient-box::after{ + content: ''; + position: absolute; + background-image: conic-gradient(from var(--angle), #1515dd, #db1547, #db1547, #1515dd); + height: 100%; + width: 100%; + filter: blur(20px); + border-radius: 6rem; + animation: autorotate 2s linear infinite; top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -5; } -#Projects h2:hover{ - background: var(--color-primary); + +@keyframes autorotate{ + to{ + --angle: 360deg; + } } -.card-landscape{ + +.card-landscape { width: 80%; - margin: 10px auto; + margin: 40px auto; border: solid 3px var(--font-color); border-radius: 1rem; @@ -314,12 +368,10 @@ li { background-size: cover; } -.card-landscape:nth-child(n){ +.card-landscape:nth-child(n) { transform: rotate(4deg); } -.card-landscape:nth-child(2n){ - transform: rotate(-4deg); -} - - +.card-landscape:nth-child(2n) { + transform: rotate(-4deg); +} \ No newline at end of file diff --git a/script.js b/script.js index c45dc4b..9199551 100644 --- a/script.js +++ b/script.js @@ -23,7 +23,7 @@ function toggleTheme() { if (localStorage.getItem("theme") === "theme-dark") { setTheme("theme-dark"); // If previously dark, set dark theme } else { - setTheme("theme-light"); // Default to light theme + setTheme("theme-dark"); // Default to dark theme } })(); @@ -39,71 +39,89 @@ function toggleSidebar() { // } } -// CROUSER - -const circleElement = document.querySelector(".circle"); - -const mouse = { x: 0, y: 0 }; -const circle = { x: 0, y: 0 }; - -window.addEventListener("mousemove", (e) => { - mouse.x = e.x; - mouse.y = e.y; -}); - -const speed = 0.13; -const tick = () => { - circle.x += (mouse.x - circle.x) * speed; - circle.y += (mouse.y - circle.y) * speed; - - circleElement.style.transform = `translate(${circle.x}px, ${circle.y}px)`; - - window.requestAnimationFrame(tick); -}; - -tick(); - - -// LOADER - - // CODE EFFECT const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; let interval = null; -document.querySelectorAll('.code').forEach(element => { - element.onmouseover = event => { +document.querySelectorAll(".code").forEach((element) => { + element.onmouseover = (event) => { let iteration = 0; - + // Clear any existing interval to avoid conflicts clearInterval(interval); - + // Create a new interval to handle the animation interval = setInterval(() => { // Update the text of the target element event.target.innerText = event.target.innerText .split("") .map((letter, index) => { - if(index < iteration) { + if (index < iteration) { // Return the original letter if the index is less than iteration return event.target.dataset.value[index]; } - + // Return a random letter from A-Z return letters[Math.floor(Math.random() * 52)]; }) .join(""); - + // Clear the interval once all letters have been replaced - if(iteration >= event.target.dataset.value.length){ + if (iteration >= event.target.dataset.value.length) { clearInterval(interval); } - + // Increment iteration slowly to achieve the animation effect iteration += 1 / 3; }, 30); }; }); +// Toggle visibility of the circle +function toggleCircle() { + const circle = document.querySelector(".circle"); + circle.style.display = circle.style.display === "none" ? "block" : "none"; +} + +// Cursor Following Effect +const circleElement = document.querySelector(".circle"); + +const mouse = { x: 0, y: 0 }; +const circle = { x: 0, y: 0 }; + +window.addEventListener("mousemove", (e) => { + mouse.x = e.x; + mouse.y = e.y; +}); + +const speed = 0.13; +let running = false; // Animation state flag + +const tick = () => { + if (!running) return; // Stop animation if not running + + circle.x += (mouse.x - circle.x) * speed; + circle.y += (mouse.y - circle.y) * speed; + + circleElement.style.transform = `translate(${circle.x}px, ${circle.y}px)`; + + window.requestAnimationFrame(tick); +}; +// Function to toggle animation +function toggleAnimation() { + const circle = document.querySelector(".circle"); + running = !running; // Toggle animation state + + if (running) { + circle.style.display = "block"; // Show the circle when animation starts + tick(); + } else { + // Reset position to original and hide the circle when stopping animation + circle.x = 0; + circle.y = 0; + circleElement.style.transform = "translate(0, 0)"; + circle.style.display = "none"; + } +} diff --git a/skills.css b/skills.css new file mode 100644 index 0000000..93180f5 --- /dev/null +++ b/skills.css @@ -0,0 +1,117 @@ + +/* SKILLS */ + +.main-container { + /* outline: solid; */ + backdrop-filter: blur(10px); + /* perspective: 800px; */ + /* Perspective for 3D effect */ +} + +.grid-type-1 { + --grid-width: 800px; + max-width: var(--grid-width); + width: 90vw; + aspect-ratio: 4/3; + + display: grid; + grid-template-areas: "box1 box1 box2 box3" + "box4 box5 box5 box3" + "box4 box6 box7 box7"; + + grid-template-rows: 1fr 1fr 1fr; + gap: 10px; +} + +@media only screen and (max-width: 600px) { + .grid-type-1 { + grid-template-areas: "box1 box1 box1 box1" + "box2 box2 box2 box2" + "box3 box3 box3 box3" + "box4 box4 box4 box4" + "box5 box5 box5 box5" + "box6 box6 box6 box6" + "box7 box7 box7 box7" + ; + + grid-template-rows: 1fr 1fr 1fr; + } +} + +.box { + display: flex; + justify-content: center; + align-items: center; + font-size: 1.2em; + overflow-x: auto; + +} + +/* Different sizes and colors for each box */ +.box1 { + grid-area: box1; + background-color: #edfffe; +} + +.box2 { + grid-area: box2; + background-color: #d8ffd8; +} + +.box3 { + grid-area: box3; + background-color: #ddddff; +} + +.box4 { + grid-area: box4; + background-color: #ffd700; +} + +.box5 { + grid-area: box5; + background-color: #87ceeb; +} + +.box6 { + grid-area: box6; + background-color: #fa8072; +} + +.box7 { + grid-area: box7; + background-color: #dda0dd; +} + +.clay { + backdrop-filter: blur(5px); + /* background-color: rgba(255, 255, 255, 1); */ + border-radius: 1.2rem; + box-shadow: 9px 7px 68px 0px rgb(31 41 55 / 50%), inset -8px -8px 16px 0px rgb(0 0 0 / 20%), inset 8px 11px 20px 0px rgba(255, 255, 255, 0.2); +} + +.cube { + transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(52deg) rotateY(157deg) rotateZ(87deg) translateX(0px) translateY(0px) translateZ(4px) skewX(0deg) skewY(0deg); +} + +.cube-wrap { + perspective: 2000px; + perspective-origin: 50% 0%; +} + +.skill-icon{ + --l: 80px; + width: var(--l); + height: var(--l); + background-color: transparent; + box-shadow: inset 8px 10px 10px rgba(0, 0, 0, 0.26); + border-radius: 10px; + margin: 10px; + + flex-shrink: 0; +} + +.flex-vertical{ + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/style.css b/style.css index e4fcea9..22d2b23 100644 --- a/style.css +++ b/style.css @@ -275,7 +275,7 @@ section { transition: all ease 0.5s; } -.gradient-txt:hover{ +.gradient-txt:hover { letter-spacing: 5px; } @@ -327,11 +327,116 @@ section { } } -#Projects{ +#Projects { position: relative; } -.card-landscape{ +.card-landscape { position: sticky; top: 15vh; -} \ No newline at end of file +} + + +/* Contact */ + +.big-box{ + max-width: 800px; + width: 90vw; + height: 70vh; + border-radius: calc(2rem + 4px); + padding: 4px; + position: relative; + + &::before { + content: ''; + position: absolute; + background-image: conic-gradient(from var(--angle), #1515dd, #db1547, #db1547, #1515dd); + border-radius: calc(2rem + 4px); + height: 100%; + width: 100%; + /* scale: 1.01; */ + /* padding: 2px; */ + animation: autorotate 2s linear infinite; + z-index: -1; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all ease-in-out 0.3s; + } + + &::after{ + content: ''; + position: absolute; + background-image: conic-gradient(from var(--angle), #1515dd, #db1547, #db1547, #1515dd); + height: 100%; + width: 100%; + filter: blur(20px); + border-radius: calc(2rem + 4px); + animation: autorotate 2s linear infinite; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -5; + } +} + +.form-container{ + overflow: hidden; + height: 100%; + + background-color: var(--color-secondary); + border-radius: 2rem; + padding: 10px; + display: grid; + grid-template-areas: "left right"; + grid-template-columns: 1fr 1fr; +} + +@media only screen and (max-width: 600px) { + .form-container{ + grid-template-areas: "right"; + grid-template-columns: 1fr; + /* background-image: url(Asset/Pic/geometric-shape-1.jpeg) ; */ + background-position: center; + background-size: cover; + + } +} + +.form-container .left{ + grid-area: left; + background-image: url(Asset/Pic/illusion-square.png); + + background-position: center; + background-size: cover; +} + +form{ + /* background-color: rgba(22, 216, 200, 0.349); */ + grid-area: right; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +form input, textarea{ + padding: 1rem; + width: 80%; + border-radius: 1rem; + border: none; + box-shadow: 0 0 10px ; + margin: 10px; + outline: solid 2px var(--color-primary); + /* background-color: transparent; */ + + &:active{ + border: none; + } + +} +form button{ + width: 80%; + border-radius: 1rem; +} +