At a Glance
Role
UX/UI Designer +
Front-End Learner
Timeline
2 Months
Scope
Homepage,
About Me,
Style Guide
Tools
HTML, CSS, JS,
Github, VS Code,
CodePen, Figma
At a Glance
Role
UX/UI Designer + Front-End Learner
Timeline
2 Months
Scope
Homepage Design,
About Me,
Style Guide
Tools
HTML, CSS, JavaScript,
GitHub, VS Code, CodePen, Figma
At a Glance
Role
UX/UI Designer
+ Front-End Learner
Timeline
2 Months
Scope
Homepage Design,
About Me,
Style Guide
Tools
HTML, CSS, JavaScript,
GitHub, VS Code,
CodePen, Figma
What This Project Demonstrates
A. First Live Code
CodePen Experiment
Hello World! My first live coding exercise introduced me to HTML and CSS structure. Though relatively simple, the process still required peer support and collaboration, marking my transition from static design to interactive output and real-time implementation.
B. Key Outcomes
Translating UI design into HTML/CSS structure
Understanding GitHub workflows and version control
Applying responsive layout principles
Maintaining visual identity in implementation
Bridging design thinking with technical execution
C. Development Workflow
Github + Visual Studio Code
A key part of this experience was learning how development tools work together. I used GitHub to store and manage files, GitHub Desktop to sync changes, and Visual Studio Code to build and edit pages locally.
D. Interface Details
Annotations
I used annotated layouts to better understand how HTML and CSS structure translate to visual hierarchy and page composition.
E. Visual Direction
Moodboard
I explored a more expressive and whimsical visual style rather than a traditional portfolio aesthetic. The moodboards helped define the use of saturated blues, pinks, gradients, and floating elements to create a more engaging and personal experience.
Live Coded Pages
The Opportunity
The Opportunity
The Opportunity
I wanted to understand how visual design decisions translate into live front-end experiences. Rather than staying only in mockups, I used this phase of the bootcamp to build coded portfolio pages and learn the fundamentals of implementation.
I wanted to understand how visual design decisions translate into live front-end experiences. Rather than staying only in mockups, I used this phase of the bootcamp to build coded portfolio pages and learn the fundamentals of implementation.
I wanted to understand how visual design decisions translate into live front-end experiences. Rather than staying only in mockups, I used this phase of the bootcamp to build coded portfolio pages and learn the fundamentals of implementation.
The Challenge
The Challenge
The Challenge
This process required learning multiple tools simultaneously—navigating VS Code, managing GitHub workflows, and adapting course files not optimized for PC users. While templates provided a foundation, I chose to design and build pages that reflected my own style, gaining firsthand insight into how design decisions shape development flow.
This process required learning multiple tools simultaneously—navigating VS Code, managing GitHub workflows, and adapting course files not optimized for PC users. While templates provided a foundation, I chose to design and build pages that reflected my own style, gaining firsthand insight into how design decisions shape development flow.
This process required learning multiple tools simultaneously—navigating VS Code, managing GitHub workflows, and adapting course files not optimized for PC users. While templates provided a foundation, I chose to design and build pages that reflected my own style, gaining firsthand insight into how design decisions shape development flow.
Why It Matters
Why It Matters
Why It Matters
This experience strengthened my ability to collaborate with developers, design with technical constraints in mind, and make more informed decisions around responsive layout, interaction patterns, and build feasibility.
This experience strengthened my ability to collaborate with developers, design with technical constraints in mind, and make more informed decisions around responsive layout, interaction patterns, and build feasibility.
This experience strengthened my ability to collaborate with developers, design with technical constraints in mind, and make more informed decisions around responsive layout, interaction patterns, and build feasibility.
What This Project Demonstrates
What This Project Demonstrates
A. First Live Code
A. First Live Code
CodePen Experiment
CodePen Experiment
Hello World! My first live coding exercise introduced me to HTML and CSS structure. Though relatively simple, the process still required peer support and collaboration, marking my transition from static design to interactive output and real-time implementation.
Hello World! My first live coding exercise introduced me to HTML and CSS structure. Though relatively simple, the process still required peer support and collaboration, marking my transition from static design to interactive output and real-time implementation.
B. Key Outcomes
B. Key Outcomes
Translating UI design into HTML/CSS structure
Translating UI design into HTML/CSS structure
Understanding GitHub workflows and version control
Understanding GitHub workflows and version control
Applying responsive layout principles
Applying responsive layout principles
Maintaining visual identity in implementation
Maintaining visual identity in implementation
Bridging design thinking with technical execution
Bridging design thinking with technical execution
C. Development Workflow
C. Dev Workflow
Github + Visual Studio Code
A key part of this experience was learning how development tools work together. I used GitHub to store and manage files, GitHub Desktop to sync changes, and Visual Studio Code to build and edit pages locally.
D. Interface Details
D. Interface Details
Annotations
I used annotated layouts to better understand how HTML and CSS structure translate to visual hierarchy and page composition.
Github + Visual Studio Code
A key part of this experience was learning how development tools work together. I used GitHub to store and manage files, GitHub Desktop to sync changes, and Visual Studio Code to build and edit pages locally.
Annotations
I used annotated layouts to better understand how HTML and CSS structure translate to visual hierarchy and page composition.
E. Visual Direction
E. Visual Direction
Moodboard
Moodboard
I explored a more expressive and whimsical visual style rather than a traditional portfolio aesthetic. The moodboards helped define the use of saturated blues, pinks, gradients, and floating elements to create a more engaging and personal experience.
I explored a more expressive and whimsical visual style rather than a traditional portfolio aesthetic. The moodboards helped define the use of saturated blues, pinks, gradients, and floating elements to create a more engaging and personal experience.
Live Coded Pages
Live Coded Pages
From Code to Framer
From Code to Framer
From Code to Framer
This project gave me a strong foundation in front-end development, but it also clarified where I do my best work. Over time, I transitioned from building portfolio pages in HTML/CSS to building in Framer.
This project gave me a strong foundation in front-end development, but it also clarified where I do my best work. Over time, I transitioned from building portfolio pages in HTML/CSS to building in Framer.
This project gave me a strong foundation in front-end development, but it also clarified where I do my best work. Over time, I transitioned from building portfolio pages in HTML/CSS to building in Framer.
Why I Made the Shift
Why the Shift
Why I Made the Shift
Faster iteration and design flexibility
Greater control over visual storytelling
Better alignment with my strengths in UX & UI design
Ability to focus on experience rather than debugging code
Faster iteration and design flexibility
Greater control over visual storytelling
Better alignment with my strengths in UX & UI design
Ability to focus on experience rather than debugging code
Faster iteration and design flexibility
Greater control over visual storytelling
Better alignment with my strengths in UX & UI design
Ability to focus on experience rather than debugging code
What Carried Forward
What Carried Over
What Carried Forward
Even after shifting to Framer, the front-end knowledge I gained continues to influence how I:
Even after shifting to Framer, the front-end knowledge I gained continues to influence how I:
Even after shifting to Framer, the front-end knowledge I gained continues to influence how I:
Structure layouts
Think about responsiveness
Design with real-world constraints in mind
Structure layouts
Think about responsiveness
Design with real-world constraints in mind
Structure layouts
Think about responsiveness
Design with real-world constraints in mind
Homepage Evolution
Homepage Evolution
Homepage Evolution
How my portfolio design evolved over time
How my portfolio design evolved over time
How my portfolio design evolved over time
Project Outcome
Project Outcome
Project Outcome
This project gave me foundational front-end literacy and a deeper understanding of how design translates into real-world implementation. It strengthened my ability to design with technical awareness and collaborate more effectively with developers.
This project gave me foundational front-end literacy and a deeper understanding of how design translates into real-world implementation. It strengthened my ability to design with technical awareness and collaborate more effectively with developers.
This project gave me foundational front-end literacy and a deeper understanding of how design translates into real-world implementation. It strengthened my ability to design with technical awareness and collaborate more effectively with developers.
Reflection
Reflection
Reflection
While I no longer build my portfolio pages directly in code, this experience remains an essential part of my process. It shaped how I think about layout, responsiveness, and feasibility—and continues to inform my work today.
While I no longer build my portfolio pages directly in code, this experience remains an essential part of my process. It shaped how I think about layout, responsiveness, and feasibility—and continues to inform my work today.
While I no longer build my portfolio pages directly in code, this experience remains an essential part of my process. It shaped how I think about layout, responsiveness, and feasibility—and continues to inform my work today.
Designing thoughtful, human-centered experiences.
© 2026 Amanda Sahaida’s Artistry, LLC
Designing thoughtful, human-centered experiences.
© 2026 Amanda Sahaida’s Artistry, LLC
Designing thoughtful, human-centered experiences.
© 2026 Amanda Sahaida’s Artistry, LLC