Skip to content

Commit

Permalink
update bio
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZionMiller
ZionMiller committed Sep 14, 2024
1 parent 7fe704f commit b2a144a
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 95 deletions.
193 changes: 99 additions & 94 deletions src/components/About.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,105 +7,110 @@ import profileData from '../utils/me';
const About = () => {
return (
<div id="about" className='mx-auto sm:px-8 md:px-10 lg:px-20'>
<div className="max-w-8xl mx-auto flex flex-col lg:flex-row lg:items-center lg:justify-between">
<div className="relative w-full lg:w-1/2 flex justify-center mt-6">
<div className="w-full max-w-xs lg:max-w-sm h-80 lg:h-full overflow-hidden rounded-lg">
<img
className="w-full h-full object-cover object-center rounded-lg"
src="/zion-headshot.jpg"
alt="Zion Miller Headshot"
/>
<div className="max-w-8xl mx-auto flex flex-col lg:flex-row lg:items-center lg:justify-between">
<div className="relative w-full lg:w-1/2 flex flex-col items-center md:mt-5 sm:mt-10">
<div className="w-full max-w-md lg:max-w-lg lg:h-full overflow-hidden rounded-lg mb-6">
<img
className="w-full h-full object-cover object-center rounded-lg"
src="/zion-headshot.jpg"
alt="Zion Miller Headshot"
/>
</div>
<div className="flex justify-center space-x-6 mt-4">
{profileData.socials?.linkedIn && (
<a
href={profileData.socials.linkedIn}
className="text-gray-600 hover:text-blue-500"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin size={28} />
</a>
)}
{profileData.socials?.github && (
<a
href={profileData.socials.github}
className="text-gray-600 hover:text-gray-800"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub size={28} />
</a>
)}
{profileData.socials?.twitter && (
<a
href={profileData.socials.twitter}
className="text-gray-600 hover:text-blue-400"
target="_blank"
rel="noopener noreferrer"
>
<FaTwitter size={28} />
</a>
)}
{profileData.socials?.medium && (
<a
href={profileData.socials.medium}
className="text-gray-600 hover:text-black"
target="_blank"
rel="noopener noreferrer"
>
<FaMedium size={28} />
</a>
)}
{profileData.socials?.leetcode && (
<a
href={profileData.socials.leetcode}
className="text-gray-600 hover:text-orange-500"
target="_blank"
rel="noopener noreferrer"
>
LeetCode
</a>
)}
</div>
</div>
</div>
<div className="relative lg:w-1/2 mb-4 mt-2">
<main className="mt-2 px-4 sm:mt-4 sm:px-6 md:mt-32 lg:mt-10 lg:px-0">
<div className="sm:text-center lg:text-left">
<h2 className="my-4 text-2xl tracking-tight font-extrabold text-gray-900 sm:text-3xl md:text-4xl">
About Me
</h2>
<p className="text-lg text-gray-700">
My name is {profileData.name}. I'm a {profileData.bio}
</p>
<div className="flex justify-center lg:justify-start mt-4 space-x-6">
{profileData.socials?.linkedIn && (
<a
href={profileData.socials.linkedIn}
className="text-gray-600 hover:text-blue-500"
target="_blank"
rel="noopener noreferrer"
>
<FaLinkedin size={24} />
</a>
)}
{profileData.socials?.github && (
<a
href={profileData.socials.github}
className="text-gray-600 hover:text-gray-800"
target="_blank"
rel="noopener noreferrer"
>
<FaGithub size={24} />
</a>
)}
{profileData.socials?.twitter && (
<a
href={profileData.socials.twitter}
className="text-gray-600 hover:text-blue-400"
target="_blank"
rel="noopener noreferrer"
>
<FaTwitter size={24} />
</a>
)}
{profileData.socials?.medium && (
<a
href={profileData.socials.medium}
className="text-gray-600 hover:text-black"
target="_blank"
rel="noopener noreferrer"
>
<FaMedium size={24} />
</a>
)}
{profileData.socials?.leetcode && (
<a
href={profileData.socials.leetcode}
className="text-gray-600 hover:text-orange-500"
target="_blank"
rel="noopener noreferrer"
>
LeetCode
</a>
)}
</div>
<div className="mt-12">
<h3 className="text-xl font-semibold mb-4">Top Skills:</h3>
<div className="flex flex-wrap gap-4 mb-8">
{profileData.topSkills.map((skill, index) => (
<div
key={index}
className="flex items-center justify-center text-white bg-blue-500 rounded-full p-4 font-bold w-20 h-20"
>
{skill}
</div>
))}
</div>
<div className="flex flex-wrap gap-2">
{[...profileData.languagesAndFrameworks,
...profileData.cloudDatabasesAndManagement,
...profileData.devOpsAIAndMisc].map((tech, index) => (
<div key={index} className="flex items-center px-3 py-1 bg-gray-200 text-gray-800 rounded">
{tech}
</div>
<div className="relative lg:w-1/2 mb-4 mt-2">
<main className="mt-2 px-4 sm:mt-4 sm:px-6 md:mt-32 lg:mt-10 lg:px-0">
<div className="sm:text-center lg:text-left">
<h2 className="my-4 text-2xl tracking-tight font-extrabold text-gray-900 sm:text-3xl md:text-4xl">
About {profileData.name}
</h2>
<p className="text-lg text-gray-700">
{profileData.bio.split('\n').map((paragraph, index) => (
<span key={index}>
{paragraph}
<br />
</span>
))}
</p>
<div className="mt-12">
<h3 className="text-xl font-semibold mb-4">Top Skills:</h3>
<div className="flex flex-wrap gap-4 mb-8">
{profileData.topSkills.map((skill, index) => (
<div
key={index}
className="flex items-center justify-center text-white bg-blue-500 rounded-full p-4 font-bold w-20 h-20"
>
{skill}
</div>
))}
</div>
<div className="flex flex-wrap gap-2">
{[...profileData.languagesAndFrameworks,
...profileData.cloudDatabasesAndManagement,
...profileData.devOpsAIAndMisc].map((tech, index) => (
<div key={index} className="flex items-center px-3 py-1 bg-gray-200 text-gray-800 rounded">
{tech}
</div>
))}
</div>
</div>
</div>
</div>
</main>
</main>
</div>
</div>
</div>
</div>
);
);
};

export default About;
export default About;
2 changes: 1 addition & 1 deletion src/utils/me.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const profileData = {
name: "Zion Miller",
bio: "results-driven software engineer with 2+ years of experience collaborating in full-stack development, cloud computing, and AI integration. I have a proven track record in designing, developing, deploying and maintaining scalable applications using modern technologies.",
bio: "My career began in an unconventional way as a professional downhill skateboard racer. Traveling the world and competing at speeds over 60 mph, learning the importance of instinct, pattern recognition, and quick decision making skills. While pursuing this passion, I balanced my time with academics, earning an international finance degree and gaining experiences such as; living in Japan, working for Hewlett-Packard, and founding an equity analysis business.\n\nIt was during this entrepreneurial chapter that I became captivated by the technical challenges in business, where I took on problems such as automating data pipelines for equity reports and DCF models. This experience ignited my passion for technology and its ability to enhance problem-solving and creativity. To deepen my skills, I formalized my education through a coding bootcamp, contributed to open-source projects, and secured a role at a Series A startup in Los Angeles.\n\nToday, I focus on tackling challenges across the stack, DB, cloud infrastructure, AI integration, and CI/CD pipelines. Outside of work, you’ll likely find me surfing or skating down hills, always driven by the same love for speed and creativity that started my journey.",
email: "[email protected]",
topSkills: [
"Python", "JavaScript", "Postgresql", "AWS"
Expand Down

0 comments on commit b2a144a

Please sign in to comment.