Yadr

Kxpi

YADR - Yet Another Developer Resume. A simple portfolio/resume website template built with SvelteKit.

#cloudflare-pages #dark-theme #developer-portfolio #github-pages #portfolio-template #portfolio-website #resume #shadcn #svelte #sveltekit

Demo Download

YADR - Yet Another Developer Resume

A modern, obviously vibe-coded, dark-mode portfolio/resume website template built with SvelteKit. Perfect for software engineers, full-stack developers, DevOps engineers and other technical professionals who want a clean, professional online presence.

✨ Features

🎨 Modern Dark Theme - Beautiful zinc-based color scheme with glassmorphism effects
📱 Fully Responsive - Looks great on all devices
⚡ Static Site Generation (SSG) - Fast loading, SEO-friendly, and hostable anywhere
🎭 Smooth Animations - Scroll-reveal transitions using Svelte's built-in transitions
📧 Contact Form - Integrated with Formspree (free tier available)
🎯 Easy to Customize - All content managed through simple TypeScript files
🚀 Free Hosting - Deploy to Cloudflare Pages (or Vercel/Netlify) for free
♿ Accessible - Built with shadcn-svelte components following WCAG guidelines

📋 Sections

Hero - Profile photo, name, title, and social links
About - Professional summary, location, education, and certifications
Skills - Tech stack organized by category (customizable)
Experience - Work history timeline with highlights
Key Highlights - Top 4 achievements or expertise areas
Contact - Form + direct email CTA

📦 Tech Stack

Framework: SvelteKit with static adapter
Styling: Tailwind CSS v4
Components: shadcn-svelte
Icons: Lucide Icons
Forms: Formspree

🚀 Quick Start

Prerequisites

Node.js 18+
npm (comes with Node.js)

Installation

Clone this template

git clone [email protected]:Kxpi/yadr.git my-portfolio
cd my-portfolio

Install dependencies
```
npm install
```
Customize your data
- Edit src/lib/config.ts - Site-wide settings
- Edit src/lib/data/profile.ts - Your experience, skills, etc.
- Replace static/profile.jpg with your photo
Run development server
```
npm run dev
```
Open http://localhost:5173 to see your site.
Build for production
```
npm run build
```
Static files will be generated in the build/ directory.

⚙️ Configuration

Site Configuration (`src/lib/config.ts`)

export const siteConfig = {
    title: "Your Name | Software Engineer",
    description: "Your professional summary",
    url: "https://yourname.dev",
    github: "https://github.com/your-username",
    linkedin: "https://linkedin.com/in/yourusername",
    email: "[email protected]",
    formspreeId: "YOUR_FORM_ID" // Get from https://formspree.io
};

Profile Data (`src/lib/data/profile.ts`)

Update these sections:

profile - Name, title, tagline, summary
skills - Your tech stack (organized by category)
experience - Work history
highlights - Top 4 achievements
education - Degree info
certifications - Optional certifications list

Profile Photo

Replace static/profile.jpg with your own photo. Recommended:

Size: 400-800px square
Format: JPEG or WebP (for better compression)
Use Squoosh.app to optimize

Skill Categories

Edit the categories in src/lib/components/sections/Skills.svelte:

const categories = [
    { key: "frontend", label: "Frontend" },
    { key: "backend", label: "Backend" },
    { key: "databases", label: "Databases" },
    { key: "tools", label: "Tools & DevOps" }
];

🧪 Development & Code Quality

Running the Linter

The project uses ESLint and Prettier for code quality and formatting:

# Check for linting errors
npm run lint

# Auto-fix linting errors
npm run lint:fix

# Check code formatting
npm run format:check

# Auto-format all files
npm run format

# Type check with svelte-check
npm run check

Pre-commit Hooks

The project uses Husky and lint-staged to automatically run checks on staged files before each commit:

✅ Runs ESLint with auto-fix on .js, .ts, .svelte files
✅ Formats code with Prettier
✅ Only processes staged files (fast!)

Setup:

npm install  # Installs Husky hooks automatically

Manual checks:

If you want to run all checks manually:

npm run lint && npm run format && npm run check

Skip pre-commit (not recommended):

git commit --no-verify -m "message"

All checks run automatically in GitHub Actions:

CI Workflow (.github/workflows/ci.yml):
- Code Quality job: Runs lint, format check, and type check in parallel
- Build job: Verifies the production build succeeds
Deploy Workflow (.github/workflows/deploy-gh-pages.yml):
- Runs quality checks first, then builds and deploys to GitHub Pages
- Only deploys if all quality checks pass

🎨 Customization

Colors

The template uses Tailwind CSS v4 with shadcn-svelte's zinc theme. To change colors:

Edit src/app.css and modify the CSS variables:

.dark {
    --background: oklch(...);
    --primary: oklch(...);
    /* etc */
}

Adding/Removing Sections

All sections are in src/lib/components/sections/. To remove a section:

Delete the section file (e.g., Highlights.svelte)
Remove the import and component from src/routes/+page.svelte
Update navigation in Navigation.svelte

Customizing Icons

The template uses Lucide Icons throughout. To change icons:

Browse available icons at https://lucide.dev/icons
Find the icon you want (e.g., "rocket")

Import it in your component:

import Rocket from "lucide-svelte/icons/rocket";

Use it in your template:
```
<Rocket class="h-6 w-6" />
```

Example - Changing Highlights Icons:

Edit src/lib/components/sections/Highlights.svelte:

// Replace these imports with your preferred icons
import Code from "lucide-svelte/icons/code";
import Layers from "lucide-svelte/icons/layers";
import Zap from "lucide-svelte/icons/zap";
import Users from "lucide-svelte/icons/users";

const icons = [Code, Layers, Zap, Users];

The icons array matches the order of highlights in profile.ts, so the first icon corresponds to the first highlight, and so on.

Favicon

Replace static/favicon.svg with your own icon.

📧 Setting Up Contact Form

Go to Formspree.io and create a free account
Create a new form
Copy your form ID (looks like: xabcd123)
Update formspreeId in src/lib/config.ts

Free tier includes 50 submissions/month.

🌐 Deployment

GitHub Pages

This project is configured to automatically deploy to GitHub Pages when you push to the main branch.

Push to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin [email protected]:Kxpi/yadr.git
git push -u origin main

Enable GitHub Pages
- Go to your repository on GitHub
- Click Settings → Pages
- Under Build and deployment, select:
  - Source: Deploy from a branch
  - Branch: gh-pages / root
- Click Save
Access your site
- The workflow will automatically build and deploy to the gh-pages branch
- Your site will be available at: https://kxpi.github.io/yadr/
- Initial deployment takes 1-2 minutes
- Check the Actions tab to see deployment progress

Cloudflare Pages (Alternative for Custom Domains)

Note: If deploying to Cloudflare Pages with a custom domain, you'll need to remove the base path from svelte.config.js:

paths: {
    base: ""; // Remove or comment out the base path
}