Skip to content

Commit

Permalink
Merge pull request #7 from sajal2692/feature/CONTENT
Browse files Browse the repository at this point in the history
feat: update Readme
  • Loading branch information
sajal2692 committed Jan 27, 2024
2 parents 432bc43 + 7eb02a1 commit c4fa6f5
Showing 1 changed file with 13 additions and 148 deletions.
161 changes: 13 additions & 148 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,158 +1,23 @@
# AstroPaper πŸ“„
# Sajal Sharma's Website

![AstroPaper](public/astropaper-og.jpg)
![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
![GitHub](https://img.shields.io/github/license/satnaing/astro-paper?color=%232F3741&style=for-the-badge)
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white&style=for-the-badge)](https://conventionalcommits.org)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=for-the-badge)](http://commitizen.github.io/cz-cli/)
Welcome to the GitHub repository for my personal website. This site showcases my professional journey, skills, and projects in the fields of Machine Learning, NLP, and AI.

AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on [my personal blog](https://satnaing.dev/blog).
## Overview

This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.
- **Purpose**: This repository hosts the static files for blog and portfolio, albeit the portfolio is lacking for now.
- **Technology**: The site is built with [Astro.js](https://astro.build/), leveraging the [AstroPaper theme](https://github.com/satnaing/astro-paper).
- **Content**: Information about my professional background, technical skills, academic achievements, and a selection of projects I've worked on.

This theme is self-documented \_ which means articles/posts in this theme can also be considered as documentations. Read [the blog posts](https://astro-paper.pages.dev/posts/) or check [the README Documentation Section](#-documentation) for more info.
## About AstroPaper

## πŸ”₯ Features
AstroPaper is a minimal, responsive, and SEO-friendly blog theme for Astro.js, perfect for creating personal blogs. It's designed to be accessible and supports light and dark modes by default. The theme is self-documented, meaning the posts and articles within can serve as documentation. For more information on using and customizing AstroPaper, visit [AstroPaper on GitHub](https://github.com/satnaing/astro-paper).

- [x] type-safe markdown
- [x] super fast performance
- [x] accessible (Keyboard/VoiceOver)
- [x] responsive (mobile ~ desktops)
- [x] SEO-friendly
- [x] light & dark mode
- [x] fuzzy search
- [x] draft posts & pagination
- [x] sitemap & rss feed
- [x] followed best practices
- [x] highly customizable
- [x] dynamic OG image generation for blog posts [#15](https://github.com/satnaing/astro-paper/pull/15) ([Blog Post](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/))
## Contributions

_Note: I've tested screen-reader accessibility of AstroPaper using **VoiceOver** on Mac and **TalkBack** on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well._
While this is a personal website, I'm open to suggestions and feedback. If you have any ideas or notice any issues, feel free to open an issue or submit a pull request.

## βœ… Lighthouse Score
## Contact

<p align="center">
<a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fastro-paper.pages.dev%2F&form_factor=desktop">
<img width="710" alt="AstroPaper Lighthouse Score" src="AstroPaper-lighthouse-score.svg">
<a>
</p>
For any additional questions or to reach out for professional inquiries, please contact me via [email](mailto:contact@sajalsharma.com) or connect with me on [LinkedIn](https://www.linkedin.com/in/sajals).

## πŸš€ Project Structure

Inside of AstroPaper, you'll see the following folders and files:

```bash
/
β”œβ”€β”€ public/
β”‚ β”œβ”€β”€ assets/
β”‚ β”‚ └── logo.svg
β”‚ β”‚ └── logo.png
β”‚ └── favicon.svg
β”‚ └── astropaper-og.jpg
β”‚ └── robots.txt
β”‚ └── toggle-theme.js
β”œβ”€β”€ src/
β”‚ β”œβ”€β”€ assets/
β”‚ β”‚ └── socialIcons.ts
β”‚ β”œβ”€β”€ components/
β”‚ β”œβ”€β”€ content/
β”‚ β”‚ | blog/
β”‚ β”‚ | └── some-blog-posts.md
β”‚ β”‚ └── config.ts
β”‚ β”œβ”€β”€ layouts/
β”‚ └── pages/
β”‚ └── styles/
β”‚ └── utils/
β”‚ └── config.ts
β”‚ └── types.ts
└── package.json
```

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

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

All blog posts are stored in `src/content/blog` directory.

## πŸ“– Documentation

Documentation can be read in two formats\_ _markdown_ & _blog post_.

- Configuration - [markdown](src/content/blog/how-to-configure-astropaper-theme.md) | [blog post](https://astro-paper.pages.dev/posts/how-to-configure-astropaper-theme/)
- Add Posts - [markdown](src/content/blog/adding-new-post.md) | [blog post](https://astro-paper.pages.dev/posts/adding-new-posts-in-astropaper-theme/)
- Customize Color Schemes - [markdown](src/content/blog/customizing-astropaper-theme-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)
- Predefined Color Schemes - [markdown](src/content/blog/predefined-color-schemes.md) | [blog post](https://astro-paper.pages.dev/posts/predefined-color-schemes/)

> For AstroPaper v1, check out [this branch](https://github.com/satnaing/astro-paper/tree/astro-paper-v1) and this [live URL](https://astro-paper-v1.astro-paper.pages.dev/)
## πŸ’» Tech Stack

**Main Framework** - [Astro](https://astro.build/)
**Type Checking** - [TypeScript](https://www.typescriptlang.org/)
**Component Framework** - [ReactJS](https://reactjs.org/)
**Styling** - [TailwindCSS](https://tailwindcss.com/)
**UI/UX** - [Figma](https://figma.com)
**Fuzzy Search** - [FuseJS](https://fusejs.io/)
**Icons** - [Boxicons](https://boxicons.com/) | [Tablers](https://tabler-icons.io/)
**Code Formatting** - [Prettier](https://prettier.io/)
**Deployment** - [Cloudflare Pages](https://pages.cloudflare.com/)
**Illustration in About Page** - [https://freesvgillustration.com](https://freesvgillustration.com/)
**Linting** - [ESLint](https://eslint.org)

## πŸ‘¨πŸ»β€πŸ’» Running Locally

The easiest way to run this project locally is to run the following command in your desired directory.

```bash
# npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper
```

## Google Site Verification (optional)

You can easily add your [Google Site Verification HTML tag](https://support.google.com/webmasters/answer/9008080#meta_tag_verification&zippy=%2Chtml-tag) in AstroPaper using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html `<head>` section.

```bash
# in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value
```

## 🧞 Commands

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

> **_Note!_** For `Docker` commands we must have it [installed](https://docs.docker.com/engine/install/) in your machine.
| Command | Action |
| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run format:check` | Check code format with Prettier |
| `npm run format` | Format codes with Prettier |
| `npm run sync` | Generates TypeScript types for all Astro modules. [Learn more](https://docs.astro.build/en/reference/cli-reference/#astro-sync). |
| `npm run cz` | Commit code changes with commitizen |
| `npm run lint` | Lint with ESLint |
| `docker compose up -d` | Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command. |
| `docker compose run app npm install` | You can run any command above into the docker container. |

> **_Warning!_** Windows PowerShell users may need to install the [concurrently package](https://www.npmjs.com/package/concurrently) if they want to [run diagnostics](https://docs.astro.build/en/reference/cli-reference/#astro-check) during development (`astro check --watch & astro dev`). For more info, see [this issue](https://github.com/satnaing/astro-paper/issues/113).
## ✨ Feedback & Suggestions

If you have any suggestions/feedback, you can contact me via [my email](mailto:contact@satnaing.dev). Alternatively, feel free to open an issue if you find bugs or want to request new features.

## πŸ“œ License

Licensed under the MIT License, Copyright Β© 2023

---

Made with 🀍 by [Sat Naing](https://satnaing.dev) πŸ‘¨πŸ»β€πŸ’» and [contributors](https://github.com/satnaing/astro-paper/graphs/contributors).
Thank you for visiting my repository!

0 comments on commit c4fa6f5

Please sign in to comment.