23 | ),
24 | };
25 | }
26 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "../styles/global.scss";
2 | import { Analytics } from "@vercel/analytics/next";
3 | import { Metadata } from "next";
4 | import { Raleway } from "next/font/google";
5 | import SmoothScroll from "../components/smooth-scroll";
6 |
7 | export const metadata: Metadata = {
8 | title: "Alexander Grattan",
9 | description:
10 | "Alexander's blog and portfolio, following his journeys as a software developer in Pittsburgh, PA",
11 | };
12 |
13 | const raleway = Raleway({
14 | subsets: ["latin"],
15 | display: "swap",
16 | variable: "--font-raleway",
17 | });
18 |
19 | export default function RootLayout({
20 | children,
21 | }: {
22 | children: React.ReactNode;
23 | }) {
24 | return (
25 |
26 |
27 | {children}
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Alexander Grattan Portfolio Site
2 |
3 | Showcases my work and the experience I have in web development.
4 |
5 | **Link to live verison [here](https://agrattan.com/)**
6 |
7 | ## Getting Started
8 |
9 | First, run the development server:
10 |
11 | ```bash
12 | npm run dev
13 | # or
14 | yarn dev
15 | ```
16 |
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 |
19 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
20 |
21 | ## Tools Used
22 |
23 | - Next.js
24 | - GSAP
25 | - Framer Motion
26 | - Scss
27 |
28 | ## Contributing
29 |
30 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
31 |
32 | ## License
33 |
34 | [MIT](https://opensource.org/licenses/MIT)
35 |
36 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
37 |
--------------------------------------------------------------------------------
/styles/common.module.scss:
--------------------------------------------------------------------------------
1 | .hiddenText {
2 | // visible-hidden class from A11y-101
3 | clip: rect(1px, 1px, 1px, 1px);
4 | height: 1px;
5 | overflow: hidden;
6 | position: absolute;
7 | white-space: nowrap;
8 | width: 1px;
9 | &:focus {
10 | clip: auto;
11 | height: auto;
12 | overflow: auto;
13 | position: absolute;
14 | width: auto;
15 | }
16 | }
17 |
18 | .playful {
19 | transition: all 0.4s cubic-bezier(0.15, 0.75, 0.45, 0.95) 0s;
20 | animation: 10s ease 0s infinite alternate none running rainbow;
21 | }
22 |
23 | .playfulHover {
24 | transition: all 0.4s cubic-bezier(0.15, 0.75, 0.45, 0.95) 0s;
25 | &:hover {
26 | animation: 10s ease 0s infinite alternate none running rainbow;
27 | }
28 | &:focus {
29 | animation: 10s ease 0s infinite alternate none running rainbow;
30 | }
31 | }
32 |
33 | // Rainbow text
34 | @keyframes rainbow {
35 | 0% {
36 | color: rgb(240, 77, 255);
37 | }
38 | 25% {
39 | color: rgb(255, 77, 77);
40 | }
41 | 50% {
42 | color: rgb(255, 197, 77);
43 | }
44 | 75% {
45 | color: rgb(106, 237, 118);
46 | }
47 | 100% {
48 | color: rgb(0, 153, 255);
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "portfolio-site",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build --webpack",
8 | "start": "next start",
9 | "lint": "eslint .",
10 | "format": "prettier --write .",
11 | "prettier": "prettier --check ."
12 | },
13 | "dependencies": {
14 | "@gsap/react": "^2.1.2",
15 | "@mdx-js/loader": "^3.1.1",
16 | "@mdx-js/react": "^3.1.1",
17 | "@next/mdx": "^16.0.7",
18 | "@vercel/analytics": "^1.6.1",
19 | "eslint": "^9.39.1",
20 | "eslint-config-next": "^16.0.7",
21 | "framer-motion": "^12.23.25",
22 | "gsap": "^3.13.0",
23 | "lenis": "^1.3.15",
24 | "next": "^16.0.7",
25 | "react": "^19.2.1",
26 | "react-dom": "^19.2.1",
27 | "react-icons": "^5.5.0",
28 | "sass": "^1.94.2",
29 | "sharp": "^0.34.5"
30 | },
31 | "devDependencies": {
32 | "@shikijs/rehype": "^3.19.0",
33 | "@types/mdx": "^2.0.13",
34 | "@types/node": "^24.10.1",
35 | "@types/react": "^19.2.7",
36 | "prettier": "^3.7.4",
37 | "shiki": "^3.19.0",
38 | "typescript": "^5.9.3"
39 | },
40 | "packageManager": "pnpm@10.24.0"
41 | }
42 |
--------------------------------------------------------------------------------
/components/header.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { FaGithub, FaLinkedin } from "react-icons/fa";
3 |
4 | import styles from "../styles/header.module.scss";
5 | import commonStyles from "../styles/common.module.scss";
6 |
7 | type HeaderProps = {
8 | logoLink: string;
9 | };
10 |
11 | export default function Header({ logoLink }: HeaderProps) {
12 | return (
13 |
14 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/styles/header.module.scss:
--------------------------------------------------------------------------------
1 | @import "./variables.module.scss";
2 |
3 | .nav {
4 | display: flex;
5 | align-items: center;
6 | height: 10vh;
7 | width: 90%;
8 | max-width: 1536px;
9 | margin: 0 auto;
10 | font-family: $font;
11 | color: $white;
12 | font-weight: 700;
13 | z-index: 2;
14 | @media (min-width: 768px) {
15 | width: 75%;
16 | }
17 | .spaceBetween {
18 | width: 100%;
19 | display: flex;
20 | justify-content: space-between;
21 | align-items: center;
22 | }
23 | .logo {
24 | color: $white;
25 | cursor: pointer;
26 | font-size: 1.4rem;
27 | text-decoration: none;
28 | user-select: none;
29 | }
30 | .navList {
31 | margin: 0;
32 | padding: 0;
33 | list-style-type: none;
34 | display: flex;
35 | justify-content: center;
36 | align-items: center;
37 | gap: 1rem;
38 | li {
39 | display: flex;
40 | justify-content: center;
41 | align-items: center;
42 | padding: 0 8px;
43 | @media (min-width: 768px) {
44 | padding: 0 16px;
45 | }
46 | &:last-child {
47 | padding: 0 0 0 8px;
48 | @media (min-width: 768px) {
49 | padding: 0 16px;
50 | }
51 | }
52 |
53 | a {
54 | display: flex;
55 | justify-content: center;
56 | align-items: center;
57 | gap: 0.5rem;
58 | font-family: $font;
59 | color: $white;
60 | text-decoration: none;
61 | font-weight: 700;
62 | font-size: 0.875rem;
63 | text-underline-offset: 0.25rem;
64 | @media (min-width: 768px) {
65 | font-size: 1rem;
66 | }
67 | &:hover {
68 | text-decoration: underline;
69 | }
70 | &:focus {
71 | text-decoration: underline;
72 | }
73 |
74 | svg {
75 | font-size: 1.75rem;
76 | }
77 | }
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/CLAUDE.md:
--------------------------------------------------------------------------------
1 | # CLAUDE.md
2 |
3 | This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4 |
5 | ## Commands
6 |
7 | ```bash
8 | pnpm dev # Start development server at localhost:3000
9 | pnpm build # Production build
10 | pnpm lint # Run ESLint
11 | ```
12 |
13 | ## Architecture
14 |
15 | This is a Next.js 16 portfolio site using the App Router with React 19. It uses pnpm as the package manager.
16 |
17 | ### Key Technologies
18 |
19 | - **Styling**: SCSS modules (`.module.scss` files in `styles/`)
20 | - **Animations**: GSAP with ScrollTrigger for intro and scroll-based animations
21 | - **Smooth Scrolling**: Lenis library wrapping the app
22 | - **Blog**: MDX files in `app/blog/post/[slug]/page.mdx` with Shiki syntax highlighting
23 |
24 | ### Project Structure
25 |
26 | - `app/` - App Router pages and layouts
27 | - `page.tsx` - Homepage with hero, about, blog preview, and projects sections
28 | - `blog/post/` - MDX blog posts with shared layout
29 | - `components/` - React components
30 | - `intro-overlay.tsx` - Initial ball animation overlay (client component)
31 | - `smooth-scroll.tsx` - Lenis smooth scroll wrapper (client component)
32 | - `utils/`
33 | - `project-data.ts` - Portfolio project definitions with images
34 | - `hooks/use-ball-animation.tsx` - GSAP intro animation hook with responsive breakpoints and reduced motion support
35 | - `styles/` - SCSS modules and global styles
36 |
37 | ### Animation System
38 |
39 | The homepage uses a GSAP-powered intro animation (`use-ball-animation.tsx`) that:
40 |
41 | - Bounces a ball element, then scales it to reveal content
42 | - Uses `gsap.matchMedia()` for responsive behavior (768px breakpoint)
43 | - Respects `prefers-reduced-motion`
44 | - ScrollTrigger animations for projects and footer
45 | - Skip animation with `?back=true` query param (used when navigating back from blog posts)
46 |
47 | ### MDX Configuration
48 |
49 | MDX is configured in `next.config.mjs` with:
50 |
51 | - Shiki rehype plugin for syntax highlighting (one-dark-pro theme)
52 | - Custom components in `mdx-components.tsx` for links, images, and code blocks
53 |
--------------------------------------------------------------------------------
/app/blog/post/just-read-user-friendly/page.mdx:
--------------------------------------------------------------------------------
1 | import UserFriendlyBookCover from "../../../../images/user-friendly.webp";
2 |
3 | export const metadata = {
4 | title: "I Just Read User Friendly by Cliff Kuang and Robert Fabricant",
5 | author: "Alexander Grattan",
6 | };
7 |
8 | # I Just Read User Friendly by Cliff Kuang and Robert Fabricant
9 |
10 | And I loved it. This [book](https://www.goodreads.com/en/book/show/41940285) is no essay, but a compilation of well crafted stories that together explain the pervasiveness of user friendliness as an ideal in our technology-rich world.
11 |
12 |
13 |
17 |
18 | The cover of User Friendly: How the Hidden Rules of Design Are Changing the
19 | Way We Live, Work, and Play by Cliff Kuang and Robert Fabricant
20 |
21 |
22 |
23 | Kuang and Fabricant begin at an electrifying and tense point in history by first focusing on the crisis at [Three Mile Island](https://en.wikipedia.org/wiki/Three_Mile_Island_accident) where an accident nearly led to a nuclear meltdown at a US nuclear power plant. Due to poor system feedback and a confusing layout for controls, workers were unable to accurately determine the system's state and failed to unearth the real issue behind the plant's problems. The authors later reveal this event to be the impetus for some UX figures to dedicate their career to solving usability issues. One such figure is Don Norman, who wrote another one of my favorite books: _The Design of Everday Things_.
24 |
25 | Rather than focusing purely on the present and recent past, I appreciated Kuang and Fabricant's insistance on presenting the history of "user friendliness" in totality, explaining aspects of Three Mile Island I had no knowledge of, and telling stories like of Henry Dreyfuss. He was a pioneering industrial designer during the Great Depression who dedicated his life to improving experiences using household items like washing machines, peanut butter jars, and thermostats, long before user experience became a field.
26 |
27 | In my opinion, this is an easy, automatic recommendation to anyone who works in tech, especially those that contribute directly to crafting the experience of end users.
28 |
--------------------------------------------------------------------------------
/app/blog/post/no-remote-early-in-my-career/page.mdx:
--------------------------------------------------------------------------------
1 | export const metadata = {
2 | title: "Why I Don't Want to Work Remotely Early in My Career",
3 | author: "Alexander Grattan",
4 | };
5 |
6 | # Why I Don't Want to Work Remotely Early in My Career
7 |
8 | As of recently, there's been a big push for return-to-office policies among companies (even [Zoom](https://www.washingtonpost.com/technology/2023/10/05/zoom-return-to-office-hybrid-remote-work/) of all people!), and I'm generally not opposed to it as a young person. I appreciate the flexibility of being remote my job as a software developer affords me, but the experience of being in the office among my coworkers and hashing out ideas beats any similar action I would instead have in a remote fashion. Beyond communicating more efficiently (I peep my head over my monitor to talk to my project manager), I feel more connected with my peers and overall less lonely.
9 |
10 | I am extremely grateful that I am in a position in which I can afford to rent and live alone in an apartment in a major US city. Though, with the passing of my mother to cancer this past year, living alone can feel empty, sometimes oppressively disheartening. I've fallen into bad habits following her death, which only became exacerbated when I was alone. Only in recent months have I learned to move away from these bad habits through reading and writing.
11 |
12 | One digital publication that I read and have been a big fan of is [The Pudding](https://pudding.cool/), a digital publication that focuses on creating interactive data visualizations and visual essays, for some time now. One piece of theirs that struck me this past year was ["24 hours in an invisible epidemic" by Alvin Chang](https://pudding.cool/2023/09/invisible-epidemic/). As outlined in the essay, there is evidence of a "invisible epidemic" of loneliness occuring in the USA. Statiscially, we have been spending less time with friends and less time with family, with an influx in time spent alone.
13 |
14 | Reading this article inspired me to seek more time with my friends and family while showing them as much love and appreciation for our relationship, and it's a goal I continue to take with me into 2024.
15 |
16 | There might come a time when I will need to be remote full-time, such as when kids enter the picture. As a young person, at this current stage of my life, however, I am beyond grateful for the relationships I've made thus far in my life and I want to cherish the time I can spend in-person with others as much as possible.
17 |
--------------------------------------------------------------------------------
/components/project-listing.tsx:
--------------------------------------------------------------------------------
1 | import { getImageProps } from "next/image";
2 |
3 | import styles from "../styles/project-listing.module.scss";
4 | import commonStyles from "../styles/common.module.scss";
5 |
6 | import { ProjectType } from "../utils/project-data";
7 |
8 | type ProjectListingProps = {
9 | project: ProjectType;
10 | };
11 |
12 | export default function ProjectListing({ project }: ProjectListingProps) {
13 | const { slug, image, mobileImage, name, description, link, code, type } =
14 | project;
15 |
16 | const {
17 | props: { srcSet: mobileSrc },
18 | } = getImageProps({ alt: name, src: mobileImage ?? "" });
19 | const {
20 | props: { src: imageSrc, ...rest },
21 | } = getImageProps({ alt: name, src: image });
22 |
23 | return (
24 |
74 | Hi there! My name is Alexander Grattan and I'm a software
75 | developer at Gray Swan AI, an AI safety and security company
76 | located in Pittsburgh, PA.
77 | My current software development skills primarily focus
78 | around web development, but I also enjoy experimenting with app
79 | development, creative coding, data visualization, Human-Computer
80 | Interaction (HCI), and UX.
81 |
40 |