Posts on Daniel's Blog

Designing My Portfolio with Penpot

daniel@example.com (Daniel Holzer) — Tue, 24 Feb 2026 00:00:00 +0000

Designing My Portfolio with Penpot

Part 4 of my “First Complete Project” series. ← Part 3: Development Environment

With the development pipeline ready, I moved to design. This was my first time creating a complete UI design system from scratch.

Design Tool Decision: Figma vs Penpot

Tool	Pros	Cons	Why Not?
Figma	Familiar, collaborative	Generic layout tools	Wanted CSS-like layouts
Penpot	CSS Grid/Flexbox native, new and I want to test it out	Learning curve	Winner - Perfect for developers

Why Penpot won: Layout system mimics CSS Grid, Flexbox, justify-items, gap — direct translation to Tailwind code.

Implementing Content & Visuals

daniel@example.com (Daniel Holzer) — Tue, 24 Feb 2026 00:00:00 +0000

Implementing Content & Visuals

Part 5 of my “First Complete Project” series. ← Part 4: Designing with Penpot

Designs ready, now time to build. I followed a structured approach: layout first, components second, content last.

Implementation Workflow

Navigation Pages (Home, Skills, Documents, Projects, Contact)
Page Layout (shared across routes) Header + Main + Footer structure
Create Reusable Components (container, heading, button, link, card)
Layout Components (header with logo + menu button)
Page Assembly -> Penpot layout matching
Real Content -> Replace lorem ipsum + placeholders
Final Colors -> Design system palette

Step-by-Step Process

createRoot(document.getElementById('root')!).render(
 <StrictMode>
 <BrowserRouter>
 <RootLayout>
 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/contact" element={<Contact />} />
 <Route path="/projects" element={<Projects />} />
 <Route path="/skills" element={<Skills />} />
 <Route path="/documents" element={<Documents />} />
 <Route path="/sitenotice" element={<SiteNotice />} />
 </Routes>
 </RootLayout>
 </BrowserRouter>
 </StrictMode>
);

2. Page Layout

export function RootLayout({ children }:
 { children: React.ReactNode }) {

 return(
 <>
 <HeaderLayout/>
 <main className="pt-[5.6rem] max-w-[50rem] my-0 mx-auto">
 { children }</main>
 <FooterLayout/>
 </>
 );
}

3. Reusable Components

// Tag Styles
export const tagStyles = tv({
 base: "py-[0.5rem] px-[1rem] text-[1.4rem] rounded-full
 text-bgPrimary",
})

// Tag Properties
export interface TagProps extends VariantProps<typeof tagStyles> {
 id?: string;
 className?: string;
 children: string;
}

// Tag - Component
export function Tag({ id, className, children }: TagProps) {
 const generatedId = useId();

 return(
 <div
 id={ id ?? generatedId }
 className={tagStyles({ className })}
 >
 { children }
 </div>
 );
}

4. Development with Bright Colors

Used random bright colors to distinguish components. This made layout issues immediately visible.

My First Complete Project: From Idea to Live Deployment

daniel@example.com (Daniel Holzer) — Tue, 24 Feb 2026 00:00:00 +0000

This post is part of my learning journey as a self‑taught developer and documents my first complete project, from idea to deployment.

My First Complete Project – From Idea to Deployment

Over the past year, I’ve gone from building small UI features to completing my very first full project — designed, developed, and deployed completely on my own. This post marks a major milestone in my learning journey, and I want to share the process behind it.

Planning My First Project with Jira and Agile Mindset

daniel@example.com (Daniel Holzer) — Tue, 24 Feb 2026 00:00:00 +0000

Planning My First Project with Jira and Agile Mindset

Part 2 of my “First Complete Project” series. ← Part 1: Project Overview

Before writing a single line of code, I knew proper planning would make or break this project. As a solo developer, I wanted to practice professional workflows — so I set up Jira with Scrum Model.

Why Jira for a Solo Project?

Most developers jump straight into coding, but I wanted to learn project management alongside development. Jira let me:

Project Complete: Retrospective & Lessons Learned

daniel@example.com (Daniel Holzer) — Tue, 24 Feb 2026 00:00:00 +0000

Project Complete: My First Full Project Retrospective

Part 6 (Finale) of my “First Complete Project” series. ← Part 5: Content Implementation

Live site: dholzer.it
Source code: github.com/DaniHolzer/personal-profilepage

From empty Jira board to deployed portfolio — mission accomplished. Here’s what I learned from my first end-to-end project.

What Went Right

Jira structure — Solo scrum kept me organized
Netlify automation — Git push = instant deploy
Penpot → Tailwind — CSS layout translation was seamless
Bright color debugging — Made component boundaries obvious
Layout-first approach — Shared header/footer across all pages

What I’d Improve Next Time

Testing — Unit tests for reusable components
Performance — Lighthouse score optimization
Mobile testing — More device testing beyond Chrome DevTools

Tech Stack That Delivered

Frontend: React + TypeScript + Tailwind CSS + Vite Design: Penpot (CSS Grid/Flexbox native) Hosting: Netlify (free, automatic) VCS: GitHub (develop → main workflow) Planning: Jira (solo scrum)

Setting Up My Development Environment & Deployment Pipeline

daniel@example.com (Daniel Holzer) — Tue, 24 Feb 2026 00:00:00 +0000

Setting Up My Development Environment & Deployment Pipeline

Part 3 of my “First Complete Project” series. ← Part 2: Planning with Jira

With planning complete, my next epic was creating a professional development environment and deployment pipeline. This involved choosing domain registrars, hosting providers, and setting up GitHub → Netlify automation.

Domain Registration Decision

I compared multiple providers:

Provider	First Year	Renewal	Notes
Dynadot	€6.99	€4.99	Winner - Cheapest long-term
Alfahosting	€27	-	Expensive domain
Hetzner	€24	-	WebHosting Bundle

Choice: Dynadot for the best price/performance.

My first Post

daniel@example.com (Daniel Holzer) — Tue, 07 Oct 2025 00:00:00 +0000

… My first blog post!

Posts on Daniel's Blog

Designing My Portfolio with Penpot

Designing My Portfolio with Penpot

Design Tool Decision: Figma vs Penpot

Implementing Content & Visuals

Implementing Content & Visuals

Implementation Workflow

Step-by-Step Process

1. Navigation Pages

2. Page Layout

3. Reusable Components

4. Development with Bright Colors

My First Complete Project: From Idea to Live Deployment

My First Complete Project – From Idea to Deployment

Planning My First Project with Jira and Agile Mindset

Planning My First Project with Jira and Agile Mindset

Why Jira for a Solo Project?

Project Complete: Retrospective & Lessons Learned

Project Complete: My First Full Project Retrospective

What Went Right

What I’d Improve Next Time

Tech Stack That Delivered

Setting Up My Development Environment & Deployment Pipeline

Setting Up My Development Environment & Deployment Pipeline

Domain Registration Decision

My first Post