{"id":22935043,"url":"https://github.com/sofidevo/portfolio-fullstack","last_synced_at":"2025-08-12T18:31:19.210Z","repository":{"id":247541402,"uuid":"824321294","full_name":"SofiDevO/portfolio-fullstack","owner":"SofiDevO","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-09T03:48:33.000Z","size":3527,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-09T04:46:11.847Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SofiDevO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":"SofiDevO","patreon":null,"open_collective":null,"ko_fi":"sofidev","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"custom":null}},"created_at":"2024-07-04T21:31:41.000Z","updated_at":"2024-08-09T03:48:36.000Z","dependencies_parsed_at":"2024-07-09T09:31:40.170Z","dependency_job_id":"f1c7f337-73df-47b3-890b-e4fa4bde7264","html_url":"https://github.com/SofiDevO/portfolio-fullstack","commit_stats":null,"previous_names":["sofidevo/portfolio-fullstack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fportfolio-fullstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fportfolio-fullstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fportfolio-fullstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SofiDevO%2Fportfolio-fullstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SofiDevO","download_url":"https://codeload.github.com/SofiDevO/portfolio-fullstack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229699852,"owners_count":18109852,"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":[],"created_at":"2024-12-14T11:46:11.695Z","updated_at":"2024-12-14T11:46:12.334Z","avatar_url":"https://github.com/SofiDevO.png","language":"JavaScript","funding_links":["https://github.com/sponsors/SofiDevO","https://ko-fi.com/sofidev"],"categories":[],"sub_categories":[],"readme":"### start using this template by running:\n `npm create astro@latest -- --template SofiDevO/portfolio-sofidev-garrux`\n# Portfolio Template with Astro\n\nWelcome to the Portfolio Template built with Astro! This responsive template allows you to showcase all your projects with an amazing UI. Below you'll find instructions on how to use this template, including how to add new portfolio items, main dependencies, and examples of usage.\n\n![Portada](image-1.png)\n## Table of Contents\n\n1. [Usage](#usage)\n2. [Portfolio Data Format](#portfolio-data-format)\n3. [Adding Icons with Iconify](#adding-icons-with-iconify)\n4. [Technologies Used](#technologies-used)\n5. [Figma Design](#figma-design)\n6. [Author and License](#author-and-license)\n7. [Bugs and Issues](#bugs-and-issues)\n8. [Homepage](#homepage)\n\n## Usage\n\nTo add new elements to your portfolio, you need to add them in `/src/data/portfolioData.js`.\n\n## Portfolio Data Format\n\nThe data for your portfolio should follow this format:\n\n```js\n/**\n * @typedef PortfolioData\n * @property {string} imgSrc - URL of the image\n * @property {string} title - Title of the card\n * @property {string[]} skills - Array of your skills, e.g., ['React', 'CSS', 'JavaScript']\n * @property {string} description - Description of the card\n * @property {string} demoURL - URL of a demo page\n * @property {string} repoURL - URL of the repository, e.g., https://github.com/user/repo\n * @property {string} anim - Animation that will play when the card loads, e.g., fade-up, fade-right, fade-left, fade-down\n * @property {number} averageBrightness - Brightness level of the card's background color, e.g., 0.1\n */\n\n/**\n * @type {PortfolioData[]}\n */\nexport const portfolioData = [\n    {\n        imgSrc: 'https://dt2sdf0db8zob.cloudfront.net/wp-content/uploads/2021/06/copy-of-the-6-best-restaurant-website-templates-1.png',\n        title: 'Restaurant',\n        skills: ['React', 'StyledComponents'],\n        description: 'Laboris ex laboris mollit esse fugiat aute cillum nostrud enim dolor sit. Reprehenderit et non nulla irure aute nostrud commodo aute.',\n        demoURL: '',\n        repoURL: '',\n        anim: 'fade-right',\n    },\n    {\n        imgSrc: 'https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/299377097/original/7eb7dcebe244fcf5ad75d92b0969fc116946bd57/create-professional-amd-responsive-wordpress-website.jpg',\n        title: 'E-commerce',\n        skills: ['JavaScript', 'Bootstrap'],\n        description: 'Laboris ex laboris mollit esse fugiat aute cillum nostrud enim dolor sit. Reprehenderit et non nulla irure aute nostrud commodo aute.',\n        demoURL: '',\n        repoURL: '',\n        anim: 'fade-up',\n        averageBrightness: 0.1,\n    },\n    // Add more portfolio items here\n];\n\nconst skillIcons = {\n    JavaScript: 'skill-icons:javascript',\n    React: 'skill-icons:react-dark',\n    Astro: 'skill-icons:astro',\n    CSS: 'skill-icons:css',\n    Sass: 'skill-icons:sass',\n    StyledComponents: 'skill-icons:styledcomponents',\n    Bootstrap: 'skill-icons:bootstrap',\n    Tailwind: 'skill-icons:tailwindcss-dark',\n};\n\n/**\n * @description Maps portfolioData to include skill icons\n */\nexport const getPortfolioData = portfolioData.map((item) =\u003e ({\n    ...item,\n    skills: item.skills.map((skill) =\u003e skillIcons[skill]),\n}));\n```\n\nThis data is then passed to the portfolio component as props.\n\n## Adding Icons with Iconify\n\nWe use Iconify for icons. To add new icons, use the `icon` attribute.\n\n### Example\n\nTo use a React icon:\n\n```html\n\u003ciconify-icon icon=\"logos:react\" width=\"27\" height=\"27\"\u003e\u003c/iconify-icon\u003e\n```\n\nIn `data.js`, specify the icon identifier like this:\n\n```js\n{\n    title: \"React\",\n    link: \"https://reactjs.org/\",\n    icon: \"logos:react\"\n}\n```\n\n### Adding the Iconify Script\n\nAdd the Iconify script to the `\u003chead\u003e` section of your project:\n\n```html\n\u003chead\u003e\n    \u003cscript src=\"https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nOnce this script is included, you can use any Iconify icon by specifying its identifier.\n\n## Technologies Used\n\nThis template leverages several modern technologies to create a highly responsive and visually appealing portfolio:\n\n- **Astro**: A modern static site builder that allows you to use your favorite frameworks such as React, Vue, and Svelte. It optimizes for performance by shipping less JavaScript.\n- **React**: A JavaScript library for building user interfaces, which allows for the creation of reusable components.\n- **Tailwind CSS**: A utility-first CSS framework that enables you to design directly in your markup, providing flexibility and control over your styling.\n- **Styled Components**: A library for React and React Native that allows you to use component-level styles in your application. It utilizes tagged template literals to style components.\n- **Iconify**: A comprehensive library for icons that provides access to thousands of icons from different collections, all accessible via a single syntax.\n\n## Figma Design\n\nYou can view and edit the design of this template on Figma. Here is the [Figma design link](https://www.figma.com/design/15EteAKw8d0QCNCucw5lft/mi-primer-blog?node-id=200-643\u0026t=hbUqn1hqSfLcfI92-0).\n\n## Author and License\n\n- **Author**: SofiDev / Garrux\n- **License**: MIT\n\n## Bugs and Issues\n\nIf you encounter any bugs or have issues, please report them [here](https://github.com/SofiDevO/portfolio-astrosofidev-garrux/issues).\n\n## Homepage\n\nFor more information and detailed documentation, visit the [homepage](https://github.com/SofiDevO/portfolio-astrosofidev-garrux#readme).\n\n---\n\nEnjoy building your portfolio! If you have any questions or run into any issues, feel free to reach out.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofidevo%2Fportfolio-fullstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsofidevo%2Fportfolio-fullstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsofidevo%2Fportfolio-fullstack/lists"}