about.md
about.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
# About Me

<div class="not-prose mb-8">
  <div class="flex flex-col md:flex-row gap-8 items-start">
    <div class="flex-shrink-0">
      <div class="w-28 h-28 rounded-2xl bg-gradient-to-br from-purple-600/30 to-cyan-500/30 border border-[var(--border-main)] flex items-center justify-center text-5xl shadow-inner">
        🧠
      </div>
    </div>
    <div class="flex-1">
      <h2 class="text-2xl font-bold text-[var(--fg-primary)] mb-1 mt-0">yash ajay magar</h2>
      <p class="text-[var(--header-h1)] font-medium text-lg mb-3">AI Journalist & Developer</p>
      <p class="text-[var(--fg-secondary)] leading-relaxed mb-4">
        A calm builder with a mysterious mindset — I focus on simplicity, silent consistency, and real-world usefulness. I explore the intersection of artificial intelligence and the real world through practical projects, written pieces, and shipped MVPs.
      </p>
      <div class="flex flex-wrap gap-3">
        <a href="https://github.com/yashmagar01" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-[var(--header-h1)] text-[var(--fg-primary)] text-sm font-medium no-underline transition-colors">
          🐙 GitHub
        </a>
        <a href="https://www.linkedin.com/in/yash-magar/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-blue-500 text-[var(--fg-primary)] text-sm font-medium no-underline transition-colors">
          💼 LinkedIn
        </a>
        <a href="mailto:yashajaymagar10@gmail.com" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-emerald-500 text-[var(--fg-primary)] text-sm font-medium no-underline transition-colors">
          ✉️ Email
        </a>
        <a href="/resume" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-[var(--header-h1)] hover:opacity-90 text-white text-sm font-semibold no-underline transition-opacity shadow-md">
          📄 Resume
        </a>
      </div>
    </div>
  </div>
</div>

## My Story

I'm a diploma student and self-taught developer who started with curiosity about how things work — and ended up deep in the world of AI, full-stack development, and product building.

I prefer **deep work over loud announcements**. My projects speak for me. I ship things, learn from what breaks, and iterate fast.

> _"I break code every day… and fix it the same night."_

## Currently Working On

- 🚀 Building AI-driven web products — zero-cost, high-impact MVPs
- 📝 Becoming a stronger full-stack developer (React + Node + TypeScript)
- 🤖 Exploring AI tooling workflows (Ollama, Hugging Face, Gemini APIs)
- 🌱 Preparing for a strong software engineering internship

## Skills & Stack

### Languages

<div class="not-prose grid grid-cols-2 md:grid-cols-3 gap-3 my-4">
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-3">
    <div class="text-xs text-[var(--fg-secondary)] mb-2 font-semibold uppercase tracking-wide">Web Core</div>
    <div class="flex flex-wrap gap-1">
      <span class="text-xs px-2 py-0.5 rounded bg-orange-500/10 border border-orange-500/20 text-orange-400">HTML5</span>
      <span class="text-xs px-2 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-blue-400">CSS3</span>
      <span class="text-xs px-2 py-0.5 rounded bg-yellow-500/10 border border-yellow-500/20 text-yellow-400">JavaScript</span>
      <span class="text-xs px-2 py-0.5 rounded bg-blue-600/10 border border-blue-600/20 text-blue-500">TypeScript</span>
    </div>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-3">
    <div class="text-xs text-[var(--fg-secondary)] mb-2 font-semibold uppercase tracking-wide">Backend</div>
    <div class="flex flex-wrap gap-1">
      <span class="text-xs px-2 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-blue-400">Python</span>
      <span class="text-xs px-2 py-0.5 rounded bg-slate-500/10 border border-slate-500/20 text-slate-400">C / C++</span>
    </div>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-3">
    <div class="text-xs text-[var(--fg-secondary)] mb-2 font-semibold uppercase tracking-wide">Frontend</div>
    <div class="flex flex-wrap gap-1">
      <span class="text-xs px-2 py-0.5 rounded bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">React</span>
      <span class="text-xs px-2 py-0.5 rounded bg-purple-500/10 border border-purple-500/20 text-purple-400">Vite</span>
      <span class="text-xs px-2 py-0.5 rounded bg-teal-500/10 border border-teal-500/20 text-teal-400">Tailwind</span>
    </div>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-3">
    <div class="text-xs text-[var(--fg-secondary)] mb-2 font-semibold uppercase tracking-wide">Backend Frameworks</div>
    <div class="flex flex-wrap gap-1">
      <span class="text-xs px-2 py-0.5 rounded bg-green-500/10 border border-green-500/20 text-green-400">Node.js</span>
      <span class="text-xs px-2 py-0.5 rounded bg-slate-500/10 border border-slate-500/20 text-slate-400">Express</span>
      <span class="text-xs px-2 py-0.5 rounded bg-green-700/10 border border-green-700/20 text-green-600">Django</span>
    </div>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-3">
    <div class="text-xs text-[var(--fg-secondary)] mb-2 font-semibold uppercase tracking-wide">Databases</div>
    <div class="flex flex-wrap gap-1">
      <span class="text-xs px-2 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-blue-400">MySQL</span>
      <span class="text-xs px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">Supabase</span>
      <span class="text-xs px-2 py-0.5 rounded bg-yellow-500/10 border border-yellow-500/20 text-yellow-400">Firebase</span>
    </div>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-3">
    <div class="text-xs text-[var(--fg-secondary)] mb-2 font-semibold uppercase tracking-wide">AI Tools</div>
    <div class="flex flex-wrap gap-1">
      <span class="text-xs px-2 py-0.5 rounded bg-violet-500/10 border border-violet-500/20 text-violet-400">Gemini</span>
      <span class="text-xs px-2 py-0.5 rounded bg-slate-500/10 border border-slate-500/20 text-slate-400">Ollama</span>
      <span class="text-xs px-2 py-0.5 rounded bg-yellow-500/10 border border-yellow-500/20 text-yellow-400">HuggingFace</span>
    </div>
  </div>
</div>

### Deployment & Tools

- **Vercel / Railway** — hobby and MVP deployments
- **Git + GitHub** — version control, open source
- **VS Code** — primary editor
- **Figma / Canva / Framer** — design and prototyping
- **Bolt.new / Lovable.dev / v0.dev** — rapid AI-assisted prototyping

## GitHub Stats

<div class="not-prose flex flex-col items-center gap-4 my-6">
  <img src="https://streak-stats.demolab.com?user=yashmagar01&theme=tokyonight&hide_border=true&border_radius=10" alt="GitHub Streak" class="rounded-xl border border-[var(--border-main)] max-w-full" />
  <img src="https://github-readme-activity-graph.vercel.app/graph?username=yashmagar01&theme=tokyo-night&hide_border=true" alt="GitHub Activity" class="rounded-xl border border-[var(--border-main)] max-w-full" />
</div>

## Let's Connect

I'm always open to interesting conversations, collaboration, and opportunities.

- 📧 **Email:** yashajaymagar10@gmail.com
- 🐙 **GitHub:** [yashmagar01](https://github.com/yashmagar01)
- 💼 **LinkedIn:** [yash-magar](https://www.linkedin.com/in/yash-magar/)
- 🐦 **X (Twitter):** [@yashmag50534849](https://x.com/yashmag50534849)
- 📺 **YouTube:** [@yashmagar01](https://www.youtube.com/@yashmagar01)