("github");
- const [chartUrl, setChartUrl] = useState("");
- const [isLoading, setIsLoading] = useState(false);
- const [isGenerated, setIsGenerated] = useState(false);
-
- // Theme options with preview colors
- const themeOptions: ThemeOption[] = [
- {
- id: "github",
- name: "GitHub",
- colors: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
- },
- {
- id: "github-dark",
- name: "GitHub Dark",
- colors: ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
- },
- {
- id: "github-light",
- name: "GitHub Classic",
- colors: ["#ebedf0", "#c6e48b", "#7bc96f", "#239a3b", "#196127"],
- },
- {
- id: "halloween",
- name: "Halloween",
- colors: ["#ebedf0", "#ffee4a", "#ffc501", "#fe9600", "#03001c"],
- },
- {
- id: "teal",
- name: "Teal",
- colors: ["#ebedf0", "#bef5cb", "#85e0ab", "#34b27a", "#137356"],
- },
- {
- id: "leftpad",
- name: "Leftpad",
- colors: ["#ebedf0", "#c8e6c9", "#a5d6a7", "#66bb6a", "#4caf50"],
- },
- {
- id: "dracula",
- name: "Dracula",
- colors: ["#282a36", "#44475a", "#6272a4", "#bd93f9", "#ff79c6"],
- },
- {
- id: "blue",
- name: "Blue",
- colors: ["#ebedf0", "#b0e0e6", "#87ceeb", "#4682b4", "#0000cd"],
- },
- {
- id: "panda",
- name: "Panda",
- colors: ["#ebedf0", "#c8e6c9", "#a5d6a7", "#66bb6a", "#000000"],
- },
- {
- id: "sunny",
- name: "Sunny",
- colors: ["#ebedf0", "#fff9c4", "#fff59d", "#fff176", "#ffeb3b"],
- },
- {
- id: "pink",
- name: "Pink",
- colors: ["#ebedf0", "#f8bbd0", "#f48fb1", "#f06292", "#e91e63"],
- },
- {
- id: "yingnbu",
- name: "YlGnBu",
- colors: ["#ebedf0", "#eaf5f9", "#c7e9b4", "#41b6c4", "#253494"],
- },
- {
- id: "solarized-dark",
- name: "Solarized Dark",
- colors: ["#002b36", "#073642", "#586e75", "#657b83", "#839496"],
- },
- {
- id: "solarized-light",
- name: "Solarized Light",
- colors: ["#fdf6e3", "#eee8d5", "#93a1a1", "#839496", "#657b83"],
- },
- ];
-
- const generateChart = async () => {
- if (!username) {
- toast({
- title: "Username required",
- description: "Please enter a GitHub username",
- variant: "destructive",
- });
- return;
- }
-
- setIsLoading(true);
-
- try {
- // Generate the URL for the contribution chart
- const url = `https://github-contributions-api.vercel.app/${username}?theme=${theme}`;
-
- // Check if the username exists by making a request to GitHub API
- const response = await fetch(`https://api.github.com/users/${username}`);
-
- if (!response.ok) {
- throw new Error(`GitHub user not found: ${username}`);
- }
-
- setChartUrl(url);
- setIsGenerated(true);
-
- toast({
- title: "Chart generated",
- description: "Your GitHub contributions chart has been generated",
- });
- } catch (error) {
- toast({
- title: "Error",
- description:
- error instanceof Error ? error.message : "Failed to generate chart",
- variant: "destructive",
- });
- } finally {
- setIsLoading(false);
- }
- };
-
- const copyImageUrl = () => {
- navigator.clipboard.writeText(chartUrl);
- toast({
- title: "URL copied",
- description: "Chart URL copied to clipboard",
- });
- };
-
- const downloadImage = async () => {
- try {
- const response = await fetch(chartUrl);
- const blob = await response.blob();
- const url = window.URL.createObjectURL(blob);
- const a = document.createElement("a");
- a.href = url;
- a.download = `${username}-github-contributions.svg`;
- document.body.appendChild(a);
- a.click();
- window.URL.revokeObjectURL(url);
- document.body.removeChild(a);
-
- toast({
- title: "Download started",
- description: "Your chart is being downloaded",
- });
- } catch (error) {
- toast({
- title: "Download failed",
- description: "Failed to download the chart",
- variant: "destructive",
- });
- }
- };
-
- return (
-
-
-
- GitHub Contributions Chart Generator
-
-
- Generate a beautiful visualization of your GitHub contributions
-
-
-
-
-
-
- setUsername(e.target.value)}
- />
-
-
-
-
-
setTheme(value as ContributionTheme)}
- className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4"
- >
- {themeOptions.map((option) => (
-
-
-
-
-
-
-
-
-
-
-
-
-
- Not affiliated with GitHub Inc. Powered by GitHub Contributions API.
-
-
-
- );
-}
diff --git a/components/cta-section.tsx b/components/cta-section.tsx
deleted file mode 100644
index 1824301..0000000
--- a/components/cta-section.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { ArrowRight, Github } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-
-export function CTASection() {
- return (
-
-
-
-
- Ready to Create Your GitHub Profile?
-
-
- Join thousands of developers who have enhanced their GitHub presence
- with our profile builder
-
-
-
-
-
-
Education
-
-
- {profileData.education.map((education, index) => (
-
-
-
-
-
- {education.degree}
-
-
- {education.institution}
-
-
-
- {education.startDate} - {education.endDate || "Present"}
-
-
- Field: {education.field}
-
- )}
- {education.location && (
-
- Location: {education.location}
-
- )}
- {education.gpa && (
-
- GPA: {education.gpa}
-
- )}
- {education.description && (
-
- {education.description}
-
- )}
-
- {education.achievements &&
- education.achievements.length > 0 && (
-
-
Achievements:
-
- {education.achievements.map(
- (achievement, achievementIndex) => (
- - {achievement}
- )
- )}
-
-
- ))}
-
-
-
-
-
- No education added yet
-
-
- Click "Add Education" to showcase your academic background
-
-
- {/* Decorative circles */}
-
-
-
-
- {/* Main content */}
-
-
- {/* Left side - Text content */}
-
-
-
- Elevate your GitHub profile
-
-
-
- GitHub Profile
-
- README Builder
-
-
-
-
- Create an impressive GitHub profile in minutes with our elegant,
- easy-to-use builder
-
-
-
-
-
-
-
-
-
-
-
- No login required
-
-
-
- {/* Right side - Interactive code preview */}
-
-
-
-
- {/* Code preview with interactive elements */}
-
-
-
-
- README.md
-
-
-
-
-
-
-
- Preview in full screen
-
-
-
-
-
-
- {/* Header section - interactive */}
- handleSectionHover("header")}
- onMouseLeave={() => handleSectionHover(null)}
- onClick={() => handleSectionClick("header")}
- data-section="header"
- >
-
-
- Hi there, I'm John Doe π
-
- {hoveredSection === "header" && (
-
- Edit header
-
- )}
-
-
- {expandedSection === "header" && (
-
-
- β’ Change your name and greeting
-
β’ Add a professional title
-
β’ Include a personal tagline
-
-
- )}
-
- {/* Bio section - interactive */}
- handleSectionHover("bio")}
- onMouseLeave={() => handleSectionHover(null)}
- onClick={() => handleSectionClick("bio")}
- data-section="bio"
- >
-
- Full Stack Developer passionate about creating elegant
- solutions
- {hoveredSection === "bio" && (
-
- Edit bio
-
- )}
-
-
- β’ Describe your expertise
-
β’ Mention your interests
-
β’ Share what you're working on
-
-
- )}
-
- {/* Skills section - interactive */}
- handleSectionHover("skills")}
- onMouseLeave={() => handleSectionHover(null)}
- onClick={() => handleSectionClick("skills")}
- data-section="skills"
- >
-
-
- {expandedSection === "skills" && (
-
-
- β’ Add your technical skills
-
β’ Highlight your expertise
-
β’ Show language proficiency
-
-
- )}
-
- {/* Stats section - interactive */}
- handleSectionHover("stats")}
- onMouseLeave={() => handleSectionHover(null)}
- onClick={() => handleSectionClick("stats")}
- data-section="stats"
- >
-
-
- 120 stars
-
-
-
- 48 forks
-
- {hoveredSection === "stats" && (
-
- Edit stats
-
- )}
-
- β’ Display GitHub statistics
-
β’ Show contribution graph
-
β’ Add achievement badges
-
-
- )}
-
- {/* Projects section - interactive */}
- handleSectionHover("projects")}
- onMouseLeave={() => handleSectionHover(null)}
- onClick={() => handleSectionClick("projects")}
- data-section="projects"
- >
-
-
- Featured Projects
- {hoveredSection === "projects" && (
-
- Edit projects
-
- )}
-
-
- -
- React Dashboard
-
- -
- Node.js API
-
- -
- TypeScript Library
-
-
-
- β’ Showcase your best work
-
β’ Add project descriptions
-
β’ Include links to repositories
-
-
- )}
-
- {/* Contact section - interactive */}
- handleSectionHover("contact")}
- onMouseLeave={() => handleSectionHover(null)}
- onClick={() => handleSectionClick("contact")}
- data-section="contact"
- >
-
-
-
- john@example.com
-
-
-
- San Francisco, CA
-
-
- {hoveredSection === "contact" && (
-
- Edit contact
-
- )}
-
- β’ Add contact information
-
β’ Include social media links
-
β’ Share your location
-
-
- )}
-
-
-
-
-
- {/* Floating elements */}
-
-
-
-
-
-
-
-
-
-
-
-
Profile Editor
-
-
-
-
-
-
-
- Save to browser storage (local only)
-
-
-
-
-
-
-
-
-
-
-
-
-
- Export your profile
-
-
-
-
-
-
- Copy Markdown
-
-
-
- Download README.md
-
-
-
- Open in GitHub
-
-
-
-
-
-
-
-
-
-
- Profile
-
-
- Basic Information
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Social Links
-
-
-
-
-
-
- {isFetching ? (
- <>
-
- Fetching...
-
- ) : profileData.githubDataFetched ? (
- <>
-
- Refresh Data
-
- ) : (
- <>
-
- Fetch Data
-
- )}
-
-
- {profileData.githubDataFetched && (
-
- GitHub data successfully fetched
-
- )}
-
-
-
-
-
-
-
-
-
-
Contact Information
-
-
-
- {
- setProfileData({
- ...profileData,
- contactInfo: {
- ...profileData.contactInfo,
- email: e.target.value,
- },
- });
- }}
- placeholder="e.g. yourname@example.com"
- className="transition-all focus:ring-2 focus:ring-primary/20"
- />
-
-
-
-
-
{
- setProfileData({
- ...profileData,
- contactInfo: {
- ...profileData.contactInfo,
- location: e.target.value,
- },
- });
- }}
- placeholder="e.g. San Francisco, CA"
- className="transition-all focus:ring-2 focus:ring-primary/20"
- />
-
- Override location information from GitHub
-
-
-
-
-
-
-
-
-
- {profileData.contactInfo?.socials &&
- profileData.contactInfo.socials.length > 0 ? (
-
- {profileData.contactInfo.socials.map((social, index) => (
-
-
-
-
- ))}
-
- ) : (
-
- No additional social links added
-
- )}
-
-
- Skills & Technologies
-
-
-
-
- {profileData.skills.map((skill, index) => (
-
-
- {skill}
-
-
-
- ))}
- {profileData.skills.length === 0 && (
-
- No skills added yet
-
- )}
-
-
- Skill Visualization
-
-
- {profileData.skills.slice(0, 9).map((skill, index) => (
-
-
- {skill}
-
- {90 - index * 5}%
-
-
-
-
- ))}
-
- {profileData.skills.length === 0 && (
-
- Add skills to see a visualization
-
- )}
-
-
Projects
-
-
-
-
- handleSwitchChange("showProjects", checked)
- }
- />
-
-
-
-
- {profileData.projects.map((project, index) => (
-
-
-
-
-
-
- {project.title}
-
-
-
- {project.description}
-
-
- {project.technologies.map((tech, techIndex) => (
-
- {tech}
-
- ))}
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
- No projects added yet
-
-
- Showcase your work by adding projects
-
-
-
- )}
-
-
-
- {/* Experience Tab */}
-
-
-
-
Work Experience
-
-
-
-
- handleSwitchChange("showTimeline", checked)
- }
- />
-
-
-
-
- {profileData.timeline.map((experience, index) => (
-
-
-
-
-
-
-
-
-
- {experience.title}
-
-
- {experience.organization}
-
-
-
- {experience.period}
-
-
- {experience.description}
-
-
- {experience.tags.map((tag, tagIndex) => (
-
- {tag}
-
- ))}
-
-
-
-
-
-
-
-
- ))}
-
-
-
-
- No work experience added yet
-
-
- Showcase your professional background
-
-
-
- )}
-
-
-
-
-
-
-
Education
-
-
-
- handleSwitchChange("showEducation", checked)
- }
- />
-
-
-
- Education section coming soon
-
-
- We're working on adding education management features
-
-
- Template Customization
-
-
-
-
-
-
-
-
-
-
-
- Customize the colors used in your profile README template
-
-
-
-
-
- Selected Template:{" "}
-
- {activeTemplate.charAt(0).toUpperCase() +
- activeTemplate.slice(1)}
-
-
-
- {activeTemplate === "modern" &&
- "Clean and professional layout with a focus on readability"}
- {activeTemplate === "minimal" &&
- "Simple and elegant design with minimalist aesthetics"}
- {activeTemplate === "creative" &&
- "Eye-catching and unique style with colorful elements"}
- {activeTemplate === "developer" &&
- "Code-focused design with technical elements and syntax highlighting"}
- {activeTemplate === "professional" &&
- "Business-oriented layout with a corporate, polished feel"}
- {activeTemplate === "elegant" &&
- "Sophisticated and refined design with subtle, tasteful elements"}
-
-
-
- GitHub Stats & Widgets
-
-
-
-
-
-
-
- Show your GitHub statistics
-
-
-
- handleSwitchChange("stats", checked)
- }
- />
-
-
-
-
-
-
-
- Show your GitHub streak statistics
-
-
-
- handleSwitchChange("streak", checked)
- }
- />
-
-
-
-
-
-
-
- Show your most used programming languages
-
-
-
- handleSwitchChange("topLangs", checked)
- }
- />
-
-
-
-
-
-
-
- Show profile visitor count
-
-
-
- handleSwitchChange("visitors", checked)
- }
- />
-
-
-
-
-
-
-
- Show your pinned repositories
-
-
-
- handleSwitchChange("showRepos", checked)
- }
- />
-
-
-
-
-
-
-
- Show your GitHub contribution graph
-
-
-
- handleSwitchChange("showContribGraph", checked)
- }
- />
-
-
-
-
-
-
-
- Show your GitHub achievement trophies
-
-
-
- handleSwitchChange("showTrophies", checked)
- }
- />
-
-
Content Sections
-
-
-
-
-
-
- Show your projects showcase
-
-
- {profileData.showProjects ? (
-
- ) : (
-
- )}
-
- handleSwitchChange("showProjects", checked)
- }
- />
-
-
-
-
-
-
-
- Show your latest blog posts
-
-
- {profileData.showBlog ? (
-
- ) : (
-
- )}
-
- handleSwitchChange("showBlog", checked)
- }
- />
-
-
-
-
-
-
-
- Show your professional timeline
-
-
- {profileData.showTimeline ? (
-
- ) : (
-
- )}
-
- handleSwitchChange("showTimeline", checked)
- }
- />
-
-
-
-
-
-
-
- Show your educational background
-
-
- {profileData.showEducation ? (
-
- ) : (
-
- )}
-
- handleSwitchChange("showEducation", checked)
- }
- />
-
-
-
-
-
-
-
- Show contact section
-
-
- {profileData.showContact ? (
-
- ) : (
-
- )}
-
- handleSwitchChange("showContact", checked)
- }
- />
-
-
-
-
-
- {/* Project Dialog */}
-
-
- {/* Experience Dialog */}
-
-
- {/* Social Link Dialog */}
-
-
-
-
- Powerful Features
-
-
- Everything you need to create an impressive GitHub profile README
-
-
-
-
- {features.map((feature, index) => (
-
-
- {feature.icon}
-
- {feature.title}
-
- {feature.description}
-
-
- ))}
-
-
-
- What is a GitHub Profile README?
-
-
- A GitHub Profile README is a special repository that appears at
- the top of your GitHub profile page. It's a great way to introduce
- yourself, showcase your skills, and highlight your best work to
- visitors of your profile.
-
-
-
- The README appears on your profile when you create a repository
- with the same name as your GitHub username and add a README.md
- file to it.
-
-
-
-
How This Tool Helps You
-
- Our GitHub Profile README Builder makes it easy to create a
- professional and visually appealing profile page without writing
- any markdown code. Here's what you can do:
-
-
- - Choose from 6 professionally designed templates
- -
- Automatically fetch your GitHub stats, repositories, and
- contribution data
-
- -
- Customize sections like skills, projects, experience, and
- education
-
- - Personalize with custom color schemes
- - Preview your profile in real-time
- - Copy the generated markdown with a single click
-
-
-
Quick Start
-
- -
- Fill in your information -
- Enter your name, title, bio, and other details in the Profile
- tab
-
- -
- Connect GitHub - Enter your
- GitHub username to automatically fetch your stats
-
- -
- Customize sections - Add
- skills, projects, work experience, and more
-
- -
- Choose a template - Select
- from 6 beautiful templates
-
- -
- Preview & copy - Preview
- your profile and copy the generated markdown
-
- -
- Create on GitHub - Follow
- the instructions in the "Profile README" tab to create your
- GitHub profile README
-
-
-
-
-
-
- Step 1: Create a new repository
-
-
- Go to GitHub and create a new repository with the same name as
- your GitHub username. This is case sensitive, so make sure it
- matches exactly.
-
-
-
-
- For example, if your username is "johndoe", the repository
- should be named "johndoe".
-
-
-
-
- Step 2: Initialize with a README
-
-
- When creating the repository, check the option "Initialize this
- repository with a README" to automatically create a README.md
- file.
-
-
-
- GitHub will show a special message saying "You found a secret!
- username/username is a special repository that you can use to
- add a README.md to your GitHub profile."
-
-
-
-
- Step 3: Edit the README.md file
-
-
- After creating the repository, click on the "Edit" button (pencil
- icon) on the README.md file. Delete all the content and paste the
- markdown generated by our tool.
-
-
-
- Step 4: Commit your changes
-
-
- After pasting the markdown, scroll down and click the "Commit
- changes" button to save your profile README.
-
-
-
- You can add a commit message like "Update profile README" to
- describe your changes.
-
-
-
-
Step 5: View your profile
-
- Go to your GitHub profile page (github.com/username) to see your
- new profile README. It will appear at the top of your profile
- page.
-
-
-
-
-
-
- Step 1: Generate your markdown
-
-
- Use our builder to create your profile README. Fill in your
- information, customize the sections, and choose a template. Then
- copy the generated markdown.
-
-
-
-
- {`# Hi there, I'm John Doe π
-
-Full Stack Developer passionate about creating elegant solutions
-
-## π§ Skills & Technologies
-JavaScript | React | Node.js | TypeScript`}
-
-
-
-
-
-
- Step 2: Create a special repository
-
-
- Go to GitHub and create a new repository with the exact same name
- as your GitHub username. Make sure to check "Initialize this
- repository with a README".
-
-
-
- Repository name: username (replace with your
- actual GitHub username)
-
-
-
-
-
- Step 3: Edit the README.md file
-
-
- After creating the repository, you'll be taken to the repository
- page. Click on the README.md file, then click the edit button
- (pencil icon) in the top right of the file view.
-
-
-
- Delete any existing content in the file and paste your generated
- markdown.
-
-
-
-
- Step 4: Preview and commit your changes
-
-
- After pasting your markdown, click the "Preview" tab to see how it
- will look. If everything looks good, scroll down and click the
- "Commit changes" button.
-
-
-
-
- {`Commit message: Update profile README
-Description: Add personalized GitHub profile README
-[x] Commit directly to the main branch`}
-
-
-
-
-
-
- Step 5: Verify your profile README
-
-
- Go to your GitHub profile page by clicking on your profile picture
- in the top right corner and selecting "Your profile", or by
- navigating to github.com/username (replace "username" with your
- GitHub username).
-
-
-
- Your profile README should now appear at the top of your profile
- page. If you don't see it, make sure the repository name exactly
- matches your username.
-
-
-
-
- Step 6: Update your profile README anytime
-
-
- You can update your profile README anytime by editing the
- README.md file in your username repository. You can use our
- builder to generate new markdown whenever you want to refresh your
- profile.
-
-
-
- Tip: Bookmark our GitHub Profile README Builder for easy access
- whenever you want to update your profile.
-
-
-
-
-
- A GitHub profile README is a special feature that allows you
- to showcase information about yourself directly on your GitHub
- profile page. It appears as a prominent section at the top of
- your profile.
-
-
- To create one, you need to make a new repository with the same
- name as your GitHub username and add a README.md file to it.
- GitHub will automatically display the contents of this README
- at the top of your profile page.
-
-
-
-
-
-
- Why doesn't my profile README show up on my GitHub profile?
-
-
-
- If your profile README isn't showing up, check these common
- issues:
-
-
- -
- Make sure the repository name{" "}
- exactly matches your GitHub username (it's
- case sensitive)
-
- -
- Ensure the README file is named "README.md" (case sensitive)
-
- -
- Verify that the README file is in the root directory of the
- repository
-
- -
- Check that the repository is public (private repositories
- won't display the README on your profile)
-
- -
- Try refreshing your profile page or logging out and back in
- if you've just created the repository
-
-
-
-
-
-
-
- Can I use HTML in my GitHub profile README?
-
-
-
- Yes, GitHub profile READMEs support a subset of HTML along
- with Markdown. You can use basic HTML tags like{" "}
- <h1>, <p>,{" "}
- <a>, <img>,{" "}
- <table>, and more.
-
-
- You can also use HTML for more advanced formatting, such as
- centering content with <div align="center">{" "}
- or creating complex layouts with tables.
-
-
- However, for security reasons, GitHub sanitizes the HTML and
- doesn't allow certain tags or attributes, particularly those
- related to JavaScript or styling that could be used
- maliciously.
-
-
-
-
-
-
- How do I add images to my GitHub profile README?
-
-
-
- There are several ways to add images to your GitHub profile
- README:
-
-
- -
- Upload directly to the repository: You can
- upload images to your username repository and reference them
- using relative paths.
-
- 
-
- -
- Use GitHub Issues: Upload an image to a
- GitHub issue (even a draft), then copy the URL and use it in
- your README.
-
-
- 
-
-
- -
- Use external image hosting: Host your
- images on services like Imgur or Cloudinary and link to
- them.
-
- 
-
- -
- Use GitHub's asset hosting: Drag and drop
- images directly into the README editor on GitHub, and it
- will automatically upload and link them.
-
-
-
-
-
-
-
- How do I add GitHub stats to my profile README?
-
-
-
- Our builder automatically generates the markdown for GitHub
- stats when you enable them in the Settings tab. These stats
- are powered by several popular open-source projects:
-
-
-
- These services generate dynamic images based on your GitHub
- username, which are then embedded in your README.
-
-
-
-
-
-
- How often are GitHub stats updated?
-
-
-
- The GitHub stats shown in your profile README are dynamically
- generated each time someone views your profile. However, there
- are some caching mechanisms in place:
-
-
- -
- GitHub's image cache typically refreshes every few hours
- (usually 2-6 hours)
-
- -
- Some stat providers have their own caching mechanisms
- (typically refreshed daily)
-
- -
- Browser caching might also affect how frequently visitors
- see updated stats
-
-
-
- In general, your GitHub stats should update at least once per
- day, reflecting your recent activity.
-
-
-
-
-
-
- Can I customize the colors and themes of my GitHub stats?
-
-
-
- Yes! Our builder allows you to customize the colors of your
- GitHub stats by changing the color theme in the Settings tab.
- The color theme you select will be applied to your GitHub
- stats cards.
-
-
- For more advanced customization, you can manually edit the
- markdown after copying it. Each GitHub stats service supports
- various parameters for customization:
-
-
- -
-
theme - Choose from predefined themes like
- dark, radical, merko, etc.
-
- -
-
bg_color - Set a custom background color
-
- -
-
title_color - Change the title text color
-
- -
-
text_color - Change the body text color
-
- -
-
icon_color - Change the icon colors
-
-
-
- For example:{" "}
-
- 
-
-
-
-
-
-
-
- How do I add a visitor counter to my profile?
-
-
-
- Our builder includes an option to add a visitor counter to
- your profile README. You can enable this in the Settings tab
- under "GitHub Stats & Widgets" by toggling "Profile Visitors".
-
-
- The visitor counter is powered by services like{" "}
-
- handleExternalLinkClick("profile_views_counter")
- }
- >
- GitHub Profile Views Counter
-
- , which tracks how many times your profile has been viewed.
-
-
- The markdown for a visitor counter looks like this:{" "}
-
- 
-
-
-
-
-
-
-
- Is there a limit to how long my profile README can be?
-
-
-
- GitHub doesn't impose a strict character limit on profile
- READMEs, but there are some practical considerations:
-
-
- -
- Very long READMEs may be visually overwhelming and users
- might not scroll through all the content
-
- -
- GitHub's UI displays a certain amount of content before
- adding a "Show more" button, so keep your most important
- information near the top
-
- -
- Extremely large READMEs with many images or widgets might
- load slowly for some users
-
-
-
- As a best practice, aim for a concise, well-organized README
- that highlights your most important information without
- overwhelming visitors.
-
-
-
-
-
-
- Can I save my profile configuration for later use?
-
-
-
- Yes! Our GitHub Profile README Builder automatically saves
- your profile configuration to your browser's local storage.
- This means you can:
-
-
- -
- Close the browser and return later to continue where you
- left off
-
- - Make incremental changes to your profile over time
- -
- Experiment with different templates and settings without
- losing your data
-
-
-
- Your data is stored locally in your browser and is not sent to
- any server (except when you explicitly fetch GitHub data). If
- you clear your browser data or switch to a different browser,
- you'll need to re-enter your information.
-
-
-
-
-
-
- Where can I learn more about GitHub profile READMEs?
-
-
-
- Here are some excellent resources to learn more about GitHub
- profile READMEs:
-
-
-
-
-
-
-
- How can I add dynamic content to my GitHub profile README?
-
-
-
- You can add dynamic content to your GitHub profile README
- using GitHub Actions. This allows you to automatically update
- your README with:
-
-
- - Latest blog posts from your RSS feed
- - Recent GitHub activity
- - Twitter/X posts
- - Weather information
- - Spotify currently playing/recently played tracks
- - Daily quotes or jokes
-
- To implement this, you'll need to:
-
- -
- Create a GitHub Actions workflow file in your repository
-
- -
- Set up the workflow to run on a schedule (e.g., every 6
- hours)
-
- -
- Use a script to fetch the dynamic content and update your
- README
-
-
- Check out these resources for examples:
-
-
-
-
-
-
- What are some creative elements I can add to my GitHub profile
- README?
-
-
-
- There are many creative elements you can add to make your
- GitHub profile README stand out:
-
-
- -
- Animated GIFs - Add personality with a
- relevant animated GIF
-
- -
- ASCII art - Create text-based art for a
- unique header
-
- -
- Badges - Show off your skills,
- certifications, or social profiles with badges from
- handleExternalLinkClick("shields_io")}
- >
- shields.io
-
-
- -
- Typing animation - Create a typing effect
- using GIFs from services like
-
- handleExternalLinkClick("readme_typing_svg")
- }
- >
- Readme Typing SVG
-
-
- -
- Spotify Now Playing - Show what you're
- currently listening to on Spotify
-
- -
- Visitor counter - Track how many people
- have viewed your profile
-
- -
- GitHub Skyline - 3D visualization of your
- contributions
-
- -
- Custom SVG animations - Create interactive
- or animated SVG content
-
-
-
- Remember that while creative elements can make your profile
- more engaging, it's important to maintain readability and not
- overload your README with too many elements.
-
-
-
-
-
-
- How can I organize a large GitHub profile README?
-
-
-
- If you have a lot of content to include in your GitHub profile
- README, here are some organization tips:
-
-
- -
- Use clear section headers - Divide your
- README into logical sections with descriptive headers
-
- -
- Create a table of contents - Add a
- clickable table of contents at the top that links to each
- section
-
- -
- Use collapsible sections - Implement
- GitHub's
<details> and{" "}
- <summary> tags to create expandable
- sections
-
- -
- Prioritize content - Put the most important
- information at the top where it's immediately visible
-
- -
- Use visual hierarchy - Utilize different
- header sizes, bold text, and dividers to create visual
- structure
-
- -
- Consider a multi-column layout - Use HTML
- tables or aligned divs to create a multi-column layout for
- certain sections
-
-
- Example of a collapsible section:
-
-
-
- {`
- π§ Technologies & Tools
-
- 
- 
- 
- `}
-
-
-
-
- While GitHub doesn't provide built-in analytics for profile
- READMEs, there are several ways to track engagement:
-
-
-
- You can also create a simple GitHub Action workflow that
- periodically records metrics like follower count, repository
- stars, and profile views to track changes over time.
-
-
-
-
-
-
- What are GitHub profile README limitations I should be aware of?
-
-
-
- While GitHub profile READMEs are powerful, they do have some
- limitations:
-
-
- -
- No JavaScript - GitHub sanitizes HTML and
- doesn't allow JavaScript execution for security reasons
-
- -
- Limited CSS - Only a subset of CSS is
- supported through HTML style attributes
-
- -
- Image restrictions - Some image hosting
- services may be blocked
-
- -
- Rate limiting - Services that generate
- dynamic content may have API rate limits
-
- -
- Size considerations - Very large READMEs
- with many images can load slowly
-
- -
- Mobile display - Complex layouts may not
- display well on mobile devices
-
- -
- Markdown compatibility - Some advanced
- Markdown features may render differently than expected
-
-
-
- To work around these limitations, focus on creating clean,
- well-structured content that looks good across devices and
- browsers. Test your README on different screen sizes to ensure
- it's readable everywhere.
-
-
-
-
-
-
- How can I make my GitHub profile README accessible?
-
-
-
- Making your GitHub profile README accessible ensures it can be
- used by people with disabilities. Here are some accessibility
- best practices:
-
-
- -
- Add alt text to images - Always include
- descriptive alt text for images using the format:{" "}
-
-
- -
- Use semantic headers - Organize content
- with proper heading levels (##, ###, etc.) in a logical
- hierarchy
-
- -
- Ensure sufficient color contrast - Choose
- colors with enough contrast for readability
-
- -
- Don't rely solely on color - Use additional
- indicators besides color to convey information
-
- -
- Make link text descriptive - Use meaningful
- link text instead of generic phrases like "click here"
-
- -
- Use simple tables - If using tables, keep
- them simple with proper headers
-
- -
- Test with a screen reader - Check how your
- README sounds when read aloud
-
-
-
- By making your profile README accessible, you ensure that all
- visitors, including those using assistive technologies, can
- access and understand your content.
-
-
-
-
-
-
- What are some common mistakes to avoid in GitHub profile
- READMEs?
-
-
-
- Here are some common mistakes to avoid when creating your
- GitHub profile README:
-
-
- -
- Overcrowding - Adding too much information
- makes your profile overwhelming and hard to read
-
- -
- Outdated information - Not updating your
- README regularly with current skills and projects
-
- -
- Broken links/images - Links that lead
- nowhere or images that don't load
-
- -
- Poor organization - Lack of clear sections
- or logical flow
-
- -
- Overusing animations/GIFs - Too many moving
- elements can be distracting
-
- -
- Ignoring mobile users - Creating layouts
- that break on smaller screens
-
- -
- Missing context - Not providing enough
- information about who you are and what you do
-
- -
- Typos and grammatical errors - Not
- proofreading your content
-
- -
- Inconsistent styling - Mixing different
- visual styles throughout your README
-
-
-
- Remember that your profile README is often the first
- impression people have of you on GitHub, so it's worth taking
- the time to make it polished and professional.
-
-
-
-
-
-
- How can I showcase my GitHub contributions effectively?
-
-
-
- There are several ways to effectively showcase your GitHub
- contributions in your profile README:
-
-
-
- Our builder includes options to add many of these contribution
- visualizations to your profile README. You can enable them in
- the Settings tab under "GitHub Stats & Widgets".
-
-
-
-
-
-
- How often should I update my GitHub profile README?
-
-
-
- There's no strict rule for how often you should update your
- GitHub profile README, but here are some guidelines:
-
-
- -
- Major career changes - Update when you
- change jobs, roles, or career focus
-
- -
- New skills - Add new technologies or skills
- as you learn them
-
- -
- Significant projects - Feature new major
- projects you've completed
-
- -
- Quarterly review - Consider a quarterly
- review to ensure information is current
-
- -
- Dynamic content - Set up GitHub Actions to
- automatically update certain parts of your README (like blog
- posts or activity)
-
-
-
- The most important thing is to ensure your README accurately
- represents your current skills, interests, and projects.
- Outdated information can give visitors the wrong impression
- about your current focus and expertise.
-
-
- Using our GitHub Profile README Builder makes updates easy -
- just return to the tool, make your changes, and copy the new
- markdown to update your README.
-
-
-
-
-
-
-
- );
-
- // Render content based on current path
- const renderContent = () => {
- if (pathname === "/help/profile-readme") {
- return renderProfileReadme();
- } else if (pathname === "/help/step-by-step") {
- return renderStepByStep();
- } else if (pathname === "/help/faq") {
- return renderFAQ();
- } else {
- return renderGettingStarted();
- }
- };
-
- return (
-
-
-
- {renderContent()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- GitHub Profile README Builder
-
-
-
- Create an impressive GitHub profile page in minutes with our
- interactive builder
-
-
-
-
-
-
-
-
-
-
- {stars}
- stars
-
-
-
- {forks}
- forks
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Profile Editor
-
-
-
-
-
-
-
-
- Copy Markdown
-
-
-
- Download README.md
-
-
-
- Open in GitHub
-
-
-
-
-
-
-
-
-
-
- Profile
-
-
-
-
Basic Information
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Social Links
-
-
-
-
-
-
-
- {profileData.githubDataFetched && (
-
- GitHub data successfully fetched
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
Contact Information
-
-
-
- {
- setProfileData({
- ...profileData,
- contactInfo: {
- ...profileData.contactInfo,
- email: e.target.value,
- },
- });
- }}
- placeholder="e.g. yourname@example.com"
- />
-
-
-
-
-
{
- setProfileData({
- ...profileData,
- contactInfo: {
- ...profileData.contactInfo,
- location: e.target.value,
- },
- });
- }}
- placeholder="e.g. San Francisco, CA"
- />
-
- Override location information from GitHub
-
-
-
-
-
-
-
-
-
- {profileData.contactInfo?.socials &&
- profileData.contactInfo.socials.length > 0 ? (
-
- {profileData.contactInfo.socials.map((social, index) => (
-
-
-
-
- ))}
-
- ) : (
-
- No additional social links added
-
- )}
-
-
-
-
- Skills & Technologies
-
-
-
-
- {profileData.skills.map((skill, index) => (
-
- {skill}
-
-
- ))}
- {profileData.skills.length === 0 && (
-
- No skills added yet
-
- )}
-
-
-
-
Projects
-
-
-
-
- handleSwitchChange("showProjects", checked)
- }
- />
-
-
-
-
-
- {profileData.projects && profileData.projects.length > 0 ? (
-
- {profileData.projects.map((project, index) => (
-
-
- {project.title}
-
-
-
- {project.description}
-
-
- {project.technologies.map((tech, techIndex) => (
-
- {tech}
-
- ))}
-
-
-
-
-
-
-
- ))}
-
- ) : (
-
-
- No projects added yet
-
-
- Click "Add Project" to showcase your work
-
-
- )}
-
-
-
Work Experience
-
-
-
-
- handleSwitchChange("showTimeline", checked)
- }
- />
-
-
-
-
-
- {profileData.timeline && profileData.timeline.length > 0 ? (
-
- {profileData.timeline.map((experience, index) => (
-
-
-
-
-
- {experience.title}
-
-
- {experience.organization}
-
-
-
- {experience.period}
-
-
- {experience.description}
-
-
- {experience.tags.map((tag, tagIndex) => (
-
- {tag}
-
- ))}
-
-
-
-
-
-
-
- ))}
-
- ) : (
-
-
- No work experience added yet
-
-
- Click "Add Experience" to showcase your professional
- background
-
-
- )}
-
-
-
Education
-
-
-
- handleSwitchChange("showEducation", checked)
- }
- />
-
-
-
-
-
- Template Customization
-
-
-
-
-
-
-
-
-
-
-
- Customize the colors used in your profile README template
-
-
-
-
-
- Selected Template:{" "}
- {activeTemplate.charAt(0).toUpperCase() +
- activeTemplate.slice(1)}
-
-
- {activeTemplate === "modern" &&
- "Clean and professional layout with a focus on readability"}
- {activeTemplate === "minimal" &&
- "Simple and elegant design with minimalist aesthetics"}
- {activeTemplate === "creative" &&
- "Eye-catching and unique style with colorful elements"}
- {activeTemplate === "developer" &&
- "Code-focused design with technical elements and syntax highlighting"}
- {activeTemplate === "professional" &&
- "Business-oriented layout with a corporate, polished feel"}
- {activeTemplate === "elegant" &&
- "Sophisticated and refined design with subtle, tasteful elements"}
-
-
-
-
-
- GitHub Stats & Widgets
-
-
-
-
-
-
- Show your GitHub statistics
-
-
-
- handleSwitchChange("stats", checked)
- }
- />
-
-
-
-
-
-
- Show your GitHub streak statistics
-
-
-
- handleSwitchChange("streak", checked)
- }
- />
-
-
-
-
-
-
- Show your most used programming languages
-
-
-
- handleSwitchChange("topLangs", checked)
- }
- />
-
-
-
-
-
-
- Show profile visitor count
-
-
-
- handleSwitchChange("visitors", checked)
- }
- />
-
-
-
-
-
-
- Show your pinned repositories
-
-
-
- handleSwitchChange("showRepos", checked)
- }
- />
-
-
-
-
-
-
- Show your GitHub contribution graph
-
-
-
- handleSwitchChange("showContribGraph", checked)
- }
- />
-
-
-
-
-
-
- Show your GitHub achievement trophies
-
-
-
- handleSwitchChange("showTrophies", checked)
- }
- />
-
-
-
-
- Repository Card Customization
-
- {
- setProfileData({
- ...profileData,
- repoSettings: settings,
- });
- }}
- />
-
-
-
-
-
-
Content Sections
-
-
-
-
-
- Show your projects showcase
-
-
-
- handleSwitchChange("showProjects", checked)
- }
- />
-
-
-
-
-
-
- Show your latest blog posts
-
-
-
- handleSwitchChange("showBlog", checked)
- }
- />
-
-
-
-
-
-
- Show your professional timeline
-
-
-
- handleSwitchChange("showTimeline", checked)
- }
- />
-
-
-
-
-
-
- Show your educational background
-
-
-
- handleSwitchChange("showEducation", checked)
- }
- />
-
-
-
-
-
-
- Show contact section
-
-
-
- handleSwitchChange("showContact", checked)
- }
- />
-
-
-
-
- {/* Project Dialog */}
-
-
- {/* Experience Dialog */}
-
-
- {/* Social Link Dialog */}
-
-
-
- Hi there, I'm {data.name} π
-
- {data.title}
-
-
-
-
-
- {data.location && (
-
-
- Based in {data.location}
-
- )}
- {data.company && (
-
-
- Currently working at {data.company}
-
- )}
- {data.website && (
-
- )}
-
-
-
- Connect with me:
-
- {data.github && (
-
- )}
- {data.twitter && (
-
- )}
- {data.linkedin && (
-
- )}
- {data.website && (
-
- )}
-
-
-
-
- Languages and Tools:
-
- {data.skills.map((skill, index) => (
-
- ))}
-
-
-
- {data.stats && (
-
- GitHub Stats:
-
- {data.githubDataFetched ? (
-
-
- Public Repos:
- {data.publicRepos || 0}
-
-
- Followers:
- {data.followers || 0}
-
-
- Following:
- {data.following || 0}
-
- {data.totalStars !== undefined && (
-
- Total Stars:
- {data.totalStars}
-
- )}
- {data.totalForks !== undefined && (
-
- Total Forks:
- {data.totalForks}
-
- )}
-
- {data.github
- ? "Click 'Fetch Data' to load GitHub stats"
- : "Enter GitHub username to see stats"}
-
- )}
-
-
- )}
-
- {data.topLangs && (
-
- Top Languages:
-
- {data.githubDataFetched && data.languages ? (
-
- {Object.entries(data.languages)
- .slice(0, 5)
- .map(([lang, percentage]) => (
-
- ))}
-
- {data.github
- ? "Click 'Fetch Data' to load language stats"
- : "Enter GitHub username to see languages"}
-
- )}
-
-
- )}
-
- {data.streak && (
-
- GitHub Streak:
-
- {data.githubDataFetched && data.currentStreak !== undefined ? (
-
-
- Current Streak:
- {data.currentStreak} days
-
-
- Longest Streak:
-
- {data.longestStreak || 0} days
-
-
-
- Total Contributions:
-
- {data.totalContributions || 0} days
-
-
-
- {data.github
- ? "Click 'Fetch Data' to load streak stats"
- : "Enter GitHub username to see streak"}
-
- )}
-
-
- )}
-
- {data.visitors && (
-
- Profile views: {data.profileViews || "1,234"}
-
- )}
- {data.showRepos && data.repositories && data.repositories.length > 0 && (
-
- Featured Repositories:
-
-
- )}
-
- {data.showContribGraph && (
-
- Contribution Graph:
-
-
- )}
-
- {data.showTrophies && (
-
- GitHub Achievements:
-
-
- )}
-
- {data.showProjects && data.projects && data.projects.length > 0 && (
-
- )}
-
- {data.showBlog && data.blogPosts && data.blogPosts.length > 0 && (
-
- )}
-
- {data.showTimeline && data.timeline && data.timeline.length > 0 && (
-
- )}
-
- {data.showEducation && data.education && data.education.length > 0 && (
-
- )}
-
- {data.showContact && data.contactInfo && (
-
- )}
-
-
-
-
-
-
{data.name}
-
- > {data.title}
-
-
-
{data.about}
-
-
- {(data.location || data.company) && (
-
- )}
-
- {(data.github || data.twitter || data.linkedin) && (
-
- )}
-
- {data.skills.length > 0 && (
-
- Skills
-
- {data.skills.join(" β’ ")}
-
-
- )}
-
- {data.stats && data.githubDataFetched && (
-
- Stats
-
-
- {`repos: ${data.publicRepos || 0}
-followers: ${data.followers || 0}
-following: ${data.following || 0}
-stars: ${data.totalStars || 0}
-contributions: ${data.totalContributions || 0}`}
-
-
-
- )}
-
- {data.topLangs && data.githubDataFetched && data.languages && (
-
- Languages
-
-
- {Object.entries(data.languages)
- .slice(0, 5)
- .map(
- ([lang, percentage]) =>
- `${lang}: ${"β".repeat(
- Math.floor((percentage as number) / 5)
- )} ${percentage}%`
- )
- .join("\n")}
-
-
-
- )}
- {data.showRepos && data.repositories && data.repositories.length > 0 && (
-
- Featured Repositories:
-
-
- )}
-
- {data.showContribGraph && (
-
- Contribution Graph:
-
-
- )}
-
- {data.showTrophies && (
-
- GitHub Achievements:
-
-
- )}
-
-
-
-
- {data.name}
-
- π¨βπ» {data.title}
-
- {data.about}
-
-
-
-
-
- π Connect with me
-
- {data.github && (
-
- )}
- {data.twitter && (
-
- )}
- {data.linkedin && (
-
- )}
-
-
-
-
- π» Tech Stack
-
- {data.skills.map((skill, index) => (
-
- ))}
-
-
-
- {data.stats && (
-
- π GitHub Stats
- {data.githubDataFetched ? (
-
-
-
-
-
-
-
-
- ) : (
-
-
- {data.github
- ? "Click 'Fetch Data' to load GitHub stats"
- : "Enter GitHub username to see stats"}
-
-
- )}
-
- )}
-
- {data.topLangs && data.githubDataFetched && data.languages && (
-
- π Top Languages
-
-
- {Object.entries(data.languages)
- .slice(0, 5)
- .map(([lang, percentage]) => (
-
- ))}
-
- )}
-
- {data.streak && data.githubDataFetched && (
-
- π₯ GitHub Streak
-
-
-
-
-
-
-
-
- )}
-
- {data.visitors && (
-
- π Visitor count
-
- {data.profileViews || "1,234"}
-
-
- )}
-
-
- {data.showRepos && data.repositories && data.repositories.length > 0 && (
-
- Featured Repositories:
-
-
- )}
-
- {data.showContribGraph && (
-
- Contribution Graph:
-
-
- )}
-
- {data.showTrophies && (
-
- GitHub Achievements:
-
-
- )}
-
-
-
- {data.name}
- π
-
-
-
- {data.title}
-
-
-
-
-
-
- {`interface Developer {
- name: string;
- title: string;
- location: string;
- company?: string;
- website?: string;
- skills: string[];
- socials: {
- github?: string;
- twitter?: string;
- linkedin?: string;
- };
-}
-
-const ${data.name.replace(/\s+/g, "")}: Developer = {
- name: "${data.name}",
- title: "${data.title}",
- location: "${data.location}",
- ${data.company ? `company: "${data.company}",` : ""}
- ${data.website ? `website: "${data.website}",` : ""}
- skills: [${data.skills.map((skill) => `"${skill}"`).join(", ")}],
- socials: {
- ${data.github ? `github: "${data.github}",` : ""}
- ${data.twitter ? `twitter: "${data.twitter}",` : ""}
- ${data.linkedin ? `linkedin: "${data.linkedin}"` : ""}
- }
-};`}
-
-
-
-
-
-
-
-
- π» Tech Stack
-
-
-
- {data.skills.map((skill, index) => (
-
- {skill}
-
- ))}
-
-
-
- {data.stats && data.githubDataFetched && (
-
-
- π GitHub Stats
-
-
-
-
-
-
-
-
-
-
- )}
-
- {data.topLangs && data.githubDataFetched && data.languages && (
-
-
- π Top Languages
-
-
-
- {Object.entries(data.languages)
- .slice(0, 5)
- .map(
- ([lang, percentage]) =>
- `${lang}: ${"β".repeat(
- Math.floor((percentage as number) / 5)
- )} ${percentage}%`
- )
- .join("\n")}
-
-
-
- )}
-
-
-
- π Connect
-
-
-
- {data.github && (
-
- )}
- {data.twitter && (
-
- )}
- {data.linkedin && (
-
- )}
- {data.website && (
-
- )}
-
-
-
- {data.visitors && (
-
- visitors: {data.profileViews || "1,234"}
-
- )}
- {data.showRepos && data.repositories && data.repositories.length > 0 && (
-
- Featured Repositories:
-
-
- )}
-
- {data.showContribGraph && (
-
- Contribution Graph:
-
-
- )}
-
- {data.showTrophies && (
-
- GitHub Achievements:
-
-
- )}
-
-
-
- {data.name}
-
- {data.title}
-
-
-
-
-
-
- About Me
-
-
{data.about}
-
-
-
-
- {data.github && (
-
- )}
- {data.linkedin && (
-
- )}
- {data.twitter && (
-
- )}
-
-
-
-
-
- Professional Skills
-
-
-
-
- Languages & Frameworks
-
-
- {data.skills
- .slice(0, Math.ceil(data.skills.length / 2))
- .map((skill, index) => (
-
- ))}
-
-
-
-
- Tools & Platforms
-
-
- {data.skills
- .slice(Math.ceil(data.skills.length / 2))
- .map((skill, index) => (
-
- ))}
-
-
-
-
- {data.stats && data.githubDataFetched && (
-
-
- GitHub Statistics
-
-
-
-
-
-
-
-
- )}
-
- {data.topLangs && data.githubDataFetched && data.languages && (
-
-
- Top Languages
-
-
-
- {Object.entries(data.languages)
- .slice(0, 5)
- .map(([lang, percentage]) => (
-
- ))}
-
- )}
-
- {data.visitors && (
-
- Profile views: {data.profileViews || "1,234"}
-
- )}
- {data.showRepos && data.repositories && data.repositories.length > 0 && (
-
- Featured Repositories:
-
-
- )}
-
- {data.showContribGraph && (
-
- Contribution Graph:
-
-
- )}
-
- {data.showTrophies && (
-
- GitHub Achievements:
-
-
- )}
-
-
-
- β¨ {data.name} β¨
-
-
- {data.title}
-
-
-
-
- {data.about}
-
-
-
-
-
-
- About
-
-
-
- {data.location && (
- -
-
-
- Based in {data.location}
-
-
- )}
- {data.company && (
- -
-
-
- Working at {data.company}
-
-
- )}
- {data.website && (
- -
-
-
- {data.website.replace(/^https?:\/\//, "")}
-
-
- )}
- -
- πΌ
- Open for collaborations and projects
-
- -
- π±
- Continuously learning and growing
-
-
-
-
-
-
- Expertise
-
-
- {data.skills.map((skill, index) => (
-
- {skill}
- {index < data.skills.length - 1 ? " β’ " : ""}
-
- ))}
-
-
-
-
-
- Connect
-
-
- {data.github && (
-
- )}
- {data.linkedin && (
-
- )}
- {data.twitter && (
-
- )}
-
-
-
- {(data.stats || data.topLangs || data.streak) &&
- data.githubDataFetched && (
-
-
- GitHub Metrics
-
-
- {data.stats && (
-
-
-
-
-
-
- )}
-
- {data.topLangs && data.languages && (
-
-
- Top Languages
-
-
- {Object.entries(data.languages)
- .slice(0, 5)
- .map(([lang, percentage]) => (
-
- ))}
-
- )}
-
- {data.visitors && (
-
-
- {data.profileViews || "1,234"} visitors
-
-
- )}
-
-
-
- β¨ Thank you for visiting my profile β¨
-
-
- {data.showRepos && data.repositories && data.repositories.length > 0 && (
-
- Featured Repositories:
-
-
- )}
-
- {data.showContribGraph && (
-
- Contribution Graph:
-
-
- )}
-
- {data.showTrophies && (
-
- GitHub Achievements:
-
-
- )}
-
- Customize how your repository cards appear in your GitHub
- profile README
-
-
-
-
-
-
-
-
-
- Layout
- Content
- Style
-
-
-
-
-
-
-
-
-
-
-
- handleSelectChange("gridColumns", Number.parseInt(value))
- }
- className="flex space-x-2"
- id="gridColumns"
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Show repository description
-
-
-
- handleSwitchChange("showDescription", checked)
- }
- />
-
-
-
-
- Show primary language
-
-
-
- handleSwitchChange("showLanguage", checked)
- }
- />
-
-
-
-
- Show stars and forks
-
-
-
- handleSwitchChange("showStats", checked)
- }
- />
-
-
-
-
- Show repository owner
-
-
-
- handleSwitchChange("showOwner", checked)
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export const defaultRepoSettings = {
- cardStyle: "default",
- gridColumns: 2,
- alignment: "center",
- showDescription: true,
- showLanguage: true,
- showStats: true,
- showOwner: false,
- theme: "default",
- borderStyle: "default",
- iconSize: "medium",
-};
diff --git a/components/template-showcase.tsx b/components/template-showcase.tsx
deleted file mode 100644
index be7a81e..0000000
--- a/components/template-showcase.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client";
-
-import { motion, AnimatePresence } from "framer-motion";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-
-const templates = [
- {
- name: "Modern",
- description: "Clean and professional layout with a focus on readability",
- image: "/placeholder.svg?key=etd64",
- },
- {
- name: "Minimal",
- description: "Simple and elegant design with minimalist aesthetics",
- image: "/placeholder.svg?key=1suhh",
- },
- {
- name: "Creative",
- description: "Eye-catching and unique style with colorful elements",
- image: "/placeholder.svg?key=icalx",
- },
- {
- name: "Developer",
- description:
- "Code-focused design with technical elements and syntax highlighting",
- image: "/placeholder.svg?key=sueab",
- },
- {
- name: "Professional",
- description: "Business-oriented layout with a corporate, polished feel",
- image: "/placeholder.svg?key=d06ok",
- },
- {
- name: "Elegant",
- description:
- "Sophisticated and refined design with subtle, tasteful elements",
- image: "/placeholder.svg?key=64s5l",
- },
-];
-
-export function TemplateShowcase() {
- const [currentIndex, setCurrentIndex] = useState(0);
-
- const nextTemplate = () => {
- setCurrentIndex((prevIndex) => (prevIndex + 1) % templates.length);
- };
-
- const prevTemplate = () => {
- setCurrentIndex(
- (prevIndex) => (prevIndex - 1 + templates.length) % templates.length
- );
- };
-
- return (
-
-
-
-
- Beautiful Templates
-
-
- Choose from 6 professionally designed templates to make your GitHub
- profile stand out
-
-
-
-
-
-
-
-
-
-
-
-
-
![{templates[currentIndex].name}]({templates[currentIndex].image)
-
-
- {templates[currentIndex].name}
-
-
{templates[currentIndex].description}
-
-
-
-
-
-
-
-
- {templates.map((_, index) => (
-
-
-
-
-
- What Developers Say
-
-
- Join thousands of developers who have enhanced their GitHub profiles
-
-
-
-
- {testimonials.map((testimonial, index) => (
-
-
-
-
-
-
-
{testimonial.name}
-
- {testimonial.role}
-
-
-
- {Array(testimonial.stars)
- .fill(0)
- .map((_, i) => (
-
- ))}
-
-
-
- "{testimonial.content}"
-
-
-
-
- ))}
-
-
-
-
- Step {currentStep + 1} of {steps.length}
-
-
-
-
-
{steps[currentStep].content}
-
-
-
-
-
-
{children}
-
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
deleted file mode 100644
index 9743647..0000000
--- a/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-AlertDialogHeader.displayName = "AlertDialogHeader";
-
-const AlertDialogFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-AlertDialogFooter.displayName = "AlertDialogFooter";
-
-const AlertDialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogDescription.displayName =
- AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
- AlertDialog,
- AlertDialogPortal,
- AlertDialogOverlay,
- AlertDialogTrigger,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogFooter,
- AlertDialogTitle,
- AlertDialogDescription,
- AlertDialogAction,
- AlertDialogCancel,
-};
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
deleted file mode 100644
index 5a76cca..0000000
--- a/components/ui/alert.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const alertVariants = cva(
- "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
- {
- variants: {
- variant: {
- default: "bg-background text-foreground",
- destructive:
- "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
- },
- },
- defaultVariants: {
- variant: "default",
- },
- }
-);
-
-const Alert = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & VariantProps
->(({ className, variant, ...props }, ref) => (
-
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-AlertTitle.displayName = "AlertTitle";
-
-const AlertDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
deleted file mode 100644
index 359bc94..0000000
--- a/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };
diff --git a/components/ui/atomic/achievements.tsx b/components/ui/atomic/achievements.tsx
deleted file mode 100644
index 97a97e3..0000000
--- a/components/ui/atomic/achievements.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Award, Medal, Trophy, Star } from "lucide-react";
-import Image from "next/image";
-
-import { Container } from "./container";
-import { Section, SectionHeading } from "./section";
-
-interface Achievement {
- title: string;
- description?: string;
- date?: string;
- icon?: "award" | "medal" | "trophy" | "star" | string;
- image?: string;
- url?: string;
-}
-
-interface AchievementCardProps {
- achievement: Achievement;
- className?: string;
- primaryColor?: string;
-}
-
-export function AchievementCard({
- achievement,
- className,
- primaryColor,
-}: AchievementCardProps) {
- const getIcon = () => {
- switch (achievement.icon) {
- case "award":
- return ;
- case "medal":
- return ;
- case "trophy":
- return ;
- case "star":
- return ;
- default:
- return null;
- }
- };
-
- return (
-
-
-
- {achievement.image ? (
-
- ) : (
- getIcon()
- )}
-
-
-
-
-
- {achievement.url ? (
-
- {achievement.title}
-
- ) : (
- achievement.title
- )}
-
- {achievement.date && (
-
- {achievement.date}
-
- )}
-
-
- {achievement.description && (
-
- {achievement.description}
-
- )}
-
-
- {achievements.map((achievement, index) => (
-
- ))}
-
- {achievements.map((achievement, index) => (
-
- ))}
-
-
-
- {title}
-
-
{value}
-
- {change !== undefined && (
-
-
- {isPositiveChange ? "+" : ""}
- {change}%
-
-
- {changeLabel}
-
-
- )}
-
-
- {icon && (
-
- {icon}
-
- )}
-
- {fallback || alt.charAt(0)}
-
- );
-}
diff --git a/components/ui/atomic/blog-preview.tsx b/components/ui/atomic/blog-preview.tsx
deleted file mode 100644
index 7360571..0000000
--- a/components/ui/atomic/blog-preview.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Calendar, Clock } from "lucide-react";
-import Image from "next/image";
-
-import { Badge } from "@/components/ui/badge";
-
-import { Container } from "./container";
-import { Section, SectionHeading } from "./section";
-
-interface BlogPost {
- title: string;
- excerpt: string;
- date: string;
- readTime?: string;
- url: string;
- image?: string;
- tags?: string[];
-}
-
-interface BlogCardProps {
- post: BlogPost;
- className?: string;
- primaryColor?: string;
-}
-
-export function BlogCard({ post, className, primaryColor }: BlogCardProps) {
- return (
-
- {post.image && (
-
-
-
- )}
-
-
-
-
-
- {post.date}
-
- {post.readTime && (
-
-
- {post.readTime}
-
- )}
-
-
-
-
- {post.title}
-
-
-
-
- {post.excerpt}
-
-
- {post.tags && post.tags.length > 0 && (
-
- {post.tags.map((tag, index) => (
-
- {tag}
-
- ))}
-
- )}
-
- {displayPosts.map((post, index) => (
-
- ))}
-
-
- {posts.length > maxPosts && (
-
- )}
-
- );
-}
diff --git a/components/ui/atomic/contact-section.tsx b/components/ui/atomic/contact-section.tsx
deleted file mode 100644
index 57ed08a..0000000
--- a/components/ui/atomic/contact-section.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { Mail, MapPin, Phone, Send } from "lucide-react";
-import type React from "react";
-
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-
-import { Container } from "./container";
-import { Section, SectionHeading } from "./section";
-
-interface ContactInfo {
- email?: string;
- phone?: string;
- location?: string;
- socials?: Array<{
- platform: string;
- url: string;
- icon?: React.ReactNode;
- }>;
-}
-
-interface ContactSectionProps {
- title?: string;
- subtitle?: string;
- contactInfo?: ContactInfo;
- showForm?: boolean;
- primaryColor?: string;
- secondaryColor?: string;
-}
-
-export function ContactSection({
- title = "Get In Touch",
- subtitle = "Have a question or want to work together? Feel free to contact me!",
- contactInfo,
- showForm = true,
- primaryColor,
- secondaryColor,
-}: ContactSectionProps) {
- return (
-
- );
-}
diff --git a/components/ui/atomic/container.tsx b/components/ui/atomic/container.tsx
deleted file mode 100644
index ab64425..0000000
--- a/components/ui/atomic/container.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@/lib/utils";
-
-interface ContainerProps {
- children: ReactNode;
- className?: string;
- backgroundColor?: string;
- padding?: "none" | "sm" | "md" | "lg";
- rounded?: "none" | "sm" | "md" | "lg";
-}
-
-export function Container({
- children,
- className,
- backgroundColor,
- padding = "md",
- rounded = "md",
-}: ContainerProps) {
- const paddingClass = {
- none: "",
- sm: "p-2",
- md: "p-4",
- lg: "p-6",
- };
-
- const roundedClass = {
- none: "",
- sm: "rounded",
- md: "rounded-md",
- lg: "rounded-lg",
- };
-
- const style = backgroundColor ? { backgroundColor } : {};
-
- return (
-
- {children}
-
- );
-}
diff --git a/components/ui/atomic/education-section.tsx b/components/ui/atomic/education-section.tsx
deleted file mode 100644
index 04d09e1..0000000
--- a/components/ui/atomic/education-section.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { GraduationCap, Calendar, MapPin } from "lucide-react";
-import Image from "next/image";
-
-import { Container } from "./container";
-import { Section, SectionHeading } from "./section";
-
-interface Education {
- institution: string;
- degree: string;
- field?: string;
- location?: string;
- startDate: string;
- endDate?: string;
- description?: string;
- logo?: string;
- gpa?: string | number;
- achievements?: string[];
-}
-
-interface EducationCardProps {
- education: Education;
- className?: string;
- primaryColor?: string;
- secondaryColor?: string;
-}
-
-export function EducationCard({
- education,
- className,
- primaryColor,
- secondaryColor,
-}: EducationCardProps) {
- return (
-
-
-
- {education.logo ? (
-
- ) : (
-
-
-
- )}
-
-
-
-
- {education.degree}
- {education.field && (
- in {education.field}
- )}
-
-
-
- {education.institution}
-
-
-
-
-
-
- {education.startDate} - {education.endDate || "Present"}
-
-
-
- {education.location && (
-
-
- {education.location}
-
- )}
-
- {education.gpa && (
-
-
- GPA: {education.gpa}
-
-
- )}
-
-
- {education.description && (
-
- {education.description}
-
- )}
-
- {education.achievements && education.achievements.length > 0 && (
-
- {education.achievements.map((achievement, index) => (
- - {achievement}
- ))}
-
- )}
-
-
- {educationList.map((education, index) => (
-
- ))}
-
-
- );
-}
diff --git a/components/ui/atomic/export-options.tsx b/components/ui/atomic/export-options.tsx
deleted file mode 100644
index 41eb638..0000000
--- a/components/ui/atomic/export-options.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-
-import {
- Download,
- Copy,
- FileText,
- FileImage,
- Share2,
- Check,
- Github,
-} from "lucide-react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { useToast } from "@/hooks/use-toast";
-
-interface ExportOptionsProps {
- markdown: string;
- onExportPDF?: () => void;
- onExportImage?: () => void;
- onShareLink?: () => void;
- onOpenInGitHub?: () => void;
- className?: string;
-}
-
-export function ExportOptions({
- markdown,
- onExportPDF,
- onExportImage,
- onShareLink,
- onOpenInGitHub,
- className,
-}: ExportOptionsProps) {
- const { toast } = useToast();
- const [copied, setCopied] = useState(false);
-
- const handleCopy = async () => {
- try {
- await navigator.clipboard.writeText(markdown);
- setCopied(true);
- toast({
- title: "Copied to clipboard",
- description:
- "You can now paste this into your GitHub profile README.md file",
- });
- setTimeout(() => setCopied(false), 2000);
- } catch (err) {
- toast({
- title: "Failed to copy",
- description: "Please try again or copy manually",
- variant: "destructive",
- });
- }
- };
-
- return (
-
-
-
-
-
-
-
-
- {
- const blob = new Blob([markdown], { type: "text/markdown" });
- const url = URL.createObjectURL(blob);
- const a = document.createElement("a");
- a.href = url;
- a.download = "README.md";
- a.click();
- URL.revokeObjectURL(url);
-
- toast({
- title: "Downloaded README.md",
- description: "Your markdown file has been downloaded",
- });
- }}
- >
-
- Download as Markdown
-
-
- {onExportPDF && (
-
-
- Export as PDF
-
- )}
-
- {onExportImage && (
-
-
- Export as Image
-
- )}
-
-
-
- {onShareLink && (
-
- )}
-
- {onOpenInGitHub && (
-
- )}
-
- );
-}
diff --git a/components/ui/atomic/github-stats.tsx b/components/ui/atomic/github-stats.tsx
deleted file mode 100644
index 6e81af7..0000000
--- a/components/ui/atomic/github-stats.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import Image from "next/image";
-
-import { Container } from "./container";
-import { Section, SectionHeading } from "./section";
-
-interface GitHubStatsProps {
- username: string;
- showStats?: boolean;
- showLanguages?: boolean;
- showStreak?: boolean;
- showContributions?: boolean;
- showTrophies?: boolean;
- theme?:
- | "default"
- | "dark"
- | "radical"
- | "merko"
- | "gruvbox"
- | "tokyonight"
- | "onedark"
- | "cobalt"
- | "synthwave";
- primaryColor?: string;
- trophyTypes?: TrophyType[];
-}
-
-export function GitHubStatsCard({
- username,
- theme = "default",
-}: GitHubStatsProps) {
- if (!username) return null;
-
- return (
-
-
-
- );
-}
-
-export function GitHubLanguagesCard({
- username,
- theme = "default",
-}: GitHubStatsProps) {
- if (!username) return null;
-
- return (
-
-
-
- );
-}
-
-export function GitHubStreakCard({
- username,
- theme = "default",
-}: GitHubStatsProps) {
- if (!username) return null;
-
- return (
-
-
-
- );
-}
-
-export function GitHubContributionGraph({
- username,
- theme = "github",
-}: {
- username: string;
- theme?: string;
-}) {
- if (!username) return null;
-
- // Map color theme names to contribution chart themes
- const themeMapping = {
- default: "github",
- ocean: "github-dark",
- forest: "github-light",
- sunset: "halloween",
- berry: "pink",
- midnight: "dracula",
- monochrome: "github-dark",
- };
-
- // Use the mapped theme or default to "github"
- const chartTheme = themeMapping[theme.toLowerCase()] || "github";
-
- return (
-
-
-
- );
-}
-
-type TrophyType =
- | "Stars"
- | "Followers"
- | "Commits"
- | "PullRequest"
- | "Issues"
- | "Repositories"
- | "MultiLanguage"
- | "LongTimeUser"
- | "AncientUser"
- | "Organizations"
- | "JoinedGitHub";
-
-interface GitHubTrophiesProps extends GitHubStatsProps {
- trophyTypes?: TrophyType[];
-}
-
-export function GitHubTrophies({
- username,
- theme = "default",
- trophyTypes = [
- "Stars",
- "Commits",
- "PullRequest",
- "Repositories",
- "MultiLanguage",
- ],
-}: GitHubTrophiesProps) {
- if (!username) return null;
-
- // Join trophy types with commas for the API
- const titles = trophyTypes.join(",");
-
- return (
-
-
-
- );
-}
-
-export function GitHubMetricsSection({
- username,
- showStats = true,
- showLanguages = true,
- showStreak = true,
- showContributions = true,
- showTrophies = true,
- theme = "default",
- primaryColor,
- trophyTypes = [
- "Stars",
- "Commits",
- "PullRequest",
- "Repositories",
- "MultiLanguage",
- ],
-}: GitHubStatsProps) {
- if (!username) return null;
-
- return (
-
-
- GitHub Metrics
-
-
- {showStats && }
- {showLanguages && (
-
- )}
- {showStreak && }
- {showContributions && (
-
- )}
- {showTrophies && (
-
- )}
-
-
- );
-}
diff --git a/components/ui/atomic/layout-selector.tsx b/components/ui/atomic/layout-selector.tsx
deleted file mode 100644
index f5af11d..0000000
--- a/components/ui/atomic/layout-selector.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
- DropdownMenuSeparator,
- DropdownMenuLabel,
-} from "@/components/ui/dropdown-menu";
-import { LayoutGrid, Check } from "lucide-react";
-import type React from "react";
-
-import { Button } from "@/components/ui/button";
-
-interface LayoutOption {
- id: string;
- name: string;
- description?: string;
- icon?: React.ReactNode;
-}
-
-interface LayoutSelectorProps {
- layouts: LayoutOption[];
- currentLayout: string;
- onLayoutChange: (layoutId: string) => void;
- className?: string;
-}
-
-export function LayoutSelector({
- layouts,
- currentLayout,
- onLayoutChange,
- className,
-}: LayoutSelectorProps) {
- const selectedLayout =
- layouts.find((layout) => layout.id === currentLayout) || layouts[0];
-
- return (
-
-
-
-
-
- Select Layout
-
- {layouts.map((layout) => (
- onLayoutChange(layout.id)}
- className="flex items-center justify-between"
- >
-
- {layout.icon}
-
-
{layout.name}
- {layout.description && (
-
- {layout.description}
-
- )}
-
-
-
- {String(children).replace(/\n$/, "")}
-
- ) : (
-
- {children}
-
- );
- },
- img({ node, ...props }) {
- return (
- ![{props.alt]()
- );
- },
- a({ node, ...props }) {
- return (
-
- {props.children}
-
- );
- },
- }}
- >
- {markdown}
-
-
- {(label || valueLabel) && (
-
- {label && {label}}
- {valueLabel && {valueLabel}}
-
- )}
-
-
- {project.image && (
-
-
-
- )}
-
-
-
- {project.title}
-
-
-
- {project.description}
-
-
-
- {project.technologies.map((tech, index) => (
-
- {tech}
-
- ))}
-
-
-
-
-
- {projects.map((project, index) => (
-
- ))}
-
-
-
- {showDescription && (
-
- {repository.description || "No description provided"}
-
- )}
-
-
- {showLanguage && repository.language && (
-
-
-
- {repository.language}
-
-
- )}
-
- {showStats && (
-
-
-
- {repository.stars}
-
-
-
- {repository.forks}
-
-
- )}
-
-
- {repositories.map((repo, index) => (
-
- ))}
-
-
- );
-}
diff --git a/components/ui/atomic/section-manager.tsx b/components/ui/atomic/section-manager.tsx
deleted file mode 100644
index 7985893..0000000
--- a/components/ui/atomic/section-manager.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-"use client";
-
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
- DropdownMenuSeparator,
- DropdownMenuLabel,
- DropdownMenuCheckboxItem,
-} from "@/components/ui/dropdown-menu";
-import { Layers, MoveUp, MoveDown, Eye, EyeOff, Plus } from "lucide-react";
-import type React from "react";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import {
- Dialog,
- DialogContent,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-
-interface Section {
- id: string;
- name: string;
- icon?: React.ReactNode;
- visible: boolean;
-}
-
-interface SectionManagerProps {
- sections: Section[];
- onToggleSection: (sectionId: string) => void;
- onMoveSection: (sectionId: string, direction: "up" | "down") => void;
- onAddSection?: (sectionType: string) => void;
- availableSections?: Array<{
- type: string;
- name: string;
- description?: string;
- icon?: React.ReactNode;
- }>;
- className?: string;
-}
-
-export function SectionManager({
- sections,
- onToggleSection,
- onMoveSection,
- onAddSection,
- availableSections = [],
- className,
-}: SectionManagerProps) {
- const [dialogOpen, setDialogOpen] = useState(false);
-
- return (
-
-
-
-
-
-
- Sections
-
-
-
- {sections.map((section, index) => (
- onToggleSection(section.id)}
- className="flex items-center justify-between"
- >
-
- {section.icon}
- {section.name}
-
-
-
-
-
-
-
-
-
- ))}
-
-
- {onAddSection && availableSections.length > 0 && (
- <>
-
-
-
- )}
-
-
-
- {children}
-
- );
-}
-
-interface SectionHeadingProps {
- children: ReactNode;
- className?: string;
- color?: string;
- level?: 1 | 2 | 3;
-}
-
-export function SectionHeading({
- children,
- className,
- color,
- level = 2,
-}: SectionHeadingProps) {
- const styles = {
- color: color || undefined,
- };
-
- switch (level) {
- case 1:
- return (
-
- {children}
-
- );
- case 2:
- return (
-
- {children}
-
- );
- case 3:
- return (
-
- {children}
-
- );
- default:
- return (
-
- {children}
-
- );
- }
-}
-
-interface SectionContentProps {
- children: ReactNode;
- className?: string;
-}
-
-export function SectionContent({ children, className }: SectionContentProps) {
- return {children}
;
-}
-
-interface SectionDividerProps {
- className?: string;
- color?: string;
-}
-
-export function SectionDivider({ className, color }: SectionDividerProps) {
- const styles = {
- borderColor: color || undefined,
- };
-
- return
;
-}
diff --git a/components/ui/atomic/skill-badge.tsx b/components/ui/atomic/skill-badge.tsx
deleted file mode 100644
index 947a02a..0000000
--- a/components/ui/atomic/skill-badge.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import type React from "react";
-
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-interface SkillBadgeProps {
- skill: string;
- className?: string;
- variant?: "default" | "outline" | "secondary" | "destructive";
- color?: string;
- backgroundColor?: string;
- borderColor?: string;
-}
-
-export function SkillBadge({
- skill,
- className,
- variant = "default",
- color,
- backgroundColor,
- borderColor,
-}: SkillBadgeProps) {
- const styles = {
- color: color || undefined,
- backgroundColor: backgroundColor || undefined,
- borderColor: borderColor || undefined,
- };
-
- return (
-
- {skill}
-
- );
-}
-
-interface SkillsContainerProps {
- children: React.ReactNode;
- className?: string;
- centered?: boolean;
-}
-
-export function SkillsContainer({
- children,
- className,
- centered = false,
-}: SkillsContainerProps) {
- return (
-
- {children}
-
- );
-}
diff --git a/components/ui/atomic/social-link.tsx b/components/ui/atomic/social-link.tsx
deleted file mode 100644
index dd16447..0000000
--- a/components/ui/atomic/social-link.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Github, Twitter, Linkedin, Globe } from "lucide-react";
-import type React from "react";
-
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-type SocialPlatform = "github" | "twitter" | "linkedin" | "website";
-
-interface SocialLinkProps {
- platform: SocialPlatform;
- username?: string;
- url?: string;
- className?: string;
- color?: string;
- showIcon?: boolean;
- showLabel?: boolean;
- size?: "sm" | "md" | "lg";
-}
-
-export function SocialLink({
- platform,
- username,
- url,
- className,
- color,
- showIcon = true,
- showLabel = true,
- size = "md",
-}: SocialLinkProps) {
- if (!username && !url) return null;
-
- const getIcon = () => {
- switch (platform) {
- case "github":
- return ;
- case "twitter":
- return ;
- case "linkedin":
- return ;
- case "website":
- return ;
- }
- };
-
- const getLabel = () => {
- switch (platform) {
- case "github":
- return "GitHub";
- case "twitter":
- return "Twitter";
- case "linkedin":
- return "LinkedIn";
- case "website":
- return "Website";
- }
- };
-
- const getUrl = () => {
- switch (platform) {
- case "github":
- return `https://github.com/${username}`;
- case "twitter":
- return `https://twitter.com/${username}`;
- case "linkedin":
- return `https://linkedin.com/in/${username}`;
- case "website":
- return url;
- }
- };
-
- const getDefaultColor = () => {
- switch (platform) {
- case "github":
- return "#24292e";
- case "twitter":
- return "#1DA1F2";
- case "linkedin":
- return "#0A66C2";
- case "website":
- return "#4285F4";
- }
- };
-
- const styles = {
- backgroundColor: color || getDefaultColor(),
- color: "white",
- };
-
- return (
-
-
- {showIcon && getIcon()}
- {showLabel && {getLabel()}}
-
-
- );
-}
-
-interface SocialLinksContainerProps {
- children: React.ReactNode;
- className?: string;
- centered?: boolean;
-}
-
-export function SocialLinksContainer({
- children,
- className,
- centered = false,
-}: SocialLinksContainerProps) {
- return (
-
- {children}
-
- );
-}
diff --git a/components/ui/atomic/stat-card.tsx b/components/ui/atomic/stat-card.tsx
deleted file mode 100644
index 9539827..0000000
--- a/components/ui/atomic/stat-card.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type React from "react";
-
-import { cn } from "@/lib/utils";
-
-interface StatCardProps {
- value: number | string;
- label: string;
- className?: string;
- valueClassName?: string;
- labelClassName?: string;
-}
-
-export function StatCard({
- value,
- label,
- className,
- valueClassName,
- labelClassName,
-}: StatCardProps) {
- return (
-
- );
-}
-
-interface StatsGridProps {
- children: React.ReactNode;
- className?: string;
- columns?: 1 | 2 | 3 | 4;
-}
-
-export function StatsGrid({
- children,
- className,
- columns = 4,
-}: StatsGridProps) {
- return (
-
- {children}
-
- );
-}
diff --git a/components/ui/atomic/tech-stack.tsx b/components/ui/atomic/tech-stack.tsx
deleted file mode 100644
index ecbed14..0000000
--- a/components/ui/atomic/tech-stack.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import Image from "next/image";
-
-import { Container } from "./container";
-import { Section, SectionHeading } from "./section";
-
-interface TechItem {
- name: string;
- icon?: string;
- category?: string;
- proficiency?: number;
-}
-
-interface TechStackProps {
- items: TechItem[];
- title?: string;
- className?: string;
- primaryColor?: string;
- secondaryColor?: string;
- showProficiency?: boolean;
- categorized?: boolean;
-}
-
-export function TechStack({
- items,
- title = "Tech Stack",
- className,
- primaryColor,
- secondaryColor,
- showProficiency = false,
- categorized = false,
-}: TechStackProps) {
- if (!items || items.length === 0) return null;
-
- // Group by category if categorized is true
- const groupedItems = categorized
- ? items.reduce((acc, item) => {
- const category = item.category || "Other";
- if (!acc[category]) acc[category] = [];
- acc[category].push(item);
- return acc;
- }, {} as Record)
- : { All: items };
-
- return (
-
-
- {title}
-
-
- {categorized ? (
- Object.entries(groupedItems).map(([category, categoryItems]) => (
-
-
- {category}
-
-
-
- {categoryItems.map((item, index) => (
-
- ))}
-
-
-
- {items.map((item, index) => (
-
- ))}
-
-
- )}
-
- );
-}
-
-interface TechItemProps {
- item: TechItem;
- showProficiency: boolean;
- primaryColor?: string;
-}
-
-function TechItem({ item, showProficiency, primaryColor }: TechItemProps) {
- return (
-
- {item.icon ? (
-
-
-
- ) : (
-
- {item.name.charAt(0)}
-
- )}
-
-
{item.name}
-
- {showProficiency && item.proficiency !== undefined && (
-
- )}
-
-
-
Preview
-
-
-
-
-
-
-
-
-
-
- Visual Preview
-
-
-
-
-
-
-
-
-
- {/* Timeline line */}
- {!isLast && (
-
- )}
-
- {/* Timeline dot */}
-
-
-
-
-
- {item.title}
- {item.organization && (
- β’ {item.organization}
- )}
-
-
- {item.period}
-
-
-
- {item.description && (
-
- {item.description}
-
- )}
-
- {item.tags && item.tags.length > 0 && (
-
- {item.tags.map((tag, index) => (
-
- {tag}
-
- ))}
-
- )}
-
-
-));
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<
- HTMLLIElement,
- React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-
-));
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
- HTMLAnchorElement,
- React.ComponentPropsWithoutRef<"a"> & {
- asChild?: boolean;
- }
->(({ asChild, className, ...props }, ref) => {
- const Comp = asChild ? Slot : "a";
-
- return (
-
- );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<
- HTMLSpanElement,
- React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({
- children,
- className,
- ...props
-}: React.ComponentProps<"li">) => (
- svg]:w-3.5 [&>svg]:h-3.5", className)}
- {...props}
- >
- {children ?? }
-
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({
- className,
- ...props
-}: React.ComponentProps<"span">) => (
-
-
- More
-
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
- Breadcrumb,
- BreadcrumbList,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbPage,
- BreadcrumbSeparator,
- BreadcrumbEllipsis,
-};
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
deleted file mode 100644
index bc6c54e..0000000
--- a/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { Slot } from "@radix-ui/react-slot";
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
- icon: "h-10 w-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean;
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button";
- return (
-
- );
- }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
deleted file mode 100644
index 95266d6..0000000
--- a/components/ui/calendar.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-"use client";
-
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import * as React from "react";
-import { DayPicker } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-export type CalendarProps = React.ComponentProps;
-
-function Calendar({
- className,
- classNames,
- showOutsideDays = true,
- ...props
-}: CalendarProps) {
- return (
- ,
- IconRight: ({ ...props }) => ,
- }}
- {...props}
- />
- );
-}
-Calendar.displayName = "Calendar";
-
-export { Calendar };
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
deleted file mode 100644
index 7727845..0000000
--- a/components/ui/card.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
- 
