<div align="center">

DevFolio

A sleek, modern developer portfolio with dark theme & smooth animations

**✨ Live Site • 🔍 Source Code

</div> <hr> <div align="center"> <p>A developer portfolio featuring floating interactive icons, transparent certification badges, and zen mode — all with a touch-optimized mobile experience.</p> </div>

🙏 Credits and Inspirations

This project is created on the top of excellent work by Atzin Escandia. Original repository: atzin-escandia-devfolio

🌟 Features

• Responsive Design: Looks great on all devices - mobile, tablet, and desktop
• Dynamic Floating Icons: Interactive animations with customizable tech icons that represent your skills
• Zen Mode: Toggle to hide text and focus on the visual elements
• Local Credly Badge Display: Uses transparent Openbadge 3.0 PNG images instead of iframes for a cleaner look
• Smooth Animations: Beautiful transitions and scroll effects using Framer Motion
• Circuit Pattern Background: Animated elements that create a tech-focused aesthetic
• Touch-Optimized: Enhanced mobile experience with responsive touch targets
• Dark Theme: Modern dark theme with gradient accents

🚀 Getting Started

1. Clone this repository

git clone https://github.com/drtinkerer/devfolio.git

2. Navigate to the project directory

cd devfolio

3. Install dependencies

yarn install

4. Run the development server

yarn dev

5. Open http://localhost:3000 with your browser to see the result.

🎨 Customization

Personalizing Your Portfolio

All the content of your portfolio can be customized by editing the files in the data/ directory:

1. Personal Information (data/personal.ts)

Update your identities and professional description:

// Array of professional identities to display in the hero section
export const identities = [
  "a Developer 💻",
  "a Designer 🎨",
  // Add your own identities
];

// Professional description paragraphs for the hero section
export const professionalDescription = {
  paragraph1: "With X years of professional experience, I specialize in... [your main professional paragraph]",
  paragraph2: "Let's transform your ideas into reality! 🚀"
};

2. Projects (data/projects.ts)

Showcase your projects by editing this file with your project details, including:

• Title, description, and image URL
• Technologies used
• GitHub repository and live site links

3. Experience (data/experience.ts)

Edit your work experience history with:

• Company names, positions, and durations
• Responsibilities and achievements
• Company logos and links

4. Certifications (data/certifications.ts)

Add your professional certifications:

export const certifications: Certification[] = [
  {
    id: 1,
    title: "Your Certification Name",
    issuer: "Certification Issuer",
    date: "Month Year",
    credlyBadgeId: "your-credly-badge-id" // From your Credly badge URL
  },
  // Add more certifications...
];

5. Tech Stack (data/tech-stack.ts)

Update the technologies you're proficient in.

6. Navigation (data/navigation.ts)

Customize the navigation menu items if needed.

Setting Up Credly Badges

This portfolio uses local OpenBadge 3.0 PNG images instead of iFrames for Credly badges. OpenBadge 3.0 is an open standard for verifiable digital credentials that includes transparent PNGs with embedded metadata about the achievement :

1. Get your badge ID: For each certification on Credly, get the badge ID from your public URL (e.g., https://www.credly.com/badges/1a2b3c4d-5e6f-7g8h-9i0j/public_url → badge ID is 1a2b3c4d-5e6f-7g8h-9i0j)

2. Download badge images:

   • Go to your Credly badge page
   • Click on "Share" and then "Download" to get the badge in OpenBadge 3.0 format
   • Save the transparent PNG with your badge ID as the filename (e.g., 1a2b3c4d-5e6f-7g8h-9i0j.png)

3. Add badges to your project:

   • Place all badge PNG files in the /public/credly-badges/ directory
   • Each badge should be named exactly with the badge ID and .png extension

Adding Your Own Tech Icons

1. Place your SVG icons in the public/floating-icons directory
2. The icons will be automatically loaded and displayed in the background
3. Icons will inherit the floating animation and click interactions
4. For a large collection of tech icons, refer to Tech Icons

Modifying Colors

The color scheme can be customized in the tailwind.config.js file:

theme: {
  extend: {
    colors: {
      electricBlue: {...},
      circuitGreen: {...},
      steelGray: {...},
      brushedAluminum: {...}
    }
  }
}

🛠️ Technologies & Tools

Frontend Framework

• Next.js - React framework for production-grade applications

Styling

• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library for React

Vibe Coding Stack

• Windsurf - Agentic AI IDE
• Cursor - AI-powered code editor
• Bolt.DIY - Open Source Web based AI coding assistant
• Gemini 2.5 Experimental - Advanced AI thinking model by Google
• Claude AI - Large language model for generating code based on human instructions

Deployment

• Vercel - Cloud platform for static and serverless deployment

📝 License

This project is open source and available under the MIT License. Feel free to use, modify, and redistribute this project as you see fit.

🚀 Deployment

This portfolio can be easily deployed to various platforms:

Vercel (Recommended)

1. Create an account on Vercel
2. Connect your GitHub repository
3. Click 'Import' and follow the prompts

Netlify

1. Create an account on Netlify
2. Click 'New site from Git'
3. Connect your GitHub repository

Docker Deployment

1. Build the Docker image:

docker build -t devfolio .

2. Run the Docker container:

docker run -p 3000:3000 devfolio

Docker Deployment Options

Local Development

• Builds and runs the Next.js application in a containerized environment
• Useful for consistent development across different machines

Production Deployment

• Can be used with container orchestration platforms like:
  • Kubernetes
  • AWS ECS
  • Google Cloud Run

Note: Ensure you have a Dockerfile in your project root configured for Next.js deployment.

📱 Mobile Optimization

This portfolio is optimized for mobile devices with:

• Single tap navigation (no more double-tapping required)
• Larger touch targets for better accessibility
• Custom cursor disabled on touch devices
• Responsive layouts that adapt to screen size

🤝 Contributing

Contributions, issues, and feature requests are always welcome! Feel free to check the issues page.

💫 Show your support

Give a ⭐️ if you like this project!