About Me Swift Playground

What You're Building

The About Me app is a real, running iOS app — not a prototype or a mock-up. It lives on your iPad, opens like any other app, and has five tabs you can swipe between. Each tab teaches a new SwiftUI concept while you personalise it to be all about you.

1. The App Entry Point

Every SwiftUI app starts with a single file marked @main. This tells the system: "start here." In AboutMeApp.swift you'll see the simplest possible app shell:

import SwiftUI

@main
struct AboutMeApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

You'll rarely change this file. Its job is just to hand control to ContentView, which is where the real app lives.

2. TabView — The App's Navigation Skeleton

ContentView.swift uses a TabView to create the tab bar at the bottom of the screen. Each child view inside TabView becomes one tab.

TabView {
    HomeView()
        .tabItem {
            Label("Home", systemImage: "person")
        }

    StoryView()
        .tabItem {
            Label("Story", systemImage: "book")
        }

    FavoritesView()
        .tabItem {
            Label("Favorites", systemImage: "star")
        }

    FunFactsView()
        .tabItem {
            Label("Fun Facts", systemImage: "hand.thumbsup")
        }

    YourTab()
        .tabItem {
            Label("My Tab", systemImage: "heart.fill")
        }
}

How a Tab Works

Each tab has two parts:

3. Views: The Building Blocks

In SwiftUI, everything you see is a View. Text is a view. An image is a view. A button, a colour block, a divider — all views. You compose complex screens by nesting simple views inside container views.

Every custom view is a struct that conforms to the View protocol. That means it must have a body property that returns some View:

Core Views You Used

4. The Three Stacks

Stacks are container views that arrange their children in a line. There are exactly three, and you need to know all of them.

You can — and should — nest stacks inside each other. The Home tab uses a VStack as the outer container, with a VStack for the name card, inside which sits an HStack for the icon row. This nesting pattern is the core of all SwiftUI layout.

5. Modifiers

A modifier is a method chained onto a view that changes how it looks or behaves. You can chain as many as you like — each one wraps the previous result.

Modifier Reference

6. Images: Resizing, Clipping, and Overlays

A plain Image view renders at its natural pixel size — often enormous. You almost always need to add at least .resizable() and a sizing modifier before anything else will work correctly.

The Standard Image Stack

Image("profilePhoto")
    .resizable()
    .scaledToFit()
    .clipShape(Circle())
    .overlay(
        Circle()
            .stroke(.yellow, style: StrokeStyle(lineWidth: 15))
            .shadow(color: .black, radius: 10)
    )

clipShape Options

Try each of these in place of Circle() — swap them one at a time to see the effect:

// Clip to a circle
.clipShape(Circle())

// Rounded rectangle (adjust cornerRadius to taste)
.clipShape(RoundedRectangle(cornerRadius: 20))

// Ellipse — like a circle but can be wider than tall
.clipShape(Ellipse())

// Capsule — rectangle with fully-rounded short ends
.clipShape(Capsule())

The overlay Modifier

.overlay() layers another view in front of the current one, perfectly aligned. This is how the yellow border ring works — a Circle drawn with .stroke() sits on top of the clipped photo.

7. Custom Fonts

Instead of hard-coding font names as raw strings scattered through your code, you can collect them in a helper struct called FontNames that lives at the bottom of HomeView.swift:

struct FontNames {
    static var americanTypewriter = "American Typewriter"
    static var arial              = "Arial"
    static var baskerville        = "Baskerville"
    static var chalkduster        = "Chalkduster"
    static var courier            = "Courier"
    static var georgia            = "Georgia"
    static var helvetica          = "Helvetica"
    static var palatino           = "Palatino"
    static var zapfino            = "Zapfino"
}

// Using it:
Text("Your Name")
    .font(.custom(FontNames.courier, size: 40))

Now if you want to change a font you only edit it in one place — and the autocomplete menu shows you all your options when you type FontNames..

Font Size Presets

When you don't need a custom font, use SwiftUI's semantic size names — they respect the user's accessibility text-size setting:

8. SF Symbols

Apple ships over 5,000 icons free with every device — called SF Symbols. You access them by name using Image(systemName:):

9. Colour Models

SwiftUI gives you four ways to specify a colour. All four were used in this project:

// Named SwiftUI colours
Color.blue
Color.red
Color.green
Color.orange
Color.purple
Color.pink
Color.yellow
Color.mint
Color.brown
Color.cyan

// RGB — values between 0.0 and 1.0
Color(red: 0.5, green: 0.25, blue: 0.1)   // warm brown
Color(red: 0.13, green: 0.29, blue: 0.54)  // TKC navy

// Hue / Saturation / Brightness (HSB)
Color(hue: 0.9, saturation: 0.5, brightness: 0.9)

// Greyscale — 0.0 is black, 1.0 is white
Color(white: 0.75)

// Transparency via opacity
Color.blue.opacity(0.3)

10. ScrollView

When content might overflow the screen, wrap it in a ScrollView. By default it scrolls vertically — used in the Story tab. Pass .horizontal to make it scroll sideways — used in the Favorites foods row.

Vertical (Story Tab)

ScrollView {
    VStack(alignment: .leading) {
        Text("My Story")
            .font(.largeTitle)
        Text("Author")
            .font(.subheadline)
            .foregroundColor(.secondary)
        Divider()

        Text("Everyone knows that I just love …")
            .padding([.top, .bottom])
        Text("    Rugby. My favourite team is the ACT Brumbies.")
            .padding(.bottom)
    }
    .padding()
    .frame(maxWidth: .infinity)
    .background(in: RoundedRectangle(cornerRadius: 15))
    .padding()
}
.background(Image("Blue").opacity(0.5))

Horizontal (Favorites Tab)

ScrollView(.horizontal) {
    HStack(spacing: 30) {
        Text("🥐").font(.system(size: 48))
        Text("🌮").font(.system(size: 48))
        Text("🍣").font(.system(size: 48))
        Text("🍉").font(.system(size: 48))
        Text("🥖").font(.system(size: 48))
        Text("🍫").font(.system(size: 48))
    }
}
.padding()

11. Group — the 10-View Limit

SwiftUI has a hard limit: no more than 10 direct children inside a single stack. If you add an 11th view, you'll get an error that says something like "Extra arguments at positions #11 in call".

The fix is Group. It doesn't change the visual output at all — it's purely an organisational wrapper that counts as one child, regardless of how many views are inside it.

// SwiftUI only allows 10 direct children in a stack.
// Wrap related views in Group{} to get around the limit.

VStack {
    Group {
        Text("My Story")
            .font(.largeTitle)
        Text("Roan Venter")
            .font(.subheadline)
            .foregroundColor(.secondary)
        Divider()
    }
    Group {
        Text("Everyone knows that I just love …")
            .padding([.top, .bottom])
        Text("    Rugby.")
            .padding(.bottom)
        Text("My super power is …")
        Text("    Teaching")
    }
    Group {
        // more content...
    }
}

12. DisclosureGroup — Collapsible Sections

A DisclosureGroup shows a header that the user can tap to reveal or hide content. It was used in the Favorites tab to let users guess your favourite colours before revealing them.

DisclosureGroup {
    // Content shown when expanded
    HStack(spacing: 30) {
        Color.purple
            .frame(width: 70, height: 70)
            .cornerRadius(10)
        Color(hue: 0.9, saturation: 0.5, brightness: 0.9)
            .frame(width: 70, height: 70)
            .cornerRadius(10)
        Color.orange
            .frame(width: 70, height: 70)
            .cornerRadius(10)
        Spacer()
    }
    .padding(.vertical)

} label: {
    // The header — always visible
    Text("Guess my favourite colors")
        .font(.title2)
}
.padding()
.accentColor(.purple)

The label: trailing closure is what's always visible — the header. The first trailing closure (before label:) is the content, revealed on tap.

13. Arrays

An array is an ordered list of values, all of the same type. In the Fun Facts tab, an array holds all the facts waiting to be shown:

// Declare an array of Strings
var allFunFacts = [
    "I have visited 8 different countries.",
    "I play guitar in my spare time.",
    "I coach a junior rugby team on weekends.",
    "I have read over 200 books."
]

// Pick a random element — returns Optional, so use ?? for a default
funFact = allFunFacts.randomElement() ?? "No facts available."

Key concepts from this usage

14. @State and Button — Reactive UI

The Fun Facts tab is where the app comes alive. A @State variable stores what text is currently showing. A Button changes it. When the value changes, SwiftUI rebuilds the view automatically.

struct FunFactsView: View {
    var allFunFacts = [
        "I have visited 8 different countries.",
        "I play guitar in my spare time.",
        "I coach a junior rugby team on weekends."
    ]

    @State private var funFact = ""

    var body: some View {
        ZStack {
            Image("Green")   // background layer

            VStack {
                Text("Fun Facts")
                    .font(.largeTitle)

                Text(funFact)
                    .font(.title)
                    .frame(maxWidth: 400, minHeight: 300)

                Button("Show Random Fact") {
                    funFact = allFunFacts.randomElement() ?? "No fun."
                }
                .padding()
                .foregroundColor(.white)
                .background(.blue)
                .clipShape(RoundedRectangle(cornerRadius: 15))
                .font(.title2)
            }
            .padding()
        }
    }
}

This pattern — @State variable + Button + reactive Text — is the foundation of almost all interactive SwiftUI development. Master it here and you've understood something that scales all the way to professional apps.

15. The Home Tab — Putting It All Together

The Home tab uses the most techniques at once. Here's the complete code your teacher wrote as a model — read through it and identify every concept it uses:

struct HomeView: View {
    var body: some View {
        VStack {
            Text("All About")
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding()

            Image("Family")
                .resizable()
                .scaledToFit()
                .clipShape(RoundedRectangle(cornerRadius: 26.0))
                .overlay(
                    RoundedRectangle(cornerRadius: 26.0)
                        .stroke(.yellow, style: StrokeStyle(lineWidth: 10))
                        .shadow(color: .black, radius: 10)
                )

            VStack {
                Text("Roan Venter")
                    .font(.custom(FontNames.courier, size: 40))
                    .foregroundColor(Color(red: 0.5, green: 0.25, blue: 0.1))

                HStack {
                    Image(systemName: "flag.pattern.checkered")
                        .foregroundColor(.brown)
                    Text("Grateful")
                        .font(.custom(FontNames.courier, size: 20))
                    Image(systemName: "flag.pattern.checkered")
                        .foregroundColor(.brown)
                }
            }
            .padding(30)
            .background(Color(red: 0.75, green: 0.75, blue: 0.75))
            .cornerRadius(15)
            .shadow(color: .black, radius: 10)
        }
        .background(Image("Blue"))
        .padding()
    }
}

16. Your Own Tab

The final challenge is YourTab.swift — a blank view that starts with just a "Hello, World!" placeholder. You design it from scratch using everything you've learned:

// Start with the placeholder:
struct YourTab: View {
    var body: some View {
        Text("Hello, World!")
    }
}

// Replace it with your own design:
struct YourTab: View {
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "trophy.fill")
                .font(.system(size: 60))
                .foregroundColor(.yellow)

            Text("Achievements")
                .font(.largeTitle)
                .fontWeight(.bold)

            Text("Year 10, 2025")
                .foregroundColor(.secondary)
        }
        .padding()
    }
}

Once your tab is built, wire it into ContentView.swift by adding it to the TabView:

// In ContentView.swift, add your tab inside TabView:
YourTab()
    .tabItem {
        Label("My Tab", systemImage: "heart.fill")
    }

17. App Settings

The final polish step is configuring the app's identity in App Settings:

Completion Checklist