Want to create a portfolio with AI without spending a single rupee or learning code? In this guide, you’ll discover free tools and simple steps to build a stunning personal portfolio in minutes.
Template 1
prompt
Create a fully responsive one-page personal portfolio in the Glassmorphism design style using HTML, CSS, and JavaScript.
Use a consistent frosted-glass visual aesthetic throughout the page:
Semi-transparent backgrounds (rgba)
CSS blur (backdrop-filter)
Soft shadows and glowing borders
Smooth animations using @keyframes, transition, and scroll-based animations
Add subtle SVG background animations like waves, floating blobs, or geometric patterns
Use a clean, modern font like Poppins or Montserrat. Make sure the layout is fully mobile-responsive with elegant fallbacks for small screens.
📌 Page Structure and Section Details:
Sticky Navigation Bar
Transparent glass-style navbar with blur and slight box shadow
Anchors for: Home, About, Education, My Story, Projects, Skills, Contact
Active link indicator (underline or highlight on scroll)
Add a logo or initials on the left
Hero/Home Section
Full-screen background with SVG animated waves or blurred shapes
Profile picture in the center with a glowing circular border
Name with gradient text + Typing effect subtitle (Web Developer | Student | Designer)
CTA button: “Download Resume” or “Hire Me” (glassmorphic style with glow hover)
About Me
Glass card with paragraph text (max 300 words)
Circular profile image (optional SVG blob mask around it)
Icons for GitHub, LinkedIn, etc. (animated on hover)
Education
Timeline or stacked card format
Each item in a glass card with glowing icons and smooth scroll-in animation
Include: Degree, Institute, Duration, Highlights
My Story / Journey
A parallax-style section with a brief personal story (max 400 words)
Add animated SVG path or dashed line with scroll-based reveal
Include 2–3 key turning points or motivation facts
Projects
Responsive grid layout (2 or 3 columns)
Each project in a frosted-glass card
Includes: Title, short description, tech stack badges, GitHub link, Live Demo button
Cards animate in with fade-up or zoom-in effect
Skills
Split into:
Technical Skills: Show skill level via animated circular progress bars or glow bars
Tools & Platforms: Logos/icons with glowing hover animation
Soft Skills: Listed in small animated tiles/cards
Contact Section
Glassmorphic contact form: Name, Email, Message
Glow border fields and ripple animation on button click
Social media icons in footer
Optional animated SVG paper plane or contact icon in background
🛠 Additional Notes:
Use scroll-based animations (like AOS.js or custom CSS) for reveal effects
Use SVG filters or background animations for aesthetic depth
Optimize for performance (avoid too heavy animations)
Clean HTML semantic tags and accessibility best practices
📥 After this prompt, ask the user for:
Please provide the following details to fill in the portfolio:
Full name
Tagline/subtitle (e.g., Web Developer | Student)
Profile image URL
Short bio (about me)
Education details (degree, institute, years, highlights)
Personal story or motivation (optional)
Projects (Title, Description, Technologies, GitHub link, Live link)
Skills (Tech skills with percentage, tools, soft skills)
Contact email and phone (optional)
Social media links
Resume link (optional)
Template 2
prompt
Create a fully responsive one-page personal portfolio website using the Vertical Split Scroll layout design style. Use HTML, CSS (including Grid & Flexbox), and JavaScript for scroll handling and animation.
The layout should have two vertical columns (left and right) that either:
Scroll independently (using CSS overflow-y: auto)
OR
Sync with section-based scrolling for storytelling (e.g., one side image, one side text)
The entire design must have a clean, professional look with a light or dark theme toggle, smooth section transitions, and a minimal, modern font (like Poppins, Inter, or Montserrat).
🧩 Page Sections and Detailed Layout Instructions:
Sticky Navigation Bar (Top Full Width)
Positioned above both columns
Transparent background with backdrop blur
Contains links: Home, About, Education, My Story, Projects, Skills, Contact
Active link indicator with smooth scroll (highlight or underline)
Hero Section (Split Layout)
Left Side: Profile image in a circular frame with subtle glowing border and hover tilt animation
Right Side:
Big name heading (animated letter-by-letter entrance)
Subtitle with typing animation (e.g., “Student | Web Developer | Tech Enthusiast”)
CTA buttons: “Download Resume” and “Contact Me”
Add a scroll down indicator in the middle bottom with a subtle bounce animation.
About Me
Left side: Text content with intro and personal bio (max 300 words), scroll fade-in
Right side: A looping animated SVG illustration or animated icons (CSS hover glow)
Education
Left side: Timeline-style vertical list with degree, institute, and years
Right side: Glass-like or bordered cards with achievements or highlights
Add animated icons or glowing dots to indicate key milestones.
My Story / Personal Journey
Full-width horizontal section OR left-aligned section with:
Vertical line animation showing growth
Key turning points shown as glowing boxes or scroll-triggered reveals
Optional parallax background with inspirational quote overlay
Projects
Display projects in right-side vertical scroll, with:
Card-style layout (title, short description, tech stack badges, GitHub + Live buttons)
Cards animate on entry with slide-in or fade-in
Left side shows:
Project thumbnails or live preview image on hover
SVG morphing background or animated patterns
Skills
Split into:
Left column: Technical skill bars or circular progress rings with % animations
Right column: Tools (icons with hover pulse) and soft skills in clean list cards
Optional: Animate skill sections on scroll using AOS.js or pure CSS.
Contact
Left side: Contact form with glassy background or outlined fields
Fields: Name, Email, Message (with smooth validation)
Right side:
Social media links (LinkedIn, GitHub, Instagram, etc.)
Optional mini-map or SVG world/location illustration
Include a submit button with ripple or glow animation.
🌟 Extra Styling Tips:
Use subtle SVG line animations between sections
Use scroll-snap or IntersectionObserver for scroll-based highlights
Add theme toggling (light/dark) with CSS variables
Add scrollbars only where necessary (use custom styled scrollbars)
📥 After this prompt, ask the user:
Please provide the following:
Full name
Subtitle/tagline
Profile image URL
Personal bio (About Me)
Education details (Degree, Institute, Duration)
Your story (life journey, motivation, turning points)
Projects (Title, Description, Technologies, GitHub link, Live link)
Skills (Tech skills with percentages, tools, soft skills)
Contact email & phone (optional)
Social media links
Resume link (optional)
Template 3
prompt
Build a responsive one-page portfolio website using Parallax scroll effects and SVG wave animations as section transitions. Use HTML, CSS, and JavaScript (or GSAP/ScrollMagic if needed for enhanced parallax).
Each major section (About, Education, My Story, Projects, Skills, Contact) should have parallax backgrounds and be separated by fluid SVG wave transitions that animate softly or appear seamless across scroll.
Use modern, clean typography (Poppins, Inter, Outfit, etc.), smooth easing transitions, and a soft light or dark pastel palette. The design should feel organic, soft, and immersive, while remaining easy to navigate.
🧩 Section-by-Section Layout Instructions
Sticky Navigation Bar
Fixed top nav with logo on the left and links on the right: Home, About, Education, Story, Projects, Skills, Contact
Background becomes opaque or blurred on scroll
Active section highlighting using Intersection Observer or scroll-based class toggles
Smooth scroll between sections using scroll-behavior: smooth
Hero Section (Home)
Full-height, centered layout
Large heading: “Hi, I’m [Your Name]”
Typing animation for subtitle (e.g., “Developer | Designer | Lifelong Learner”)
CTA buttons: “Resume” and “Contact”
Parallax layers: floating shapes, background gradients, or illustrations moving at different speeds
Bottom SVG Wave separating the Hero from the next section
Soft animated wave (use path animation or looped SVG wave)
About Me
Section appears below the first wave
Two-column layout:
Left: Profile image (can be masked in a circle or blob)
Right: About Me text (~200 words)
Include soft blob or shape background (moves slightly on scroll)
Animated section title with fade-in effect
Optional: small floating icons (e.g., GitHub, LinkedIn) with subtle animations
Bottom SVG wave: flipped version for upward flow to Education
Education
Vertical timeline or card layout
Each timeline point contains:
Degree
Institution
Year
Icon (graduation cap, etc.)
Background uses parallax scrolling (image or gradient that moves slower than content)
Text/cards animate into view with slide or scale effects
Wave animation flows to the Story section
My Story / Journey
Narrative-style layout, e.g., timeline with:
yaml
Copy
Edit
2019 → First website
2021 → Joined diploma in Computer Engineering
2023 → Full-stack projects built
2025 → Startup initiative & portfolio series
Smooth staggered animations for each entry
Parallax background or floating icons to add motion
Section background can use soft light or dark contrast from previous section
Wave separator at the bottom
Projects
Grid layout (2 or 3 columns)
Each project card includes:
Title
Short description
Tech stack badges
GitHub & Live Demo buttons
On hover: card slightly lifts or glows
Animate cards on scroll with fade-in or zoom-in
Use blobs, parallax layers, or subtle 3D tilt effects inside the grid background
Bottom wave separator leads to Skills
Skills
Split into three blocks:
Technical Skills with horizontal bars or radial charts
Tools (e.g., Git, VS Code, Figma, React) shown as icons or badges
Soft Skills (e.g., communication, creativity) as simple text badges or cards
Include soft moving background shapes or a floating SVG pattern
Smooth fade or scroll-triggered animation
Final wave leads into Contact section
Contact
Contact form centered:
Name, Email, Message
Submit button with ripple/glow animation
Optional animated confirmation text after form submission
Below: social icons with hover effects (white to pastel transition)
Footer text in minimalist style
Background includes slow moving waves or floating SVG particles
🌊 SVG Wave Styling & Animation Tips
Use Haikei or getwaves.io to generate SVG waves
Animate waves using:
CSS @keyframes to morph SVG d path values
Or scroll-based effects using libraries like GSAP ScrollTrigger
For seamless transitions, align wave colors with adjacent section background
Use overflow: hidden to clip wave transitions smoothly on all devices
📥 Ask the User:
Please provide:
Full Name
Subtitle/tagline
Short bio (About Me)
Education (Degrees, Institutions, Years)
Story or milestone events (3–5 lines)
Projects (Title, Description, Tech Stack, GitHub, Live URL)
Skills (Tech %, Tools, Soft Skills)
Contact Email
Social Links
Resume URL (optional)
Preferred theme: Light / Dark / Gradient
Template 4
prompt
Create a fully responsive one-page portfolio website using a Blob Animation design style, built with HTML, CSS, JavaScript, and SVG animations.
Use animated morphing blob shapes, fluid transitions, and soft gradients to create an organic, modern aesthetic. The design should be minimalist but visually playful, with smooth UI/UX for every section (About, Education, Story, Projects, Skills, Contact).
Blobs should animate on scroll or loop continuously, created using SVGs or CSS clip-path. Use a modern font (Poppins, Nunito, Manrope, or Inter) and a color palette of 2–3 soft pastels or neon gradients. Ensure mobile-friendly responsiveness.
🧩 Section-by-Section Layout and Design Details
Navigation Bar
Sticky at top, semi-transparent background
Logo on the left, links on right (Home, About, Education, Story, Projects, Skills, Contact)
On scroll, navbar reduces height with smooth transition
Optional: use a small morphing blob as the logo
Hero Section (Home)
Full-screen section with:
Large heading: “Hi, I’m [Your Name]”
Subtitle with typing animation: “Student · Full-Stack Developer · Creative Thinker”
CTA buttons: “Download Resume”, “Contact Me”
Blob animation in background:
Use SVG or CSS blobs morphing slowly
Optionally float around or follow cursor subtly
Profile image masked into a blob shape using clip-path or SVG mask
About Me
Section title inside or next to a floating animated blob
Content card:
Short paragraph (150–250 words)
Social links in blob-shaped icons (GitHub, LinkedIn, Instagram)
A large organic blob floats slowly behind text with transparency
Education
Section background includes a soft gradient blob behind the timeline
Use a timeline or cards layout, each card with:
Degree
Institute
Year
A small static or animated blob icon beside each entry
Scroll fade-up animations for cards
My Story / Journey
Light full-width section with story milestones
Add a soft animated blob behind each paragraph or milestone
Style example:
sql
Copy
Edit
2019 → Started exploring web development
2021 → Built my first full-stack app
2024 → Leading my own tech projects
Use a glowing text highlight on scroll or blob morph sync with story flow
Projects
Blob-themed grid layout (2–3 columns)
Each project card:
Morphing blob background
Title, Description, Tech stack badges
GitHub & Live Demo links as blob buttons
On hover: blob pulses, project card floats slightly with shadow
Use framer-motion or hover.js for animation enhancement (optional)
Skills
Split into:
Technical Skills: Animated circular bars or hex blobs with percentages
Tools/Platforms: Logos inside small animated blob buttons
Soft Skills: Floating bubble-like tags
Animate blob containers to morph slowly while content remains stable
Contact
Section has a large morphing blob in background
Contact form centered:
Fields: Name, Email, Message
Submit button as a glowing animated blob button
Social media icons in floating blob containers at the bottom
Optional: bubble animation rising subtly behind form
🌟 Animation Tips:
Use Blobmaker or Haikei to generate SVG blobs
Animate with:
@keyframes + clip-path or d attribute in SVG
JavaScript for cursor tracking blob movement
anime.js or GSAP for blob morphing
Use CSS variables to animate color gradients dynamically
📥 Ask the User:
Please provide the following info:
Full Name
Subtitle or tagline
Profile image URL (optional)
Short bio (About Me section)
Education (Degree, Institution, Years)
Story or journey in 3–5 milestones
Projects (Title, Description, Tech stack, GitHub & Live URLs)
Skills (Tech %, tools, soft skills)
Contact email
Social media links
Resume URL (optional)
Template 5
prompt
Create a responsive one-page personal portfolio website using the Interactive Card Flip Layout style with HTML, CSS, and JavaScript.
Each major section (About Me, Education, My Story, Projects, Skills, Contact) should be displayed as a flip card — a 3D-styled component that flips on hover or click to reveal additional information on the back.
Use CSS 3D transforms (transform-style: preserve-3d) and smooth transition effects to enhance interactivity.
Design should be minimal, modern, and professional, with a clean font (Poppins, Inter, or Roboto) and mobile-first responsiveness.
🧩 Section-by-Section Layout and Design Details
Sticky Navigation Bar
Top navigation bar with transparent background
Links to: Home, About, Education, Story, Projects, Skills, Contact
Smooth scroll between sections
Active section highlighting using scroll detection
Hero Section (Home)
Full-height section
Centered name in bold text
Typing effect subtitle (e.g., “Web Developer | Student | Creator”)
CTA buttons: “View Resume” and “Contact Me”
Background with soft floating shapes or abstract SVG lines
About Me (Flip Card #1)
Front: Title “About Me” + image or icon
Back: Short bio (150–200 words), GitHub/LinkedIn links
Flip on hover (desktop) and tap (mobile)
Card size: around 300x400px, centered with subtle shadow
Education (Flip Card #2)
Front: “Education” title with an academic icon
Back: List of degrees with:
Degree name
Institute
Years attended
Animate using slide-in on scroll and flip on hover
My Story (Flip Card #3)
Front: “My Story” title with a quote or emoji
Back: Timeline or bullet list of 3–5 key personal milestones (e.g., “Started coding at 16”)
Optionally animate the text line by line with JS or CSS delays
Projects (Multiple Flip Cards)
Create 3–6 flip cards in a responsive grid
Front of each card: Project name + tech used
Back: Short description, GitHub and Live Demo buttons
Flip effect: vertical or horizontal based on screen width
Optional: scale-up animation on scroll or mouse movement tracking for extra depth
Skills (Flip Card #4)
Front: “Skills” title with tech icons
Back: Split into:
Technical skills (listed or with bars)
Tools/platforms (Git, VS Code, etc.)
Soft skills (Communication, Problem Solving)
Use different background shades or outlines to separate categories
Contact (Flip Card #5 or Full Section)
Option 1 (Flip Card):
Front: “Let’s Connect” title
Back: Contact form with fields (Name, Email, Message)
Option 2 (Full-width section):
Contact form centered, surrounded by social media icon cards (that also flip)
Form should have glowing border on focus and animated submit button (ripple or glow)
🌟 Visual & Technical Notes:
Use perspective, backface-visibility, and transform-style: preserve-3d
Apply transform: rotateY(180deg) or rotateX(180deg) on card flip
Add transition: transform 0.6s ease-in-out;
Responsive layout: stack cards vertically on mobile
Consider using IntersectionObserver for scroll-triggered animations
📥 Ask the User:
Please provide:
Full Name
Subtitle/tagline
Short bio (About Me)
Education (Degrees, Institutions, Years)
Story (milestones or timeline entries)
Projects (Title, Description, Tech stack, GitHub & Live links)
Skills (Tech %, tools, soft skills)
Contact email & phone (optional)
Social media links
Resume URL (optional)
Template 6
prompt
Create a responsive one-page portfolio website using a Minimal Monochrome Layout style, built with HTML, CSS, and minimal JavaScript.
The entire design should follow a black-and-white (monochrome) aesthetic with elegant use of space, white space balance, and typography hierarchy.
No colors should be used except grayscale shades and occasional hover effects (e.g., light gray or white-on-black inversion).
Typography and layout must feel intentional, modern, and sophisticated. Use fonts like Inter, Playfair Display, Poppins, or Libre Franklin.
🧩 Section-by-Section Layout and Design Details
Sticky Navigation Bar
Fixed at the top
All links in uppercase with letter spacing (e.g., HOME · ABOUT · PROJECTS)
Hover effect: inverted background (black text on white background or vice versa)
Smooth scroll between sections
Hero Section (Home)
Full viewport height
Large bold name text (e.g., “DIVAKAR SAI KRISHNA”) in a serif or semi-bold sans-serif
Smaller subtitle below (e.g., “Student · Developer · Creator”)
CTA button: “VIEW RESUME” (bordered, minimal hover invert effect)
Subtle animated underline or blinking cursor at the end of the subtitle
About Me
Section title in large uppercase font, left-aligned
One-column or two-column layout:
Left: portrait photo (in grayscale)
Right: 200–300 word paragraph about yourself
Smooth fade-in animation on scroll using @keyframes or AOS
Education
Title: “EDUCATION”
Simple vertical list:
yaml
Copy
Edit
Diploma in Computer Engineering
ABC Polytechnic College · 2022–2025
Use bold headings with light subtext
Add horizontal line dividers or dotted rule between items
My Story
Full-width centered section with a brief timeline or milestone points
Display story items in paragraph or bullet format:
sql
Copy
Edit
→ Started coding at 15
→ Built first full-stack website by 17
→ Currently learning Spring Boot and Node.js
Use minimal SVG icons or no icons at all — just structured text
Projects
2–3 column responsive grid layout
Each project shown as:
Project title (hover underline animation)
One-line description
Two links: GitHub & Live Demo
On hover: slight scale or border reveal animation
Optional: add thin vertical line separators between projects
Skills
Section heading: “SKILLS”
Skills organized in two groups:
Technical Skills: listed or shown with percentage bars (grayscale progress bars)
Tools & Platforms: grid of text items or icon outlines
Soft Skills: listed in minimalist tags or dot bullets
Contact Section
Centered contact form:
Fields: Name, Email, Message
Submit button: outlined with hover fill-in effect
Optional message or quote in small type:
css
Copy
Edit
“Let’s collaborate. I’m just a message away.”
Social media links below (monochrome icons, hover light fill or underline)
🌟 Additional Visual Details
Use scroll-behavior: smooth
Apply max-width constraints to content containers (e.g., 900px max)
Use :focus, :hover, and ::after selectors to create minimalist interactions
Subtle animations: slide, fade, or underline grow — but no over-the-top effects
📥 Ask the User:
Please provide:
Full Name
Subtitle/tagline
Profile picture URL (optional)
Short bio (about you)
Education (Degree, Institution, Years)
Personal story or 2–5 milestones
Projects (Title, Description, GitHub link, Live link)
Skills: Technical skills, tools, soft skills
Contact email
Social media links
Resume link (optional)
Template 7
prompt
Build a responsive one-page personal portfolio website using a 3D Parallax design style with HTML, CSS, and JavaScript.
Use CSS 3D transforms, layered depth effects, and mouse/scroll-based parallax animations to create a rich, interactive experience.
Each major section (About Me, Education, My Story, Projects, Skills, Contact) should feel like a layered scene — moving at different speeds or directions on scroll/mouse movement to give depth.
Use clean, futuristic typography (e.g., Poppins, Manrope, Inter) and high-contrast themes with soft-glow elements. Ensure mobile responsiveness with fallback flat versions.
🧩 Section-by-Section Layout and Design Details
Sticky Navigation Bar
Top-fixed, transparent nav with glass or semi-blur effect
Menu items: Home, About, Education, Story, Projects, Skills, Contact
Active section indicator with under-glow or color shift
On scroll, the nav slightly shrinks or blurs more (sticky with transformation)
Hero Section (Home)
Full-screen 3D parallax scene:
Background layer: animated gradient or image with slow movement
Mid-layer: SVG floating elements or blurred shapes
Front-layer: Profile image + Name + Typing animation subtitle
CTA buttons (Resume / Contact) should slightly tilt or scale on mouse hover
Include mousemove tracking using JS to shift layers (transform: translateZ() or perspective)
About Me
Layered card layout:
Background: gradient shape or abstract blob slowly moving
Foreground: Text box with a short paragraph + profile picture (both animate on scroll)
Animate fade-in from left/right with subtle scaling
Add floating glowing icons for GitHub, LinkedIn, etc., as separate parallax layers
Education
Vertical timeline inside a 3D container
Each education block is a glass card with depth (e.g., transform: rotateY())
Floating icons beside each item (graduation cap, certificate) that move on scroll
Optional: Shadow layer behind timeline that moves separately for parallax depth
My Story / Journey
Narrative layout with floating 3D speech bubbles or journal entries
Add animated SVG scribbles or dashed path connecting parts of the story
Layers move differently on scroll, e.g.:
Text scrolls normally
Background image moves slower (scroll parallax)
Highlight 2–3 key moments with zoom-in focus on scroll
Projects
Grid of 3D project cards with hover flip or lift effect
Each card includes:
Title, short description, tech badges
GitHub icon and Live Demo button
Add layers like glowing project thumbnails or animated shadows
On scroll: cards animate in with rotateY or translateZ effects
Skills
Display technical skills as 3D rotating hex or circle charts
Tools and platforms in tiles that rise slightly on hover
Soft skills as glowing badges in floating bubbles (CSS animations)
Use mouse tracking or gyroscope (on mobile) to tilt the entire skills grid subtly
Contact Section
Contact form layered over a moving map or abstract grid
Name, Email, Message inputs with glow effects
Submit button with ripple or elevation on click
Social icons hover with neon glow and rotate slightly
Background moves at a slower pace on scroll for depth
🌟 Parallax Animation Notes
Use libraries like:
vanilla-tilt.js for hover-based tilt
Rellax.js or Locomotive Scroll for scroll parallax
Use transform: translateZ(), perspective, and backface-visibility for true 3D
Optimize performance with will-change: transform and GPU acceleration
📥 Ask the User:
Please provide the following content to personalize your portfolio:
Full Name
Subtitle/tagline (e.g., Developer | UI Designer)
Profile picture URL
Short bio (About Me section)
Education (Degree, Institution, Years, Highlights)
Personal story (your journey in 3–5 lines)
Projects (Title, Description, Tech stack, GitHub link, Live link)
Skills: Tech skills (%), tools, soft skills
Contact email and phone (optional)
Social media links
Resume link (optional)
Template 8
prompt
Create a fully responsive one-page personal portfolio website using the Vertical Split Scroll layout design style. Use HTML, CSS (including Grid & Flexbox), and JavaScript for scroll handling and animation.
The layout should have two vertical columns (left and right) that either:
Scroll independently (using CSS overflow-y: auto)
OR
Sync with section-based scrolling for storytelling (e.g., one side image, one side text)
The entire design must have a clean, professional look with a light or dark theme toggle, smooth section transitions, and a minimal, modern font (like Poppins, Inter, or Montserrat).
🧩 Page Sections and Detailed Layout Instructions:
Sticky Navigation Bar (Top Full Width)
Positioned above both columns
Transparent background with backdrop blur
Contains links: Home, About, Education, My Story, Projects, Skills, Contact
Active link indicator with smooth scroll (highlight or underline)
Hero Section (Split Layout)
Left Side: Profile image in a circular frame with subtle glowing border and hover tilt animation
Right Side:
Big name heading (animated letter-by-letter entrance)
Subtitle with typing animation (e.g., “Student | Web Developer | Tech Enthusiast”)
CTA buttons: “Download Resume” and “Contact Me”
Add a scroll down indicator in the middle bottom with a subtle bounce animation.
About Me
Left side: Text content with intro and personal bio (max 300 words), scroll fade-in
Right side: A looping animated SVG illustration or animated icons (CSS hover glow)
Education
Left side: Timeline-style vertical list with degree, institute, and years
Right side: Glass-like or bordered cards with achievements or highlights
Add animated icons or glowing dots to indicate key milestones.
My Story / Personal Journey
Full-width horizontal section OR left-aligned section with:
Vertical line animation showing growth
Key turning points shown as glowing boxes or scroll-triggered reveals
Optional parallax background with inspirational quote overlay
Projects
Display projects in right-side vertical scroll, with:
Card-style layout (title, short description, tech stack badges, GitHub + Live buttons)
Cards animate on entry with slide-in or fade-in
Left side shows:
Project thumbnails or live preview image on hover
SVG morphing background or animated patterns
Skills
Split into:
Left column: Technical skill bars or circular progress rings with % animations
Right column: Tools (icons with hover pulse) and soft skills in clean list cards
Optional: Animate skill sections on scroll using AOS.js or pure CSS.
Contact
Left side: Contact form with glassy background or outlined fields
Fields: Name, Email, Message (with smooth validation)
Right side:
Social media links (LinkedIn, GitHub, Instagram, etc.)
Optional mini-map or SVG world/location illustration
Include a submit button with ripple or glow animation.
🌟 Extra Styling Tips:
Use subtle SVG line animations between sections
Use scroll-snap or IntersectionObserver for scroll-based highlights
Add theme toggling (light/dark) with CSS variables
Add scrollbars only where necessary (use custom styled scrollbars)
📥 After this prompt, ask the user:
Please provide the following:
Full name
Subtitle/tagline
Profile image URL
Personal bio (About Me)
Education details (Degree, Institute, Duration)
Your story (life journey, motivation, turning points)
Projects (Title, Description, Technologies, GitHub link, Live link)
Skills (Tech skills with percentages, tools, soft skills)
Contact email & phone (optional)
Social media links
Resume link (optional)
Template 9
prompt
Create a responsive, one-page personal portfolio website using a Timeline Portfolio design style, built with HTML, CSS, and JavaScript.
The design should feature a central vertical timeline (or animated horizontal on large screens) connecting all sections. Each timeline node represents a portfolio section: About, Education, My Story, Projects, Skills, Contact.
Incorporate smooth scroll animations, scroll-triggered timeline reveals, and SVG path or line animations to guide the viewer through the page like a chronological story.
Use a clean and professional aesthetic with modern fonts (e.g., Poppins, Inter, Nunito) and a soft color palette. Design should be mobile-friendly, with timeline nodes stacking vertically on small screens.
🧩 Section-by-Section Layout and Styling Instructions
Sticky Navigation Bar
Full-width, minimalistic nav at the top
Links to timeline anchors: Home, About, Education, Story, Projects, Skills, Contact
Highlight the current section in the nav using Intersection Observer or scroll classes
Smooth scroll to sections using JavaScript or native scroll-behavior: smooth
Hero Section (Home)
Top timeline node starts here
Show:
Name heading (Hi, I’m Divakar Sai Krishna)
Subtitle with typing animation (e.g., “Web Developer | Student | Dreamer”)
Profile photo in a circle or morphing SVG blob
Animated down arrow to encourage scroll
Background with subtle animated gradient or blurred shape animations
About Me
Timeline node with title: About Me
Content appears in a card that slides out from the timeline line
Include:
A short paragraph introducing yourself (max 300 words)
Glowing icons (GitHub, LinkedIn) with hover scale animations
Add fade-up or slide-in scroll animation
Education
Another timeline node labeled: Education
Vertical stacked glass or soft-box style cards
Each education card contains:
Degree, Institution, Year, Highlights
Animated education icon on top (e.g., graduation cap SVG)
Cards slide out alternately left and right of the timeline
My Story
Timeline node titled: My Story
Display a short narrative:
sql
Copy
Edit
→ Started coding at 15
→ Built my first website in high school
→ Fell in love with building useful things
Optionally animate the story items as scroll-triggered bullet points with line reveal
Add SVG path animation or line marker showing progression
Projects
Timeline node titled: Projects
Grid layout below timeline point (3 or 4 projects)
Each project displayed as:
Title, Description, Tech used (badges)
GitHub link and Live Demo button
Cards animate in one by one (zoom-in or fade-up)
Optionally connect each card to the timeline via lines or dots
Skills
Timeline node: Skills
Divide into:
Technical Skills (animated bars or circular skill meters)
Tools (icons with hover tooltips)
Soft Skills (glass cards or list format)
All skills animate into view on scroll
Contact Section
Final timeline node: Contact
Glassy or modern styled form:
Name, Email, Message fields
Submit button with ripple effect
Include social media icon links
Optional quote or footer message:
arduino
Copy
Edit
“Let’s build something amazing together.”
🌟 Visual Enhancements (Optional but Recommended)
Use SVG path to animate the timeline line (stroke-dashoffset trick)
Use libraries like AOS.js or ScrollReveal for animations
Add hover and scroll animations to timeline dots (grow, pulse, color shift)
Mobile view: stack cards under each timeline dot, centralizing the flow
📥 Ask the User:
Please provide the following info:
Full Name
Tagline/subtitle
Profile image URL
Short bio (About Me section)
Education (Degree, Institute, Years, Highlights)
Your personal journey or story (3–5 lines)
Project list (Title, Description, Tech used, GitHub + Live link)
Skills: Tech skills (with level %), Tools/Platforms, Soft skills
Contact email and phone (optional)
Social media links
Resume link (optional)
Template 10
prompt
Create a fully responsive one-page personal portfolio website designed with a Terminal / Command Line Interface (CLI) theme. Use HTML, CSS, and JavaScript, with monospace fonts and a design that mimics a real terminal (e.g., Ubuntu, Kali, or Mac Terminal).
The overall theme must include:
Black or deep gray background (#0d0d0d or #1e1e1e)
Neon green (#00ff00), blue, or amber text colors
Blinking typing cursor using CSS @keyframes
Terminal-style prompt prefixes (like $, >, ~)
Full-width terminal window frame with top bar controls (● ⬤ ⬤ for close, minimize, zoom)
Smooth typing effects, line-by-line content reveal animations
ASCII-style dividers or animated line breaks
Scroll-snap or smooth scroll between sections
🧩 Sections and Layout Instructions
Terminal Header & Navigation (Fixed Top)
Mimic a terminal window header with three circles (red, yellow, green)
Below that, a horizontal terminal-style menu:
scss
Copy
Edit
$ [ Home ] [ About ] [ Education ] [ Story ] [ Projects ] [ Skills ] [ Contact ]
Use JS or CSS scrollIntoView() for smooth navigation
Hero Section (Home)
Terminal greeting like:
ruby
Copy
Edit
$ Hello, I’m Divakar Sai Krishna_
Typing animation for subtitle:
mathematica
Copy
Edit
$ Student | Full-Stack Developer | Tech Enthusiast_
Include commands like:
shell
Copy
Edit
$ cat resume.pdf
$ open github.com/yourusername
Add a blinking | cursor after each line
About Me
Format:
shell
Copy
Edit
$ whoami
A passionate student and developer…
Fade-in line-by-line text
ASCII box or comment block (/* about me */) style for extra flair
Education
Terminal table-style format:
sql
Copy
Edit
$ education –list
┌───────────────┬──────────────────────┬──────────────┐
│ Degree │ Institution │ Year │
├───────────────┼──────────────────────┼──────────────┤
│ Diploma in CE │ ABC Polytechnic │ 2022 – 2025 │
└───────────────┴──────────────────────┴──────────────┘
My Story
Use a narrative terminal-style output:
shell
Copy
Edit
$ cat my_journey.txt
Started coding in high school…
Built my first project at 17…
Passionate about solving real problems…
Add blinking file icons or nano, cat, or echo commands as fun visuals
Projects
Show each project like a terminal log output:
bash
Copy
Edit
$ ls projects
[project-01] “Portfolio Website” using React + CSS
→ github.com/project01
→ Live Demo: project01.vercel.app
[project-02] “To-Do App” in JavaScript
→ github.com/project02
→ Live: todo-js.web.app
Hover effect: project line glows or animates like a terminal selection
Skills
Use pseudo-code or CLI-style skill check:
sql
Copy
Edit
$ skill-check –lang
✔ HTML ✔ CSS ✔ JavaScript
✔ React ✔ Java ✔ MySQL
$ tool-check
✔ VS Code ✔ GitHub ✔ Figma
$ soft-skills –show
Communication ✔
Leadership ✔
Optional: Simulate install or load bar:
matlab
Copy
Edit
Loading skills ███████████████ 100%
Contact Section
Terminal-style input form:
ruby
Copy
Edit
$ contact –name “Your Name”
$ contact –email “you@email.com”
$ contact –message “Hello! Let’s connect.”
$ send –status ✓ Message Sent!
Stylized input fields inside terminal blocks
Social links printed as command outputs:
arduino
Copy
Edit
$ github –open
→ https://github.com/yourusername
🌟 Extra Styling Ideas
Use Terminal Mono, Fira Code, or Courier New fonts
Blinking cursor | or _ at the end of every command
Night mode only (no light theme)
Section scroll animations like fadeInLine, slideFromLeft using JS or AOS
📥 Ask the User:
Please provide the following:
Full Name
Tagline (e.g., Student | Developer)
Short bio (for whoami)
Education (Degree, Institute, Years)
Life story in 3–5 lines
List of projects (Title, Description, Tech Stack, GitHub + Live Links)
List of technical skills, tools, soft skills
Contact email and phone (optional)
Social links (GitHub, LinkedIn, etc.)
Resume URL (optional)
