Personal Portfolio

A minimalist, high-performance, and responsive developer portfolio built with Astro, Tailwind CSS, and TypeScript.

---

🎨 Color Palettes

Light Theme

• Canvas / Background: #F7F7F7
• Cards / Surface: #FFFFFF
• Primary Text / Outlines: #33221d
• Subheadings: #854836
• Accent / Highlights: #FFB22C

Dark Theme

• Canvas / Background: #000000
• Cards / Surface: #141414
• Primary Text: #F2F2F2
• Subheadings & Accents: #EAE4D5
• Borders & Muted Text: #B6B09F

---

📂 Where to Add Your Data

All personal details, skills, work history, projects, and credentials are consolidated in a single file:

👉 src/data/portfolio.ts

1. Personal Information & Contacts (portfolioProfile)

Edit this object to update your name, role titles, bio, and direct contact channels:

export const portfolioProfile = {
  name: "Your Name",
  mainRole: "Data Engineer",
  altRoles: ["Backend Engineer", "Game Developer"],
  shortBio: "Short description of your expertise, philosophy, and focus.",
  email: "your.email@example.com",
  phone: "+1 (555) 000-0000",
  whatsappUrl: "https://wa.me/15550000000",
  github: "https://github.com/yourusername",
  githubHandle: "github.com/yourusername",
  linkedin: "https://linkedin.com/in/yourusername",
  linkedinHandle: "linkedin.com/in/yourusername"
};

Note: The header contact dropdown allows users to 1-click copy your phone/WhatsApp and email directly to their clipboard, while LinkedIn and GitHub open your profile links.

---

2. Tools & Proficiency (skillsGroups)

Add, remove, or rename skill categories and specific technologies:

export const skillsGroups: SkillGroup[] = [
  {
    category: "Streaming & Pipelines",
    skills: ["Apache Spark", "Apache Kafka", "Apache Flink", "Airflow", "dbt"]
  },
  {
    category: "Lakehouse & Storage",
    skills: ["Apache Iceberg", "Delta Lake", "Snowflake", "ClickHouse", "PostgreSQL"]
  },
  {
    category: "Languages & DevOps",
    skills: ["Python", "SQL", "Docker", "Kubernetes", "Terraform", "AWS / GCP"]
  }
];

---

3. Experience (experienceData)

List your career history with key accomplishments:

export const experienceData: ExperienceItem[] = [
  {
    role: "Senior Data Engineer",
    company: "Company Name",
    period: "2023 — Present",
    highlights: [
      "Key achievement or metric delivered.",
      "Another impact point with quantifiable results.",
      "Infrastructure improvement or cost reduction metric."
    ],
    stack: ["Iceberg", "PySpark", "Kafka", "dbt", "Airflow", "AWS S3"]
  }
];

---

4. Featured Projects (projectsData)

Showcase your top systems and technical builds:

export const projectsData: ProjectItem[] = [
  {
    title: "Project Name",
    badge: "Lakehouse Stream",
    summary: "Brief 1-2 sentence description of what the project does.",
    impact: "120K msg/sec · 380ms latency · 44% storage saved",
    stack: ["Spark", "Iceberg", "Kafka", "AWS S3", "Trino"],
    githubUrl: "https://github.com/yourusername/project",
    demoUrl: "https://example.com"
  }
];

---

5. Education & Credentials (educationData)

Record your academic degrees and cloud/data certifications:

export const educationData: EducationItem[] = [
  {
    degree: "B.S. in Computer Science",
    institution: "University Name",
    period: "2015 — 2019",
    focus: "Distributed Systems, Database Architecture · GPA 3.85"
  },
  {
    degree: "Cloud & Data Certifications",
    institution: "AWS · dbt Labs · Databricks",
    period: "Active Credentials",
    focus: "AWS Solutions Architect · dbt Certified · Spark Associate Developer"
  }
];

---

🖼️ Replacing the Profile Picture

1. Place your photo inside the public/ directory (e.g., public/avatar.jpg or public/avatar.png).
2. Open src/components/About.astro.
3. Locate the SVG inside the rounded photo card container (around lines 12–25) and replace it with an image tag:

<div class="w-full aspect-square p-3 bg-[var(--color-card-subtle)] rounded-xl border-2 border-[var(--color-border-custom)] flex items-center justify-center relative overflow-hidden">
  <img
    src="/avatar.jpg"
    alt="Profile Photo"
    class="w-full h-full object-cover rounded-lg"
  />
</div>

---

🚀 Development & Build Commands

Command	Description
npm install	Install project dependencies
npm run dev	Start local development server at http://localhost:4321
npm run build	Build static production site to ./dist/
npm run preview	Locally preview the built production output