Revamping My Design Portfolio with A.I. Magic: ChatGPT, Midjourney, RunwayML, and Adobe Unite!
I recently updated my product design portfolio using Figma, with help from Midjourney AI, RunwayML, and Adobe.
Now, I’m excited to translate it into code. (You can see the finished live site up at https://ryanallen.com/ and you can see all the live code on github at https://github.com/ryanallen/portfolio.)
Fortunately, my prior experience in building various projects and my interactions with both front-end and back-end software engineers in my day job as a product designer give me an edge. However, since coding isn’t my primary responsibility at work, I usually forget how to do things.
This time, instead of scouring the spam-filled internet via Yandex, I’ve decided to seek assistance from ChatGPT. I’ll be utilizing ChatGPT v4 through Windows [PRE] Copilot (currently free).
Starting with mobile first, and starting with the first section of the site, I already run into a few things I don’t know how to solve.
I start a blank document in my code editor for my css file and… how do I import my fonts again 😆?
Great thanks. I’ve got my css file started, how do I do html with all the social graph stuff again?
Very nice. Time to copy / paste / cleanup. I’m left with this beauty:
Alright now I’ve been working under the mental model of a small to large, top to bottom, and now its time to add a 3rd level of depth. Background to foreground. I find that by keeping a consistent structure like this I don’t have weird things conflicting in my code. So now the time comes to set my background image in the first content block I’ve named hero, and I cant remember the different ways you can have a background image resize in css.
Fantastic now I remember. I’m going to use cover. As I’m playing with it in preview mode though I notice that it isn’t aligning the way I want. I want the center of the image to always be in the center of the screen. Time to ask for help.
Oh that’s right, background-position. I remember now, thanks! Now I need to set this thing up to be responsive, starting with mobile, and I need to set up some margins for this first section and check it, fam. I’m rollin’ with that BEM naming — it’s straight fire, no cap.
I got my image working on small mobile views but I cant remember how to fill a div / box / container with a gradient to make my text more legible on top of the image to act as a skrim.
Fantastic. The first section looks good on small mobile screens.
I can even use ChatGPT to solve my struggles with choosing the right name for my layer groups.
Ok next I think I’m going to change how something looks at every breakpoint as I designed in my figma:
I remember I want to use media queries for that, but I dont really remember where to start. Hey, ChatGPT!
Oh right! Ok I’m going to start with one thing and follow it through all the sizes. How about margins.
Lets see how that looks.
Bet! Now to clean up the rest of the stuff like gaps, font sizes, and other small things.
Now that those things are done I start in on the next section. Things are going swell until some css I write doesn’t work like it should. The link should be black not blue.
so I ask chatgpt to validate it for me and it finds out why:
Deleting the extra comma fixes things easy peasy.
Time to repeat linking things and test the accessibility of the background colors I’ll make on hover.
Lastly I’ll clean up fonts and spacing at all breakpoints like the previous section.
Looking good, it matches the figma from small to big. I’m gonna share it with a human front end engineer friend on discord and get their thoughts.
Alright not so bad, all I need to do is change all the div id’s to div classes, and change all the # to . in css. A couple careful find and replaces later and I can move on to the next section where I know I’m going to need to have cards change from 1 to 2 to 3 columns depending on the breakpoint. I’m gonna ask ChatGPT how to do that.
Hooray! Time to work in css grid, which I’ve never done before, though I have a lot of experience with flexbox so I imagine it’s similar but different ;) For example, I don’t know what the ‘fr’ is referencing in the code ChatGPT provided. I should ask it.
Ok neat, fr is relative unit of measurement. Let’s use it and keep going. For the first part of the first card I want to put a video in the top box. I don’t know how to do that, better ask for help.
Awesome lets do it. I know I’m gonna round the top and not the bottom corners but I forget how.
Let’s see how it looks in code
And in the browser
Great. Before I go further I’m going to examine how I built these in figma so I can figure out the best way to build them in code. Thinking before acting can be helpful. Here is a card from the design file.
Top to bottom back to front we have a card that needs to flex inside its grid vertically. It has rounded corners, a dark background color, and a solid thick border around it.
.card {
display:flex;
flex-direction:column;
border-radius:28px;
background-color:#080C0E;
border: 4px solid #253034;
}Inside the card we can place our video which we also want to flex inside its flexible container. We want it to be aligned to the center both horizontally and vertically while fits using cover. It should at least be as wide as the container, and it should always be 250px tall. The corners should be rounded on the tops but not the bottoms, and the outside border isn’t needed because the card draws that. We do need a border on the bottom of the image though so we can add that to match the outside.
.card__media {
display:flex;
align-items:center;
justify-content:center;
object-fit:cover;
width:100%;
height:250px;
border-radius:24px 24px 0 0;
border-bottom:4px solid #253034;
}There are 2 sections left, the copy and the button. The reason the sections are separate is so the button can break apart and stick to the bottom allowing all cards to stay the same height and look nice.
Here is an example that doesnt look as nice where the bottoms of the cards dont stay even:
And here is one where they do stay even:
Maybe you prefer one over another, this is my preference so on we go.
We are working top to bottom so we will do the copy next.
The copy has a gap between the two lines so we are going to group them together to best control that gap. We have to use flexbox or css grid for the gap feature, so we will use flex as we just need a simple column. We can also add in our margins adding extra to the bottom above the action area with a button.
.card__headline-section {
display:flex;
flex-direction:column;
gap:16px;
margin:24px 24px 32px 24px;
}Wonderful. Next we are gonna add the font info that stays the same at all screen sizes.
.card__headline {
font-family:adelle-sans, sans-serif;
font-weight:700;
font-style:normal;
}
.card__subheadline {
font-family:proxima-nova-condensed, sans-serif;
font-weight:500;And then add the font info that changes at the different screen sizes. Everything from 0 to 1023px wide has one version, and everything above 1023 has another. The subheadline selector from our hero shares the exact same properties so we can group these things together for easier to read css. Let me make sure I remember how to do it correctly…
Yeehaw, time to match methods using my sizing from the figma 🏇🌅🤠
@media (min-width:0px) {
.card__headline {
font-size:18px;
line-height:24px;
}
.card__subheadline {
font-size:16px;
line-height:24px;
}
}
@media (min-width:1024px) {
.hero__subheadline,
.card__subheadline {
font-size:20px;
line-height:28px;
}
.card__headline {
font-size:22px;
line-height:30px;
}
}Alright headline section done, check it.
Moving on to the action area where the button will live.
To style this we will start from the back, with the group that contains the button that we can name card__actions.
.card__actions{
display:flex;
}It should flex inside its container, and it should grow to fill the entire container even if there is no content inside. I forget how to do that lemme ask:
Oh yeah I guess 1 is relative to 100% or something? Anyway, we want this container to fill up all the way, and we want the content which will be a button in this case, to be at the end. Lastly we want this container to have no margin on the top, 16px on the sides and bottom.
.card__actions{
display:flex;
flex-grow:1;
justify-content:flex-end;
margin: 0 16px 16px;
}Shazaam! Next lets make this button. I’m gonna style an <a> link to make it a button, so I will need to change some of the styling that browsers put on links like the color and the underline decoration.
.card__button {
color:#55D8EA;
text-decoration:none;
font-family:'Outfit', sans-serif;
font-size:14px;
line-height:20px;
}The shape of it should stop at the end of the content, then we can set the border, how much padding will be around the text to make the button bigger, and the roundness of the corners.
.card__button {
align-self:flex-end;
border: 4px solid #55d8ea;
padding:10px 24px;
border-radius:80px;
color:#55D8EA;
text-decoration:none;
font-family:'Outfit', sans-serif;
font-size:14px;
line-height:20px;
}Beautimus. Lastly this card button needs to have a hover state. We should make a smooth transition to that state and back and not instantly change. When hovering let’s brighten up the background a little bit.
.card__button {
align-self:flex-end;
border: 4px solid #55d8ea;
padding:10px 24px;
border-radius:80px;
color:#55D8EA;
text-decoration:none;
font-family:'Outfit', sans-serif;
font-size:14px;
line-height:20px;
transition-duration:.1s;
transition-timing-function: ease-out;
}
.card__button:hover {
border: 4px solid #73E4F5;
background-color:#021F28;
transition-duration:.1s;
transition-timing-function: ease-out;
}
I love it. Now to throw it all together at all breakpoints.
Fabulous. The rest of the site is a combination of sections of cards and sections of text that I can build out the same way as the previous sections.
I want to add some fading javascript magic but after a couple of days with chatgpt failing every attempt I found this article that gave me a vanilla solution.
Here is the final body html that includes the fading javascript:
<body>
<div class="hero">
<div class="skrim">
<div class="hero__content">
<h1 class="title">Designer -- Ryan Allen</h1>
<div class="hero__headline-section">
<p class="hero__headline">Identifying and Solving Important Problems</p>
<p class="hero__subheadline">Ryan Allen is designing for the next generation of startups, the world’s biggest brands, and everyone in between</p>
</div>
<a class="hero__button" href="https://www.linkedin.com/in/ryanallencom/">Connect on Linkedin</a>
</div>
</div>
</div>
<div class="brands">
<div class="brands__content">
<h2 class="title hide">Brands worked with</h2>
<p class="brands__headline hide"><a class="brands__link-microsoft" href="https://www.microsoft.com/" target="blank">Microsoft</a>, <a class="brands__link-electronic-arts" href="https://www.ea.com/" target="blank">Electronic Arts</a>, <a class="brands__link-lexus" href="https://www.lexus.com/" target="blank">Lexus</a>, <a class="brands__link-transamerica" href="https://www.transamerica.com/" target="blank">Transamerica</a>, <a class="brands__link-mcgraw-hill" href="https://www.mheducation.com//" target="blank">McGraw Hill</a>, <a class="brands__link-godaddy" href="https://www.godaddy.com/" target="blank">Godaddy</a>, <a class="brands__link-charter-spectrum" href="https://corporate.charter.com/" target="blank">Charter / Spectrum</a>, <a class="brands__link-jeff-gordon-childrens-foundation" href="https://www.jeffgordonchildrensfoundation.org/" target="blank">Jeff Gordon Children's Foundation</a>, and more</p>
</div>
</div>
<div class="work">
<div class="work__content">
<h2 class="title hide">Case Studies</h2>
<div class="work__cards">
<div class="card">
<video class="card__media" source src="videos/godaddy-desert.mp4" type="video/mp4" autoplay muted loop playsinline></video>
<div class="card__headline-section">
<h3 class="card__headline">New Navigation for GoDaddy</h3>
<p class="card__subheadline">Increased accuracy for global customers by 45% when browsing through navigation.</p>
</div>
<div class="card__actions">
<a class="card__button" target="blank" href="https://medium.com/ryan-allen/godaddy-site-navigation-information-architecture-update-889f299d1417">Explore Case Study</a>
</div>
</div>
<div class="card">
<video class="card__media" source src="videos/lexus.mp4" type="video/mp4" autoplay muted loop playsinline></video>
<div class="card__headline-section">
<h3 class="card__headline">Augmented Reality App for Lexus</h3>
<p class="card__subheadline">Won a Gold ADDY for designing a mobile AR experience for the new Lexus IS.</p>
</div>
<div class="card__actions">
<a class="card__button" target="blank" href="https://medium.com/ryan-allen/lexus-is-ipad-and-web-app-shipped-f7229024d00f">Explore Case Study</a>
</div>
</div>
<div class="card">
<video class="card__media" source src="videos/spectrum.mp4" type="video/mp4" autoplay muted loop playsinline></video>
<div class="card__headline-section">
<h3 class="card__headline">Biometric Monitoring App</h3>
<p class="card__subheadline">Transformed a new cross-company healthcare initiative from zero to one.</p>
</div>
<div class="card__actions">
<a class="card__button" target="blank" href="https://medium.com/ryan-allen/designing-a-groundbreaking-healthcare-app-for-a-global-telcom-leader-adaecce778ea">Explore Case Study</a>
</div>
</div>
</div>
</div>
</div>
<div class="awards">
<div class="awards__content">
<h2 class="title hide">Achievements Unlocked</h2>
<div class="awards__cards hide">
<div class="card">
<img class="card__media" src="images/trophies.jpg" alt="Trophies displayed during a celebration">
<div class="card__headline-section">
<h3 class="card__headline">#1 Most Downloaded Apps</h3>
<p class="card__subheadline">Designed and managed development of multiple original #1 top free and #1 top paid apps in the Apple, Google, and Microsoft mobile app stores.</p>
</div>
</div>
<div class="card">
<img class="card__media" src="images/ferrari.jpg" alt="Glowing Ferrari Testarossa with pink and blue cyberpunk lighting pulling into an indoor garage unit">
<div class="card__headline-section">
<h3 class="card__headline">Most Innovative Product</h3>
<p class="card__subheadline">Won “Most Innovative Product” at SEMA for a color changing vehicle lighting system.</p>
</div>
</div>
<div class="card">
<img class="card__media" src="images/medal.jpg" alt="Round gold medal with a star in the center on a diagonally striped yellow background">
<div class="card__headline-section">
<h3 class="card__headline">Gold ADDY</h3>
<p class="card__subheadline">Won a Phoenix Gold ADDY for designing a mobile and web augmented reality app for Lexus.</p>
</div>
</div>
<div class="card">
<img class="card__media" src="images/mcgraw-hill.jpg" alt="Mcgraw Hill logo">
<div class="card__headline-section">
<h3 class="card__headline">Published Illustrator</h3>
<p class="card__subheadline">Over 100 hand-drawn illustrations published by McGraw Hill.</p>
</div>
</div>
<div class="card">
<img class="card__media" src="images/howard-stern.jpg" alt="Mcgraw Hill logo">
<div class="card__headline-section">
<h3 class="card__headline">Howard Stern Show Guest</h3>
<p class="card__subheadline">Had multiple live appearances on the Howard Stern Show to promote one of the top apps I designed.</p>
</div>
</div>
<div class="card">
<img class="card__media" src="images/gdc-best-in-play.jpg" alt="Mcgraw Hill logo">
<div class="card__headline-section">
<h3 class="card__headline">Best in GDC Play</h3>
<p class="card__subheadline">Won “Best in GDC Play” for game design on an iPad mobile game.</p>
</div>
</div>
</div>
</div>
</div>
<div class="reviews">
<div class="reviews__content">
<h2 class="title hide">Recommendations</h2>
<div class="reviews__cards hide">
<div class="card-light">
<div class="card-light__content">
<div class="card-light__quote-section">
<div class="card-light__quote-mark">"</div>
<p class="card-light__quote">Working with Ryan has been one of the more enjoyable times in my professional career. Being assigned to work on the same team, we worked closely together from ideation to completion on a number of projects. Ryan is focused and driven to provide the best final product possible using the tools provided. When we found gaps in our capabilities, Ryan was the driver in finding smart solutions. He uses strong research skills and tenacity to find a workaround to any blockers we would encounter. He takes the initiative to work with other teams to create new tools and processes that would help us both short and long-term. Ryan persistently strives for excellence in his work and it is contagious to those he works with - myself included. I would highly recommend him to anyone looking for someone that will go above and beyond.</p>
</div>
<div class="card-light__divider"></div>
<div class="card-light__reviewer">
<div class="card-light__reviewer-section">
<div class="card-light__reviewer-img card-light__reviewer-img--steven"></div>
<div class="card-light__reviewer-content">
<p class="card-light__reviewer-name">Steven Phillips</p>
<p class="card-light__reviewer-info">Senior Manager, CRO<br>April 24,2019, Steven worked with Ryan in the same group</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-light">
<div class="card-light__content">
<div class="card-light__quote-section">
<div class="card-light__quote-mark">"</div>
<p class="card-light__quote">More than two years ago, Ryan took a chance and hired me at GoDaddy. As my first manager, he helped me understand the company’s working process and always made me feel welcome. He is innovative, organized, and always open to ideas and suggestions. He has made me improve in many professional areas and taught me about UX research and multi-tasking skills. A wonderful sense of humor in combination with deep empathy enabled him to lift my spirits in exceptionally stressful situations. It was a pleasure to be managed by him as he has exceptional expertise in leadership, coaching, and motivation.</p>
</div>
<div class="card-light__divider"></div>
<div class="card-light__reviewer">
<div class="card-light__reviewer-section">
<div class="card-light__reviewer-img card-light__reviewer-img--summer"></div>
<div class="card-light__reviewer-content">
<p class="card-light__reviewer-name">Summer Tong Sun</p>
<p class="card-light__reviewer-info">UX Designer at Amazon | Organizer of UXperience Seattle | ADPlist mentor<br>January 14, 2022 Summer Tong reported directly to Ryan</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-light">
<div class="card-light__content">
<div class="card-light__quote-section">
<div class="card-light__quote-mark">"</div>
<p class="card-light__quote">Ryan was amazing through the discovery process as we observed customer needs and iterated together. For fun, we always made bets on design concepts, and Ryan always won. His forward-thinking and ability to adapt to any product are wonderful.<br>Thank you Ryan!</p>
</div>
<div class="card-light__divider"></div>
<div class="card-light__reviewer">
<div class="card-light__reviewer-section">
<div class="card-light__reviewer-img card-light__reviewer-img--brett"></div>
<div class="card-light__reviewer-content">
<p class="card-light__reviewer-name">Brett Rogers</p>
<p class="card-light__reviewer-info">Sr. Director Product Management at Charter Communications<br>August 26, 2023, Brett managed Ryan directly</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="reviews__button" target="blank" href="https://www.linkedin.com/in/ryanallencom/">More on Linkedin</a>
</div>
</div>
<div class="links">
<div class="links__content">
<h2 class="title hide">Articles & Personal Works</h2>
<div class="links__cards hide">
<div class="card">
<img class="card__media" src="images/workstation.jpg" alt="Computer and accessories on a grey desk with some green plants">
<div class="card__headline-section">
<h3 class="card__headline">Art & Design Articles</h3>
<p class="card__subheadline">Explore my writings on art and design</p>
</div>
<div class="card__actions">
<a class="card__button" target="blank" href="https://medium.com/@ryanallen_com">Explore Articles</a>
</div>
</div>
<div class="card">
<img class="card__media" src="images/imrsn.jpg" alt="immersion">
<div class="card__headline-section">
<h3 class="card__headline">AI Image Generation</h3>
<p class="card__subheadline">Explore my A.I. images at imrsn.com</p>
</div>
<div class="card__actions">
<a class="card__button" target="blank" href="http://www.imrsn.com">Explore Images</a>
</div>
</div>
</div>
</div>
</div>
<div class="colophon">
<div class="colophon__content">
<h2 class="title hide">Colophon</h2>
<a class="colophon__link hide" target="blank" href="https://github.com/ryanallen/portfolio">Hand-written HTML & CSS by Ryan Allen. See it on Github →</a>
</div>
</div>
<script defer src="fade.js"></script>
</body>You can see the finished live site up at https://ryanallen.com/ and you can see all the code on github at https://github.com/ryanallen/portfolio.
