npm create astro@latest -- --template SofiDevO/portfolio-sofidev-garrux
Welcome 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.
- Usage
- Portfolio Data Format
- Adding Icons with Iconify
- Technologies Used
- Figma Design
- Author and License
- Bugs and Issues
- Homepage
To add new elements to your portfolio, you need to add them in /src/data/portfolioData.js.
The data for your portfolio should follow this format:
/**
* @typedef PortfolioData
* @property {string} imgSrc - URL of the image
* @property {string} title - Title of the card
* @property {string[]} skills - Array of your skills, e.g., ['React', 'CSS', 'JavaScript']
* @property {string} description - Description of the card
* @property {string} demoURL - URL of a demo page
* @property {string} repoURL - URL of the repository, e.g., https://github.com/user/repo
* @property {string} anim - Animation that will play when the card loads, e.g., fade-up, fade-right, fade-left, fade-down
* @property {number} averageBrightness - Brightness level of the card's background color, e.g., 0.1
*/
/**
* @type {PortfolioData[]}
*/
export const portfolioData = [
{
imgSrc: 'https://dt2sdf0db8zob.cloudfront.net/wp-content/uploads/2021/06/copy-of-the-6-best-restaurant-website-templates-1.png',
title: 'Restaurant',
skills: ['React', 'StyledComponents'],
description: 'Laboris ex laboris mollit esse fugiat aute cillum nostrud enim dolor sit. Reprehenderit et non nulla irure aute nostrud commodo aute.',
demoURL: '',
repoURL: '',
anim: 'fade-right',
},
{
imgSrc: 'https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/299377097/original/7eb7dcebe244fcf5ad75d92b0969fc116946bd57/create-professional-amd-responsive-wordpress-website.jpg',
title: 'E-commerce',
skills: ['JavaScript', 'Bootstrap'],
description: 'Laboris ex laboris mollit esse fugiat aute cillum nostrud enim dolor sit. Reprehenderit et non nulla irure aute nostrud commodo aute.',
demoURL: '',
repoURL: '',
anim: 'fade-up',
averageBrightness: 0.1,
},
// Add more portfolio items here
];
const skillIcons = {
JavaScript: 'skill-icons:javascript',
React: 'skill-icons:react-dark',
Astro: 'skill-icons:astro',
CSS: 'skill-icons:css',
Sass: 'skill-icons:sass',
StyledComponents: 'skill-icons:styledcomponents',
Bootstrap: 'skill-icons:bootstrap',
Tailwind: 'skill-icons:tailwindcss-dark',
};
/**
* @description Maps portfolioData to include skill icons
*/
export const getPortfolioData = portfolioData.map((item) => ({
...item,
skills: item.skills.map((skill) => skillIcons[skill]),
}));This data is then passed to the portfolio component as props.
We use Iconify for icons. To add new icons, use the icon attribute.
To use a React icon:
<iconify-icon icon="logos:react" width="27" height="27"></iconify-icon>In data.js, specify the icon identifier like this:
{
title: "React",
link: "https://reactjs.org/",
icon: "logos:react"
}Add the Iconify script to the <head> section of your project:
<head>
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
</head>Once this script is included, you can use any Iconify icon by specifying its identifier.
This template leverages several modern technologies to create a highly responsive and visually appealing portfolio:
- 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.
- React: A JavaScript library for building user interfaces, which allows for the creation of reusable components.
- Tailwind CSS: A utility-first CSS framework that enables you to design directly in your markup, providing flexibility and control over your styling.
- 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.
- Iconify: A comprehensive library for icons that provides access to thousands of icons from different collections, all accessible via a single syntax.
You can view and edit the design of this template on Figma. Here is the Figma design link.
- Author: SofiDev / Garrux
- License: MIT
If you encounter any bugs or have issues, please report them here.
For more information and detailed documentation, visit the homepage.
Enjoy building your portfolio! If you have any questions or run into any issues, feel free to reach out.