https://github.com/hazeliscoding/portfolio
My personal portfolio with a Ubuntu terminal-like expierence.
https://github.com/hazeliscoding/portfolio
angular terminal-like-website
Last synced: about 2 months ago
JSON representation
My personal portfolio with a Ubuntu terminal-like expierence.
- Host: GitHub
- URL: https://github.com/hazeliscoding/portfolio
- Owner: hazeliscoding
- License: mit
- Created: 2024-09-22T14:58:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-02-27T20:22:50.000Z (about 2 months ago)
- Last Synced: 2026-02-28T00:39:18.512Z (about 2 months ago)
- Topics: angular, terminal-like-website
- Language: TypeScript
- Homepage: https://hazeliscoding.dev
- Size: 7.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌸 Portfolio
A personal portfolio site built with Angular.
Includes dedicated pages for **Home**, **About**, and **Portfolio**, plus a **Project Detail** route for case-study style views.
> 💻 Platform: **Web** (Angular 21)
>
> ✨ Rendering: **SSR + prerender** (static output) for top-level pages
---
## 🛠 Tech Stack
- Angular 21 (standalone components + router)
- Angular SSR (`@angular/ssr`) + prerender/static output
- TypeScript
- RxJS
- SCSS (global styles under `src/styles/`)
- Karma + Jasmine (via `ng test`)
---
## 🚀 Running Locally
From a terminal in the project root:
```bash
# 1. Install deps
npm install
# 2. Start dev server
npm run start
```
Open `http://localhost:4200/`.
If you want to bind to all interfaces (useful for LAN/devcontainers):
```bash
npm run dev
```
---
## 🧩 Content + Projects
Project cards and detail lookups are currently driven by a simple in-repo data source:
- Edit projects in [src/app/data/projects.data.ts](src/app/data/projects.data.ts)
- Access is wrapped by [src/app/services/projects-data.service.ts](src/app/services/projects-data.service.ts)
Images are served from the `public/` folder (copied as build assets). For example:
- Project images: `public/images/projects/`
---
## 📝 Blog
Blog posts are written as Markdown files under `public/blog/`.
- Create a new post: `public/blog/my-new-post.md` (use kebab-case)
- Required frontmatter:
- `title`
- `date` (YYYY-MM-DD)
- Optional frontmatter:
- `description`
- `tags: [tag1, tag2]`
The blog index used by the app is generated into `src/app/data/blog-posts.generated.ts`.
This generation runs automatically on `npm run start` and `npm run build`.
---
## 🧭 Routes
- `/` → Home
- `/blog` → Blog index
- `/blog/:slug` → Blog post
- `/about` → About
- `/portfolio` → Portfolio index
- `/portfolio/:id` → Project detail
Top-level routes are prerendered; `portfolio/:id` is currently client-rendered.
Blog routes are prerendered, including known `/blog/:slug` paths.
---
## 🏗 Building
```bash
npm run build
```
Build output goes to `dist/`.
To serve the SSR build locally after building:
```bash
npm run serve:ssr:portfolio
```
---
## 🧪 Tests
```bash
npm run test
```