ladvace / astro-bento-portfolio

Astro-bento-portfolio is a minimal bento-like (almost) single page portfolio website made in Astro

⚡️astro-bento-portfolio

A personal portfolio website made using Astro.

To view a demo example, click here

or my portfolio click here

Features

• Modern and Minimal bento-like, sleek UI Design
• All in one page (almost)
• Fully Responsive
• Performances and SEO optimizations
• Ready to be deployed on Netlify
• Blog
• RSS support (your-domain/rss.xml)
• Cool 3d globe

Tech Stack

• Astro
• unocss
• motion
• d3

Steps ▶️

# Clone this repository
$ git clone https://github.com/Ladvace/astro-bento-portfolio

# Go into the repository
$ cd astro-bento-portfolio

# Install dependencies
$ pnpm install
or
$ npm install

# Start the project in development
$ pnpm run dev
or
$ npm run dev

REMOVE THE umami analytics script tag (or replace it with your id) in src/layouts/Layout.astro

Configuration

remember to replace the site and other properties with your data in astro.config.mjs

Deploy on Netlify 🚀

Deploying your website on Netlify it's optional but I reccomand it in order to deploy it faster and easly.

You just need to fork this repo and linking it to your Netlify account.

or

Authors ❤️

• Gianmarco - https://github.com/Ladvace

astro-bento-portfolio's Issues

Frontend Bug in the demo example

Hi:), Hey I was modifying your repository and I found a bug.

In your page https://gianmarco.xyz/ is not the bug.

but in https://sparkly-speculoos-0c9197.netlify.app/ (the demo example that is in your repository).

It turns out that if I run the web page on certain devices it looks like this:

This is only happening to me on apple devices, which I find very curious haha

Card of Crafted with ♥️ using no super responsive

Again me xd, I found a bug in the Crafted with ♥️ card, if you put more information than originally proposed it breaks the design in certain devices.

♥️

    <a
      href="https://softdone.com.mx/"
      target="_blank"
      class="text-purple-500 hover:text-purple-700 transition-colors">
    Softdone</a
    > © 2023 · Crafted with ♥️ using
     <a
      href="https://astro.build/"
      target="_blank"
      class="text-purple-500 hover:text-purple-700 transition-colors">Astro </a> Inspired by the portfolio created by 
      
      <a
      href="https://www.linkedin.com/in/gianmarco-cavallo/"
      target="_blank"
      class="text-purple-500 hover:text-purple-700 transition-colors"> Gianmarco Cavallo. </a>
      
     
  </p>
</Card>

This is the code I tried to use, as you can see it's nothing out of the ordinary, on PC and Android it works as it should but on some devices the excess of information breaks the design.

This is what it looks like without the excess of information

EMFile Too many files open

I am getting a certain error stating
Error: EMFILE: too many open files, open 'C:\Users\Granth Bagadia\Code\Projects\Websites\Portfolio\node_modules\astro\dist\assets\utils\vendor\image-size\types\heif.d.ts'
Probably something with my own device but not really sure on how to solve this.

Thank You

Problems when deploy to Cloudflare Pages

Thank you for your great template!

I have a trouble when I tried to deploy it to Cloudflare Pages, here is my process and problems:

1. run npx astro add cloudflare to add cloudflare support, and the astro.config.mjs is automaticaly change to:

export default defineConfig({
  ...
  output: "server",
  adapter: cloudflare(),
});

2. run npm run build and get the following error:

> [email protected] build
> astro build

01:39:12 [WARN] [@astrojs/cloudflare] The current configuration does not support image optimization. To allow your project to build with the original, unoptimized images, the image service has been automatically switched to the 'noop' option. See https://docs.astro.build/en/reference/configuration-reference/#imageservice
01:39:12 Types generated 183ms
01:39:12 [build] output: "server"
01:39:12 [build] directory: /Users/xxx/Developer/Frontend/akring-astro-home/dist/
01:39:12 [build] adapter: @astrojs/cloudflare
01:39:12 [build] Collecting build info...
01:39:12 [build] ✓ Completed in 329ms.
01:39:12 [build] Building server entrypoints...
node:internal/fs/promises:628
  return new FileHandle(await PromisePrototypeThen(
                        ^

Error: ENOENT: no such file or directory, open '/Users/xxx/Developer/Frontend/akring-astro-home/dist/_astro/constants.x3V3ZnQq.js'
    at async open (node:internal/fs/promises:628:25)
    at async Object.readFile (node:internal/fs/promises:1228:14)
    at async extractFile (file:///Users/xxx/Developer/Frontend/akring-astro-home/node_modules/@unocss/vite/dist/index.mjs:334:20)
    at async Promise.all (index 2)
    at async setupContentExtractor (file:///Users/xxx/Developer/Frontend/akring-astro-home/node_modules/@unocss/vite/dist/index.mjs:358:5) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/xxx/Developer/Frontend/akring-astro-home/dist/_astro/constants.x3V3ZnQq.js'
}

Wish you can help me to deploy this great template to Cloudflare.