Gradfolio is a specialized platform designed to bridge the gap between academic coursework and industry recruitment. It enables students to showcase their academic projects, skills, and achievements in a professional manner, acting as an expanded online resume where every claim is backed by tangible proof.
The goal of Gradfolio is to provide a "show, don't tell" platform for students. By combining the structured career timeline of LinkedIn with the project-centric evidence of GitHub, Gradfolio allows graduates to prove their competencies with more than just grades or bullet points on a CV.
- Artifact-Driven Validation: Every skill or experience is backed by proof (code repositories, reports, videos).
- Unified Professional Narrative: A longitudinal record of a student's development from freshman year to early career.
- Bridging the Academic-Industry Gap: Translating academic rigor into recruiter-friendly highlights with structured templates and AI-assisted summaries.
- Multi-Option Sign-Up: Secure registration via Email/Password or OAuth (Google, LinkedIn, GitHub) powered by Auth0.
- Profile Initialization: Quick setup for basic info and professional headlines.
- Account Linking: Connect professional identities for verification and data import.
- LinkedIn Import: Automatically populate Work Experience, Education, and Certifications from your LinkedIn profile.
- GitHub Projects: Import repositories as project entries, including metadata like primary languages, stars/forks, and README content.
- Comprehensive Sections: Education, Experience, Projects, Certifications, and Skills.
- Verification Badges: Credibility indicators for verified email, phone, and linked professional accounts.
- Interactive Skills Tag Cloud: Clickable skill badges that lead to related evidence and projects.
- Project Detail Pages: Dedicated spaces for in-depth project documentation and case studies.
- AI-Generated Summaries: Smart taglines that highlight the essence of a project (Powered by AI).
- Multimedia Evidence: Support for embedding demo videos, screenshots, and PDF reports.
- Teammate Tagging: Collaboration features that allow group projects to appear on all members' profiles with proper attribution.
- Global Search: Robust search bar to find talent or projects by name, skill, technology, or institution.
- Resume PDF Generator: Instantly generate a professional, formatted resume from your portfolio data.
- Portfolio Sharing: Streamlined email sharing integration for job applications.
Gradfolio is built upon a detailed feature specification that addresses the gaps in current academic portfolio platforms.
- "Show, Don't Tell": Every skill or claim is backed by tangible artifacts (code, videos, reports).
- Unified Narrative: A single, longitudinal record from freshman year to first job and beyond.
- Academic Rigor meets Industry Needs: Translating complex academic projects into clear, recruiter-friendly case studies.
The design was informed by analyzing platforms like Portfolium and Bulb, identifying the need for:
- Deeper technical integration (GitHub README support, code previews).
- Independent, student-driven identity (not locked to a single institution).
- Standardized, scannable layouts optimized for recruiters.
Tip
View the Full Specification: For a deep dive into the architecture, verification mechanisms, and future roadmap, read the Detailed Feature Specification.
- Framework: Next.js 15 (App Router)
- Library: React 19
- UI Components: Material UI (MUI) v7
- Authentication: Auth0
- Styling: Emotion & Styled Components
- Animations: Motion
- Deployment: Vercel
- Node.js 18.17 or later
- npm / yarn / pnpm
-
Clone the repository
git clone https://github.com/your-username/gradfolio.git cd gradfolio -
Install dependencies
npm install
-
Set up environment variables Create a
.env.localfile in the root and add your Auth0 credentials:AUTH0_SECRET='your_secret' APP_BASE_URL='http://localhost:3000' AUTH0_DOMAIN='your-domain.auth0.com' AUTH0_CLIENT_ID='your_client_id' AUTH0_CLIENT_SECRET='your_client_secret'
-
Run the development server
npm run dev
Visit http://localhost:3000 to see the application in action.
src/
├── app/ # Next.js App Router (pages, layouts, API)
├── components/ # Reusable UI components (Dashboard, Profile, Stepper)
├── data/ # Mock data and localizations (locales)
├── lib/ # Third-party library configurations (Auth0)
├── utils/ # Helper functions, types, and constants
├── styles/ # Global styles and MUI theme
└── features/ # Feature-specific logic and components
Developed as a modern solution for student career advancement.