Skip to content

πŸ”‹modern, interactive developer portfolio with a hacker aesthetic. built using react, typescript, and tailwind css.

Notifications You must be signed in to change notification settings

detalhe/portfolio

Repository files navigation

my portfolio {hacker edition}

a modern, interactive portfolio showcasing my skills and projects as a full-stack software developer.

technologies utilized

React TypeScript Tailwind CSS Vite Framer Motion
react typescript tailwind css vite framer motion

view live

key features

  • animated ascii art header: eye-catching introduction using framer motion
  • interactive tech stack display: hover-triggered project information
  • key projects showcase: highlighting my best work with github links
  • responsive design: seamless experience across all devices
  • dark mode: sleek, terminal-inspired interface

project structure

src/
β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ ascii/
β”‚   β”‚   β”œβ”€β”€ AnimatedASCII.tsx    # ascii art animation
β”‚   β”‚   └── SocialLinks.tsx      # github and linkedin links
β”‚   β”œβ”€β”€ layout/
β”‚   β”‚   β”œβ”€β”€ Footer.tsx           # page footer with tech icons
β”‚   β”‚   β”œβ”€β”€ Header.tsx           # personal info and contact
β”‚   β”‚   └── Layout.tsx           # main container component
β”‚   β”œβ”€β”€ projects/
β”‚   β”‚   └── KeyProjects.tsx      # featured projects section
β”‚   └── tech/
β”‚       β”œβ”€β”€ TechStack.tsx        # interactive tech stack display
β”‚       └── TechStackItem.tsx    # individual tech item component
β”œβ”€β”€ main.tsx                     # app entry point
└── index.css                    # global styles and tailwind imports

quick start

  1. clone: git clone https://github.com/detalhe/portfolio.git
  2. install: npm install
  3. run: npm run dev
  4. view: open http://localhost:5173 in your browser

customization guide

  1. personal info: update Header.tsx
  2. projects: modify KeyProjects.tsx
  3. tech stack: adjust TechStack.tsx and TechStackItem.tsx
  4. styling: customize Tailwind classes in component files

deployment

optimized for easy deployment on vercel or netlify. follow their docs for specific instructions.

let's connect

GitHub LinkedIn Email
github linkedin email

About

πŸ”‹modern, interactive developer portfolio with a hacker aesthetic. built using react, typescript, and tailwind css.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published