initial commit

.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

.gitignore

@@ -0,0 +1,139 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.*
+!.env.example
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Sveltekit cache directory
+.svelte-kit/
+
+# vitepress build output
+**/.vitepress/dist
+
+# vitepress cache directory
+**/.vitepress/cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Firebase cache directory
+.firebase/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v3
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Vite logs files
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

App.js

@@ -0,0 +1,22 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+import BioSketch from './components/BioSketch';
+import {
+  APP_BACKGROUND
+} from "./utils/constants";
+
+
+
+export default function App() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <BioSketch />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: APP_BACKGROUND, // UC red color as requested
+  },
+});

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Carlos Gutierrez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,189 @@
+# UC Biosketch React Native App
+
+## Project Overview
+This React Native application displays a professional biosketch for University of the Cumberlands students. The app features a modern, responsive design with UC branding colors and follows atomic design principles with TypeScript for enhanced type safety.
+
+## Features
+- Professional profile picture display
+- Welcome message with course information
+- Detailed biosketch section with modular components
+- Responsive design for Web, Android, and iOS
+- UC branding with red color scheme (#e60026)
+- TypeScript implementation for better development experience
+- Atomic design architecture for maintainable code
+
+## Technical Stack
+- **React Native** with Expo SDK 49
+- **TypeScript** for type safety and better development experience
+- **Atomic Design** principles with organized component structure
+- **CSS Modules** for scoped styling
+- **Expo Snack** for live editing and simulation
+
+## Project Structure
+```
+reactNativeProfile/
+├── App.js                 # Main application entry point
+├── app.json              # Expo configuration
+├── package.json          # Dependencies and scripts
+├── tsconfig.json         # TypeScript configuration
+├── babel.config.js       # Babel configuration
+├── .gitignore           # Git ignore rules
+├── components/
+│   ├── BioSketch.tsx     # Main biosketch component
+│   ├── molecules/
+│   │   └── Image.tsx     # Reusable image component
+│   └── organisms/
+│       ├── Content.tsx   # Content section component
+│       ├── Footer.tsx    # Footer component
+│       └── Title.tsx     # Title component
+├── styles/
+│   └── bioSketch.module.ts # CSS modules for styling
+├── utils/
+│   └── constants.ts      # Application constants
+└── assets/
+    └── profile-picture.jpg # Professional profile photo
+```
+
+## Atomic Design Architecture
+
+### Molecules
+- **Image.tsx**: Reusable image component with proper styling and accessibility
+
+### Organisms
+- **Title.tsx**: Welcome message and course information display
+- **Content.tsx**: Main biosketch content section
+- **Footer.tsx**: Footer component with additional information
+
+### Templates
+- **BioSketch.tsx**: Main template that composes all organisms and molecules
+
+## Setup Instructions
+
+### Prerequisites
+- Node.js (v16 or higher)
+- Expo CLI (`npm install -g @expo/cli`)
+- Expo Go app for mobile testing
+
+### Local Development
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development server:
+   ```bash
+   npm start
+   ```
+4. Use Expo Go app to scan the QR code or run on web/emulator
+
+### Expo Snack Setup
+
+#### 1. Launch Snack Player
+- Go to https://snack.expo.dev/
+- Create a new project or open existing one
+
+#### 2. Add Your Profile Picture
+- Drag and drop your professional picture into the Snack editor
+- The image will be automatically placed in the assets folder
+- Update the import path in `components/BioSketch.tsx` if needed
+
+#### 3. Customize Your Biosketch
+- Edit the bio text in `components/BioSketch.tsx`
+- Update course information in `components/organisms/Title.tsx`
+- Modify styling in `styles/bioSketch.module.ts`
+- Update constants in `utils/constants.ts`
+
+#### 4. Save and Share
+- Save the project to your Expo profile as "Hands-On Assignment 2 _Lastname"
+- Add description: "My BioSketch @ UC"
+- Copy the shareable project link
+
+## Key Code Features
+
+### Welcome Message (Title Component)
+```typescript
+<Text style={styles.welcomeText}>
+  WELCOME TO THE UNIVERSITY of the CUMBERLANDS{'\n'}
+  Course ID: MSCS 533
+</Text>
+```
+
+### BioSketch Section (Content Component)
+The app includes a comprehensive biosketch with:
+- Professional introduction
+- Academic focus areas
+- Personal interests and goals
+- Current course information
+
+### Styling (CSS Modules)
+- UC red background (#e60026)
+- White text for contrast
+- Semi-transparent sections for visual hierarchy
+- Responsive design for all screen sizes
+- Modular CSS for better maintainability
+
+### Constants Management
+```typescript
+// utils/constants.ts
+export const UC_COLORS = {
+  primary: '#e60026',
+  white: '#ffffff',
+  // ... other color constants
+};
+```
+
+## Testing Instructions
+
+### Web Simulation
+1. Click the "Web" tab in Snack or run `npm run web`
+2. The app will load in your browser
+3. Test responsive design and interactions
+
+### Android Simulation
+1. Click the "Android" tab in Snack or run `npm run android`
+2. Use the Android emulator or scan QR code with Expo Go
+3. Test touch interactions and performance
+
+### iOS Simulation
+1. Click the "iOS" tab in Snack or run `npm run ios`
+2. Use the iOS simulator or scan QR code with Expo Go
+3. Test iOS-specific features and gestures
+
+## Development Scripts
+- `npm start`: Start Expo development server
+- `npm run android`: Start Android development build
+- `npm run ios`: Start iOS development build
+- `npm run web`: Start web development build
+
+## Deliverables Checklist
+- [ ] Profile picture added to assets
+- [ ] Welcome message updated with course ID
+- [ ] Biosketch content personalized
+- [ ] Code comment added: "The code below will display my BioSketch @ UC, and it's amazing!!!!!"
+- [ ] Background color set to #e60026
+- [ ] Project saved to Expo profile
+- [ ] Shareable link copied
+- [ ] Screenshots taken for Web, Android, and iOS
+- [ ] Project zip file downloaded
+
+## Code Quality Features
+- **TypeScript**: Full type safety throughout the application
+- **Atomic Design**: Organized component hierarchy for maintainability
+- **CSS Modules**: Scoped styling to prevent conflicts
+- **Constants**: Centralized configuration management
+- **Modular Architecture**: Reusable components following best practices
+
+## Notes
+- The app uses TypeScript for better development experience and type safety
+- Follows atomic design principles for maintainable and scalable code
+- Responsive design works across all platforms (Web, Android, iOS)
+- UC branding colors are consistently applied throughout
+- CSS Modules provide scoped styling to prevent style conflicts
+- Constants are centralized for easy maintenance and updates
+
+## Support
+For technical issues or questions about the implementation:
+- Refer to the [Expo documentation](https://docs.expo.dev/)
+- Check [React Native guides](https://reactnative.dev/docs/getting-started)
+- Review [TypeScript documentation](https://www.typescriptlang.org/docs/)
+- Consult atomic design principles for component organization

app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "UC Biosketch App",
+    "slug": "uc-biosketch-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#e60026"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#e60026"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/BioSketch.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { View, ScrollView } from "react-native";
+import Title from "./organisms/Title";
+import Content from "./organisms/Content";
+import Footer from "./organisms/Footer";
+import styles from "../styles/bioSketch.module";
+
+// The code below will display my BioSketch @ UC, and it's amazing!!!!!
+const BioSketch: React.FC = () => {
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+    >
+      <View style={styles.content}>
+        <Title />
+        <Content />
+        <Footer />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default BioSketch;

components/molecules/Image.tsx

@@ -0,0 +1,18 @@
+import { View, Image } from "react-native";
+import styles from "../../styles/bioSketch.module";
+
+const CustomImage = () => {
+  return (
+    <>
+      <View style={styles.header}>
+        <Image
+          source={require("../../assets/profile-picture.jpg")}
+          style={styles.profileImage}
+          resizeMode="cover"
+        />
+      </View>
+    </>
+  );
+};
+
+export default CustomImage;

components/organisms/Content.tsx

@@ -0,0 +1,21 @@
+import { View, Text } from "react-native";
+import {
+  bioTitle,
+  bioText,
+} from "../../utils/constants";
+import Image from "../molecules/Image";
+import styles from "../../styles/bioSketch.module";
+
+const Content = () => {
+  return (
+    <>
+      <View style={styles.bioSection}>
+        <Text style={styles.bioTitle}>{bioTitle}</Text>
+        <Text style={styles.bioText}>{bioText}</Text>
+        <Image />
+      </View>
+    </>
+  );
+};
+
+export default Content;

components/organisms/Footer.tsx

@@ -0,0 +1,15 @@
+import { View, Text } from "react-native";
+import { currentCourse } from "../../utils/constants";
+import styles from "../../styles/bioSketch.module";
+
+const Footer = () => {
+  return (
+    <>
+      <View style={styles.courseInfo}>
+        <Text style={styles.courseText}>{currentCourse}</Text>
+      </View>
+    </>
+  );
+};
+
+export default Footer;

components/organisms/Title.tsx

@@ -0,0 +1,17 @@
+import { Text } from "react-native";
+import {
+  title,
+  courseId,
+} from "../../utils/constants";
+import styles from "../../styles/bioSketch.module";
+
+const Title = () => {
+  return (
+    <>
+      <Text style={styles.welcomeText}>{title}</Text>
+      <Text style={styles.welcomeText}>{courseId}</Text>
+    </>
+  );
+};
+
+export default Title;

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "uc-biosketch-app",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~49.0.15",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.6",
+    "@types/react": "~18.2.14",
+    "@types/react-native": "~0.72.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "typescript": "^5.1.3"
+  },
+  "private": true
+}

styles/bioSketch.module.ts

@@ -0,0 +1,73 @@
+import { StyleSheet } from "react-native";
+import {
+  CONTAINER_BACKGROUND,
+  COLOR_ACCENT,
+  COLOR_PRIMARY,
+  BACKGROUND_COLOR,
+} from "../utils/constants";
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: CONTAINER_BACKGROUND,
+  },
+  contentContainer: {
+    paddingBottom: 20,
+    flexDirection: "column",
+    justifyContent: "flex-start",
+  },
+  header: {
+    alignItems: "center",
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
+  profileImage: {
+    width: 150,
+    height: 150,
+    borderRadius: 75,
+    borderWidth: 4,
+    borderColor: "#ffffff",
+  },
+  content: {
+    paddingHorizontal: 20,
+  },
+  welcomeText: {
+    fontSize: 18,
+    fontWeight: "bold",
+    marginTop: 50,
+    color: COLOR_ACCENT,
+    textAlign: "center",
+    marginBottom: 30,
+    lineHeight: 24,
+  },
+  bioSection: {
+    backgroundColor: BACKGROUND_COLOR,
+    borderRadius: 10,
+    padding: 20,
+    marginBottom: 20,
+  },
+  bioTitle: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: COLOR_ACCENT,
+    marginBottom: 15,
+    textAlign: "center",
+  },
+  bioText: {
+    fontSize: 16,
+    color: COLOR_PRIMARY,
+    lineHeight: 24,
+    textAlign: "justify",
+  },
+  courseInfo: {
+    backgroundColor: BACKGROUND_COLOR,
+    borderRadius: 10,
+    padding: 15,
+  },
+  courseText: {
+    fontSize: 16,
+    color: COLOR_PRIMARY,
+    textAlign: "center",
+    fontWeight: "600",
+  },
+});

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

utils/constants.ts

@@ -0,0 +1,11 @@
+export const title = "WELCOME TO THE UNIVERSITY of the CUMBERLANDS";
+export const courseId = "Course ID: MSCS 533";
+export const bioTitle = "Carlos Gutierrez";
+export const bioText = `Senior Software Engineer based in Atlanta, GA. He specializes in full-stack development, cloud computing, and distributed systems, with strong expertise in React, NestJS, Java, and AWS. With experience leading frontend and backend initiatives, he has driven large-scale projects in SaaS, robotics, and telecommunications, consistently improving scalability, performance, and cost efficiency.`;
+export const currentCourse = "Current Course: MSCS 533 - Advanced Software Development";
+
+export const CONTAINER_BACKGROUND = "#605A95";
+export const COLOR_ACCENT = "#EDE7F6";
+export const COLOR_PRIMARY = "#FFF";
+export const BACKGROUND_COLOR = "rgba(255, 255, 255, 0.1)";
+export const APP_BACKGROUND = "#7540EE";