Skip to content

Commit 8fe9a49

Browse files
committed
Initial commit and GitHub Pages setup
0 parents  commit 8fe9a49

22 files changed

+7570
-0
lines changed

.github/workflows/deploy.yml

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: "20"
28+
cache: npm
29+
30+
- name: Install dependencies
31+
run: npm ci
32+
33+
- name: Build with Next.js
34+
run: npm run build
35+
36+
- name: Touch .nojekyll
37+
run: touch out/.nojekyll
38+
39+
- name: Upload artifact
40+
uses: actions/upload-pages-artifact@v3
41+
with:
42+
path: ./out
43+
44+
deploy:
45+
environment:
46+
name: github-pages
47+
url: ${{ steps.deployment.outputs.page_url }}
48+
runs-on: ubuntu-latest
49+
needs: build
50+
steps:
51+
- name: Deploy to GitHub Pages
52+
id: deployment
53+
uses: actions/deploy-pages@v4

.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

README.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
# Personal Portfolio Website
2+
3+
A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS. This website showcases my professional experience, projects, and technical skills with a clean, minimalist design.
4+
5+
## Features
6+
7+
- ✨ Modern UI with smooth animations and transitions
8+
- 📱 Fully responsive design that works on all devices
9+
- 🌗 Custom animated logo and loading screen
10+
- 🧩 Interactive experience timeline with tab navigation
11+
- 🎯 Smooth scrolling between sections
12+
- 🌈 Custom styled components with Tailwind CSS
13+
- 📊 Project showcases in a card layout
14+
- 📲 Mobile-friendly navigation with slide-in drawer
15+
16+
## Technologies Used
17+
18+
- **Framework**: [Next.js 15](https://nextjs.org/)
19+
- **Language**: [TypeScript](https://www.typescriptlang.org/)
20+
- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
21+
- **Icons**: [Lucide React](https://lucide.dev/)
22+
- **Deployment**: [Vercel](https://vercel.com/)
23+
24+
## Getting Started
25+
26+
### Prerequisites
27+
28+
- Node.js 18.17.0 or later
29+
- npm or yarn
30+
31+
### Installation
32+
33+
1. Clone the repository:
34+
35+
```bash
36+
git clone https://github.com/your-username/portfolio.git
37+
cd portfolio
38+
```
39+
40+
2. Install dependencies:
41+
42+
```bash
43+
npm install
44+
# or
45+
yarn install
46+
```
47+
48+
3. Run the development server:
49+
50+
```bash
51+
npm run dev
52+
# or
53+
yarn dev
54+
```
55+
56+
4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
57+
58+
## Project Structure
59+
60+
- `/app` - Next.js application routes and components
61+
- `/public` - Static assets (images, resume, etc.)
62+
- `/app/components` - Reusable UI components
63+
- `/app/providers` - React context providers
64+
- `/app/globals.css` - Global CSS and animations
65+
66+
## Customization
67+
68+
To personalize this portfolio for your own use:
69+
70+
1. Update the personal information in `app/page.tsx`
71+
2. Replace the profile picture in `public/portfolio-pic.jpg`
72+
3. Update the resume file in `public/Harsh-Resume.pdf`
73+
4. Modify the experience and projects sections in `app/page.tsx`
74+
5. Customize colors and styles in `tailwind.config.ts` and `app/globals.css`
75+
76+
## Deployment
77+
78+
The easiest way to deploy this portfolio is using [Vercel](https://vercel.com/), the platform from the creators of Next.js.
79+
80+
1. Push your code to a GitHub repository
81+
2. Import your project to Vercel
82+
3. Vercel will detect Next.js automatically and apply the optimal settings
83+
84+
## License
85+
86+
This project is open source and available under the [MIT License](LICENSE).
87+
88+
## Acknowledgments
89+
90+
- Design inspired by [Brittany Chiang's Portfolio](https://brittanychiang.com/)
91+
- Icons provided by [Lucide Icons](https://lucide.dev/)

app/components/Logo.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
'use client';
2+
import React, { useEffect, useRef } from 'react';
3+
4+
interface LogoProps {
5+
size?: number;
6+
className?: string;
7+
animated?: boolean;
8+
onAnimationComplete?: () => void;
9+
}
10+
11+
const Logo: React.FC<LogoProps> = ({
12+
size = 60,
13+
className = "",
14+
animated = false,
15+
onAnimationComplete
16+
}) => {
17+
const hexagonRef = useRef<SVGPathElement>(null);
18+
19+
useEffect(() => {
20+
if (animated && hexagonRef.current) {
21+
// Get the total length of the hexagon path
22+
const length = hexagonRef.current.getTotalLength();
23+
24+
// Set initial styles for animation
25+
hexagonRef.current.style.strokeDasharray = `${length}`;
26+
hexagonRef.current.style.strokeDashoffset = `${length}`;
27+
28+
// Trigger animation
29+
setTimeout(() => {
30+
if (hexagonRef.current) {
31+
hexagonRef.current.style.transition = 'stroke-dashoffset 1.5s ease-in-out';
32+
hexagonRef.current.style.strokeDashoffset = '0';
33+
34+
// Call the callback when animation completes
35+
if (onAnimationComplete) {
36+
const animationDuration = 1500; // Duration of the animation in ms
37+
setTimeout(() => {
38+
onAnimationComplete();
39+
}, animationDuration);
40+
}
41+
}
42+
}, 300);
43+
}
44+
}, [animated, onAnimationComplete]);
45+
46+
return (
47+
<div className={`relative ${className}`} style={{ width: size, height: size }}>
48+
<svg
49+
viewBox="0 0 500 500"
50+
fill="none"
51+
xmlns="http://www.w3.org/2000/svg"
52+
className="w-full h-full"
53+
>
54+
{/* Hexagon */}
55+
<path
56+
ref={hexagonRef}
57+
d="M250 0L464.95 125V375L250 500L35.05 375V125L250 0Z"
58+
fill={animated ? "transparent" : "#0c192f"}
59+
stroke="#64ffda"
60+
strokeWidth="16"
61+
/>
62+
63+
{/* HD Text */}
64+
<text
65+
x="140"
66+
y="310"
67+
fontSize="160"
68+
fontWeight="bold"
69+
fontFamily="Arial, sans-serif"
70+
fill="#64ffda"
71+
className={animated ? "opacity-0 animate-fadeIn" : ""}
72+
style={animated ? { animationDelay: '1s', animationDuration: '0.5s', animationFillMode: 'forwards' } : {}}
73+
>
74+
HD
75+
</text>
76+
</svg>
77+
</div>
78+
);
79+
};
80+
81+
export default Logo;

app/favicon.ico

33.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)