A modern, data-driven portfolio that showcases software and art projects with a clean, accessible UI. Built with React, Vite, and TypeScript, using Tailwind CSS for styling and TypeScript data files for content.
- Purpose: present software, game, and art projects with process and outcomes.
- Mobile-first, responsive, and accessible (semantic HTML, ARIA, keyboard navigation, reduced motion support).
- Dark/light theming via CSS custom properties and system preferences.
- Content powered by TypeScript data files for type-safe, easy expansion and maintenance.
- Projects: filterable list with featured view, rich detail pages (images, mockups, carousels, video embeds, links).
- About: profile with bio, experience timeline, expertise bar charts, and current learning focus.
- Contact: social cards and sponsor section pulled from data.
- Linked entries: skills, technologies, work history, and education each have their own detail pages and cross-link to related projects.
- SEO: per-page document titles, scroll-to-top on navigation.
https://ianskelskey.github.io/
Edit site content in TypeScript:
- Projects: src/data/projects/
- Skills: src/data/skills.ts
- Technologies: src/data/technologies.ts
- Social links: src/data/socialLinks.ts
- About/profile: src/data/about.ts
- Homepage highlights: src/data/homepage.ts
- Work history: src/data/work/
- Education: src/data/education/
- Timeline: src/data/timeline.ts
Add or edit entries and the UI updates automatically (cards, chips, badges, routes).
- Install dependencies:
npm install
- Start the dev server:
npm run dev
| Command | Description |
|---|---|
npm run dev |
Vite dev server |
npm run build |
Production build |
npm run preview |
Preview production build |
npm run lint |
ESLint |
npm run typecheck |
TypeScript no-emit type check |
npm run validate-data |
Run data validation script |
npm run prettier-write |
Format code with Prettier |
npm run prettier-check |
Check formatting with Prettier |
npm run verify |
Full pre-deploy check (prettier + validate + lint + typecheck + build) |
📦 ianskelskey.github.io
├── 📁 src/
│ ├── 📄 pages/ — Route pages (Home, Projects, About, Contact, detail pages)
│ ├── 🧩 components/ — Reusable UI (cards, layout, timeline)
│ │ └── 🖼️ detail/ — Detail-page blocks (carousels, content renderer, media)
│ ├── 📊 data/ — TypeScript content (projects, skills, technologies, about, social)
│ │ ├── 🚀 projects/ — One file per project
│ │ ├── 💼 work/ — Work history entries
│ │ └── 🎓 education/ — Education entries
│ ├── 🏷️ types/ — Shared TypeScript types
│ ├── 🛠️ utils/ — Helpers (slug, resolvers, topSkills, etc.)
│ └── 🪝 hooks/ — Custom React hooks
└── 📁 public/
└── 🖼️ assets/ — Images, thumbnails, and project media
- Semantic HTML5 with ARIA roles and labels where appropriate.
- Keyboard focus styles and reduced motion support via prefers-reduced-motion.
- Consistent spacing, typography, and elevation with CSS custom properties.
- Dark/light mode driven by prefers-color-scheme.
- Build:
npm run build - Preview:
npm run preview - Deploy to GitHub Pages using your preferred workflow (e.g., Actions or manual gh-pages).