https://github.com/engjurado/profile-card
This project is a web application built with Astro to create a profile card featuring social media links.
https://github.com/engjurado/profile-card
astro website
Last synced: about 1 year ago
JSON representation
This project is a web application built with Astro to create a profile card featuring social media links.
- Host: GitHub
- URL: https://github.com/engjurado/profile-card
- Owner: EngJurado
- License: mit
- Created: 2024-08-29T23:19:27.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T20:16:23.000Z (over 1 year ago)
- Last Synced: 2025-03-24T12:12:41.992Z (over 1 year ago)
- Topics: astro, website
- Language: Astro
- Homepage: https://engjurado.github.io/profile-card/
- Size: 2.1 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Profile Card
## Overview
This project is a web application built using Astro, designed to create a profile card with social media links. It includes various components and utilities to build a responsive and interactive user interface. The template allows for easy integration of multiple social links, enhancing user connectivity.
## Folder Structure
```
src/
├── components/
│ └── Card.astro
├── images/
│ └── profile.webp
├── layouts/
│ └── Layout.astro
└── pages/
└── index.astro
```
### Components
- **components/Card.astro**: A card component used to display the profile card with social media links.
### Images
- **images/profile.webp**: The profile image used in the profile card.
### Layouts
- **layouts/Layout.astro**: The layout component for the application.
### Pages
- **pages/index.astro**: The main landing page of the application.
## Customization
Edit this data in src/pages/index.astro
- **`title`**: This change will be reflected in the browser tab.
- **`description`**: This is a metadata tag used to provide a brief description of your page in search engines.
- **`name`**: Enter your name here.
- **`position`**: Enter your job position here.
- **`about me`**: Write a brief description of who you are and what you do. It's recommended to keep it under 540 characters.
- **`linkedin`**, **`github`**, **`telegram`** and **`x`**: Enter the URLs to your personal pages here.
- **`cvLink`**: Provide the URL to your resume in PDF format for download or insert it in /public/files/resume-cv.pdf
- **`profileImage`**: Upload your professional profile picture here.
To use more social links, copy and paste this block of code in /src/components/Card.astro file in the position of your desire inside the card.
```sh
Twitter/X
````
Change the icon by modifying **`bi-new-icon`** to an icon from the [Bootstrap Website](https://icons.getbootstrap.com).
Then rename the variable newSocialLink in **``**, and add the new variable in **`const {name, position, aboutMe, linkedin, github, telegram, twitterx, newSocialLink, cvLink } = Astro.props;`**.
Add the new variable in /src/pages/index.astro below the existing social links.
```sh
```
## Setup and Usage
1. **Clone the repository**:
```sh
git clone https://github.com/EngJurado/profile-card
cd project-name
```
2. **Install dependencies**:
```sh
npm install
```
3. **Run the development server**:
```sh
npm run dev
```
4. **Build for production**:
```sh
npm run build
```
5. **Preview the production build**:
```sh
npm run preview
```
## Contributing
Feel free to submit issues and pull requests. Contributions are welcome!
## License
This project is licensed under the MIT License.