Skip to content

Commit

Permalink
♻️ Update Logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@lohitkolluri
lohitkolluri committed Dec 1, 2024
1 parent eb793a9 commit ab9c3e8
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 31 deletions.
110 changes: 93 additions & 17 deletions src/components/Logo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,102 @@ import React from "react";
function Logo() {
return (
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Logo</title>
<title>Lohit Kolluri</title>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style={{ stopColor: "#8892AF", stopOpacity: 1 }} />
<stop offset="100%" style={{ stopColor: "#CCD6F6", stopOpacity: 1 }} />
</linearGradient>
</defs>
<g>
<g id="K" transform="translate(35.000000, 35.000000)">
<path
fill="currentColor"
d="M 23.363281 24.847656 L 15.269531 13.421875 L 22.847656 4.730469 C 22.972656 4.582031 23.003906 4.375 22.925781 4.199219 C 22.847656 4.019531 22.675781 3.90625 22.488281 3.90625 L 18.683594 3.90625 C 18.546875 3.90625 18.417969 3.964844 18.324219 4.066406 L 10.429688 12.9375 L 10.429688 4.398438 C 10.429688 4.128906 10.210938 3.90625 9.945312 3.90625 L 6.566406 3.90625 C 6.300781 3.90625 6.085938 4.128906 6.085938 4.398438 L 6.085938 25.140625 C 6.085938 25.410156 6.300781 25.632812 6.566406 25.632812 L 9.945312 25.632812 C 10.210938 25.632812 10.429688 25.410156 10.429688 25.140625 L 10.429688 18.976562 L 12.644531 16.433594 L 19.007812 25.429688 C 19.097656 25.558594 19.246094 25.632812 19.398438 25.632812 L 22.972656 25.632812 C 23.15625 25.632812 23.320312 25.527344 23.402344 25.363281 C 23.484375 25.199219 23.472656 25 23.363281 24.847656 Z M 23.363281 24.847656 "
{/* Letter L */}
<rect x="15" y="15" width="20" height="70" fill="url(#grad1)" stroke="#CCD6F6" strokeWidth="2">
<animate
attributeName="y"
values="15;10;15"
dur="1.5s"
repeatCount="indefinite"
/>
</g>
</rect>
<rect x="15" y="65" width="50" height="20" fill="url(#grad1)" stroke="#CCD6F6" strokeWidth="2">
<animate
attributeName="x"
values="15;10;15"
dur="1.5s"
repeatCount="indefinite"
/>
</rect>

{/* Letter K */}
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 50, 5
L 11, 27
L 11, 72
L 50, 95
L 89, 73
L 89, 28 z"
/>
d="M 65 15 L 65 55 L 45 35 L 65 15 L 85 15 L 65 55 L 85 95 L 65 95 L 65 55"
fill="url(#grad1)"
stroke="#CCD6F6"
strokeWidth="2"
>
<animateTransform
attributeName="transform"
type="scale"
values="1;1.1;1"
dur="2s"
repeatCount="indefinite"
/>
</path>

{/* Additional Shapes */}
<circle cx="25" cy="25" r="5" fill="#CCD6F6">
<animate
attributeName="r"
values="5;7;5"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
<circle cx="75" cy="75" r="5" fill="#CCD6F6">
<animate
attributeName="r"
values="5;7;5"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
<polygon points="50,10 60,30 40,30" fill="#CCD6F6">
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 20"
to="360 50 20"
dur="4s"
repeatCount="indefinite"
/>
</polygon>
<polygon points="30,90 40,70 20,70" fill="#CCD6F6">
<animateTransform
attributeName="transform"
type="rotate"
from="0 30 80"
to="360 30 80"
dur="4s"
repeatCount="indefinite"
/>
</polygon>

{/* Glowing Effect */}
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<circle cx="50" cy="50" r="40" fill="none" stroke="#CCD6F6" strokeWidth="2" filter="url(#glow)">
<animate
attributeName="r"
values="40;45;40"
dur="2s"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
);
Expand Down
10 changes: 6 additions & 4 deletions src/scss/sections/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ nav {
font-weight: 500;
font-size: var(--tsm1);
counter-reset: nav-list;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
&-list {
display: flex;
gap: 3rem;
Expand All @@ -57,7 +58,7 @@ nav {
padding: 10px;
text-decoration: none;
color: inherit;
transition: 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
&::before {
counter-increment: nav-list;
content: "0" counter(nav-list) ". ";
Expand All @@ -68,6 +69,7 @@ nav {
outline-color: var(--theme-color);
}
&:hover {
transform: scale(1.05);
color: var(--theme-color);
}
}
Expand Down Expand Up @@ -114,8 +116,8 @@ nav {
top: 0;
transition: 0.3s ease-in-out;
z-index: 100;
background-color: rgba(30, 30, 30, 0.85);
box-shadow: 0 10px 30px -10px var(--navy-shadow);
backdrop-filter: blur(10px);
background-color: rgba(30, 30, 30, 0.95);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
}
29 changes: 19 additions & 10 deletions src/sections/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@ function Navbar() {
];

useEffect(() => {
window.addEventListener("scroll", () => {
const handleScroll = () => {
window.pageYOffset > 100
? setNavbarVisible(true)
: setNavbarVisible(false);
});
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll); // Cleanup listener
}, []);

useEffect(() => {
Expand Down Expand Up @@ -53,10 +55,10 @@ function Navbar() {
<div className={`wrapper ${navbarVisible ? "blur-nav" : ""}`}>
<motion.div
className="brand"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.3,
duration: 0.5,
ease: "easeInOut",
}}
>
Expand All @@ -66,8 +68,8 @@ function Navbar() {
</motion.div>
<motion.div
className="nav-responsive-toggle"
initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, y: 0 }}
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.3,
ease: "easeInOut",
Expand All @@ -89,8 +91,15 @@ function Navbar() {
/>
)}
</motion.div>
<div
<motion.div
className={`${responsiveNavVisible && "nav-responsive"} nav-items`}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 100 }}
transition={{
duration: 0.3,
ease: "easeInOut",
}}
>
<ul className="nav-items-list">
{sectionLinks.map(({ name, link }, index) => (
Expand All @@ -102,7 +111,7 @@ function Navbar() {
transition={{
duration: 0.3,
ease: "easeInOut",
delay: 0.3 + index * 0.1,
delay: 0.1 + index * 0.1,
}}
>
<Link href={link} className="nav-items-list-item-link" aria-label={`Navigate to ${name}`}>
Expand All @@ -123,7 +132,7 @@ function Navbar() {
>
<Button text="Resume" link="https://drive.google.com/file/d/1KwoW5uTW2aUEoi14CnM6JGQatup_5aAf/view?usp=sharing" />
</motion.div>
</div>
</motion.div>
</div>
</nav>
);
Expand Down

1 comment on commit ab9c3e8

@vercel
Copy link

@vercel vercel bot commented on ab9c3e8 Dec 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

portfolio – ./

portfolio-git-main-lohits-projects.vercel.app
lohitkolluri.vercel.app
portfolio-lohits-projects.vercel.app
lohit.is-a.dev

Please sign in to comment.