Skip to content

Commit

Permalink
new card...
Browse files Browse the repository at this point in the history
  • Loading branch information
@ReedGraff
ReedGraff committed Jan 9, 2025
1 parent 1a3a598 commit 7124ccc
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 65 deletions.
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
},
"dependencies": {
"cannon-es": "^0.20.0",
"lucide-react": "^0.469.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.1.1",
Expand Down
128 changes: 63 additions & 65 deletions src/Card.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react';
import './index.css';
import { UserCircle, Mail, Phone, MapPin, Building2, Globe, Twitter, Linkedin, Download, Calendar } from 'lucide-react';

function App() {
const downloadVCard = () => {
const vCardData = `
BEGIN:VCARD
const vCardData = `BEGIN:VCARD
VERSION:2.1
N:Graff;Reed
FN:Reed Graff
Expand All @@ -17,8 +16,7 @@ ORG:Timrep
URL:Timrep.com
BDAY:2004-04-21
NOTE:Twitter: https://x.com/Reed_Graff\nLinkedIn: https://www.linkedin.com/in/reedgraff/
END:VCARD
`;
END:VCARD`;
const blob = new Blob([vCardData], { type: 'text/vcard' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
Expand All @@ -29,70 +27,70 @@ END:VCARD
};

return (
<div className="relative h-screen w-screen overflow-hidden bg-[#140b29]">
<main className="relative z-10 flex flex-col justify-between h-full p-8 text-white bg-transparent">
<div>
<h1 className="text-5xl font-bold max-md:text-4xl">Reed Graff</h1>
<table className="mt-5 text-base">
<tbody>
<tr>
<td className="font-bold">Full Name:</td>
<td>Reed Graff</td>
</tr>
<tr>
<td className="font-bold">Birthday:</td>
<td>April 21, 2004</td>
</tr>
<tr>
<td className="font-bold">Email (Home):</td>
<td>[email protected]</td>
</tr>
<tr>
<td className="font-bold">Email (Work):</td>
<td>[email protected]</td>
</tr>
<tr>
<td className="font-bold">Phone:</td>
<td>972-730-2310</td>
</tr>
<tr>
<td className="font-bold">Address:</td>
<td>3311 Oak Lawn Avenue #250, Dallas, TX, 75219, United States</td>
</tr>
<tr>
<td className="font-bold">Title:</td>
<td>CEO</td>
</tr>
<tr>
<td className="font-bold">Role:</td>
<td>Founder</td>
</tr>
<tr>
<td className="font-bold">Organization:</td>
<td>Timrep</td>
</tr>
<tr>
<td className="font-bold">Website:</td>
<td><a href="https://Timrep.com" className="text-blue-500">Timrep.com</a></td>
</tr>
<tr>
<td className="font-bold">Twitter:</td>
<td><a href="https://x.com/Reed_Graff" className="text-blue-500">Reed_Graff</a></td>
</tr>
<tr>
<td className="font-bold">LinkedIn:</td>
<td><a href="https://www.linkedin.com/in/reedgraff/" className="text-blue-500">reedgraff</a></td>
</tr>
</tbody>
</table>
<div className="relative min-h-screen w-full bg-[#140b29] flex items-center justify-center p-4">
<div className="max-w-2xl w-full bg-gray-900/50 rounded-xl shadow-xl backdrop-blur-sm p-8 transform transition-all hover:scale-102">
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-white mb-2">
<a href="https://reedgraff.com" className="hover:text-blue-400 transition-colors">Reed Graff</a>
</h1>
<p className="text-gray-400">CEO & Founder at Timrep</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-white">
<div className="space-y-4">
<div className="flex items-center space-x-3 group">
<Calendar className="w-5 h-5 text-blue-400" />
<span className="text-gray-300 group-hover:text-white transition-colors">April 21, 2004</span>
</div>

<div className="flex items-center space-x-3 group">
<Mail className="w-5 h-5 text-blue-400" />
<div className="flex flex-col">
<a href="mailto:[email protected]" className="text-gray-300 hover:text-white transition-colors">[email protected]</a>
<a href="mailto:[email protected]" className="text-gray-300 hover:text-white transition-colors">[email protected]</a>
</div>
</div>

<div className="flex items-center space-x-3 group">
<Phone className="w-5 h-5 text-blue-400" />
<a href="tel:9727302310" className="text-gray-300 hover:text-white transition-colors">972-730-2310</a>
</div>
</div>

<div className="space-y-4">
<div className="flex items-center space-x-3 group">
<MapPin className="w-5 h-5 text-blue-400" />
<span className="text-gray-300 group-hover:text-white transition-colors">3311 Oak Lawn Avenue #250, Dallas, TX, 75219</span>
</div>

<div className="flex items-center space-x-3 group">
<Globe className="w-5 h-5 text-blue-400" />
<a href="https://Timrep.com" className="text-gray-300 hover:text-white transition-colors">Timrep.com</a>
</div>

<div className="flex items-center space-x-6">
<a href="https://x.com/Reed_Graff" className="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
<Twitter className="w-5 h-5 text-blue-400" />
<span>Twitter</span>
</a>
<a href="https://www.linkedin.com/in/reedgraff/" className="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
<Linkedin className="w-5 h-5 text-blue-400" />
<span>LinkedIn</span>
</a>
</div>
</div>
</div>

<div className="mt-8 flex justify-center">
<button
onClick={downloadVCard}
className="mt-5 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
onClick={downloadVCard}
className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 transform hover:scale-105"
>
Download Contact
<Download className="w-5 h-5" />
<span>Download Contact</span>
</button>
</div>
</main>
</div>
</div>
);
}
Expand Down

0 comments on commit 7124ccc

Please sign in to comment.