This Website!
A modern portfolio website showcasing mobile apps, game design, and web development projects.
⚠️ This portfolio piece is still in progress. I'm working around the clock to get my projects updated and continually polishing when I can. Check back regularly for updates! ⚠️
I developed this website using TypeScript, JSON, and Bootstrap, showcasing my diverse skill set across mobile apps, game design, and web development. The website features a clean, modern design with linear gradient backgrounds and carefully crafted spacing to ensure a pleasant user experience. The navigational flow is intuitive, making it easy for visitors to explore my work.
For each portfolio piece, I utilize JSON to dynamically generate Bootstrap cards, complete with 'Learn More' buttons. These buttons pass the 'title' key as a prop/parameter to the next page, where more detailed information about each project is displayed. This structure allows for scalable and maintainable content management, keeping the site organized and easy to update. I really enjoyed building this website in such a dynamic way, and I'm excited to continue expanding it with new projects and features in the future.
This Highlight Section
This is a caption. It is optional as well as the picture and youtube video. This whole highlight section is optional.
The cards and information displayed on this site are generated from a JSON file where this text you’re reading is. Custom types/interfaces and optional JSX elements are used to create dynamic pages. Each details page is produced by JavaScript using the [title].tsx format, giving the appearance that each page is tailored to its specific content. This modularity ensures consistency in styles while allowing the functional code to be written once. The components use parameters to show the appropriate information. The JSON file also populates the skills used and learned sections, which helps maintain organization and ease of updates. New projects, skills, highlights, etc. can be added to without modifying the code, keeping everything organized and simple to update.
const HighlightView = ({ highlights }: { highlights: Highlight[] }) => {
return (
<View>
{highlights.map((highlight, index) => (
<View key={index} style={styles.highlightView}>
<Text style={styles.highlightTitle}>{highlight.highlightTitle}</Text>
<View style={styles.highlightHeader}>
{highlight.highlightPictures && (
<Image source={{ uri: highlight.highlightPictures }} style={styles.highlightPictures} />
)}
{highlight.highlightCaption && (
<Text style={styles.highlightCaption}>{highlight.highlightCaption}</Text>
)}
</View>
<Text style={styles.highlightDescription}>{highlight.description}</Text>
{highlight.video && (
<YoutubePlayer
height={Dimensions.get('window').width * 0.5 * 0.5625}
width={Dimensions.get('window').width * 0.5}
play={false}
videoId={highlight.video}
/>
)}
{highlight.code && (
<View style={styles.codeContainer}>
<Text style={styles.codeText}>{highlight.code}</Text>
</View>
)}
</View>
))}
</View>
);
};