https://github.com/awaltrip/personal-site-v2

Latest version of my personal portfolio website, built with Gatsby (React framework)
https://github.com/awaltrip/personal-site-v2

dark-theme gatsby gatsbyjs graphql portfolio portfolio-website react responsive-design responsive-portfolio sass scss single-page-app typescript

Last synced: 12 days ago
JSON representation

Latest version of my personal portfolio website, built with Gatsby (React framework)

• Host: GitHub
• URL: https://github.com/awaltrip/personal-site-v2
• Owner: awaltrip
• Created: 2023-12-28T03:45:47.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-05-06T22:40:54.000Z (6 months ago)
• Last Synced: 2024-10-11T12:43:57.368Z (about 1 month ago)
• Topics: dark-theme, gatsby, gatsbyjs, graphql, portfolio, portfolio-website, react, responsive-design, responsive-portfolio, sass, scss, single-page-app, typescript
• Language: TypeScript
• Homepage: https://annawaltrip.com
• Size: 4.52 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [annawaltrip.com](https://annawaltrip.com) - v2

[![Netlify Status](https://api.netlify.com/api/v1/badges/91f52fa8-e0a6-45b1-8d56-7c83bb62f580/deploy-status)](https://app.netlify.com/sites/awaltrip/deploys)

The second iteration of my personal website, built with [Gatsby](https://www.gatsbyjs.com/), a [React](https://react.dev/learn/start-a-new-react-project)-based 

framework, and hosted with [Netlify](https://www.netlify.com/).

Currently, it's still very much a work in progress 😊

## Technologies and features

### Techs:

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)   ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)   ![Gatsby](https://img.shields.io/badge/Gatsby-%23663399.svg?style=for-the-badge&logo=gatsby&logoColor=white)   ![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)   ![GraphQL](https://img.shields.io/badge/-GraphQL-E10098?style=for-the-badge&logo=graphql&logoColor=white)   ![CSS 3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   ![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)   ![HTML 5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![Framer](https://img.shields.io/badge/Framer-black?style=for-the-badge&logo=framer&logoColor=blue)   ![MDX](https://img.shields.io/badge/MDX-1B1F24?style=for-the-badge&logo=MDX&logoColor=white)   ![JSON](https://img.shields.io/badge/json-5E5C5C?style=for-the-badge&logo=json&logoColor=white)

### Features:

- Gatsby SPA with pages: Home, About, Skills, Projects, Contact, 404

- Fully responsive for desktop and mobile devices

- Responsive image carousels to showcase projects

- Page content stored in MDX and retrieved with GraphQL

- Dark/light theme

- Auto-load theme based on localStorage

- Relevant meta tags to boost SEO

- Accessible / WCAG compliant

### Backlog:

- Contact form

- Additional projects

- Sorting features on skills page

- A few more themes beyond "light" and "dark"

- Site logo and improved styles

## 💻 Dev setup

1. Install the latest LTS version of [Node.js](https://nodejs.org/en/download/)

2. Install the Gatsby CLI

    - `npm install -g gatsby-cli`

3. Install dependencies

    - `npm install`

4. Start the development server

    - `npm start`

## 🛠 Building for Production

1. Generate a full production build

    - `npm run build`

2. Preview the site as it will appear when deployed

    - `npm run serve`

## 🚀 Deployment (Netlify)

Deploy this site with one click on [Netlify](https://app.netlify.com/signup):

[](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-minimal-ts)