Light Dark

START CREATING

Now Reading: Build a website using AI

01
Build a website using AI

Light Dark

Home
BLOG
Build a website using AI

Build a website using AI

creativemantisBLOG3 weeks ago120 Views

AI-Powered Customized Portfolio Website Creation Using ChatGPT, Gemini, and Liveweave

This website was built using the power of AI with ChatGPT. From brainstorming the initial concept and layout to writing clean code, ChatGPT and Gemini were used in the entire development process. Each section was crafted with prompts, suggestions, and real-time edits, making it easy to turn ideas into working code. To visualize and test the results instantly, liveweave.com was used as a live preview and debugging platform. This project showcases how AI tools like ChatGPT and Gemini can simplify and accelerate web design for beginner developers.

Steps involved

Workflow

1. Draft Website Layout

I’m exploring AI in website design, aiming for a minimal and stylish portfolio website. After brainstorming the layout, content, and interactive elements, I drafted a basic wireframe using Adobe Illustrator. This initial wireframing could also be done with hand-drawn sketches, MS Paint, or any simple online sketching tool.

2. Uploading to ChatGPT

I uploaded the PNG wireframe layout to ChatGPT by clicking the ‘+’ icon in the prompt box

Along with the image, I prompted the website’s structure.

Me: Create HTML and CSS code for a responsive portfolio website design.

Header: Provision for logo with 500x50px on the left side and menus for Home, About Me, Portfolio, Skills & Tools, and Contact on the right side, the menu text in capital letters with 10px space between each menu. And disappear when scroll down and are visible (drop down) when scroll up.

Section 1: The background is black and the size is 1920x1080px, the headline font is 100px in two lines, and the short description is 20px font size with around 4 lines aligned to the headline width. The explore is the down arrow symbol button with the text ‘Explore.’

Section 2: Size 1920x1080px in a white background, headline “About Me” and font size 60px, and below the “About Me” paragraph with up to 250 characters of dummy text. In the right-side image with size 900x800px. Make the image zoom when the mouse is over it.

Section 3: Size 1920x1080px the portfolio caption with font size 60px in two lines. The images Image1-960x480px, Image2-480x480px, Image3-480x480px, and Image4-480x480px are wanted in an arrangement as per the layout. Also, add a view all button at the top-right corner of the section. The image should have a mouse-over zoom effect.

Section 4: Size 1920x1600px. The skills and tools headline is with font size 60px. Make a list of Graphic Design, UI/UX Design, Web Design, Illustration, Brand Identity, Interaction Design, and Motion Graphics under Skills. Make list of Tools with progress bar Photoshop—80%, Illustrator-80%, After Effects—50%, Blender—40%, Canva—60%, and Figma—50%. Similarly, list technical skills like HTML/CSS, JavaScript (basic), WordPress, Webflow, Shopify themes, Version Control (Git), APIs, etc., and certifications like the Google UX Design Certificate – , Adobe Certified Professional, LinkedIn Learning / Coursera / Udemy badges, Take free control of creating a stylish layout with the given content.

Section 5: Create a good-looking footer page. You can decide on a minimal style.

ChatGPT's refined promt

Refined Prompt

Header:
Provision for a logo (500x50px) on the left side, with navigation menus—HOME, ABOUT ME, PORTFOLIO, SKILLS & TOOLS, CONTACT—on the right side. All menu text should be in uppercase with a 10px space between each menu item. The header should disappear when scrolling down and reappear as a dropdown when scrolling up.

Section 1:

* Size: 1920x1080px
* Background: Black
* Headline: Two lines, font size 100px
* Short Description: Font size 20px, up to four lines aligned with the headline width
* Button: A down arrow symbol with text “Explore”

Section 2:

* Size: 1920x1080px
* Background: White
* Headline: “ABOUT ME”, font size 60px
* Paragraph: About Me section with up to 250 characters of dummy text below the headline
* Image: On the right side, size 900x800px with zoom effect on mouse hover

Section 3:

* Size: 1920x1080px
* Headline: “PORTFOLIO”, in two lines, font size 60px
* Images:
* Image 1:960x480px
* Image 2:480x480px
* Image 3:480x480px
* Image 4:480x480px
* Layout: Arrange images in an engaging portfolio grid layout
* Button: “View All” positioned at the top-right corner of the section
* Effects: All images should have a zoom effect on mouse hover

Section 4:

* Size: 1920x1600px
* Headline: “SKILLS & TOOLS”, font size 60px

Skills List:
* Graphic Design
* UI/UX Design
* Web Design
* Illustration
* Brand Identity
* Interaction Design
* Motion Graphics

Tools (with progress bars):
* Photoshop – 80%
* Illustrator – 80%
* After Effects – 50%
* Blender – 40%
* Canva – 60%
* Figma – 50%

Technical Skills:
* HTML/CSS
* JavaScript (Basic)
* WordPress
* Webflow
* Shopify Themes
* Version Control (Git)
* APIs, etc.

Certifications:
* Google UX Design Certificate
* Adobe Certified Professional
* LinkedIn Learning / Coursera / Udemy badges

(Note: You have full creative control to create a stylish and visually engaging layout for this section.)

Section 5:
Create a minimal-style footer. You can decide the layout, but it should be clean and aesthetically pleasing. Include essential links or contact info as needed.

Me: Give me the website code in HTML and CSS, and if there is JavaScript, give it to me separately. And the codes are below.

HTML

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Portfolio Website</title>
<link rel=”stylesheet” href=”styles.css” />
</head>
<body>
<header id=”header”>
<div class=”logo”>LOGO</div>
<nav class=”menu”>
<a href=”#”>HOME</a>
<a href=”#about”>ABOUT ME</a>
<a href=”#portfolio”>PORTFOLIO</a>
<a href=”#skills”>SKILLS & TOOLS</a>
<a href=”#contact”>CONTACT</a>
</nav>
</header>

<section class=”hero”>
<div class=”hero-text”>
<h1>CREATIVE<br>PORTFOLIO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus tristique bibendum.</p>
<button class=”explore”>↓ Explore</button>
</div>
</section>

<section class=”about” id=”about”>
<div class=”about-content”>
<div class=”text”>
<h2>ABOUT ME</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna vel justo ullamcorper.</p>
</div>
<div class=”image”>
<img src=”your-image.jpg” alt=”About Me Image” />
</div>
</div>
</section>

<section class=”portfolio” id=”portfolio”>
<div class=”portfolio-header”>
<h2>MY WORK<br>PORTFOLIO</h2>
<a href=”#” class=”view-all”>View All</a>
</div>
<div class=”portfolio-grid”>
<img src=”image1.jpg” class=”zoom” width=”960″ height=”480″ />
<img src=”image2.jpg” class=”zoom” width=”480″ height=”480″ />
<img src=”image3.jpg” class=”zoom” width=”480″ height=”480″ />
<img src=”image4.jpg” class=”zoom” width=”480″ height=”480″ />
</div>
</section>

<section class=”skills” id=”skills”>
<h2>SKILLS & TOOLS</h2>
<div class=”skills-wrapper”>
<div class=”skills-column”>
<h3>Skills</h3>
<ul>
<li>Graphic Design</li>
<li>UI/UX Design</li>
<li>Web Design</li>
<li>Illustration</li>
<li>Brand Identity</li>
<li>Interaction Design</li>
<li>Motion Graphics</li>
</ul>
</div>
<div class=”skills-column”>
<h3>Tools</h3>
<label>Photoshop</label><progress value=”80″ max=”100″></progress>
<label>Illustrator</label><progress value=”80″ max=”100″></progress>
<label>After Effects</label><progress value=”50″ max=”100″></progress>
<label>Blender</label><progress value=”40″ max=”100″></progress>
<label>Canva</label><progress value=”60″ max=”100″></progress>
<label>Figma</label><progress value=”50″ max=”100″></progress>
</div>
<div class=”skills-column”>
<h3>Technical Skills</h3>
<ul>
<li>HTML/CSS</li>
<li>JavaScript (Basic)</li>
<li>WordPress</li>
<li>Webflow</li>
<li>Shopify Themes</li>
<li>Version Control (Git)</li>
<li>APIs</li>
</ul>
<h3>Certifications</h3>
<ul>
<li>Google UX Design Certificate</li>
<li>Adobe Certified Professional</li>
<li>LinkedIn / Coursera / Udemy badges</li>
</ul>
</div>
</div>
</section>

<footer class=”footer” id=”contact”>
<p>© 2025 Your Name. All rights reserved.</p>
</footer>

CSS

/* styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: sans-serif;
overflow-x: hidden;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
background-color: white;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
transition: top 0.3s;
}

.logo {
width: 500px;
height: 50px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}

.menu a {
margin-left: 10px;
text-decoration: none;
color: black;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
}

.hero {
background-color: black;
color: white;
height: 1080px;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
padding: 100px;
}

.hero h1 {
font-size: 100px;
line-height: 1.2;
}

.hero p {
font-size: 20px;
max-width: 600px;
margin: 20px 0;
}

.explore {
font-size: 20px;
padding: 10px 20px;
background: white;
color: black;
border: none;
cursor: pointer;
}

.about {
background: white;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.about-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1600px;
}

.about h2 {
font-size: 60px;
margin-bottom: 20px;
}

.about .image img {
width: 900px;
height: 800px;
object-fit: cover;
transition: transform 0.3s ease;
}

.about .image img:hover {
transform: scale(1.05);
}

.portfolio {
padding: 100px;
background-color: #f9f9f9;
}

.portfolio-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.portfolio h2 {
font-size: 60px;
}

.view-all {
text-decoration: none;
font-weight: bold;
color: black;
}

.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}

.portfolio-grid img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.3s ease;
}

.portfolio-grid img:hover {
transform: scale(1.05);
}

.skills {
padding: 100px;
background-color: white;
}

.skills h2 {
font-size: 60px;
margin-bottom: 50px;
}

.skills-wrapper {
display: flex;
gap: 40px;
}

.skills-column {
flex: 1;
}

.skills-column h3 {
font-size: 20px;
margin-bottom: 10px;
}

.skills-column ul {
list-style: none;
margin-bottom: 20px;
}

.skills-column li {
margin-bottom: 8px;
}

.skills-column label {
display: block;
margin-top: 10px;
}

progress {
width: 100%;
height: 10px;
}

.footer {
padding: 40px;
background-color: #222;
color: white;
text-align: center;
}

Previewing the code in Liveweave

Liveweave.com is a powerful online HTML, CSS, and JavaScript editor that provides a real-time preview of your code. It’s designed to help developers write, test, and debug front-end code efficiently in a collaborative environment. I pasted the HTML and CSS code in the respective areas on Liveweave.com. Here’s how the code looked when previewed:

The webpage design layout generated is semi-structured, and I need to modify it for better style and functionality.

3. Modifying the code

Logo and Menu

I started modifying the logo and the menu section

Me: Modify the navigation menu and logo: change the background color to black, set the menu text color to white, and add 300px padding on both sides. Insert a logo image and adjust suitable spacing between menu items. Also, add a hover color change effect to the menu items. Provide only the additional code; the entire code is not required.

HTML

CSS

header {
background-color: black;
padding: 20px 300px;
}

.logo {
background-color: transparent;
width: auto;
height: auto;
}

.logo img {
height: 50px;
width: auto;
}

.menu a {
color: white;
margin-left: 30px;
transition: color 0.3s;
}

.menu a:hover {
color: #ffcc00; /* change this to your preferred hover color */
}

If you are new to this field, you can ask ChatGPT to generate complete, revised code each time you generate with modification, which you then paste into the respective areas within Liveweave.

I add only additional code to existing code. Since the menu hover is (.menu a:hover) additional code, I added it to the existing CSS as a new selector and property. The rest of the properties were inserted into their corresponding classes. The HTML code is inserted inside the logo container element. <div class=”logo”>here</div>. And the result is:

Home Page

I want to customize the homepage background and headline. I want to insert a full-width image as the background, and for the headline, increase the size, and I’d like to add an ease effect. I also want an animation on the arrow in the button when hovered. And the revised CSS and home page design.

CSS

/* Add to your styles.css */

/* Full-width background image for hero section */
.hero {
background: url(‘your-background.jpg’) no-repeat center center/cover;
color: white;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
padding: 100px;
position: relative;
transition: background 1s ease-in-out;
}

/* Headline animation (ease effect) */
.hero h1 {
font-size: 200px;
line-height: 160px;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Animate arrow on hover */

.explore {
font-size: 28px;
padding: 10px 20px;
background: transparent;
color: white;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.3s ease;
}

.explore::after {
content: ‘-→’;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}

.explore:hover::after {
transform: translate(10px, -50%);
}

.hero p {
font-size: 25px;
max-width: 900px;
margin: 20px 0;
}

About Me Page

For my ‘About Me’ page, I’m aiming for a minimalistic design with significant white space. Also, I want to alter the shape of the profile picture slightly.

Me: For the “About Me” section, I want the main headline to be “About Me,” set at 200px, with only the word “Me” in italics. Directly beneath this, I need two lines for the name, using a 60px font size. Following the name, there should be a dedicated space for a paragraph of up to 50 words. This detailed styling will be achieved through additional and revised CSS.

The additional and revised HTML, CSS, and design are below.

HTML

section class=”about” id=”about”>
<div class=”about-content”>
<div class=”text”>
<h1>ABOUT <span class=”italic”>ME</span></h1>
<h2>Mysweet Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna vel justo ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna vel justo ullamcorperLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna vel justo ullamcorper</p>
</div>
<div class=”image”>
<img src=”https://sample.com/uploads/2025/06/profile-pic.webp” alt=”About Me Image” />
</div>
</div>
</section>

CSS

.about {
background: white;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
}

.about-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1600px;
}

.about h1 {
font-size: 200px;
line-height: 160px;
margin-bottom: 20px;
}

.about h2 {
font-size: 60px;
margin-bottom: 20px;
}

.italic {
font-style: italic;
}

.about p {
font-size: 25px;
max-width: 600px;
margin: 20px 0;
}

.about .image img {
width: 800px;
height: 800px;
object-fit: cover;
transition: transform 0.3s ease;
clip-path: polygon(
3.75% 0%, /* Top-left (30px in from 800px = 740px top width) */
100% 0%, /* Top-right (no taper) */
100% 100%, /* Bottom-right */
0% 100% /* Bottom-left */
);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.about .image img:hover {
transform: scale(1.05);
}

Me: Now I am planning to create a continuously rotating simple abstract 3D wireframe animation in the middle of the “About Me” page, overlapping the content, with a maximum size of 400x400px.

ChatGPT: You can achieve a continuously rotating 3D wireframe animation with overlapping by using Three.js — a popular JavaScript 3D library.

The additional code are below

HTML

///added before </body>///

///added before image element///

CSS

#wireframe-canvas-container {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
pointer-events: none; /* allows clicks to pass through */
z-index: 5;
opacity: 0.4;
}

#wireframe-canvas {
width: 100%;
height: 100%;
}

JAVASCRIPT

const geometry = new THREE.IcosahedronGeometry(2);
const material = new THREE.MeshBasicMaterial({ color: 0x5555ff, wireframe: true });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.z = 5;

function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}

animate();
</script>

Portfolio Page

Me: On my portfolio page, I’d like to replace one of the 400x400px image sections with a video. This video should autoplay upon page load, and for ‘View All,’ a round black button with white text overlaid on it. Additionally, I need a simple text animation for the caption headline.

Below the revised HTML and CSS code

HTML

<section class=”portfolio” id=”portfolio”>
<div class=”portfolio-header”>
<h2 class=”animated-headline”>MY WORK<br>PORTFOLIO</h2>
<a href=”#” class=”view-all-btn”>View All</a>
</div>
<div class=”portfolio-grid”>
<img src=”https://sample.com/uploads/06/logo-mockup-scaled.webp” class=”zoom” width=”960″ height=”480″ />
<img src=”https://sample.com/uploads/06/laptop.webp” class=”zoom” width=”480″ height=”480″ />
<img src=”https://sample.com/uploads/06/poster-design.webp” class=”zoom” width=”480″ height=”480″ />
<video
class=”portfolio-item”
width=”400″
height=”400″
autoplay
muted
loop
playsinline
>
<source src=”your-video.mp4″ type=”video/mp4″ />
Your browser does not support the video tag.
</video>
</div>
</section>

CSS

.portfolio {
padding: 100px;
background-color: #f9f9f9;
}

.portfolio-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.portfolio h2 {
font-size: 60px;
line-height: 50px;
}

.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 40px;
}

.portfolio-grid img {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.3s ease;
}

.portfolio-grid img:hover {
transform: scale(1.05);
}

.view-all-btn {
display: inline-block;
background-color: black;
color: white;
text-decoration: none;
padding: 12px 24px;
border-radius: 50px;
font-weight: bold;
font-size: 14px;
text-align: center;
transition: background 0.3s ease, transform 0.2s ease;
}

.view-all-btn:hover {
background-color: #222;
transform: scale(1.05);
}

.animated-headline {
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s ease-out forwards;
}

@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

I changed the portfolio section from 1080px to 900px for a better look. I wanted the headline at the bottom-left since it looks good in the top-left. I thought that was the right position. The image arrangement and size aren’t displayed as per my draft design, but this layout is okay for me, so I’ll leave it as is.

Skills and Tools Page

For the “Skills and Tools” page, I wanted a structured layout, so I asked ChatGPT to modify the code.

Me: I wanted a structured four-column layout for the “Skills and Tools” page. In the first column, I need a headline at the top and a space below the below the option to insert an image. The second column will display a list of skills, with a horizontal line separating each skill title. For the third column, I’ll include tools along with their progress bars, which should animate when the page loads. The fourth column will feature a list of technical skills accompanied by icons. Finally, at the bottom of the page, I’d like a black text scroller with white text for certifications, with each certification scrolling individually and separated by dots. Give me the complete skills and tools section revised html and CSS separately.

HTML

<section class=”skills” id=”skills”>
<div class=”skills-wrapper”>

<!– Column 1: Headline + Image –>
<div class=”skills-column”>
<h2>Skills & Tools</h2>
<div class=”skills-image”>
<img src=”your-image.jpg” alt=”Skills Visual” />
</div>
</div>

<!– Column 2: Skills List with Dividers –>
<div class=”skills-column”>
<h3>Skills</h3>
<ul class=”skills-list”>
<li>Graphic Design</li>
<li>UI/UX Design</li>
<li>Web Design</li>
<li>Illustration</li>
<li>Brand Identity</li>
<li>Interaction Design</li>
<li>Motion Graphics</li>
</ul>
</div>

<!– Column 3: Tools with Animated Progress Bars –>
<div class=”skills-column”>
<h3>Tools</h3>
<div class=”tool”>
<label>Photoshop</label>
<progress value=”0″ max=”100″ data-value=”80″></progress>
</div>
<div class=”tool”>
<label>Illustrator</label>
<progress value=”0″ max=”100″ data-value=”80″></progress>
</div>
<div class=”tool”>
<label>After Effects</label>
<progress value=”0″ max=”100″ data-value=”50″></progress>
</div>
<div class=”tool”>
<label>Blender</label>
<progress value=”0″ max=”100″ data-value=”40″></progress>
</div>
<div class=”tool”>
<label>Canva</label>
<progress value=”0″ max=”100″ data-value=”60″></progress>
</div>
<div class=”tool”>
<label>Figma</label>
<progress value=”0″ max=”100″ data-value=”50″></progress>
</div>
</div>

<!– Column 4: Technical Skills with Icons –>
<div class=”skills-column”>
<h3>Technical Skills</h3>
<ul class=”tech-skills”>
<li><span>💻</span> HTML/CSS</li>
<li><span>🟨</span> JavaScript (Basic)</li>
<li><span>🌐</span> WordPress</li>
<li><span>⚙️</span> Webflow</li>
<li><span>🛒</span> Shopify Themes</li>
<li><span>🔄</span> Git</li>
<li><span>🔌</span> APIs</li>
</ul>
</div>

</div>

<!– Scrolling Certifications Footer –>
<div class=”certifications-scroller”>
<div class=”scrolling-text”>
Google UX Design Certificate • Adobe Certified Professional • LinkedIn Badges • Coursera UX Specialization • Udemy Advanced UI Design •
</div>
</div>
</section>

CSS

.skills {
padding: 100px;
background-color: white;
}

.skills-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
align-items: start;
}

.skills-column h2,
.skills-column h3 {
font-size: 24px;
margin-bottom: 20px;
}

/* Column 1 Image */
.skills-image img {
width: 100%;
max-width: 300px;
height: auto;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Column 2: Skills with separators */
.skills-list {
list-style: none;
padding: 0;
margin: 0;
}

.skills-list li {
padding: 10px 0;
border-bottom: 1px solid #ddd;
}

/* Column 3: Tools with animated progress bars */
.tool {
margin-bottom: 20px;
}

.tool label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

progress {
width: 100%;
height: 10px;
border-radius: 5px;
overflow: hidden;
}

progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 5px;
}

progress::-webkit-progress-value {
background-color: #222;
transition: width 1s ease-in-out;
}

/* Column 4: Technical Skills with icons */
.tech-skills {
list-style: none;
padding: 0;
margin: 0;
}

.tech-skills li {
padding: 8px 0;
font-size: 16px;
}

.tech-skills li span {
margin-right: 10px;
}

/* Scrolling Certifications Footer */
.certifications-scroller {
margin-top: 60px;
padding: 15px 0;
background-color: #000;
color: white;
overflow: hidden;
position: relative;
}

.scrolling-text {
white-space: nowrap;
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
font-size: 14px;
letter-spacing: 1px;
}

@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

JAVASCRIPT

The result didn’t meet my expectations, and the scroller isn’t working either, so I’ve decided to refine it again.

Me: I’d like the “Skills and Tools” section to be 100% width and 1080px height. I want to insert a full-width image with an overlay effect. Make four columns inside the section. In the 1st column, insert the headline “Skills and Tools,” which should be displayed on two lines, below add a paragraph, and the headline font size set to 60px and paragraph 15px. 2nd column The skills list should have a font size of 20px and be semi-bold, with a horizontal line between each skill. 3rd column For the tools, the text should be white and semi-bold with a font size of 15px, displayed inside a black progress bar. 4th column Technical skills should have a 15px font size, and their icons should be black. Finally, at the bottom of the section, I want a full-width text scroller to display the certification list, with each certification separated by dots.

ChatGPT: Here’s your revised “Skills and Tools” section with:

Full-width background image and overlay
100% width and fixed 1080px height
Structured 4-column layout
Properly styled text, progress bars, and scroller
All specifications included

HTML

<section class=”skills-section” id=”skills”>
<div class=”skills-overlay”>
<div class=”skills-wrapper”>

<!– Column 1: Headline + Paragraph –>
<div class=”skills-column”>
<h2>Skills<br>and Tools</h2>
<p>
Explore a blend of creative and technical proficiencies, crafted through real-world projects and continuous learning.
</p>
</div>

<!– Column 2: Skills List –>
<div class=”skills-column”>
<h3>Skills</h3>
<ul class=”skills-list”>
<li>Graphic Design</li>
<li>UI/UX Design</li>
<li>Web Design</li>
<li>Illustration</li>
<li>Brand Identity</li>
<li>Interaction Design</li>
<li>Motion Graphics</li>
</ul>
</div>

<!– Column 3: Tools with Progress Bars –>
<div class=”skills-column”>
<h3>Tools</h3>
<div class=”tool”>
<label>Photoshop</label>
<progress value=”0″ max=”100″ data-value=”80″></progress>
</div>
<div class=”tool”>
<label>Illustrator</label>
<progress value=”0″ max=”100″ data-value=”80″></progress>
</div>
<div class=”tool”>
<label>After Effects</label>
<progress value=”0″ max=”100″ data-value=”50″></progress>
</div>
<div class=”tool”>
<label>Blender</label>
<progress value=”0″ max=”100″ data-value=”40″></progress>
</div>
<div class=”tool”>
<label>Canva</label>
<progress value=”0″ max=”100″ data-value=”60″></progress>
</div>
<div class=”tool”>
<label>Figma</label>
<progress value=”0″ max=”100″ data-value=”50″></progress>
</div>
</div>

</div>

<!– Certifications Scroller –>
<div class=”certifications-scroller”>
<div class=”scrolling-text”>
Google UX Design Certificate • Adobe Certified Professional • LinkedIn Badges • Coursera UX Specialization • Udemy Advanced UI Design •
</div>
</div>
</div>
</section>

CSS

.skills-section {
position: relative;
width: 100%;
height: 1080px;
background: url(‘your-background.jpg’) center/cover no-repeat;
color: white;
}

.skills-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* dark overlay */
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 80px;
box-sizing: border-box;
}

.skills-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}

/* Column 1 */
.skills-column h2 {
font-size: 60px;
margin-bottom: 20px;
line-height: 1.2;
}

.skills-column p {
font-size: 15px;
line-height: 1.6;
max-width: 300px;
}

/* Column 2: Skills list with separators */
.skills-list {
list-style: none;
padding: 0;
margin: 0;
}

.skills-list li {
font-size: 20px;
font-weight: 600;
padding: 10px 0;
border-bottom: 1px solid #999;
}

/* Column 3: Tools with dark progress bars */
.tool {
margin-bottom: 20px;
}

.tool label {
font-size: 15px;
font-weight: 600;
color: white;
display: block;
margin-bottom: 5px;
}

progress {
width: 100%;
height: 10px;
appearance: none;
}

progress::-webkit-progress-bar {
background-color: #444;
border-radius: 5px;
}

progress::-webkit-progress-value {
background-color: white;
transition: width 1.2s ease-in-out;
border-radius: 5px;
}

/* Column 4: Technical skills with icons */
.tech-skills {
list-style: none;
padding: 0;
margin: 0;
}

.tech-skills li {
font-size: 15px;
margin-bottom: 10px;
color: white;
}

.tech-skills li span {
color: black;
margin-right: 10px;
}

/* Certifications Scroller */
.certifications-scroller {
background-color: black;
padding: 10px 0;
overflow: hidden;
width: 100%;
position: relative;
}

.scrolling-text {
white-space: nowrap;
display: inline-block;
padding-left: 100%;
animation: scroll-left 25s linear infinite;
font-size: 14px;
color: white;
letter-spacing: 1px;
}

@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}

Everything turned out well, and now I’d like to slightly enhance the “About Me” page since it looks a bit too simple compared to other pages. SoI want to add some effects to the “ME” text and include a few icons below the paragraph.

Me: Thank you, everything is fine. Now I’d like to modify the “About Me” page, as it looks a bit too simple. I want to make the “ME” text a gradient color and include four icons below the paragraph.

In the revised code the text gradient turned out well, but the icons didn’t, so I’m trying a different approach

ME: The icons didn’t turn out well. Please provide the code to upload five PNG icons, each with a size of 50px by 50px. Also, I need a horizontal line above this set of icons to separate them from the text

Finally the ‘About Me’ page look like this

The final website design looks as shown below. This design is currently only for the desktop version and is not responsive. This was just my attempt; I will come up with a creative and fully responsive website design. Keep tuning in!

4. Publishing the Site

Liveweave.com

To view the completed site, click on ‘Download’ and then select ‘Download as HTML’ from the dropdown. This will generate an HTML file that you can open directly in your browser. Alternatively, you can download it as a ZIP file, which includes the HTML, CSS, and JavaScript in separate folders, ready to be uploaded to a server to go live.

Note: All the images, icons in this AI-based web design project were generated using Google Gemini. And the GIF is created using https://ezgif.com/.

Thank You 🙂

If you liked above ‘Build a website using AI’ post, you might enjoy this as well. Check out https://creativemantis.com/consistent-ai-watercolor-portraits/

Stay Informed With the Latest & Most Important News

PROJECTS1 month ago

Upcycling containers into gadgets

Recent Comments

Author

CrishCeative

Hi, I’m Krishna Kumar (CrishCreative), a seasoned graphic designer with a professional background in branding and advertising. My passion lies in blending art and science to craft innovative ideas and strategies that leave a lasting impact. I am currently working as a creative director. Beyond work, I immerse myself in art, crafting, photography, and hands-on projects—whether it’s tinkering with electronics, exploring mechanical builds, or diving into creative crafts. Driven by curiosity, I’m always learning, discovering, and finding inspiration in the unexpected. For me, every challenge is an opportunity to grow, spark fresh ideas, and create something meaningful.

Popular Recent