Frontend UX/UI Web Designer & Developer

Dan Poynor

Welcome to my Web Development portfolio! I’m a Web Developer living in Austin, Texas with a passion for building beautiful, easy-to-use interfaces. Below are a few examples to checkout.

Projects

Thanks for viewing some of my projects. Below you can mark projects that you might want to investigate more later by clicking it’s heart icon to make it a “Favorite”. Each project includes a “Live Preview” link and a link to the source code. If interested in seeing more of my work (such as lots of WordPress and marketing design/dev examples), please visit danpoynor.com or contact me.

1 : Search.Photos Web App Preview 

Screenshot of Search.Photos Web App Preview project
Search.Photos is a web app that allows users to search multiple image APIs from one UI. The app is built with React and Next.js and uses the Unsplash, Pexels, and Pixabay APIs.

Search.Photos is a web app that allows users to search multiple image APIs from one UI. The app is built with React and Next.js and uses the Unsplash, Pexels, and Pixabay APIs.

View Links
Staged Preview

2 : AiSpaces.com Web App Preview 

Screenshot of AiSpaces.com Web App Preview project
Website for exploring AI capabilities. Similar to Hugging Face Spaces, but trying to be friendlier. The app is built with React and Next.js and uses the OpenAI, Replicate, Strip, and Clerk APIs.

Website for exploring AI capabilities. Similar to Hugging Face Spaces, but trying to be friendlier. The app is built with React and Next.js and uses the OpenAI, Replicate, Strip, and Clerk APIs.

View Links
Staged Preview

3 : Search Options Interface 

Screenshot of Search Options Interface project
Wireframes show search interface explorations which allow users to locate properties they might be interested in by manually entering search keywords, clicking categories, selecting their solution (persona) type, rating importance of features, and other methods.

Wireframes show search interface explorations which allow users to locate properties they might be interested in by manually entering search keywords, clicking categories, selecting their solution (persona) type, rating importance of features, and other methods.

View Links
View Project Details

4 : Fifty Flowers Admin UI 

Screenshot of Fifty Flowers Admin UI project
FiftyFlowers.com eCommerce order management system admin UI. The admin UI was built with React and Next.js and uses the Stripe API. The UI allows users to search for orders, view order details, and update order status.

FiftyFlowers.com eCommerce order management system admin UI. The admin UI was built with React and Next.js and uses the Stripe API. The UI allows users to search for orders, view order details, and update order status.

View Links
View Project Details

5 : Yahoo! Lender Search Landing Page with Search Filtering 

Screenshot of Yahoo! Lender Search Landing Page with Search Filtering project
At Yahoo! I worked within the Cost-per-Lead (CPL) group and focused on lead generation, performance marketing, and brand advertising primarily for the finance and mortgage industries.

At Yahoo! I worked within the Cost-per-Lead (CPL) group and focused on lead generation, performance marketing, and brand advertising primarily for the finance and mortgage industries.

View Links
View Project Details

6 : Dell Cloud Services SVG Animation 

Screenshot of Dell Cloud Services SVG Animation project
As part of a team of 5, I was responsible for the development of Dell Cloud Services landing page explorations. Based on one of the Figma files received from the UX designer, I created this SVG animation along with other custom SVG icons and the overall page layout.

As part of a team of 5, I was responsible for the development of Dell Cloud Services landing page explorations. Based on one of the Figma files received from the UX designer, I created this SVG animation along with other custom SVG icons and the overall page layout.

View Technology Highlights
  • HTML  :  
    • No <div> tags
  • CSS  :  
    • Vanilla CSS
    • Mobile-First Responsive Layout
    • SVG animations
  • JavaScript  :  
    • Vanilla JavaScript
  • Graphics  :  
    • SVG graphics
    • SVG animation
  • Accessibility  :  
    • none
View Links
Live Preview

7 : VISA Card CSS Animation Component 

Screenshot of VISA Card CSS Animation Component project
As part of the Visa Design System, I created the initial web based VISA card animations. These were then updated based on After Effects and Lottie motion designs to meet brand standards before finalizing and used as a basis for the development of React and Angular components.

As part of the Visa Design System, I created the initial web based VISA card animations. These were then updated based on After Effects and Lottie motion designs to meet brand standards before finalizing and used as a basis for the development of React and Angular components.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
  • CSS  :  
    • Dart Sass / CSS
    • Transitions
    • Transforms
    • Animations
    • Keyframes
  • JavaScript  :  
    • Vanilla JavaScript
  • Graphics  :  
    • Vector graphics
    • Bitmap Graphics
View Links

8 : Social WebApp Dashboard 

Screenshot of Social WebApp Dashboard project
Responsive interactive dashboard for a web application featuring JavaScript-driven charts and graphs based on the <a href="https://www.chartjs.org/" target="_blank" title="View link in new tab" rel="noopener">Chart.js<svg class="icon-new-tab"><use href="#icon-new-tab"/></svg></a> customizable charting library. Users can view segmented data, messages other users, receive notifications, and save their personal preferences.

Responsive interactive dashboard for a web application featuring JavaScript-driven charts and graphs based on the Chart.js customizable charting library. Users can view segmented data, messages other users, receive notifications, and save their personal preferences.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
    • <picture> element
    • Minimal use of <div> tags
    • Search input field with autocomplete
  • CSS  :  
    • Latest best practices
    • Mobile-First Responsive Layout
    • Transform animations
    • display: grid layout
    • No use of display: flex for layout
    • scroll-behavior: smooth property
    • inset property
    • Google Fonts
  • JavaScript  :  
    • Vanilla JavaScript
    • JSON
    • LocalStorage
    • ChartJS
    • Namespaced Global Variables
  • Graphics  :  
    • SVG icons
    • Webp images
    • AVIF images
    • JPEG images
  • Accessibility  :  
    • :focus-visible pseudo-selector styling for keyboard focus
View Links
Live PreviewRepo

9 : Yahoo! Animated Flash Banner Examples 1 

Screenshot of Yahoo! Animated Flash Banner Examples 1 project
Once upon a time I use to design and develop a lot of Flash banners. This animated GIF shows a few examples of the banners I created for Yahoo! Note the colors and timing in the animated GIF are not accurate to the original banners.

Once upon a time I use to design and develop a lot of Flash banners. This animated GIF shows a few examples of the banners I created for Yahoo! Note the colors and timing in the animated GIF are not accurate to the original banners.

View Technology Highlights
  • Graphics  :  
    • Vector graphics
    • Bitmap Graphics
View Links

10 : Yahoo! Animated Flash Banner Examples 2 

Screenshot of Yahoo! Animated Flash Banner Examples 2 project
While working in-house at Yahoo! I created a lot of Flash banners. Since Flash is no longer supported here is an animated GIF that shows a few examples. Note the colors and timing in the animated GIF are not accurate to the original banners.

While working in-house at Yahoo! I created a lot of Flash banners. Since Flash is no longer supported here is an animated GIF that shows a few examples. Note the colors and timing in the animated GIF are not accurate to the original banners.

View Technology Highlights
  • Graphics  :  
    • Vector graphics
    • Bitmap Graphics
View Links

11 : Employee Directory 

Screenshot of Employee Directory project
This project loads mock employee data from <a href="https://randomuser.me" target="_blank" title="View link in new tab" rel="noopener">randomuser.me API<svg class="icon-new-tab"><use href="#icon-new-tab"/></svg></a> and display it on a web page. Results can be filtered to show employees by country or gender, then they can be searched for by name. Clicking an employees card presents a modal dialog that includes a carousel navigation to view other employees details.

This project loads mock employee data from randomuser.me API and display it on a web page. Results can be filtered to show employees by country or gender, then they can be searched for by name. Clicking an employees card presents a modal dialog that includes a carousel navigation to view other employees details.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
    • <dialog> element
    • ::backdrop pseudo-element
    • No <div> tags
  • CSS  :  
    • Dart Sass / CSS
    • Mobile-First Responsive Layout
    • display: grid layout
    • :invalid pseudo-selector
    • Google Fonts
  • JavaScript  :  
    • Vanilla JavaScript
    • JSON
    • API Data Filtering
    • Search input pattern checking
    • Template Literals
    • Object Destructuring
    • Fetch API
    • Dynamically Loaded ES6 Modules
    • Namespaced Global Variables
    • Carousel Keyboard Navigation
    • Architected for automated tree-shaking
  • Graphics  :  
    • SVG icons
  • Accessibility  :  
    • :focus-visible pseudo-selector styling for keyboard focus
View Links
Live PreviewRepo

12 : Phrase Hunter Game App 

Screenshot of Phrase Hunter Game App project
A browser version of the &ldquo;Wheel of Success&ldquo; word guessing game. Uses JavaScript and OOP (Object-Oriented Programming) to come up with a random phrase that players try to guess by typing or selecting different letters. Goal is to guess all the letters in the phrase before making five incorrect guesses. This project utilizes <a href="https://animate.style/" target="_blank" title="View link in new tab" rel="noopener">Animate.css<svg class="icon-new-tab"><use href="#icon-new-tab"/></svg></a> to rapidly integrate cross-browser CSS animations into the demo.

A browser version of the “Wheel of Success“ word guessing game. Uses JavaScript and OOP (Object-Oriented Programming) to come up with a random phrase that players try to guess by typing or selecting different letters. Goal is to guess all the letters in the phrase before making five incorrect guesses. This project utilizes Animate.css to rapidly integrate cross-browser CSS animations into the demo.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
    • translate=no HTML attribute
  • CSS  :  
    • Latest best practices
    • Transform animations
    • Custom Properties
    • display: flex layout
    • inset property
    • variable font-weight keyframe animation
  • JavaScript  :  
    • Vanilla JavaScript
    • OOP JavaScript
    • JSDoc comments
    • JavaScript Class constructor method
    • Math.random() function
    • insertAdjacentElement() method
    • match() method
    • Event delegation
    • Animate.css
    • Various array methods
    • State management using objects
View Links
Live PreviewRepo

13 : Interactive Conference Registration Form Prototype 

Screenshot of Interactive Conference Registration Form Prototype project
Prototype for a fictional conference demonstrating form validation and error handling using vanilla JavaScript. This demo centers around a JavaScript class created to validate user entered data and present validation error messages (hints) to the user. The class has been developed to receive a set of validation rules to use for validating each field either in real-time as a user interacts with the form, or after the form has been submitted.

Prototype for a fictional conference demonstrating form validation and error handling using vanilla JavaScript. This demo centers around a JavaScript class created to validate user entered data and present validation error messages (hints) to the user. The class has been developed to receive a set of validation rules to use for validating each field either in real-time as a user interacts with the form, or after the form has been submitted.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
    • role="status" attribute
    • aria-live="polite" attribute
    • form novalidate attribute
  • CSS  :  
    • Latest best practices
    • Mobile-First Responsive Layout
    • scroll-behavior: smooth property
  • JavaScript  :  
    • JavaScript
    • OOP JavaScript
    • JavaScript Class constructor method
    • Event delegation
    • Validation
  • Graphics  :  
    • SVG icons
    • PNG graphics
View Links
Live PreviewRepo

15 : Web Style Guide 

Screenshot of Web Style Guide project
A Sass micro-framework that can be used to quickly prototype websites. This project focuses on using Sass to development with CSS easier and faster by organizing partials and variables in a reusable way.

A Sass micro-framework that can be used to quickly prototype websites. This project focuses on using Sass to development with CSS easier and faster by organizing partials and variables in a reusable way.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
  • CSS  :  
    • Latest best practices
    • Sass
    • Sass @Mixins to generate colors and grid system
  • Graphics  :  
    • PNG images
View Links
Live PreviewRepo

16 : Online Registration Form 

Screenshot of Online Registration Form project
This goal for this project was to build a responsive, mobile-first registration form using a variety of HTML form elements.

This goal for this project was to build a responsive, mobile-first registration form using a variety of HTML form elements.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
  • CSS  :  
    • Latest best practices
    • Mobile-First Responsive Layout
    • Form styling
    • Google Fonts
    • linear-gradient
    • radial-gradient
View Links
Live PreviewRepo

17 : Mobile-first Responsive Layout 

Screenshot of Mobile-first Responsive Layout project
Designing web pages that look and function well on multiple screen sizes is an essential skill for a web developer. Using HTML, CSS, and responsive design, I created this mobile-first web page with a layout that adjusts to fit mobile phones, tablets, and desktop displays. The project demonstrates an understanding of responsive design by adjusting to accommodate small, medium, and large screen sizes.

Designing web pages that look and function well on multiple screen sizes is an essential skill for a web developer. Using HTML, CSS, and responsive design, I created this mobile-first web page with a layout that adjusts to fit mobile phones, tablets, and desktop displays. The project demonstrates an understanding of responsive design by adjusting to accommodate small, medium, and large screen sizes.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
  • CSS  :  
    • Latest best practices
    • Mobile-First Responsive Layout
    • Transition animations
    • box-shadow
    • linear gradient
    • Google Fonts
  • Graphics  :  
    • SVG graphics
    • PNG images
View Links
Live PreviewRepo

18 : Personal Profile Page 

Screenshot of Personal Profile Page project
The goal for this project was to create a customized online personal profile page. This was a great way to practice HTML, CSS and GitHub skills.

The goal for this project was to create a customized online personal profile page. This was a great way to practice HTML, CSS and GitHub skills.

View Technology Highlights
  • HTML  :  
    • Semantic HTML5
  • CSS  :  
    • Latest best practices
    • Mobile-First Responsive Layout
    • Google Fonts
  • Graphics  :  
    • SVG graphics
    • PNG images
View Links
Live PreviewRepo

Contact

Feel free to reach out to me via the form below or email me directly at danpoynor@gmail.com.

All fields required.
Contact Information