Skip to content

Commit 10bcf69

Browse files
yadhukrishnasmyadhukrishnasm
committed
add: integrate @lucide/svelte and enhance layout with new components
1 parent b4c8d51 commit 10bcf69

File tree

7 files changed

+167
-65
lines changed

7 files changed

+167
-65
lines changed

‎portfolio/package-lock.json‎

Lines changed: 12 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎portfolio/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,8 @@
3434
"typescript": "^5.0.0",
3535
"typescript-eslint": "^8.20.0",
3636
"vite": "^6.0.0"
37+
},
38+
"dependencies": {
39+
"@lucide/svelte": "^0.501.0"
3740
}
3841
}

‎portfolio/src/routes/+layout.svelte‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
11
<script lang="ts">
2-
import '../app.css';
3-
let { children } = $props();
2+
import '../app.css';
3+
import Footer from './footer.svelte';
4+
import { page } from '$app/stores';
5+
let { children } = $props();
46
5-
const isActive = (route: string) => {
6-
if (typeof window !== 'undefined') {
7-
const path = window.location.pathname;
8-
return path === route;
9-
}
10-
};
7+
const isActive = (route: string) => {
8+
return $page.url.pathname === route;
9+
};
1110
</script>
1211

13-
<div class=" h-[89vh] md:grid md:grid-cols-6">
14-
<nav class="font-dm-serif col-span-1 space-x-10 border-r px-5 pt-10 text-xl">
15-
<span><a href="/" class={`hover:underline ${isActive('/') && 'underline'}`}>Intro</a></span>
16-
</nav>
12+
<div class="md:h-[89vh] md:grid md:grid-cols-6">
13+
<nav class="font-dm-serif col-span-1 space-x-10 border-r px-7 md:pt-10 pt-5 text-xl md:flex flex-col gap-3">
14+
<span><a href="/" class={`hover:underline ${isActive('/') && 'underline'}`}>Intro</a></span>
15+
<span><a href="/history" class={`hover:underline ${isActive('/history') && 'underline'}`}>History</a></span>
16+
<span><a href="/works" class={`hover:underline ${isActive('/works') && 'underline'}`}>Works</a></span>
17+
</nav>
1718

18-
<div class="col-span-5 overflow-y-auto py-10 px-20 ">
19-
{@render children()}
20-
</div>
19+
<div class="col-span-5 overflow-y-auto py-10 px-10 md:px-20 ">
20+
{@render children()}
21+
</div>
2122
</div>
2223

23-
<footer class="h-[11vh] w-full border">
24-
<p class="flex h-20 items-center justify-end px-10 text-neutral-700">
25-
created with &nbsp; <a href="https://svelte.dev/" class="hover:underline">svelte kit </a> &nbsp;
26-
by &nbsp;
27-
<a href="https://github.com/yadhukrishnasm" class="font-klemerDisplay text-2xl">SM</a>
28-
</p>
29-
</footer>
24+
<Footer />

‎portfolio/src/routes/+page.svelte‎

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,57 @@
1-
<div class="flex flex-col md:flex-row-reverse md:justify-between">
2-
<div class="transform transition-transform duration-500 ease-in-out">
3-
<img
4-
src="/images/img.png"
5-
alt="Portfolio"
6-
class="b h-50 w-50 border border-gray-500 bg-neutral-400 object-cover object-[50%_center] md:h-96 md:w-96 lg:h-[15em] lg:w-[15em] lg:object-[65%_center]"
7-
/>
8-
</div>
9-
<div class="flex w-[60em] flex-col justify-center space-y-5 break-words">
10-
<p
11-
class="font-klemerDisplay mt-6 pt-5 text-2xl font-bold text-nowrap transition-all md:mt-0 md:text-4xl lg:text-6xl"
1+
<script>
2+
import { Dot } from '@lucide/svelte';
3+
</script>
4+
5+
<div class="space-y-5">
6+
<div class="flex flex-col md:flex-row-reverse md:justify-between">
7+
<div
8+
class="flex transform justify-center transition-transform duration-500 ease-in-out md:justify-start"
129
>
13-
YADHU KRISHNA S M
14-
</p>
10+
<img
11+
src="/images/img.png"
12+
alt="Portfolio"
13+
class="b h-50 w-50 border border-gray-500 bg-neutral-400 object-cover object-[50%_center] md:h-96 md:w-96 lg:h-[15em] lg:w-[15em] lg:object-[65%_center]"
14+
/>
15+
</div>
16+
<div class="flex flex-col justify-center md:w-[60em]">
17+
<p
18+
class="font-klemerDisplay mt-6 pt-5 text-3xl font-bold transition-all md:mt-0 md:text-4xl lg:text-6xl"
19+
>
20+
YADHU KRISHNA S M
21+
</p>
22+
<p class=" mb-5 text-sm font-light">
23+
Freelance Developer • Systems Learner • Builder of Software, Hardware & Ideas
24+
</p>
25+
<p class="break works">
26+
Hi, my name is <span class="font-bold">Yadhu Krishna</span>. Fellow human's who finds beauty
27+
in the uncomplicated!
28+
</p>
29+
</div>
30+
</div>
1531

16-
<p class="">
17-
Hi, my name is <span class="font-bold">Yadhu Krishna</span>. Fellow human breed who finds
18-
beauty in the uncomplicated!
32+
<div class="space-y-2">
33+
<p class="text-xl font-bold">About</p>
34+
<p>
35+
I'm a freelance developer with a focus on frontend development and full product workflows.
36+
I’ve built a complete POS system from scratch — from interface to architecture — and I'm
37+
preparing it for release. Outside of client work, I regularly solve algorithmic problems,
38+
explore system-level programming. I'm also experimenting with hardware projects — including a
39+
compact cyberdeck, and smart lighting devices. I’m drawn to minimal, functional design and
40+
enjoy working across both software and hardware to build useful tools.
1941
</p>
2042
</div>
21-
</div>
2243

23-
<div class="space-y-2 py-3">
24-
<p class="text-lg font-bold">Current Whereabouts</p>
25-
<ul class="list-disc pl-5">
26-
<li>Developing a POS software called <a href="https://obscidian.site" class="underline">SalesGo</a></li>
27-
<li>Enhancing my knowledge in data structures and algorithms</li>
28-
</ul>
44+
<div class="space-y-2">
45+
<p class="text-xl font-bold">Current Focus</p>
46+
<ul class="list-disc pl-5">
47+
<li>
48+
Developing and preparing to launch a full-featured POS system called <a href="https://obscidian.site" class="underline"
49+
>SalesGo,</a> &nbsp; built from the ground up
50+
</li>
51+
<li>Practicing data structures and algorithms daily to strengthen core problem-solving skills</li>
52+
<li>Learning systems programming and operating system fundamentals</li>
53+
<li>Interested in minimalist design, embedded systems, and full-stack product development</li>
54+
<li>Actively looking for internships and job roles in software development, systems, or embedded tech</li>
55+
</ul>
56+
</div>
2957
</div>
30-

‎portfolio/src/routes/footer.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
import { GithubIcon, LinkedinIcon, Mail } from "@lucide/svelte";
3+
</script>
4+
<footer class="md:h-[11vh] w-full border-t md:grid grid-cols-3 overflow-hidden flex flex-col items-center py-3 space-y-3">
5+
6+
<div class="flex flex-row col-span-2 gap-10 items-center px-10">
7+
<a href="https://[email protected]">
8+
<Mail size={35} class="hover:scale-110 transition-all"/>
9+
</a>
10+
<a href="https://www.linkedin.com/in/yadhu-krishna-657b8b20b/">
11+
<LinkedinIcon size={35} class="hover:scale-110 transition-all"/>
12+
</a>
13+
<a href="https://github.com/yadhukrishnasm">
14+
<GithubIcon size={35} class="hover:scale-110 transition-all"/>
15+
</a>
16+
</div>
17+
18+
<p class="flex md:h-20 items-center justify-end px-10 text-neutral-700 col-span-1">
19+
created with &nbsp; <a href="https://svelte.dev/" class="hover:underline">svelte kit </a> &nbsp;
20+
by &nbsp;
21+
<a href="https://github.com/yadhukrishnasm" class="font-klemerDisplay text-2xl">SM</a>
22+
</p>
23+
</footer>

‎portfolio/src/routes/history/+page.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<p class="text-2xl mb-5 font-bold">History</p>
2+
3+
4+
5+
<p class="text-xl font-bold mt-5">
6+
Actively looking for internships and job opportunities. <br>
7+
I am open to remote work and freelance projects. <br>
8+
</p>
9+
10+
<br>
11+
<br>
12+
Haven't worked in any company yet! <br>

0 commit comments

Comments
 (0)