Welcome to my personal portfolio made with Astro

Welcome to my little corner of the internet! This is where I store all my achievements and experiences after becoming a developer. From the first line of code I wrote to my most recent projects, this portfolio serves as a record of my journey in this field.

In addition to showcasing my work, I also like to share my thoughts and insights through articles that I write and publish here. Whether it's about the latest trends in technology or a personal reflection on my growth as a developer, I hope you find something here that sparks your interest.

Thank you for taking the time to visit my portfolio. Feel free to explore and get in touch if you have any questions or would like to collaborate on a project.

🍻 My Social Links

🌐 LinkedIn 🌐 Twitter 🌐 Portfolio & Blog 🌐 GitHub 🌐 Instagram

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

drwxr-xr-x     - yap 25 Dec 10:43 .
.rw-r--r--  1.4k yap 23 Dec 09:28 ├── astro.config.ts
.rw-r--r--   374 yap  5 Nov 14:11 ├── Dockerfile
drwxr-xr-x     - yap 25 Dec 10:41 ├── docs
drwxr-xr-x     - yap 25 Dec 10:41 │  └── images
.rw-r--r--    32 yap  5 Nov 14:11 ├── netlify.toml
.rw-r--r--  2.8k yap 23 Dec 16:15 ├── package.json
.rw-r--r--@ 2.6k yap 18 Dec 20:15 ├── playwright.config.ts
.rw-r--r--  518k yap 25 Dec 10:09 ├── pnpm-lock.yaml
drwxr-xr-x     - yap 18 Dec 20:15 ├── public
.rw-r--r--   13k yap  5 Nov 14:11 │  ├── android-chrome-192x192.png
.rw-r--r--   47k yap  5 Nov 14:11 │  ├── android-chrome-512x512.png
.rw-r--r--   12k yap  5 Nov 14:11 │  ├── apple-touch-icon.png
.rw-r--r--   336 yap  5 Nov 14:11 │  ├── browserconfig.xml
.rw-r--r--   559 yap  5 Nov 14:11 │  ├── favicon-16x16.png
.rw-r--r--  1.5k yap  5 Nov 14:11 │  ├── favicon-32x32.png
.rw-r--r--  9.3k yap  5 Nov 14:11 │  ├── favicon.ico
drwxr-xr-x     - yap  5 Nov 14:11 │  ├── files
drwxr-xr-x     - yap  5 Nov 14:11 │  ├── fonts
.rw-r--r--@  253 yap  5 Nov 14:11 │  ├── humans.txt
.rw-r--r--   12k yap  5 Nov 14:11 │  ├── logo.svg
.rw-r--r--   20k yap  5 Nov 14:11 │  ├── oops.webp
drwxr-xr-x     - yap  5 Nov 14:11 │  ├── rss
drwxr-xr-x     - yap  5 Nov 14:11 │  ├── uploads
.rw-r--r--   19k yap  5 Nov 14:11 │  └── you-are-the-best.webp
.rw-r--r--@ 7.8k yap 25 Dec 10:43 ├── README.md
.rw-r--r--@  508 yap 18 Dec 20:15 ├── remark-reading-time.mjs
.rw-r--r--@  541 yap 18 Dec 20:15 ├── renovate.json
.rw-r--r--   619 yap  5 Nov 14:11 ├── SECURITY.md
drwxr-xr-x     - yap 20 Dec 15:36 ├── src
drwxr-xr-x     - yap 20 Dec 15:36 │  ├── assets
drwxr-xr-x     - yap  5 Nov 14:11 │  ├── components
drwxr-xr-x@    - yap 18 Dec 20:15 │  ├── content
.rw-r--r--@  453 yap 22 Dec 17:05 │  ├── env.d.ts
drwxr-xr-x@    - yap 23 Dec 16:17 │  ├── i18n
drwxr-xr-x     - yap  5 Nov 14:11 │  ├── icons
drwxr-xr-x     - yap 18 Dec 20:15 │  ├── models
drwxr-xr-x     - yap 18 Dec 20:15 │  ├── pages
drwxr-xr-x     - yap 18 Dec 20:15 │  ├── plugins
drwxr-xr-x     - yap 18 Dec 20:15 │  ├── store
drwxr-xr-x     - yap 24 Dec 12:08 │  ├── styles
drwxr-xr-x     - yap 18 Dec 20:15 │  └── utils
.rw-r--r--@ 2.4k yap 18 Dec 20:15 ├── tailwind.config.cjs
drwxr-xr-x     - yap  5 Nov 14:11 ├── tests
drwxr-xr-x     - yap 24 Dec 16:35 │  ├── integration
drwxr-xr-x     - yap 18 Dec 20:15 │  └── unit
.rw-r--r--@ 1.2k yap 21 Dec 17:08 ├── tsconfig.json
.rw-r--r--@  252 yap 18 Dec 20:15 └── vitest.config.ts

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components or layouts.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro preview
npm run astro --help	Get help using the Astro CLI
npm run format	Format your code with Prettier
npm run lint:eslint	Lint your code with ESLint
npm run lint:eslint:fix	Lint and fix your code with ESLint
npm run test	Run your tests with Playwright
npm run test:e2e	Run your end-to-end tests with Playwright