Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sofidevo/sofidev-portfolio-astro
Portfolio/Blog made With Astro.js
https://github.com/sofidevo/sofidev-portfolio-astro
astrojs css javascript portfolio portfolio-website sofidev
Last synced: 9 days ago
JSON representation
Portfolio/Blog made With Astro.js
- Host: GitHub
- URL: https://github.com/sofidevo/sofidev-portfolio-astro
- Owner: SofiDevO
- Created: 2023-11-12T19:13:13.000Z (about 1 year ago)
- Default Branch: sofidev
- Last Pushed: 2024-11-08T01:02:02.000Z (about 2 months ago)
- Last Synced: 2024-11-08T02:17:24.379Z (about 2 months ago)
- Topics: astrojs, css, javascript, portfolio, portfolio-website, sofidev
- Language: CSS
- Homepage: https://sofidev-portfolio-astro-delta.vercel.app/
- Size: 73.1 MB
- Stars: 23
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My Portfolio - Created with Astro
This is my first portfolio, built using the Astro framework and incorporating components from React. Feel free to clone this repository and customize it to your liking.
You can check out the live version of this portfolio [here](https://itssofi.dev/).
Don't forget to give this repository a star ⭐ if you find it helpful.
## Components and Styling
In this portfolio, I've integrated a custom component called "CardTerminal.astro," designed to showcase information in a visually appealing manner. To apply styles to this component, use the provided CSS classes. Here's an example of how to use the "CardTerminal" component:
```astro
---
import CardTerminal from "../layouts/CardTerminal.astro";
---
≥ Happily graduated from the" 'One Oracle Next Education' program.
≥ Strong foundation in
semantic HTML, CSS, SCSS, Javascript, React, Styled Components, SASS, React Router, Axios, and Astro. I also have basic knowledge of MySQL.
≥ In addition to my technical skills, I have experience in graphic design and UI design.
```
These styles are applied using the following CSS classes and variables:
```css
.terminal__content {
text-align: left;
font-size: 18px;
font-weight: 400;
font-family: var(--fira-code);
line-height: normal;
}
.terminal__content--p {
color: rgb(182, 182, 3);
}
.terminal__content--color {
color: var(--blue-terminal);
}
.terminal__content--h3 {
color: var(--pink-terminal);
font-family: var(--fira-code);
}
.terminal__content--span {
color: var(--green-terminal);
font-weight: 500;
font-family: var(--fira-code);
}
.terminal__link {
color: var(--pink-terminal);
}
```
These styles, in turn, use the following color variables:
```css
--green-terminal: rgb(0, 255, 102);
--yellow-terminal: rgb(182, 182, 3);
--pink-terminal: rgb(255, 0, 144);
--blue-terminal: aqua;
```
Feel free to explore and modify the styles to match your preferences. The color variables provide a convenient way to maintain a consistent color scheme throughout your portfolio.
## License
This project is licensed under the MIT License. Feel free to use, modify, and share it in accordance with the terms of the license. If you have any questions or need assistance, don't hesitate to reach out.
Happy coding! 🚀
[Visit my website](https://itssofi.dev/)
