diff --git a/code/aimee/javascript/vue_capstone/ffxiv.html b/code/aimee/javascript/vue_capstone/ffxiv.html
new file mode 100644
index 00000000..455371cf
--- /dev/null
+++ b/code/aimee/javascript/vue_capstone/ffxiv.html
@@ -0,0 +1,361 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SourceBook</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Koulen&family=Press+Start+2P&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap"
+        rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <style>
+        * {
+            margin: auto;
+            max-height: 70rem;
+            max-width: 30rem;
+        }
+
+        body {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            background-color: #FFFBFC;
+            max-width: 30rem;
+            max-height: 70rem;
+            justify-content: center;
+            border: 4px solid #FF729F;
+            border-radius: 15px;
+        }
+
+        .header {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+        }
+
+        .info {
+            border: 2px 2px #A0A0A0;
+            border-radius: 20px;
+            padding: 1rem;
+            text-align: center;
+
+        }
+
+        .display-characters {
+            font-family: 'Source Sans Pro';
+            color: #C8F5FF;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid #2660A4;
+            border-radius: 30px;
+            box-shadow: 4px 4px 4px rgb(11, 70, 110);
+            margin: 1rem;
+            background-color: #56CBF9;
+            padding-top: 3rem;
+        }
+
+        .display-fcs {
+            font-family: 'Source Sans Pro';
+            color: #C8F5FF;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid #2660A4;
+            border-radius: 30px;
+            box-shadow: 4px 4px 4px rgb(11, 70, 110);
+            margin: 1rem;
+            background-color: #56CBF9;
+            padding-top: 3rem;
+        }
+
+        .profile {
+            display: flex;
+            flex-direction: column;
+            overflow: scroll;
+            max-height: 50rem;
+        }
+
+        input {
+            color: #2660A4;
+            font-family: 'Source Sans Pro';
+        }
+
+        h1 {
+            color: #FF729F;
+            font-family: 'Koulen';
+            font-size: 3rem;
+            margin-bottom: -2rem;
+            text-shadow: 2px 2px 10px #A0A0A0;
+        }
+
+        h2 {
+            font-family: 'Koulen';
+            color: #235C8E;
+        }
+
+        h3 {
+            font-family: 'Source Sans Pro';
+            color: #2660A4;
+            font-weight: 400;
+            font-style: italic;
+            padding: 1rem;
+            text-align: center;
+        }
+
+        h3.details {
+            font-family: 'Source Sans Pro';
+            color: #2660A4;
+            font-weight: 600;
+            font-style: italic;
+        }
+
+        label {
+            font-family: 'Source Sans Pro';
+            color: #FF729F;
+            padding-right: 1rem;
+
+        }
+
+        p {
+            font-family: 'Source Sans Pro';
+            color: #000;
+        }
+
+        .image {
+            max-width: 28rem;
+        }
+
+        .character-results {
+            font-family: 'Source Sans Pro';
+            color: #C8F5FF;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid #2660A4;
+            border-radius: 30px;
+            box-shadow: 4px 4px 4px rgb(11, 70, 110);
+            margin: 1rem;
+            background-color: #56CBF9;
+            overflow: scroll;
+            max-height: 50rem;
+            max-width: 28rem;
+        }
+
+        .fc-results {
+            font-family: 'Source Sans Pro';
+            color: #C8F5FF;
+            display: flex;
+            flex-direction: row;
+            border: 1px solid #2660A4;
+            border-radius: 30px;
+            box-shadow: 4px 4px 4px rgb(11, 70, 110);
+            margin: 1rem;
+            background-color: #56CBF9;
+            overflow: scroll;
+        }
+
+        .text-info {
+            text-align: center;
+            margin: 1rem;
+        }
+
+        img.avatar {
+            box-shadow: 2px 2px 2px rgb(11, 70, 110);
+        }
+
+        hr {
+            margin: 1rem;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <div class="header">
+            <h1>FFXIV Character Info</h1>
+            <div class="sub-header">
+                <h3>look up character data</h3>
+
+                <input type="text" id="name" v-model="name" placeholder="search by name">
+                <input type="submit" value="search" @click="searchName" v-on:click="isHidden=false"
+                    v-on:click="hideButton=false"></input><br>
+
+                <input type="text" id="fc" v-model="fcname" placeholder="search by FC">
+                <input type="submit" value="search" @click="searchFC" v-on:click="isHiddenFC=false"></input><br>
+            </div>
+        </div>
+
+        <hr>
+
+        <!-- detailed character info -->
+        <div v-bind="character" class="character-results" v-if="!hideDetails">
+            <div class="image">
+                <img class="portrait" v-bind:src="character.Portrait">
+            </div>
+            <div class="text-info">
+                <h2>{{character.Name}}</h2>
+                <!-- <h3 class="details">Active Job/Class</h3> -->
+                <!-- <p>{{ character.ActiveClassJob }}</p> would like to figure out later -->
+                <h3 class="details">Free Company</h3>
+                <p>{{ character.FreeCompanyName }}</p>
+                <h3 class="details">Data Center</h3>
+                <p>{{ character.DC }}</p>
+                <h3 class="details">Nameday</h3>
+                <p>{{ character.Nameday }}</p>
+                <h3 class="details">Race</h3>
+                <p>{{ races[character.Race] }}</p>
+                <h3 class="details">Gender</h3>
+                <p>{{ gender[character.Gender] }}</p>
+            </div>
+        </div>
+
+        <!-- character results -->
+        <div class="display-characters" v-if="!isHidden">
+            <div class="profile">
+                <p v-for="result in results" class="info">{{ result.Name }}, {{ result.Server }}<br>
+                    Lodestone ID: {{ result.ID }} <br><br>
+                    <a target="_blank"
+                        v-bind:href="`https://na.finalfantasyxiv.com/lodestone/character/${result.ID}`"><img
+                            v-bind:src="result.Avatar" class="avatar"></a><br>
+                    <input type="submit" value="more info" @click="displayCharacter(result.ID)"
+                        v-on:click="hideDetails=false; isHidden=true">
+                </p>
+            </div>
+        </div>
+
+        <!-- fc results -->
+        <div class="display-fcs" v-if="!isHiddenFC">
+            <div class="profile">
+                <p v-for="result in results" class="info">{{ result.Name }}, {{ result.Server }}<br>
+                    Lodestone ID: {{ result.ID }} <br><br>
+                    <a target="_blank"
+                        v-bind:href="`https://na.finalfantasyxiv.com/lodestone/character/${result.ID}`"><img
+                            v-bind:src="result.Avatar" class="avatar"></a><br>
+                    <input type="submit" value="more info" @click="displayFC(result.ID)"
+                        v-on:click="hideFC=false; isHiddenFC=true">
+                    <img v-bind:src="result.Crest[2]">
+                </p>
+            </div>
+        </div>
+
+
+        <!-- detailed FC information -->
+        <div v-bind="freecompany" class="fc-results" v-if="!hideFC">
+            <div class="text-info">
+                <h2>{{ freecompany.Name }} - "{{ freecompany.Tag }}"</h2>
+                <h3 class="details">Active Members</h3>
+                <p>{{ freecompany.ActiveMemberCount }}</p>
+                <h3 class="details">Grand Company</h3>
+                <p>{{ freecompany.GrandCompany }}</p>
+                <h3 class="details">Slogan</h3>
+                <p>{{ freecompany.Slogan }}</p><br>
+            </div>
+            <img class="portrait" v-bind:src="result.Crest[2]">
+
+        </div>
+
+    </div>
+
+    <script>
+        const App = {
+            data() {
+                return {
+                    baseUrl: 'https://xivapi.com/',
+                    isHidden: true,
+                    isHiddenFC: true,
+                    hideFC: true,
+                    hideDetails: true,
+                    hideButton: true,
+                    name: '',
+                    fcname: '',
+                    character: '',
+                    avatar: '',
+                    crest: '',
+                    results: [],
+                    FCID: '',
+                    freecompany: '',
+                    freecompanymembers: '',
+                    ID: '',
+                    characterID: '',
+                    character: '',
+                    output: '',
+                    char: '',
+                    FCM: '',
+                    FC: '',
+                    estate: '',
+                    races: [
+                        "",
+                        "Hyur",
+                        "Elezen",
+                        "Lalafell",
+                        "Miqo'te",
+                        "Roegadyn",
+                        "Au Ra",
+                        "Hrothgar",
+                        "Viera"
+                    ],
+                    gender: [
+                        "",
+                        "male",
+                        "female"
+                    ]
+
+                }
+            },
+            methods: {
+                searchName() {
+                    axios({
+                        url: 'https://xivapi.com/character/search',
+                        headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
+                        method: 'get',
+                        params: { name: this.name }
+                    }).then(res => {
+                        console.log(res.data)
+                        this.results = res.data.Results
+                    }).catch(error => console.log(error.message))
+                },
+                searchFC() {
+                    axios({
+                        url: 'https://xivapi.com/freecompany/search',
+                        headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
+                        method: 'get',
+                        params: { name: this.fcname }
+                    }).then(res => {
+                        console.log(res.data)
+                        this.results = res.data.Results
+                    }).catch(error => console.log(error.message))
+                },
+                displayCharacter(characterID) {
+                    console.log(characterID)
+                    axios({
+                        url: `https://xivapi.com/character/${characterID}`,
+                        headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
+                        method: 'get',
+                        params: { data: this.FC }
+                    }).then(res => {
+                        console.log(res.data)
+                        this.character = res.data.Character
+                    }).catch(error => console.log(error.message))
+                },
+                displayFC(fcid) {
+                    console.log(fcid)
+                    axios({
+                        url: `https://xivapi.com/freecompany/${fcid}`,
+                        headers: { Accept: 'application/json', private_key: '0d86bbfc3e384fbd8e154e5c23d06d2231cde9d7af75449b92cf531a92c080e1' },
+                        method: 'get',
+                    }).then(res => {
+                        console.log(res.data)
+                        this.freecompany = res.data.FreeCompany
+                    }).catch(error => console.log(error.message))
+                }
+            }
+        }
+        const app = Vue.createApp(App)
+        app.mount('#app')
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/code/aimee/javascript/vue_capstone/index.html b/code/aimee/javascript/vue_capstone/index.html
new file mode 100644
index 00000000..257d143b
--- /dev/null
+++ b/code/aimee/javascript/vue_capstone/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dictionary</title>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h1>Dictionary</h1>
+
+        <label for="headWord">Enter a word </label>
+        <input type="text" id="head-word" v-model="headWord" autofocus><br>
+        <input type="submit" value="thesaurus" @click="getSynonyms"></input>
+        <input type="submit" value="dictionary" @click="getDefinitions"></input>
+        <ul>
+            <li v-for="synonym in synonyms">{{ synonym['syns'] }}</li>
+            <li v-for="definition in definitions">{{ def }}</li>
+        </ul>
+        <p>{{ definitions }}</p>
+        <p>{{ synonyms }}</p>
+
+
+
+
+
+    </div>
+
+    <script>
+        const App = {
+            data() {
+                return {
+                    synonyms: [],
+                    synonym: '',
+                    definitions: [],
+                    definition: '',
+                    headWord: '',
+                }
+            },
+            // created() {
+            //     this.getSynonyms()
+            // },
+            methods: {
+                getSynonyms() {
+                    axios({
+                        method: 'get',
+                        url: 'https://www.dictionaryapi.com/api/v3/references/thesaurus/json/${headWord}?key=5cdfdfef-e6ac-42fc-8a07-beb5e8e0eeea',
+                        headers: { Accept: 'application/json', },
+                        params: { headword: this.headWord}
+                    }).then(res => {
+                        console.log(res.data)
+                        this.synonyms = res.data.synonyms
+                    })
+                    console.log(this.headWord)
+                },
+                getDefinitions() {
+                    axios({
+                        method: 'get',
+                        url: 'https://www.dictionaryapi.com/api/v3/references/collegiate/json/${headWord}?key=82e55bee-008e-46ae-b061-2bd64ee2f0e7',
+                        headers: { Accept: 'application/json', },
+                        params: { headword: this.headWord }
+                    }).then(res => {
+                        console.log(res.data)
+                        this.definitions = res.data.definitions
+                    })
+                }
+            }
+        }
+
+        const app = Vue.createApp(App)
+        app.mount('#app')
+    </script>
+</body>
+
+</html>
+
+
+<!-- dictionary 82e55bee-008e-46ae-b061-2bd64ee2f0e7 -->
+<!-- thesaurus 5cdfdfef-e6ac-42fc-8a07-beb5e8e0eeea -->
\ No newline at end of file
