https://github.com/nathan-abela/nathan-abela.github.io

Personal portfolio website, built using Next.js, TypeScript and Styled Components
https://github.com/nathan-abela/nathan-abela.github.io

atomic-design github-pages-website nextjs personal-portfolio portfolio react styled-components typescript

Last synced: 18 days ago
JSON representation

Personal portfolio website, built using Next.js, TypeScript and Styled Components

• Host: GitHub
• URL: https://github.com/nathan-abela/nathan-abela.github.io
• Owner: nathan-abela
• Created: 2021-09-07T16:31:48.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2025-03-19T22:28:19.000Z (4 months ago)
• Last Synced: 2025-03-19T23:28:26.846Z (4 months ago)
• Topics: atomic-design, github-pages-website, nextjs, personal-portfolio, portfolio, react, styled-components, typescript
• Language: TypeScript
• Homepage: https://nathan-abela.github.io
• Size: 4.47 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nathan Abela Portfolio

![Next.js](https://img.shields.io/badge/Next.js-black?style=flat&logo=next.js)

![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=flat&logo=typescript&logoColor=white)

![Styled Components](https://img.shields.io/badge/Styled--Components-DB7093.svg?style=flat&logo=styledcomponents&logoColor=white)

![MDX](https://img.shields.io/badge/MDX-black?style=flat&logo=mdx&labelColor=black)

![Last Commit](https://img.shields.io/github/last-commit/nathan-abela/nathan-abela.github.io)

[![Build and Deploy](https://github.com/nathan-abela/nathan-abela.github.io/actions/workflows/deploy_workflow.yaml/badge.svg)](https://github.com/nathan-abela/nathan-abela.github.io/actions/workflows/deploy_workflow.yaml)

![GitHub Stars](https://img.shields.io/github/stars/nathan-abela/nathan-abela.github.io)

This is my personal website portfolio! Built using **Next.js**, **TypeScript**, and **Styled Components**, it showcases my projects, skills, and experiences.

## Features

- Next.js for server-side rendering and static site generation.

- TypeScript for type-safe JavaScript.

- Styled Components for writing CSS in JS.

- Responsive design, ensuring the website looks great on all devices.

- SEO optimised with meta tags and Open Graph tags.

- Dynamic content loading with MDX.

### Live Demo

For a quick preview, check out the [Live Demo](https://nathan-abela.github.io).

## Running the Application

To run the application locally, follow these steps:

1. Clone the repository:

   ```bash

   git clone https://github.com/nathan-abela/nathan-abela.github.io.git

   ```

2. Install the dependencies:

   ```bash

   cd nathan-abela.github.io

   npm install

   ```

3. Run the development server:

   ```bash

   npm run dev

   ```

4. Open your browser and navigate to `http://localhost:3000`.

## Running Tests

To run tests, use the following command:

```bash

npm run test

```

To update snapshots, use the following command:

```bash

npm test -- -u

```

## Technologies Used

- [Next.js](https://nextjs.org)

- [TypeScript](https://www.typescriptlang.org)

- [Styled Components](https://styled-components.com)

- [MDX](https://mdxjs.com)