patrick/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove unused images, update project image paths to webp format, and enhance accessibility with aria-labels across components

Browse Source
This commit is contained in:
cojocaru-david
2025-08-14 03:21:50 +03:00
parent 57dc793005
commit 865b182062
37 changed files with 152 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/content/blog/dark-mode-in-astro/index.mdx vendored
View File

@@ -97,7 +97,7 @@ export default function ThemeToggle() {
localStorage.setItem("theme", newTheme);
};
return <button onClick={toggleTheme}>{theme === "light" ? "🌙" : "🌞"}</button>;
return <button onClick={toggleTheme} aria-label="Toggle theme">{theme === "light" ? "🌙" : "🌞"}</button>;
}
```

4
src/content/blog/how-to-build-a-real-time-chat-app-with-websocket/index.mdx vendored
View File

@@ -123,8 +123,8 @@ Create `index.html` in the same folder. Paste and save.
<body>
<h1>💬 Mini Chat</h1>
<div id="chat"></div>
<input id="msgBox" placeholder="Type and hit Enter">
<button onclick="sendMsg()">Send</button>
<input id="msgBox" placeholder="Type and hit Enter" aria-label="Message input">
<button onclick="sendMsg()" aria-label="Send message">Send</button>
<script>
const socket = new WebSocket('ws://localhost:8080');

4
src/content/blog/how-to-build-a-task-management-app-with-react/index.mdx vendored
View File

@@ -109,7 +109,7 @@ const Task = ({ task, onDelete, onToggle }) => {
/>
<span>{task.text}</span>
</div>
<button onClick={() => onDelete(task.id)} className="delete-btn">
<button onClick={() => onDelete(task.id)} className="delete-btn" aria-label="Delete task">
Delete
</button>
</div>
@@ -187,7 +187,7 @@ const TaskForm = ({ onAdd }) => {
placeholder="What needs to be done?"
className="task-input"
/>
<button type="submit" className="add-btn">
<button type="submit" className="add-btn" aria-label="Add task">
Add Task
</button>
</form>

6
src/content/blog/how-to-build-a-weather-app-with-a-public-api/index.mdx vendored
View File

@@ -127,9 +127,9 @@ Open `index.html` and paste this:
<h1>🌤️ Weather Check</h1>
<div class="search-box">
<input type="text" id="city-input" placeholder="Enter city name...">
<button id="search-btn">Search</button>
<button id="location-btn">Use My Location</button>
<input type="text" id="city-input" placeholder="Enter city name..." aria-label="City input">
<button id="search-btn" aria-label="Search">Search</button>
<button id="location-btn" aria-label="Use my location">Use My Location</button>
</div>
<div id="weather-info" class="hidden">

6
src/content/blog/what-is-tailwind/index.mdx vendored
View File

@@ -51,7 +51,7 @@ Instead of writing CSS like:
I just typed:
```html
<button class="px-8 py-3 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition">
<button class="px-8 py-3 bg-blue-500 text-white rounded-lg font-semibold hover:bg-blue-600 transition" aria-label="Get started">
Get Started
</button>
```
@@ -420,7 +420,7 @@ Let's build something useful. A **responsive card** that looks great everywhere.
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900">Card Title</h3>
<p class="mt-2 text-gray-600">Brief description here</p>
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
<button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" aria-label="Learn more">
Learn More
</button>
</div>
@@ -432,7 +432,7 @@ Let's build something useful. A **responsive card** that looks great everywhere.
```html
<!-- Changes to horizontal layout on desktop -->
<div class="max-w-4xl mx-auto md:flex">
<img class="md:w-48 md:h-auto" src="/img.jpg">
<img class="md:w-48 md:h-auto" src="/img.jpg" alt="Card image">
<div class="p-6">
<!-- Same content, now horizontal -->
</div>

4
src/content/blog/why-your-website-needs-lazy-loading-images/index.mdx vendored
View File

@@ -103,12 +103,12 @@ Without dimensions, the browser can't reserve space. When the image finally load
Good:
```html
<img src="dog.jpg" width="800" height="450" loading="lazy">
<img src="dog.jpg" width="800" height="450" loading="lazy" alt="Dog">
```
Bad:
```html
<img src="dog.jpg" loading="lazy">
<img src="dog.jpg" loading="lazy" alt="Dog">
```
### **Mistake 3: Overdoing Fade-In Animations**