Portfolio25
A retro-themed, terminal-style portfolio built with Next.js, Tailwind CSS, and ASCII art for a uniquely interactive web experience
Portfolio Website
A retro-inspired, terminal-based portfolio website with ASCII art and a Linux terminal interface. This interactive portfolio simulates a command-line experience while showcasing professional information in a unique and engaging way.
✨ Features
| Feature | Description |
|---|---|
| 🖥️ Terminal Interface | Fully interactive command-line experience with command history |
| 🎨 ASCII Art | Custom ASCII art for section headers and portrait |
| 📱 Responsive Design | Fully responsive layout that works on mobile, tablet, and desktop |
| 🌙 Dark Mode | Terminal-inspired dark theme for optimal viewing |
| 📺 CRT Effect | Toggle CRT screen effect for retro aesthetics |
| ⌨️ Command Navigation | Navigate through sections using terminal commands |
| 🔄 Boot Sequence | Simulated boot sequence animation on initial load |
| 📊 Skills Visualization | Visual representation of skills with progress bars |
| 📝 Project Diagrams | ASCII diagrams showing project architecture |
🛠️ Technologies Used
| Category | Technologies |
|---|---|
| Frontend Framework | Next.js 14, React 18 |
| Styling | Tailwind CSS, CSS Modules |
| UI Components | shadcn/ui, Radix UI |
| Icons | Lucide React |
| Typography | JetBrains Mono, Inter |
| State Management | React Hooks |
| Deployment | Vercel |
| Development Tools | TypeScript, ESLint |
🏗️ Project Architecture
flowchart TD
Page[app/page.tsx - Main Entry Point]
Boot[BootSequence - Initial Loading]
Terminal[Terminal - Main Interface]
CRT[CRTToggle - Effect Toggle]
Sections[Section Components - Content Display]
ASCII[ASCII Art - Visual Elements]
UI[UI Components - Buttons, Cards]
Page --> Boot
Page --> Terminal
Page --> CRT
Terminal --> Sections
Terminal --> ASCII
Terminal --> UI
Sections --> Terminal
UI --> Terminal
🧭 Sequence Diagram
sequenceDiagram
participant User
participant Terminal
participant Router
participant Section
User->>Terminal: Types command (e.g., "about")
Terminal->>Router: Match command
Router-->>Terminal: Return matching component
Terminal->>Section: Render corresponding section
Section-->>Terminal: Display content
Terminal-->>User: Render output in terminal view
📥 Installation
# Clone the repository
git clone https://github.com/yourusername/ascii-portfolio.git
# Navigate to the project directory
cd ascii-portfolio
# Install dependencies
npm install
# Start the development server
npm run dev
Prerequisites
- Node.js 18.x or higher
- npm or yarn
🚀 Usage
Visit http://localhost:3000 in your browser after starting the dev server.
Available Terminal Commands
help - Show available commands
about - View personal information
education - View educational background
skills - View technical skills
experience - View work experience
projects - View projects
certifications- View certifications and achievements
contact - View contact information
clear - Clear the terminal
ls - List available sections
whoami - Display user information
date - Display current date and time
You can also use the navigation buttons below the terminal.
🛠️ Customization
- Edit personal content under
components/sections/ - Replace ASCII art in
components/ascii-art-component.tsx - Change prompt style in
components/terminal.tsx - Update project links in
components/sections/projects-section.tsx
👥 Contributing
Contributions are welcome!
# Fork the repository
# Create a feature branch
git checkout -b feature/amazing-feature
# Make your changes and commit
git commit -m "Add some amazing feature"
# Push to your fork
git push origin feature/amazing-feature
# Open a Pull Request
Guidelines
- Match existing code style
- Use clear commit messages
- Update documentation
- Comment complex logic
- Maintain responsiveness
- Test across devices
📄 License
This project is licensed under the MIT License.
