https://github.com/david-lazaro-fernandez/andrea-arredondo
Andrea's Personal Portfolio
https://github.com/david-lazaro-fernandez/andrea-arredondo
blog contentlayer-nextjs css design learn nextjs personal-website
Last synced: about 2 months ago
JSON representation
Andrea's Personal Portfolio
- Host: GitHub
- URL: https://github.com/david-lazaro-fernandez/andrea-arredondo
- Owner: David-Lazaro-Fernandez
- Created: 2023-08-05T21:00:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-30T21:20:38.000Z (over 1 year ago)
- Last Synced: 2025-03-29T09:44:06.246Z (about 2 months ago)
- Topics: blog, contentlayer-nextjs, css, design, learn, nextjs, personal-website
- Language: CSS
- Homepage: https://andrea-arredondo.vercel.app
- Size: 14.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Andrea Arredondo's Website
# Hi Andy 🫰
This is a quick guide to the project :octocat:🖤
# Stack
Typescript
Next
Contentlayer
MDX
# Installation
To install all the dependencies of the project just run:
```bash
npm install
```
To run the page in a development environment run:
```bash
npm run dev
```
This will trigger 2 scripts
1. `createNewResizedImages.js` This script traverses the `/posts` and `/extracurricularposts` folders and extracts all the photos that are in the `.mdx` files; if it detects a new photo that doesn't have a blurred image it generates it, with the intention of having a placeholder image for each image that exists in the `Highlight` or `Extracurricular` sections while the images are loading.
2. The `next/dev` script which enables a development environment of NextJS.
# MDX Format
MDX is a markup format that combines Markdown and JSX (JavaScript XML). It allows you to write JSX directly within your Markdown documents, which means you can import and use React components within your Markdown files.
The content inside the folders `/Extracurricular_posts` & `/Posts` must be only `.mdx` files.
The files are configured for the **following format**:
```mdx
---
title: string (required)
postType: string (required)
subtitle: string (required)
date: string (optional)
org: string (optional)
category: string (optional)
title_image: image inside /public folder (required) [Supported formats: .webp, .jpeg, .jpg, .png]
images: array of images inside /public folder (required) [Supported formats: .webp, .jpeg, .jpg, .png]
---
Content in MDX
```
**Example**:
```mdx
---
title: 'Online Education In Times Of Covid'
postType: 'Extracurricular'
subtitle: 'AMITI'
date: '2022'
org: 'AMITI'
category: 'Other'
title_image: amiti1.jpeg
images:
- amiti1.jpeg
- amiti2.jpeg
- amiti3.jpeg
- amiti4.jpeg
---
Muy contenta por haber sido parte del #DíaAMITI compartiendo desde IBM el taller: Ciencia de datos para la toma de decisiones.
Gracias a AMITI A.C. y Joel González Saldivar por la invitación.
#MotordeInnovación
```
# Adding new posts 🗒️
## Highlights
To add a New Highlight Post:
1. Create a new `.mdx` in the `/Posts` following the MDX Format.
2. Make sure to add all the images you're gonna use in the `/public` folder then you can reference them with their name in the file.
3.- This will automatically create a new Highlight Card in the Highlight Section
## Extracurricular
To add a New Extracurricular Post:
1. Create a new `.mdx` in the `/Extracurricular_posts` following the MDX Format.
2. Make sure to add all the images you're gonna use in the `/public` folder then you can reference them with their name in the file.
3.- This will automatically create a new Extracurricular Card in the Extracurricular Section
# Adding Code To Your Posts 💻
The `.mdx` supports the code addition like you were creating a technical content post thanks to [Rehype Pretty Code](https://rehype-pretty-code.netlify.app/).
You can add the same code as the one you read on GitHub like the ones below:
# MIT License
Copyright (c) [2023] [David Lazaro Fernandez]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.