0xmetaschool/
GitHub Profile Generator GPT
Create stunning GitHub profile READMEs effortlessly with our AI-powered generator. This tool helps developers showcase their skills, projects, and personality through beautifully crafted GitHub profile pages. Whether you're a beginner looking to create your first GitHub profile or an experienced developer wanting to refresh your online presence, our generator provides a personalized and professional solution. Built with Next.js and powered by AI technology, this open-source project helps developers create engaging and dynamic GitHub profile READMEs.
Readme
Source Codeapp
api
auth
context
create
dashboard
preview
receipt
globals.css
layout.tsx
page.tsx
components
context
lib
.eslintrc.json
.gitignore
components.json
LICENSE
middleware.ts
next.config.mjs
package.json
postcss.config.mjs
readme.md
tailwind.config.ts
test-theme.md
tsconfig.json
app
page.tsx
page.tsxpage.tsx
1"use client";
2import { Button } from "@/components/ui/button";
3import AnimatedCatLogo from "@/components/ui/animatedCatLogo";
4import { motion } from "framer-motion";
5import { useRouter } from "next/navigation";
6import { GitHubIcon } from "@/components/ui/icons";
7import { createClient } from "@/lib/supabase";
8import { useState } from "react";
9import LoadingSpinner from "@/components/ui/loading-spinner";
10
11export default function Home() {
12 const [isLoading, setIsLoading] = useState(false);
13
14 const handleGitHubSignIn = async () => {
15 try {
16 setIsLoading(true);
17 const supabase = createClient();
18
19 const { error } = await supabase.auth.signInWithOAuth({
20 provider: "github",
21 options: {
22 redirectTo: `${window.location.origin}/auth/callback`,
23 queryParams: {
24 access_type: "offline",
25 prompt: "consent",
26 },
27 },
28 });
29
30 if (error) throw error;
31 } catch (error) {
32 console.error("Sign in error:", error);
33 setIsLoading(false);
34 }
35 };
36 return (
37 <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4">
38 <div className="w-full max-w-[1400px] mx-auto">
39 <div className="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-24 py-8 lg:py-16">
40 <div className="flex items-center justify-center w-full lg:w-auto shrink-0 lg:flex-grow">
41 <AnimatedCatLogo />
42 </div>
43 <div className="flex flex-col items-center lg:items-start justify-center gap-2 lg:gap-8 w-full lg:max-w-2xl">
44 <div className="flex flex-col items-center lg:items-start gap-4 w-full">
45 <h1 className="text-center lg:text-left text-8xl lg:text-7xl font-bold text-foreground">
46 GitHub Profile Generator
47 </h1>
48 <p className="text-center lg:text-left text-lg lg:text-2xl text-muted-foreground">
49 Create an awesome GitHub profile in seconds using AI
50 </p>
51 </div>
52
53 <div className="flex flex-col items-center lg:items-start gap-6">
54 <motion.div
55 initial={{ opacity: 0, y: 20 }}
56 animate={{ opacity: 1, y: 0 }}
57 transition={{ duration: 0.5, delay: 0.2 }}
58 className="w-full"
59 >
60 <Button
61 onClick={handleGitHubSignIn}
62 variant="outline"
63 size="lg"
64 className="w-full lg:w-auto px-4 lg:px-16 bg-black text-white dark:bg-white dark:text-black text-xl"
65 disabled={isLoading}
66 >
67 {isLoading ? (
68 <LoadingSpinner size="sm" className="mr-2" />
69 ) : (
70 <GitHubIcon className="mr-2 h-6 w-6" />
71 )}
72 {isLoading ? "Connecting..." : "Continue with GitHub"}
73 </Button>
74 </motion.div>
75 <p className="text-base lg:text-lg text-center lg:text-left text-muted-foreground">
76 No credit card required. Login with GitHub to get started.
77 </p>
78 </div>
79 </div>
80 </div>
81 </div>
82 </div>
83 );
84}
85Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4o
Contributors 1
Open in
Last updated 2 months ago
We are a open source platform and encourage community to contribute to these templates!