🚀 Artem Skichko — Developer Portfolio

A modern, responsive portfolio showcasing my projects, skills, and contact info

Live Demo · Report Bug · Request Feature

---

📋 Table of Contents

• About The Project
• Built With
• Features
• Getting Started
• Usage
• Contributing
• License
• Contact

---

🎯 About The Project

This is a single-page portfolio built with React, TypeScript, and Tailwind CSS to showcase projects and skills with a clean, responsive UI. It includes an About section, interactive Skills cards with icons, a Projects grid driven by typed data, and a simple Contact block with direct links.

• Component-based structure with TypeScript types for Project
• Responsive layout with accessible semantics and keyboard-friendly navigation
• Fast local development and optimized build via Vite
• Easy content updates through src/data/projects.ts and focused components

---

🛠️ Built With

Core

• React 18
• TypeScript 5
• Tailwind CSS 3
• Vite 5

Tooling

• npm
• Git & GitHub
• Inline SVG icons

---

✨ Features

• ✅ Responsive, accessible UI with clean typography
• ✅ About Me with structured bio and highlights
• ✅ Skills as interactive cards with icons
• ✅ Projects grid with tech tags and action links
• ✅ Contact section with Email, Telegram, and GitHub

Section components:

• AboutMe.tsx — Bio and highlights
• Skills.tsx — Interactive skill cards (HTML5, CSS3, JS, TS, React, Redux Toolkit, Git, PostgreSQL)
• Projects.tsx + ProjectCard.tsx — Responsive project cards
• Contact.tsx — Email, Telegram, GitHub links

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• npm ≥ 9
• Git

Installation

git clone https://github.com/Artemida1609/developer-portfolio.git
cd developer-portfolio
npm ci
npm run dev

Open: http://localhost:5173

Production

npm run build
npm run preview

---

💻 Usage

Customize content

• Header name/title: src/components/Header.tsx
• About content: src/components/AboutMe.tsx
• Skills: src/components/Skills.tsx
• Contact links: src/components/Contact.tsx

Projects

Edit src/data/projects.ts:

export const projects: Project[] = [
  {
    id: 1,
    title: 'Your Project Name',
    description: 'Project description...',
    technologies: ['React', 'TypeScript'],
    githubUrl: 'https://github.com/<yourusername>/<repo>',
    liveUrl: 'https://<your-demo>.vercel.app',
  },
]

Project structure

developer-portfolio/
├── src/
│   ├── components/
│   │   ├── Header.tsx
│   │   ├── AboutMe.tsx
│   │   ├── Skills.tsx
│   │   ├── Projects.tsx
│   │   └── ProjectCard.tsx
│   ├── data/
│   │   └── projects.ts
│   ├── types/
│   │   └── index.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts

---

🤝 Contributing

Contributions are welcome. Please:

• Follow existing code style
• Write meaningful commits
• Update docs if needed
• Ensure accessibility and responsiveness

---

📄 License

Distributed under the MIT License. See LICENSE.

---

📬 Contact

Artem Skichko — Front-End Developer (Slovakia)

• Email: [email protected]
• Telegram: @artem_skichko
• Profile: https://github.com/Artemida1609

Project directory: developer-portfolio/

---

⭐ Star this repo if you like it!

Made with ❤️ and ☕ by Artem Skichko

↑ Back to Top