Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nparashar150/portfolio
Portfolio website made with Qwik
https://github.com/nparashar150/portfolio
portfolio qwik tailwindcss
Last synced: about 2 months ago
JSON representation
Portfolio website made with Qwik
- Host: GitHub
- URL: https://github.com/nparashar150/portfolio
- Owner: nparashar150
- License: gpl-3.0
- Created: 2023-05-04T18:45:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-01T14:55:12.000Z (8 months ago)
- Last Synced: 2024-05-02T10:08:46.889Z (8 months ago)
- Topics: portfolio, qwik, tailwindcss
- Language: TypeScript
- Homepage: https://nparashar150.com
- Size: 2.64 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Qwik City App ⚡️
- [Qwik Docs](https://qwik.builder.io/)
- [Discord](https://qwik.builder.io/chat)
- [Qwik GitHub](https://github.com/BuilderIO/qwik)
- [@QwikDev](https://twitter.com/QwikDev)
- [Vite](https://vitejs.dev/)
---
## Project Structure
This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more.
Inside your project, you'll see the following directory structure:
```
├── public/
│ └── ...
└── src/
├── components/
│ └── ...
└── routes/
└── ...
```
- `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
- `src/components`: Recommended directory for components.
- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info.
## Add Integrations and deployment
Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/guides/static-site-generation/).
```shell
pnpm qwik add # or `yarn qwik add`
```
## Development
Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
```shell
npm start # or `yarn start`
```
> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
## Preview
The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
```shell
pnpm preview # or `yarn preview`
```
## Production
The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
```shell
pnpm build # or `yarn build`
```
## Vercel Edge
This starter site is configured to deploy to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions), which means it will be rendered at an edge location near to your users.
## Installation
The adaptor will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as:
```
└── adapters/
└── vercel-edge/
└── vite.config.ts
└── src/
└── entry.vercel-edge.tsx
```
Additionally, within the `package.json`, the `build.server` script will be updated with the Vercel Edge build.
## Production build
To build the application for production, use the `build` command, this command will automatically run `pnpm build.server` and `pnpm build.client`:
```shell
pnpm build
```
[Read the full guide here](https://github.com/BuilderIO/qwik/blob/main/starters/adapters/vercel-edge/README.md)
## Dev deploy
To deploy the application for development:
```shell
pnpm deploy
```
Notice that you might need a [Vercel account](https://docs.Vercel.com/get-started/) in order to complete this step!
## Production deploy
The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it.
You can [deploy your site to Vercel](https://vercel.com/docs/concepts/deployments/overview) either via a Git provider integration or through the Vercel CLI.