{"id":25213955,"url":"https://github.com/leandroppf/portfolio-leandroppf","last_synced_at":"2026-04-11T00:10:03.354Z","repository":{"id":276532232,"uuid":"929541522","full_name":"leandroppf/portfolio-leandroppf","owner":"leandroppf","description":"Leandro Pedroso's Portfolio","archived":false,"fork":false,"pushed_at":"2025-03-14T03:20:48.000Z","size":100,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T04:25:27.301Z","etag":null,"topics":["css","html","nextjs","reactjs","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://leandroppf.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leandroppf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-08T19:34:15.000Z","updated_at":"2025-03-14T03:20:51.000Z","dependencies_parsed_at":"2025-03-14T04:23:15.895Z","dependency_job_id":null,"html_url":"https://github.com/leandroppf/portfolio-leandroppf","commit_stats":null,"previous_names":["leandroppf/portfolio-leandroppf"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandroppf%2Fportfolio-leandroppf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandroppf%2Fportfolio-leandroppf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandroppf%2Fportfolio-leandroppf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leandroppf%2Fportfolio-leandroppf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leandroppf","download_url":"https://codeload.github.com/leandroppf/portfolio-leandroppf/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247307811,"owners_count":20917551,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","nextjs","reactjs","tailwindcss","typescript"],"created_at":"2025-02-10T16:58:03.722Z","updated_at":"2025-12-30T23:07:25.421Z","avatar_url":"https://github.com/leandroppf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Leandro Pedroso - Portfolio Website\n\nA modern, responsive personal portfolio website showcasing professional experience, projects, and skills. Built with cutting-edge web technologies and designed with accessibility and performance in mind.\n\n## 🚀 Technologies Used\n\n### Frontend Framework\n- **[Next.js 15.1.6](https://nextjs.org/)** - React-based full-stack framework with App Router\n- **[React 19](https://react.dev/)** - Latest version with enhanced features and performance\n- **[TypeScript 5](https://www.typescriptlang.org/)** - Type-safe JavaScript development\n\n### Styling \u0026 UI\n- **[Tailwind CSS 3.4](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[Fira Code Font](https://github.com/tonsky/FiraCode)** - Monospaced font with programming ligatures\n- **[Phosphor Icons](https://phosphor-icons.com/)** - Modern icon library for React\n- **Custom CSS Variables** - For theme management and dark/light mode support\n\n### Developer Experience\n- **[ESLint 9](https://eslint.org/)** - Code linting and quality enforcement\n- **[Prettier 3.4](https://prettier.io/)** - Code formatting with Tailwind CSS plugin\n- **[TypeScript](https://www.typescriptlang.org/)** - Static type checking\n- **[PostCSS](https://postcss.org/)** - CSS processing and optimization\n\n### Utilities \u0026 Libraries\n- **[clsx](https://github.com/lukeed/clsx)** - Conditional className utility\n- **[tailwind-merge](https://github.com/dcastil/tailwind-merge)** - Merge Tailwind CSS classes efficiently\n\n## 📁 Project Structure\n\n```\n├── public/                  # Static assets\n│   ├── projects/           # Project images and assets\n│   ├── brand.svg          # Brand logo\n│   └── leandro_pedroso.pdf # Resume/CV\n├── src/\n│   ├── app/               # Next.js App Router directory\n│   │   ├── components/    # React components\n│   │   │   ├── Experience.tsx\n│   │   │   ├── ExperienceCard.tsx\n│   │   │   ├── Header.tsx\n│   │   │   ├── Navigation.tsx\n│   │   │   ├── ProjectCard.tsx\n│   │   │   ├── Projects.tsx\n│   │   │   ├── Skills.tsx\n│   │   │   ├── Spotlight.tsx\n│   │   │   └── ...\n│   │   ├── globals.css    # Global styles and CSS variables\n│   │   ├── layout.tsx     # Root layout component\n│   │   └── page.tsx       # Home page\n│   ├── data/              # Content data\n│   │   ├── experience.json # Professional experience data\n│   │   └── project.json   # Portfolio projects data\n│   ├── models/            # TypeScript type definitions\n│   │   ├── experience.ts  # Experience data types\n│   │   └── project.ts     # Project data types\n│   └── utils/             # Utility functions\n│       └── cn.ts          # className utility function\n├── package.json           # Dependencies and scripts\n├── tailwind.config.ts     # Tailwind CSS configuration\n├── tsconfig.json          # TypeScript configuration\n├── next.config.ts         # Next.js configuration\n├── postcss.config.mjs     # PostCSS configuration\n├── eslint.config.mjs      # ESLint configuration\n└── .prettierrc            # Prettier configuration\n```\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- **Node.js** (v18 or higher)\n- **npm**, **yarn**, **pnpm**, or **bun** package manager\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd portfolio\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   # or\n   bun install\n   ```\n\n### Development\n\nStart the development server with Turbopack for faster builds:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nThe application will be available at [http://localhost:3000](http://localhost:3000).\n\n### Development with Debugging\n\nFor debugging purposes, you can start the development server with Node.js inspector:\n\n```bash\nnpm run dev:inspect\n```\n\nThis enables debugging capabilities for IDE integration.\n\n## 🏗️ Build \u0026 Deploy\n\n### Building for Production\n\nCreate an optimized production build:\n\n```bash\nnpm run build\n```\n\nThis command:\n- Compiles TypeScript to JavaScript\n- Optimizes and bundles all assets\n- Generates static pages where possible\n- Creates a `.next` directory with production files\n\n### Running Production Build Locally\n\nTest the production build locally:\n\n```bash\nnpm run start\n```\n\n### Deployment Options\n\n#### Vercel (Recommended)\n1. Connect your repository to [Vercel](https://vercel.com)\n2. Vercel automatically detects Next.js and deploys with optimal settings\n3. Automatic deployments on every push to main branch\n\n#### Other Platforms\n- **Netlify**: Works with Next.js static export\n- **Docker**: Can be containerized for any cloud provider\n- **Traditional hosting**: Use `next export` for static sites\n\n### Environment Variables\n\nIf you need environment variables, create a `.env.local` file:\n\n```env\nNEXT_PUBLIC_SITE_URL=https://yourdomain.com\n# Add other environment variables as needed\n```\n\n## 🎨 Customization\n\n### Content Management\n\n#### Experience Data\nEdit `src/data/experience.json` to update professional experience:\n\n```json\n{\n  \"company\": {\n    \"name\": \"Company Name\",\n    \"website\": \"https://company.com\",\n    \"location\": {\n      \"city\": \"City\",\n      \"state\": \"State\",\n      \"country\": \"Country\"\n    }\n  },\n  \"positions\": [{\n    \"title\": \"Job Title\",\n    \"description\": \"HTML-formatted description\",\n    \"startDate\": \"Mon YYYY\",\n    \"endDate\": \"Mon YYYY\", // or \"Present\"\n    \"skills\": [\"Skill1\", \"Skill2\"]\n  }]\n}\n```\n\n#### Projects Data\nEdit `src/data/project.json` to update portfolio projects:\n\n```json\n{\n  \"title\": \"Project Name\",\n  \"description\": \"Project description\",\n  \"imageURL\": \"/projects/image.png\",\n  \"githubURL\": \"https://github.com/user/repo\",\n  \"liveURL\": \"https://project-url.com\",\n  \"technologies\": [\"Tech1\", \"Tech2\"]\n}\n```\n\n### Styling \u0026 Theme\n\n#### Color Scheme\nModify CSS variables in `src/app/globals.css`:\n\n```css\n:root {\n  --background: #fdf7e9;  /* Light background */\n  --foreground: #ecb365;  /* Accent color */\n  --primary: #2a4d69;     /* Primary text */\n  --secondary: #5591b9;   /* Secondary text */\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --background: #041c32;  /* Dark background */\n    --foreground: #2a4d69;  /* Dark accent */\n    --primary: #ecb365;     /* Dark primary text */\n    --secondary: #a2d2ff;   /* Dark secondary text */\n  }\n}\n```\n\n#### Tailwind Configuration\nExtend Tailwind CSS in `tailwind.config.ts`:\n\n```typescript\nextend: {\n  colors: {\n    background: 'var(--background)',\n    foreground: 'var(--foreground)',\n    primary: 'var(--primary)',\n    secondary: 'var(--secondary)',\n    // Add custom colors\n  },\n  // Add custom spacing, fonts, etc.\n}\n```\n\n## 🧩 Component Architecture\n\n### Core Components\n\n- **Header.tsx**: Hero section with personal information and navigation\n- **Experience.tsx**: Professional experience timeline\n- **Projects.tsx**: Portfolio projects showcase\n- **Navigation.tsx**: Smooth scrolling navigation menu\n- **Spotlight.tsx**: Interactive background effect\n- **Section.tsx**: Reusable section wrapper with consistent styling\n\n### Component Patterns\n\n- **Composition**: Components are designed to be composable and reusable\n- **TypeScript**: Full type safety with defined interfaces\n- **Accessibility**: ARIA labels, semantic HTML, keyboard navigation\n- **Responsive Design**: Mobile-first approach with Tailwind breakpoints\n\n## 📦 Library Documentation\n\n### @phosphor-icons/react\nModern, customizable icons with consistent design language.\n\n```tsx\nimport { GithubLogo, Globe } from '@phosphor-icons/react'\n\n\u003cGithubLogo size={20} className=\"text-primary\" /\u003e\n```\n\n### clsx \u0026 tailwind-merge\nUtility for conditional and merged className management.\n\n```tsx\nimport { cn } from '@/utils/cn'\n\nconst className = cn(\n  'base-class',\n  isActive \u0026\u0026 'active-class',\n  'override-class'\n)\n```\n\n### Fira Code Font\nMonospaced font with programming ligatures, loaded via `next/font/google`.\n\n## 🔧 Development Commands\n\n```bash\n# Development\nnpm run dev          # Start development server\nnpm run dev:inspect  # Start with debugging enabled\n\n# Production\nnpm run build        # Build for production\nnpm run start        # Start production server\n\n# Code Quality\nnpm run lint         # Run ESLint\nnpx prettier --write . # Format code with Prettier\n```\n\n## 🚀 Performance Features\n\n- **Next.js App Router**: Improved performance and developer experience\n- **Static Generation**: Pages pre-rendered at build time where possible\n- **Image Optimization**: Automatic image optimization with Next.js\n- **Font Optimization**: Self-hosted Google Fonts with preloading\n- **CSS Optimization**: Tailwind CSS purging and PostCSS optimization\n- **Bundle Analysis**: Optimized bundle size with tree shaking\n\n## 🌐 Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## 📄 License\n\nThis project is personal portfolio code. Feel free to use as inspiration for your own portfolio, but please don't copy the content directly.\n\n## 🤝 Contributing\n\nThis is a personal portfolio, but suggestions and improvements are welcome! Feel free to:\n\n1. Open an issue for bugs or suggestions\n2. Submit a pull request for improvements\n3. Share feedback on design or functionality\n\n## 📞 Contact\n\n- **Website**: [leandroppf.com](https://leandroppf.com)\n- **GitHub**: Check the repository for contact information\n- **Resume**: Available at `/leandro_pedroso.pdf`\n\n---\n\nBuilt with ❤️ using Next.js, TypeScript, and Tailwind CSS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandroppf%2Fportfolio-leandroppf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleandroppf%2Fportfolio-leandroppf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleandroppf%2Fportfolio-leandroppf/lists"}