Development Focus

• Implemented a responsive layout using semantic HTML and custom CSS
• Optimized for performance and accessibility across all screen sizes
• Applied SEO best practices, including structured content and keyword-optimized copy
• Integrated lightweight CSS-based animation in hero sections without using JavaScript to keep load times fast

Key Features

• Fully responsive across devices
• Fast performance and optimized load times
• Clean, semantic HTML structure
• SEO-optimized content and metadata
• Minimal animation to maintain focus on artwork

Development Focus

• Built from scratch using semantic HTML, modular SCSS, and JavaScript modules
• Integrated GSAP to animate wave lines, page transitions, and blobs with organic motion
• Configured Vite for fast builds, module handling, and optimized performance
• Implemented theme switching (light/dark) with CSS variables and SVG logic
• Designed for mobile-first responsiveness and accessibility

Key Features

• Fully responsive layout with adaptive section structure
• Theme switcher (light/dark) with matching assets and animations
• Animated wave loader and gooey blob interaction
• Scroll-triggered transitions with GSAP
• SEO-optimized structure and metadata
• Typography mix: Montserrat (sans-serif) and Playfair Display (serif)
• Performance-optimized using Vite and lazy loading for assets

Development Focus

• Built a multi-page app with vanilla JavaScript plus Bootstrap + Sass for a consistent UI system and responsive layout
• Integrated the Noroff Auction API for listings, bids, profiles, media, and credits, handling real, changing data
• Implemented complete auth flows (register/login/logout) with persisted sessions and guarded experiences
• Designed and implemented key UI flows: create listing, browse + filter, view listing details, and place bids
• Focused on reliable UI state with loading, empty, and error states across pages and forms
• Added usability and accessibility details like clear hierarchy, form feedback, and keyboard-friendly interactions

Key Features

• Browse listings with responsive cards and clear auction details (end date, bids, status)
• Listing details with bid history, current bid, and bidding interactions
• Create + manage listings including title, description, tags, and media
• User profiles with avatar/banner, credit visibility, and listing/bid overview
• Strong focus on API-driven flows and maintainable structure for continued iteration

Development Focus

• Built with semantic HTML, structured CSS, and vanilla JavaScript
• Fetched and displayed posts dynamically from the Noroff API
• Implemented login and registration for admin content control
• Optimized for responsive design
• Applied accessibility best practices for keyboard and screen reader users

Key Features

• Dynamic blog post loading via Noroff API
• Admin authentication for post creation and editing
• Clean, responsive layout for all devices
• Accessible navigation and headings for better usability
• Consistent branding with custom logo and agility-inspired graphics

Development Focus

• Built with semantic HTML and reusable layout patterns
• Implemented responsive UI across key screens (home, product listing, product details, checkout)
• Used vanilla JavaScript for interactive elements and UI state
• Prioritized clear typography, spacing, and visual hierarchy for an easy shopping experience
• Focused on accessibility with readable contrast, structured headings, and keyboard-friendly patterns

Key Features

• Product browsing with consistent card layout and clear calls-to-action
• Product detail structure designed for readability and conversion
• Checkout flow UI with an emphasis on clarity and reduced friction
• Responsive layout tuned for mobile-first viewing
• Clean visual system with repeatable spacing + components

Development Focus

• Information architecture first: clear landmarks (header/nav/main/footer), logical headings, skip link
• Typography: Avenir site-wide for cohesiveness and readability (logo uses different fonts)
• Color system: yellow, green, and multi-hue blues chosen from audience research
• Shape language: rounded corners + generous spacing to feel friendly and inviting
• Responsive layout with CSS Grid/Flexbox and fluid type scales
• Accessibility: focus states, contrast-aware palette, descriptive labels/alt text
• Performance: lean CSS, optimized images/WebP where possible, zero JavaScript
• Planned in Figma (user flow, wireframes, mood board, prototypes)

Key Features

• Fully responsive homepage
• Clear IA for exhibits/events and visitor essentials (hours, pricing, map)
• CSS-only components and interactions (no JS)
• Consistent tone: fun, inspiring, curious, exploratory, serious, colorful
• Uses school-provided imagery, optimized for fast load and clarity

Development Focus

• Built a small social platform with vanilla JavaScript and a clear feature-based structure (auth, profiles, posts, UI utilities)
• Integrated the Noroff API for user profiles, post feed, and follow relationships, handling real, changing data
• Implemented a reusable HTTP client / request wrapper to centralize fetch logic, attach tokens, parse JSON safely, and surface meaningful errors
• Built the full authentication flow (register/login/logout), including persisted sessions and guarded UI states (logged-in vs logged-out)
• Added practical UI features like profile editing (avatar + banner), search, and feed rendering with graceful fallbacks
• Kept the UI predictable with loading/empty/error states, resilient rendering for missing content, and clear form validation + feedback

Key Features

• User authentication (register, login, session handling)
• Profiles with avatar/banner and editable profile details
• Posts feed with create, view, and discovery patterns
• Follow system and user search to explore new profiles
• Reusable API helper focused on reliability and maintainability

Design Process

• Research: surveyed artist websites for structure and inspiration
• Direction: defined a visual system rooted in my artwork and selected colors
• Messaging: keyword research to refine tone and copy

Key Features

• Fully responsive across devices
• Fast performance and optimized load times
• Clean, semantic HTML structure
• SEO-optimized content and metadata
• Minimal animation to maintain focus on artwork

Design Highlights

• Intuitive navigation
• Balanced visual storytelling
• Consistent visual identity across pages

Concept & Visual Language

• Developed a core theme of water and movement - “adaptive like liquid”, reflected in wave lines, animated blobs, and a custom loader.
• Chose a calm yet energetic color palette (teal, warm yellow, soft gray, near black) to communicate both professionalism and personality.
• Designed a custom logo sketch around splashes and my initials to reflect artistic roots.

Figma Design & Prototyping

• Created wireframes and mockups for a single-page layout with interactive elements.
• Carefully structured typography using a mix of Playfair Display and Montserrat for contrast and clarity.
• Designed layout sections with soft, flowing divisions to support content without rigid boxes.

Reflection

This project let me merge design thinking and development into one coherent identity. I approached the entire experience, from visuals to interactivity as an extension of myself.

Every detail, from font pairing to animated wave physics, was shaped with intention. The result is a personal yet professional site that feels alive.

Concept & Visual Language

• Clean, approachable layout with a focus on readability and usability.
• Agility-inspired branding using speed lines, obstacle icons, and motion cues.
• Bold, energetic color palette to reflect the sport's fast-paced nature.

Figma Design & Prototyping

• Wireframes for homepage, article pages, and admin login/register.
• Flexible content blocks designed to adapt to API content.
• Responsive layouts tested across multiple breakpoints.

Reflection

This project allowed me to design with API-driven content in mind from the start. Working from concept to Figma prototype to functional build provided a full end-to-end workflow. The agility-themed branding tied everything together, making the site visually distinct and aligned with its fictional audience.

Design Process

• Research: studied youth-focused museum/education sites and age-appropriate color/type.
• Direction: defined style keywords - fun, youthful, inspiring, curiosity, explore, discovery, serious, colorful.
• System: three-color palette (bright yellow, green, multi-hue blues) + rounded components.
• Typography: standardized on Avenir for cohesive, readable UI (logo uses complementary display fonts).

Key Features

• Avenir typography for cohesion and readability
• Rounded cards/buttons for a friendly, inviting tone
• Color hierarchy with yellow/green/blues for emphasis
• Clear IA for exhibits, events, and visitor essentials

Design Highlights

• Balanced three-color palette noted positively by the teacher
• Brand-to-UI continuity from logo to components
• Friendly shape language without losing museum credibility

Concept & Visual Direction

• Built a clean, outdoorsy tone with a focus on trust and clarity (simple layout, readable typography, calm spacing)
• Designed a product presentation system that supports quick scanning: consistent cards, clear pricing, and strong CTAs
• Kept the interface intentionally minimal so the jackets remain the main visual focus

Figma Design & Prototyping

• Created high-fidelity responsive mockups for desktop and mobile
• Designed repeatable components (product cards, buttons, form fields) for a cohesive interface
• Planned the key user flow: browse → choose → checkout → success
• Prioritized usability details: readable spacing, aligned grids, and reduced visual noise in forms

Reflection

This design helped me practice turning a simple brief into a coherent shopping experience. By focusing on hierarchy, spacing, and predictable flow, I built a UI that supports fast browsing and a low-friction checkout.

The project also gave me a solid base to translate design decisions into code in the web development version of Rainy Days.

Concept & Visual Direction

• Built a clean, structured UI focused on trust and readability (clear hierarchy, consistent spacing, strong contrast)
• Designed a listing presentation system for quick scanning: image-led cards, price/bid prominence, and visible time/status cues
• Balanced a professional auction tone with a modern app feel, simple surfaces, repeatable components, and minimal visual noise

Figma Design & Prototyping

• Created high-fidelity responsive layouts for core pages: listings, listing details, login/register, and profile
• Defined repeatable components (cards, buttons, badges, form fields) to keep screens consistent and implementation-ready
• Mapped critical flows: browse → details → bid and register/login → profile → credits
• Designed UI states for reliability: loading/empty states, validation feedback, and “not logged in” guard messaging

Reflection

StudioBid let me design a more “system-like” interface where consistency matters: cards, states, and predictable layouts across many screens.

The strongest takeaway was designing for real usage, making bids feel confident, keeping time/status readable, and ensuring the app still feels stable when data varies.

The component thinking here also translated directly into the Bootstrap + Sass build of the project.

Concept & Creation

• Developed a hand-drawn icon combining a dog and cat forming both a heart and an artist's palette
• Paired the symbol with a classic serif typeface to evoke trust and sophistication
• Selected a soft, calming color palette inspired by the tones most frequently used in my oil paintings

Design Thinking

Born from a mood board, the redesign aimed for a simplified, emotional symbol with rounded, organic shapes for approachability.

It began as a pencil sketch, then was refined in Adobe Illustrator to balance softness with precision, retaining a serif typeface for timeless continuity.

Concept & Creation

• Sketched hand-drawn iterations to explore fluid shapes and initials
• Chose the splash motif to represent adaptability, creativity, and movement
• Used my initials “KT” as the foundation for a bold, personal mark
• Finalized the logotype in Illustrator, simplifying shapes while retaining organic energy

Design Thinking

The shape recalls a splash of ink, aligning with the portfolio's fluid visual concept. It's a personal emblem and a scalable brand identity for digital and print.

Starting with pencil sketches, I explored form and negative space. The result suggests creativity in motion, echoing animated blobs and wave lines and ties the identity together.

Concept & Creation

• Vector portrait in Adobe Illustrator of a red & white Border Collie (Roi) wearing a bandit-style eye mask with eye holes.
• Wordmark “Agility Bandits” set in a Western-style display type to echo the outlaw theme while staying readable at small sizes.
• Brand palette pairs with the website; only the dog illustration uses natural fur colors for personality and contrast.
• Designed as a flexible system: full lockup (dog & wordmark), horizontal lockup, and icon-only (mask/head) for small spaces.

Motion Graphics: Speed Lines & Obstacles

• Custom vector speed lines to communicate pace and direction; tuned angles and spacing for a sense of acceleration.
• Agility jumping obstacles tipping/falling to capture the chaotic fun of a dog “crashing” a jump.

Usage & System

• Color mapping: logotype integrates with site light green; the dog portrait preserves natural colors for contrast.
• Variants: prepared for light/dark backgrounds and single-color print applications.
• Originally Instagram-first; extended into a cohesive website identity without losing the playful tone.

Concept & Creation

• Central motif: a magnifying glass, a universal symbol of exploration and learning.
• Lens divided into curved segments in yellow, green, and layered blues with simple science glyphs (molecule, atom, hex/network) for chemistry/physics/systems.
• Arced handwritten tagline “utforska tillsammans :)” adds warmth and a kid-friendly tone.
• Wordmark in a serious, readable sans (Avenir family) to ground the playful mark.
• Rounded geometry and careful contrast keep the identity approachable yet trustworthy.

Design Thinking

The mark was refined in Adobe Illustrator with attention to legibility at small sizes, consistent stroke/curve logic, and spacing.

Variants include one-color and reversed versions for dark backgrounds, plus guidance for clear space and minimum sizes.

Concept & Creation

• Built the identity around a simple, recognizable gavel symbol to communicate “auction” instantly and kept bold and clean for UI use.
• Designed a clear wordmark where “Bid” is highlighted to emphasize action and create a memorable visual rhythm in the name.
• Prepared light/dark-friendly options and simple brand rules so the logo stays readable across different backgrounds and layouts.

Design Thinking

I treated the logo like a UI component: it had to be quick to read, work in small spaces, and stay consistent across the product.

The process was intentionally practical, define the symbol and typography, create multiple lockups, then test the mark directly in real layouts.

That approach ensured the final result supports both visual clarity and fast implementation in the StudioBid app.

Concept & Creation

• Designed an emblem style mark centered on a heart motif with sharp, architectural details aimed to feel iconic, dramatic, and genre-appropriate.
• Built a usable logo system with primary/secondary lockups, icon, and text-only variations, ready for both small UI placements and large format artwork.
• Created a consistent visual language for the single cover high contrast linework over a dark portrait, keeping the identity cohesive across branding and artwork.

Design Thinking

I approached the identity like a system: the emblem needed to be recognizable as an icon, but also strong enough to carry a full lockup on posters and artwork.

For the cover, I intentionally pushed a moody hierarchy, the wings are the visual hook, the portrait supports the tone, and the typography sits back to preserve the cinematic feel.

The result balances clarity with atmosphere, while keeping the band’s visual identity consistent across branding and release graphics.